onweru/newsroom

A simple, minimalistic Hugo theme. View Demo here

Newsroom Theme

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

Features

• Blog
• Modern
• Responsive
• Deeplinks
• Dark Mode
• Supports native lazy loading of images & iframes
• Syntax highlighting

Deeplinks

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.

Install Newsroom Theme

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

Option 1: Add Newsroom as a git submodule

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

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

Option 2: Add Newsroom as a hugo module (Recommended)

In your config.toml file, set theme field value as follows

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

Then run

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

Option 3: Install Newsroom into your theme directory (Least diserable)

From the root of your Hugo website run:

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

In your config.toml file, set theme field value as follows

theme = "newsroom"

Configuration

You can configure the site as follows:

1. General Information

   Use config.toml file.

2. menu, footer

   See the yaml files inside the data/ directory.

Start publishing

Follow the exampleSite/; specifically, the content directory

Dark Mode

Today, operating systems have a system-wide light ~ 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 😊.

Set a default lighting mode

Using your site's config.toml file, set the value of defaultMode 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

Custom 404 Page

Syntax highlighting

If you wish, you can opt to use Chroma.

I want to use disqus

If you like, you could use disqus on your site. 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

Custom Shortcodes

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

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

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

2. 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" >}}
   ...
   

From the same creator

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

License

This theme is available under the MIT license.

newsroom's Issues

Resize Title Pictures?

In the image = section of each markdown/post how can I resize that image?

[Question] How to enable dark mode?

How to do we enable dark mode in the theme?

youtube video instead image

Hi, there are some way to substitute the cover image with youtube video code on the main site and into the post?

thanks in advance,

RFC: Make resources URL non-absolute

Hello!

I've been using your theme on https://adonisjs-news.com/ and I really like it, real good job 👍

Since I'm doing a lot of deployments to some random URLs to test stuff I've been running into issues, that I can't set baseURL in configuration correctly (coz URL changes with every commit I do - one example URL: https://f20eb25b.adonisjs-news.pages.dev/)

Now the issue is, that when I new domain is generated it still tries to load some stuff from adonisjs-news.com not from that new domain. Since I have set https://adonisjs-news.com/ as my baseURL that's why some of the resources are not loading in correctly. You can open dev tools in https://f20eb25b.adonisjs-news.pages.dev/ and see what I mean

Fix is to not add whole baseURL in front of resources, but just add / in front of there. I already did that in some template files and it works all good (just replaced .Permalink with .RelPermalink)

For example styles.html:

