This a simple, minimalistic theme, which is inspired by Apple's Newsroom page. You won't find a single reference of monolithic libraries such as jquery
, bootstrap
, bulma
.
All the templates herein use grid css, flexbox & vanilla js. You may,however, proceed and tweak everything as you wish.
- Blog
- Modern
- Responsive
- Deeplinks
- Dark Mode
- Syntax highlighting
For all content published using markdown, deeplinks will be added to the pages so that you can share with precision 😃 Just hover on a heading and the link button will pop. Click it to copy.
Add this theme as a Git submodule inside your Hugo site folder:
git submodule add https://github.com/onweru/newsroom.git themes/newsroom
Theme hugo sass and hugo-extended version.
You can configure the site using as follows:
-
General Information
Use the file
config.toml
. -
menu, footer
See the data files inside the
data/
directory.
Follow the exampleSite/
; specifically, the content directory
Today most operating systems & browsers support dark mode. Like twitter, which automatically turns into dark mode when the user chooses darkmode, this theme does the same thing.
If the user wants to opt in or out of darkmode, there's a UI control for that too in the menu 😊.
Normal Mode | Dark Mode |
---|---|
Normal Mode | Dark Mode |
---|---|
Depending on your fancy, you can opt to use Chroma.
Some folks may want to use disqus on their site. In fact, there was an issue for that express purpose.
To enable disqus on your site, simply, add the line below to you config.toml
file. If you're working off the exampleSite, the line is already there; just uncomment it.
disqusShortname = "yourdiscussshortname"
remember to edit the
yourdiscussshortname
appropriately.
From your disqus dashboard, set your scripts color scheme
to auto. See screenshot below
This theme ships with two custom shortcodes (they both use positional parameters):
-
Video This shortcode can be used to embed a youtube video with custom styling. It takes a solo positional parameter.
... {{< video "youtubeVideoID" >}} ...
-
Picture You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
Store these images in the
static/images
directory.... {{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}} ...
This theme is available under the MIT license.