Repository files navigation

This is a simple, minimalistic theme, which is inspired byApple's Newsroom page. It usesgrid css,flexbox & js (no jQuery, or related libraries).

• Blog
• Modern
• Responsive
• Deeplinks
• Dark Mode
• Supports native lazy loading of images & iframes
• 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.

Note: Newsroom uses is styled in sass. Thefore,hugo-extended version must be installed on your system.

Add this theme as a Git submodule inside your Hugo site folder:

git submodule add https://github.com/onweru/newsroom.git themes/newsroom

In your config.toml file, settheme field value as follows

theme = ["github.com/onweru/newsroom"]

Then run

hugo mod init yourWebsiteName && hugo mod get -u .

From the root of your Hugo website run:

git clone https://github.com/onweru/newsroom themes/newsroom

In your config.toml file, settheme field value as follows

theme ="newsroom"

You can configure the site as follows:

1. General Information

   Useconfig.toml file.

2. menu,footer

   See the yaml files inside thedata/ directory.

Follow theexampleSite/; specifically, thecontent directory

Today, operating systems have a system-widelight ~ dark mode switch. Your website will adapt to the user's preferred lighting mode. Still, if the user wants to opt in or out of darkmode, there's a UI control for that too in the menu 😊.

Using your site's config.toml file, set the value ofdefaultMode to either"dark" or"light".

If your site is built from a copy of the exampleSite, the field is already included; you only need to uncomment and set its value.

The UI control for toggling darkmode will remain in place. This way, the user can decide which mode they would like to use while browsing your website

If you wish, you can opt touse Chroma.

If you like, you coulduse disqus on your site. To enable disqus on your site, simply, add the line below to youconfig.toml file. If you're working off theexampleSite, the line isalready there; just uncomment it.

disqusShortname ="yourdiscussshortname"

Remember to edit theyourdiscussshortname appropriately.

From your disqus dashboard, set your scriptscolor scheme toauto. See screenshot below

This theme ships with2 custom shortcodes (they both use positional parameters):

1. VideoThis shortcode can be used to embed a youtube video with custom styling. It takes a solo positional parameter.

   ...{{< video "youtubeVideoID" >}}...

2. PictureYou 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 thestatic/images directory.

   ...{{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}}...

1. Clarity Theme
2. Compose Theme
3. Swift Theme
4. Browse

This theme is available under theMIT license.