{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "expanded" "enableSourceMap" "true") -}}
{{ $mainSassFile := "sass/main.sass" }}
{{- $styles := resources.Get $mainSassFile | resources.ExecuteAsTemplate $mainSassFile . | resources.ToCSS $options |
resources.Fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

That fix works for me, but I think it would break for people who use theme under some sub-path, like mysite.com/blog/? 🤔

Is there some way to make it work both ways? Or maybe should introduce some new config variable? Or maybe there's already some config in there for Hugo? 🤔

Edit: I can open PR with those RelPermalink changes, just not sure about sub-paths if it will break or not

SASS issues on Android?

I noticed that my test page https://dogames.org does not load on my android device.
I think it has to do something with the sass layout files?
Is there some sort of prerequisite needed to get the site to render properly?

Deeplinks glitch maybe?

Hello, One!
I am still at the early stages of designing my site around your theme, but I have run into an issue with deep links.
The first run of the link works fine, for example, if http://localhost:1313/page#heading1 works fine.
But if someone follows that link then hovers over something else like Heading2, the link shows up as:

http://localhost:1313/page#heading1#heading2

Am I missing something? I am trying to import only necessary parts from the repo, like assets and layouts directory. If I have missed something please let me know :)

Lastly, thank you for this theme. I absolutely love it!!

Code block has multiple scroll bars

nice theme!

but the code blocks have multiple scroll bars:

• screenshot from https://rooms.netlify.com/post/creating-a-new-theme/*

Google Chrome: Version 76.0.3809.132 (Official Build) (64-bit)

firefox-developer-edition-69.0b16-1

but it looks good in Google Chrome Android (Chrome 76.0.3809.132):

Typo in OpenGraph.html Should be "post"

Love this theme, while tweaking my site for things like Keywords, Description, and Twitter Card handling, I noticed that the Twitter Card never works. Then I spotted this in opengraph.html:

{{- if eq .Section "blog" -}}

it should read:

{{- if eq .Section "post" -}}

for the example site.

Also, @onweru I have updated the description handling to default to using the frontmatter and the keywords to using the post tags. My implementation may be specific to my case but if you want me to send a PR for them I can. Just let me know.

Paginate not working

Simply added this theme and copied the config.toml from /exampleSite/config.toml

Getting this error:

ERROR 2020/05/06 20:44:01 Error while rendering "home" in "": template: index.html:4:15: executing "main" at <.Paginate>: error calling Paginate: a Paginator was previously built for this Node without filters; look for earlier .Paginator usage

Anybody else faced this or know how to fix it?

feature request:The Carousel

I adore the neat and tidy theme, and I adore the shortcodes feature in the https://github.com/nunocoracao/blowfish project, but despite my best efforts and despite my limited skills, I am still unable to use it.I need your assistance to implement its equivalent features. column like "carousel"

feature request: search feature for post content

this is an amazing theme, thanks for creating it!

feature request:
lunr.js search feature similar to other hugo themes, to search the content of the posts.

i am considering trying to implement this myself, into this theme. if it works, i will open a merge request

Mobile Dark theme not working

I currently have my blog using the newsroom theme but the toggle button isn't working only for the mobile version of the site. The site on a normal browser works perfectly. Would highly appreciate any assistance provided.

Home page: Number of articles

Nice theme work @onweru !

Can you please advise:

I'd like to change the number of articles that appear on the home page. Can you please point me in the right direction? Feel free to link relevant Hugo docs if that's easier, I just need a starting point.

Much appreciated!

Question: Is the Resources\_gen Directory required?

Thank you for this theme!

Under the example site there is a directory: exampleSite\resources\_gen\assets\sass\sass

Is it necessary or is it generated in the build?

Thanks!

In archieve page, next/previous page button's URL has an issue. [SOLVED]

Hi @onweru !
I recently discovered your that theme and trying to migrate my site.
I think it has great details. Really thank you!

When I try to click next or previous page in archive page (or page of posts), pager doesn't include the base URL that is domain name. I couldn't solve but working on it:

/layouts/partials/pager.html is our working file, if I'm not wrong.

In that file's this kind of line;
<a href = '{{ $root }}{{ $paginator.Prev.URL }}' class = ' pager_item pager_prev'></a>
$root has a issue. It should refer to .Site.BaseURL but it does not. You can also see from the screenshot. URL contains only post/page/2/

How could we solve this?

(I work on Windows 10 with R Studio, blogdown package. So, it may be caused or related with blogdown. If I can find a solution, I'll let you know. Because there was a same issue in your swift theme on the same working environment.)

Non-italic font

Thanks for creating this theme!

Is there a way to stop the site title from being rendered as an italic font?

The remaining page content appears to use a modern font that would be ideal for the tile too.

Vertical line present in code block when specifying language

When specifying a language in code blocks, a vertical line appears in those code blocks but not in others. I have attached a screenshot demonstrating this issue.
Code block 1 displays the vertical line, while code block 2 does not.

This issue is also present on the demo site: https://rooms.netlify.app/posts/emoji-support/

Categories pagination hyperlink error

When there are more categories then a /categories/page/2/ is being generated.

Error: The hyperlink error to the next page missing the base.

This is the current format that links to the next page:

https://categories/page/2/

and to the main categories page:

https://categories/

It seems broken?

in terminal window.. with a working directory of the root of the Hugo site

% git submodule add https://github.com/onweru/newsroom.git themes/newsroom
fatal: not a git repository (or any of the parent directories): .git

Didn't `Toggle Dark Mode` work?

Didn't Toggle Dark Mode work?

Disable Night Mode via Settings

Hi,

Thank you for the theme. It looks very good. I love the light theme but do not really like the dark version of it. Also, the toggle button does not work because the following code is throwing an error: "images is not an function". I don't need lazy loading so this is fine.

  (function lazyLoadImages() {
    const images = elems('img');
    images.forEach(function(image){
      // supported natively by most modern browsers. 
      image.loading = "lazy";
    });
 })();

I wonder, is there a way to get completely rid of the dark mode? I would like to enforce the light theme. I tried to comment out several parts of the js code but for some reason, it still shows the dark theme. Is there maybe an option to enable/disable the "automatic" detection?

Best
René

dark mode as default

Hi, great work!
There are some way to have dark mode as default,

Thanks in advance,

Removing the 'year' span from the footer breaks then menu pop-down etc

Preferring to have the copyright years in the source, I replaced <span class = 'year'></span> in my clone of the footer.html partial. This broke the JavaScript-driven menu (amongst other things) because the updateDate() function in index.js assumed the presences of a span class of year and threw an exception.

For me, the fix was to modify the updateDate() function as follows.

(function updateDate() {
  var dateElem = elem('.year')
  if (dateElem) {
    var date = new Date();
    var year = date.getFullYear();
    dateElem.innerHTML = year;
  }
})();

Background and foreground colors do not have a sufficient contrast ratio.

Any idea how to fix this ?

Не могу связаться с разработчиком

С предложением о темах Хьюго

Error at build

I am getting the following error

Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): resource "scss/scss/main.scss_65b0252c4a2fb050308e79c52b2c1909" not found in file cache

there will be some problems when I set 'image' to another site url in the front matter.

This is a nice theme, I really like it.
But there will be some problems when I set 'image' to another site url in the front matter.
E.g. written below:

author: Michael Henderson
date: 2019-02-28
title: Creating a New Theme
image: https://img-1256541035.cos.ap-shanghai.myqcloud.com/imgs/gohugo-default-sample-hero-image.jpg

And then the image doesn't show up.

I know the URL is incorrect. I have modified the code.

/layouts/index.html
/layouts/_default/single.html

But it is only work in the hugo serve mode, it is not work in the hugo mode. I don't know why, maybe it is environment problem or some thing else.
I just learned about hugo, I don't know much about it yet.

Thanks!

Detect the toggle for light/dark mode

One suggestion to be adapted : i'm using the theme for my website but i need to adapt my logo when the user switch from light to dark and dark to light so i have updated the theme index.js file :

  function changeMode(isDarkMode) {
    if(isDarkMode) {
      bank.setItem(storageKey, light)
      elemAttribute(doc, data, light);
    } else {
      bank.setItem(storageKey, dark);
      elemAttribute(doc, data, dark);
    }
    window.dispatchEvent(new Event("storage"));
  }

The event is not triggered when staying on the same page
Then in the header partial :

...
        <script>
          const storageKey = 'colorMode';
          const bank = window.localStorage;
          window.onstorage = () => {
            var logoElt = document.getElementById("logo");
            if (logoElt && bank.getItem(storageKey) === "dim") {
              logoElt.setAttribute("style", "filter: invert();");
            } else {
              logoElt.setAttribute("style", "filter: none;");
            }
          };
        </script>
...

where logo is the img element of my logo

Not sure it's the best approach but could help

Set post thumbnail image file from page bundles

We manage our content structure with hugo page bundle functionality.

It is a convenient way to organize article assets.
It also allows us to make use of image processing build in hugo. We use image processing in hugo to automatically resize and compress images.

We got image processing working with a schortcode from this article.

It appears that setting image = "main_image.jpg" in article front matter only works with image files stored in static/images/ folder.
Front matter does not recognize images that are bundled with the article, like this:

├── posts
│   ├── my-post
│   │   ├── main_image1.jpg
│   │   └── index.md
│   └── my-other-post
│        ├── images
│        │   └── main_image2.jpg
│        └── index.md

Is there a way to get post thumbnail and main image working with files from page bundle?
Perhaps we need to update layouts/index.html and layouts/_default/single.html` to make it work.

I am very new to Go and Hugo template, so I need your help.
Not sure, but perhaps the issues are somewhere here:

newsroom/layouts/index.html

Line 13 in 4886891

{{ $bg := (absURL (printf "images/%s" $image)) }}

newsroom/layouts/_default/single.html

Line 10 in 4886891

<img src = '{{ absURL (printf "images/%s" .) }}' alt = '{{ . }}' class = 'post_thumbnail'>

Would appreciate your help.

Pinned post?

Is it possible to set a pinned post to always show first of all blog posts?
Now you sort option based on date, but how can I pin one post on top of other posts?

Is this avaliable with Disqus?

Cant make this theme work: theme is not getting rendered correctly

Hi, @onweru this theme is really great and I want to use it, but after using hugo server -D the website that I am getting in the localhost that is looking something like this,




where it should look like this(https://themes.gohugo.io/theme/newsroom/),


.

The steps that I followed,

1. hugo new site blog1
2. cd blog1
3. git init
4. git submodule add https://github.com/onweru/newsroom.git themes/newsroom
5. Then copy-pasted all the files and folders that were present in the exampleSite folder.
6. made baseurl = ""
7. ran the command hugo server -D

I am using windows 10,
hugo version gives me hugo v0.82.0-9D960784 windows/amd64 BuildDate=2021-03-21T17:28:04Z VendorInfo=gohugoio

It will be very helpful if you can help. thank you.

When this theme will be finish?

First of all, thank you for this great theme. Previously I was used hugo-swift-theme. It was really good choice for me. I am very pleased. You're really good developer :)

I really want to use this theme in my own project. But I guess this theme hasnt finished yet. Is there any plan to finish your work?

SASS ERROR

I have this error :

# Hugo version 79.1
# Debian

Documentation Addendum regarding hugo mod configuration

In my instance, hugo mod init $SITENAME... hugo mod get -u . took more finagling than expected. As, although it was possible to add the theme as a required dependency for my project, hugo/go was unable to find where the theme/module was supposed to be placed. So, I had to make some alterations to this strategy.

1. Initialization of the site wide module, required the theme not to be listed in the hugo.toml file, or it would go look for it and fail. hugo mod init $MY-PROJECT-NAME
2. After the site wide module was initialized, I.E., go.mod created. Only then could the theme be listed in the hugo.toml, and module listed in the [[module imports]] section of the hugo.toml.

theme = ["github.com/onweru/newsroom"] 
# ...
[module]
[[module-imports]]
  path = 'github.com/onweru/newsroom'

3. Then hugo mod get -u ./... could be run to correctly insert the newsroom module into the go.mod file. Which gets us halfway through with configuration.
4. Then use of git submodule add https://github.com/onweru/newsroom.git themes/newsroom was needed to actually add the contents to the appropriate location.
5. While still in the root folder of the project, the go.mod file has to be edited by hand, adding replace github.com/onweru/newsroom v0.0.0-0000000000000-0X0X0X0X0X0X => ./themes/newsroom to the bottom of the go.mod file. The version numbering can be found in the previous line, where it was generated by hugo.
6. Then, A mod.go file needs to be created in ./themes/newsroom to identify the newly cloned repository itself as a go module. This is done with cd themes/newsroom && hugo mod init github.com/onweru/newsroom.
7. Finally, cd ../../ && hugo mod get -u ./... will update everything and complete configuration.

There might be a much more expedient way to complete this process, but whatever that would be, I am unaware of it. I just tinkered into it all came together.

Not sure how you would want to add this to the documentation, or even if you would desire to, as it is pretty involved. Just wanted to do the responsible thing and prevent a developer from having to unnecessarily labor in order to answer redundant questions regarding the appropriate process of configuration.

rendering gone wrong in demo site

https://themes.gohugo.io//theme/newsroom/post/markdown-syntax/

seems to be rendered incorrectly and is all over the place.

Filter pages listed in front page by Section

Hi @onweru !

I'm in the first steps with your theme (nice job!).

I would like to filter the posts in the front page with its Type/Section. For this I wrote a new Section directory "test", in the same level os "post" and with new posts. In index.html I used:

{{ $pages := .Paginate (where .Site.RegularPages "Section" "!=" "test").ByPublishDate.Reverse }}

But this change don't take effect. I can't filter using this where condition.

Could you help me?

Error building site: MINIFY: failed to transform "js/index.js"

I want this to work so baaaddddd....!

Error: Error building site: MINIFY: failed to transform "js/index.js" (application/javascript): unexpected ( in expression on line 256 and column 3
  256:   (function copyHeadingLink() {
         ^
Built in 46 ms

I originally thought the problem was the SCSS thing because I didn't have the extended version of Hugo.

Then I installed the extended version and confirmed with hugo version which is hugo v0.91.2+extended

What am I missing?

Amazing theme thank you!

Update to "posts/%s"

In layouts/index.html "post/%s" need to be updated to "posts/%s"

Example
<a href='{{ absURL (printf "posts/%s" "") }}' class=post_nav><span class=post_next>{{ T "archive_text" }}

Add url = "/about/" to about.md

Your https://rooms.netlify.app/about/ returns a 404.

Add the next line to get this fixed:
url = "/about/"

Example...

+++
title = "About Hugo"
date = "2014-04-09"
image = "/images/street.jpg"
url = "/about/"
+++