Hugothemes: New theme: Mondrian

[redraw]

Theme submission

Before submitting a theme please make sure you've read the README.md. It describes in detail what information are needed and which requirements have to be fulfilled for the submission. The check list below can help you.

Link to my theme repository: https://github.com/redraw/hugo-mondrian-theme

I made sure that...

• [x] the repository contains a good README.md describing my theme
• [x] an open source license has been added to LICENSE.md
• [x] all metadata have been added to theme.toml
• [x] screenshots have been added in the images/ folder with the required dimensions
• [x] in case I'm using a customized demo via the exampleSite folder that
  
  
  
  • [x] https://example.com is set as base url in exampleSite/config.{toml, yaml, json} to avoid the abuse of unused domains
  
  
  • [x] I tested that my theme's demo works with the content directory of gohugoio/HugoBasicExample
  
  
• [x] I tested my theme against the gohugoio/HugoBasicExample
  
  
  
  • [x] I've checked the developer tools' console in my browser for error messages
  
  
• [x] in case my theme is using Hugo Pipes features like toCSS and PostCSS that I have committed the /resources directory with all generated assets, for my theme to work in the basic version of Hugo

Feel free to ask questions. We're glad to help.

[onedrawingperday]

Hello @redraw

This is an awesome theme and thank you for sharing it with the Hugo community! 💯

However you need to make the theme's thumbnail and screenshot meet the images specifications mentioned in the repository's README

Please do the above and let me know. Thanks!

EDIT
Regarding the /sketch/ section that contains a p5js.org interactive experiment I plan to incorporate it within the HugoBasicExample, so that your theme's demo is presented on the Hugo Themes website, as it should. I will give you instructions about what needs to be done on your part after I push some changes to the HugoBasicExample repo.

[redraw]

Sure! Need to update the screenshots. I hadn't noticed convert command preserves aspect ratio.

It would be great if sketch section is included, thanks. I'll follow your instructions.

[onedrawingperday]

I hadn't noticed convert command preserves aspect ratio

I suppose that you are referring to the ImageMagick command. Well, if it didn't keep the aspect ratio of an image by default then the conversion would output images with distortion and while it's certainly possible to ignore the aspect ratio by using the '!' flag that is not desirable in this case.

We need to have your theme's screenshots without distortion in the aforementioned dimensions.

[redraw]

Done. Fortunately, Firefox provides an easy way to take screenshots at a current specific size in Mobile View tools.

[onedrawingperday]

Ok. Thanks.

Furthermore I noticed one more minor issue:

• In line 7 of /layouts/_default/list.html replace {{ .URL }} with {{ .Permalink }}

It is preferable to use the .Permalink variable rather than .URL because the latter may be deprecated in the future see: https://github.com/gohugoio/hugo/issues/4117

[redraw]

Got it :+1:, done

[onedrawingperday]

@redraw

• To make the sketch section available in your theme's demo you need to include the following in exampleSite/config.toml:

# this setting is relevant for the theme demo on the Hugo Themes website
ignoreFiles = ["content/posts/\\.*","content/portfolio/\\.*","content/product/\\.*","content/en/\\.*","content/fr/\\.*","content/es/\\.*","content/de/\\.*","content/zh-tw/\\.*","content/zh-cn/\\.*"]

• Also in your theme's navigation there is a typo. Please change the link to sketches

Once you do the above let me know.

[redraw]

Just read it. Done

[onedrawingperday]

@redraw Thank you

@digitalcraftsman This theme is ready to be added to the website after https://github.com/gohugoio/hugoBasicExample/pull/42 and https://github.com/gohugoio/hugoThemes/pull/598 are merged.

This minimalist theme is a homage to the paintings of Piet Mondrian, it is ideal for creatives who wish to showcase their work in a simple way and its demo features an interactive drawing experiment that uses the p5js.org library,

[digitalcraftsman]

I didn't knew how Piet Mondrian was, but I definitely knew his painting style.

@redraw your theme should appear soon on Hugo's theme site. ~Next, I'll promote your theme on Hugo's official Twitter account.~

[digitalcraftsman]

@onedrawingperday you mentioned two pull requests with modifications to the hugoBasicExample, that needed to be merged such that this theme can be added.

However, the latest changes caused two rise the errors in the build log from 5 to 28

The mondrian theme isn't build right now. The log contains the following error message:

6:02:37 PM: grep: /opt/build/repo/hugo-mondrian-theme/layouts/index.html
6:02:37 PM: : No such file or directory

Is it related to a recent change in the build script that uses grep here?

@redraw we're about to investigate this issue.

[onedrawingperday]

@digitalcraftsman I sent you a PM in the forum.

The demo of the Mondrian theme is now live on the website over here: https://themes.gohugo.io/hugo-mondrian-theme/

The grep command is looking whether a theme's template under /layouts/index.html contains the exact string "Type" "posts" and if this is found then it enables the /posts/ section of the HugoBasicExample and disables the /post/ section. This has nothing to do with this particular theme's demo.

However as I said in my PM there is an issue with config ovewrites that I am currently investigating.

This issue wasn't apparent with the themes that I tested locally before I pushed the latest changes to the HugoBasicExample and the Build Script.

I will let you know as soon as I find the culprit to this issue.

[digitalcraftsman]

I sent you a PM in the forum.

I saw your PM after I have wrote the comment.

The demo of the Mondrian theme is now live on the website over here: themes.gohugo.io/hugo-mondrian-theme

Either one of the deploys hasn't finished or the cleared cache fixed the issue while I wrote the comment above. None the less, @redraw I'll finally promote your theme on Twitter. I'm sorry for the inconvenience.

[redraw]

There's still an issue with the menu in the demo build I guess. Not sure if I've missed something in my exampleSite config, but it's not displaying, neither some other themes that relied on that like Mero.

Also, the sketch example provided in hugoBasicExample doesn't contain frontmatter that can be read to display on the list view, and not sure if it will work as a full HTML page? mine's just a body content

[onedrawingperday]

@redraw This is not a problem on your part. This is a problem with config overwrites. The Build Script calls several config files when the command hugo is executed.

I have now identified the issue and looking into fixing it. I will let you know if something needs to be done on your part.

Sorry for the inconvenience.

[onedrawingperday]

@redraw

Basically you need to move lines 29-40 at the very top of your Example Site's config (in line 1).

The Build Script calls a config that contains an ignoreFiles setting before your Example Site's config.

The way it is now when the hugo command is executed your Example Site's config overrides the ignoreFiles setting in the first config. However Hugo ignores everything in between and that's why your theme demo was missing its menu, title etc. By moving this setting at the beginning of the config the overwrite happens right there and then Hugo reads the rest of your theme's settings.

Please do this change and let me know.

We should have your demo up and running properly some time tomorrow after you do the above.

[redraw]

Oh, didn't know that the order was important. Ok, done. And do you think the sketch example would work? At least it's missing the frontmatter (title mainly) and that results in an empty (unclickable) box.

Glad to contribute to Hugo community.

[onedrawingperday]

@redraw Thanks for the heads up. I have fixed the sketch example.

Your theme's demo will be fixed once PR #600 and https://github.com/gohugoio/hugoBasicExample/pull/43 are merged and after the themes are updated in this repository (to pull your latest updates).

Thank you for your theme contribution. I really like it. 👍

[digitalcraftsman]

@redraw the fixes are now live and your demo now shows the menu items and has a working sketching demo. Kudos to @onedrawingperday for fixing them so quickly.