BluestNight Theme - Thoughts?

1

I’ve put a lot of work into my custom theme BluestNight (GitLab) (Example/Docs Site) and I’d appreciate some community feedback on it, namely:

  • What do you like?
  • What do you not like?
  • What can be improved?
    • Places where documentation can be improved is a big one.

I actually have a Netlify-powered survey that asks these questions on the example site, which would be the preferred place for this kind of feedback.

You can find all of the theme documentation under the “Documentation” sub-menu on the example site.

Features list in the README.md on GitLab.

If you want to see actual sites using the theme, my personal and programming blogs use it.

3 Likes
2

I don’t really want to go into the full survey here since I’m not the target audience :slight_smile: (I already have themes with which I’m happy), but just want to say that I’m impressed with the features that this theme has.

Things like Piwik, Lunr.js search, Hugo’s custom output formats all requires work and thinking that goes beyond a standard theme. You even created CSS minification in the Hugo theme, instead of relying on Netlify for that, which just shows the attention to detail in this theme.

It’s also super nice to see a theme that doesn’t import the whole bootstrap CSS or requires the hefty jQuery for one of two features. :+1:

Just to give a bit of feedback, because the reset.css and stylesheet.css files are so tiny, it might benefit the pagespeed by placing the contents of those files directly into styles.css. That way you also can do without the @import rules that block browser rendering.

I hope this theme gets a lot of installs because it certainly deserves it.

3

Thank you for the response!

It’s also super nice to see a theme that doesn’t import the whole bootstrap CSS or requires the hefty jQuery for one of two features. :+1:

One of my goals with this theme is to be functional, yet slim. The JavaScript from Piwik or Muut may include jQuery, but the theme itself uses vanilla JS, and only with those optional plugins. The base theme without those items enabled uses no JavaScript at all.

Just to give a bit of feedback, because the reset.css and stylesheet.css files are so tiny, it might benefit the pagespeed by placing the contents of those files directly into styles.css.

This is the kind of feedback I was hoping for when I posted this. I’ve implemented that merge in the latest commit.

I hope this theme gets a lot of installs because it certainly deserves it.

Again, thank you. I’ve put a lot of work into the theme.

4

I’m just about to start creating theme(s) for Hugo and like a lot your list of features you’ve managed to put into it, like search, Piwik…

However, have some problem running exampleSite:

 $ Started building sites ...
WARNING: calling IsSet with unsupported type "invalid" (<nil>) will always return false.

ERROR 2017/08/17 13:54:17 Failed to render "/home/gour/prj/hugo/dev/themes/BluestNight/layouts/_default/single.html": runtime error: invalid memory address or nil pointer dereference


$ hugo version
Hugo Static Site Generator v0.26 linux/amd64 BuildDate: 2017-08-07T09:09:50+02:00

in Fedora (f26) Linux.

Any hint?

5

I saw that too. Fixed both the IsSet warning and the rendering error.

Short version: I didn’t understand how nested sections work in Hugo. They have to have a _index.md to be considered a nested section. Pull down the latest changes and see if that fixes it.

6

Thank you - it works now!

Btw, support for Hashover is really interesting one - on my production server I anyway have to use PHP for Piwik and was considering to use Hashover being much simpler to configure than Isso which I configured, but it is much more complex…however, wonder if you have considered to add support for HashOver 2.0 ?

7

…however, wonder if you have considered to add support for HashOver 2.04 ?

Yes, however the phrasing around the linked repo is that the code is not yet ready for “production” use. This theme is meant to be usable as-is (that last bug being a fluke) and I’d rather not include third-party code that’s in “beta”.

8

I agree in general, although in this case 2.0 is rewrite with the focus “focus on improving nothing but the following areas…Security, Performance, Code efficiency, Deployment…”

Btw, what is the recommended mechanism to customize CSS in your theme, e.g. to add rules for aligning images etc.?

I’ve seen that some themes deply custom.css files…

9

I agree in general, although in this case 2.0 is rewrite with the focus “focus on improving nothing but the following areas…Security, Performance, Code efficiency, Deployment…”

I am looking forward to seeing what comes of the 2.0 rewrite, but until they change such phrasing as “version 2.0 will be the next release” and “…and will focus on improving…” and remove “(development)” from the project title in the README, I am going to assume that the project is not ready for deployment yet.

Btw, what is the recommended mechanism to customize CSS in your theme, e.g. to add rules for aligning images etc.?

I currently have no method of customizing CSS from the site. The simplest way, currently, would be to copy the layouts/index.css file from the theme to your site, write a css partial with your changes, and add a line to layouts/index.css including that partial like it does the others.

I’m considering allowing more customization in the theme through methods like the custom.css file, however there are no promises on anything changing.

10

Fair-enough. :wink: I do honour your choice.

OK…and thank you for a nice theme which is great resource for learning to create Hugo themes. :sunglasses:

1 Like
11

I liked the clean straight lines as well as the bold colors (or lack of it).

However, I have run into issues I am unable to resolve.

  1. ERROR 2017/09/20 09:50:30 Two or more menu items have the same name/identifier in Menu “main”
  2. ERROR 2017/09/20 09:50:31 Failed to render “/home/psa/dev/tutorials/hugo/mathguru/themes/BluestNight/layouts/_default/single.html”: runtime error: invalid memory address or nil pointer dereference
  3. Extra math js, css don’t seem to be recognized. I added in a partial just before /head . They worked well in another template.
  4. When “hugo server” loads up 1st time, it take 3 sec (!!) . Shouldn’t it be in millisec ? Any reason for this ?

About :

  1. The 1st goes away if I use SectionPagesMenu and remove corresponding [menu.main]
    It errors if I don’t use SectionPagesMenu AND have a section inside post directory, similar to docs/pages in your example . The “identifier” is not used; “parent” is used in the mentioned file. Don’t know why it complains about identifier.

  2. I have no idea why this 2nd error happens, even if I use SectionPagesMenu to make the s1st go away. There are some warnings about i18n dir missing, but that is not relevant I think.

  3. About the extra js, css, I thought bcoz of error 2, it does not proceed to executing the partial file. Can’t think of another reason.

Regardless of the errors, the site (local) displays as intended, except the annoying part where the latex math code are displayed without being processed.

Now I noticed that you updated after I downloaded 2 days back. Not sure if it matters.

12

ERROR 2017/09/20 09:50:30 Two or more menu items have the same name/identifier in Menu “main”

This is almost certainly an issue with your site. BluestNight doesn’t modify the menu, only display it. Is it possible that you have two menu items with the same name and/or identifier? I believe some version of the name is used as an identifier if one isn’t explicitly specified. You can also add pages to the menu from their front matter, so I would check there too.

ERROR 2017/09/20 09:50:31 Failed to render “/home/psa/dev/tutorials/hugo/mathguru/themes/BluestNight/layouts/_default/single.html”: runtime error: invalid memory address or nil pointer dereference

Interesting, I haven’t run into that before. Check for updates just to be sure and file an issue if it still happens.

Extra math js, css don’t seem to be recognized. I added in a partial just before /head . They worked well in another template.

BluestNight doesn’t (currently) have support for including random user partials in the theme. For CSS, you can create a shortcode that places styling information in the page body and for JavaScript you can do that same for a script tag (probably with the defer or async attributes).

Including user partials is a feature that’s been requested previously, and is one that I’m on the fence about.

If you’re saying that you modified a theme file directly, though, I don’t see why it isn’t working.

When “hugo server” loads up 1st time, it take 3 sec (!!) . Shouldn’t it be in millisec ? Any reason for this ?

This is a known issue on my end. I haven’t done any benchmarking yet to see what the problem is, but I’m going to assume that it’s because BluestNight performs some extra calculations when building the site to programmatically lighten and darken colors, make them semi-transparent, and detect if a particular color is “light” or “dark” to help improve the appearance of the generated site. It’s possible Hugo caches these results after the first render, which would be why you see the lag the first time around.

That said, I realized I didn’t have any way of tracking the problem, so I’ve created a new issue regarding the slow compilation times.

Regardless of the errors, the site (local) displays as intended, except the annoying part where the latex math code are displayed without being processed.

Unless Hugo somehow processes the LaTeX code itself, BluestNight does not have any way of parsing/displaying LaTeX. Feel free to create an issue on the issue tracker (linked earlier) for it, though.

13

The error about 2 or more menu items - I was able to get rid of it by commenting out SectionPagesMenu in config.toml and the corresponding [menu.main] in each section, except the few ones I need a dropdown menu for. Didn’t understand how it got resolved. Expect to run into this again …

The runtime error still persists. I have yet to download the latest theme. WIll do that and report.

The extra js, css issue (critical for me) - I had earlier copied baseof.html into layouts/_default/baseof.html and added the partial before /head. Apparently, this wasn’t being run. So. I modified the one under themes/BluestNight path. Then it worked.

TOC not getting displayed. I use file extension .mmark . If I change it to .md, TOC works, but my math equations (katex) and diagrams get messed up. Diagrams go blank bcoz things like quotes are replaced. Using markup = “mmark” in front matter in a .md file is the same as using .mmark file - TOC doesn’t display, but math works. I need .mmark because of katex and displaying math. Seems some issue with .TableOfContents and mmark. If you try, you may get further insight and perhaps a solution.

comments : I did as in the doc, regarding secrets.php, [Params] hashover=true in config; disable_comments = false in page front matter. Comments don’t show. Do I have to copy the hashover files someplace to satisfy the relative path req ? Presuming that’s needed I copied the hashover stuff into static. The html has the

<div class="post-comments"><div id="hashover"></div>
      <script>

Still comments don’t show. If I load localhost:1313/hashover.php, it displays the file. So relative path shud not be an issue. And yes, php-fpm is running on my archlinux localhost. Was recently upgraded. Any clues ?

14

I was able to get rid of it by commenting out SectionPagesMenu in config.toml and the corresponding [menu.main] in each section, except the few ones I need a dropdown menu for. Didn’t understand how it got resolved. Expect to run into this again …

I strongly suspect this was an error on your part, though if it happens again and it seems to be from BluestNight, let me know - preferably in a GitLab issue.

The runtime error still persists.

I do not get that error on any of the four sites using this theme that I maintain, using the latest version of the theme. If you still have the issue after updating, I’d check that required front matter items are present in all of your content files, as I think it’s possible I make an assumption that something is set when it isn’t. If that doesn’t help and you are willing to give me access to the site files (i.e. via a git repo), I may be able to figure it out. With the information I currently have, I have no clue what is causing it.

The extra js, css issue (critical for me)

I’ve been thinking more on this and think I may add this in a future update.

TOC not getting displayed. I use file extension .mmark . If I change it to .md, TOC works, but my math equations (katex) and diagrams get messed up.

If you look under the documentation for Mmark in Hugo, you’ll notice that certain features are not currently working with Mmark files. It’s a Hugo issue, not a theme one.

I need .mmark because of katex and displaying math.

I’m going to look into including this as well, in the form of MathJax. I’ll want to play around with it for a bit before deciding whether to include it, though. Even if I don’t include it, if the custom CSS/JS gets implemented you can include MathJax yourself.

comments : I did as in the doc, regarding secrets.php
…
Still comments don’t show. If I load localhost:1313/hashover.php, it displays the file. So relative path shud not be an issue. And yes, php-fpm is running on my archlinux localhost. Was recently upgraded. Any clues ?

I’m assuming by “displays the file” you mean that it is correctly parsed by PHP and that the resulting page does not display any PHP code in it at all. If you are seeing PHP code, that’s definitely an issue with how the server is set up.

I would try viewing the source for a generated page and see what URL it uses for the hashover.php file. Does the page load if you visit that URL? If not, can you figure out what the correct URL is?

I have recently started university classes and don’t have as much time to spend tracking down bugs, so any help you can provide in narrowing these down is greatly appreciated.