New theme: Tale

[EmielH]

Hi,

I ported the very pretty Tale theme from Jekyll to Hugo. This is my first theme for Hugo, so if you have any improvements, please let me know!

Thanks!

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/EmielH/tale-hugo

I made sure that...

• the repository contains a good README.md describing my theme
• an open source license has been added to LICENSE.md
• all metadata have been added to theme.toml
• screenshots have been added in the images/ folder with the required dimensions
• https://example.com is set as base url in exampleSite/config.{toml, yaml, json} to avoid the abuse of unused domains I didn't include exampleSite as HugoBasicExample is good for this theme. I read that this is included automatically if no exampleSite is provided?
• the site's content is as neutral as possible (contains no ads etc.) and reflects the features of my theme HugoBasicExample can be used.
• I tested my theme against the gohugoio/HugoBasicExample
• I've checked the developer tools' console in my browser for error messages

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

[EmielH]

I also committed the /resources directory. Is there anything else I need to do to get this theme to work with Hugo Basic?

[onedrawingperday]

@EmielH
Thank you for following the issue I opened.

Your theme demo is rendering with the build script of the Hugo themes website but your style sheet <link rel="stylesheet" href="http://localhost:1313/scss/tale.min.css"> is missing (404)...

I have a theory why the style sheet is M.I.A. but I am not 100% sure.
The culprit might also be the Hugo Themes Site build script.

Anyway I am tagging here @bep and @digitalcraftsman so that they are aware of this issue, or just in case something else is going on, so that they can point both of us to the right direction.

---

In any case my suggestion is the following:
You have not included an Example Site with your theme..

I made an Example Site for your theme and when I tested it locally your compiled CSS did load.

So if it's not that much of a hassle may I request that you commit an Example Site with your theme.

Just grab the contents of the Hugo Basic Example

Also to see how an example site is structured please have a look at the example site of the Ananke theme.

There are also a few other minor details about your theme.toml parameters and your theme's README but I will get to those after we figure out what is going on with the compiled CSS.

Please let me know once you commit an Example Site so that I can test your theme again with the build script.

Thanks!

[EmielH]

Thanks for taking the time to test the theme so thoroughly! I will let you know once I've committed an example site; I think I'll have time to do this in the coming days.

[bep]

I have a theory why the style sheet is M.I.A. but I am not 100% sure.

My theory would be to use the relURL template func, which considers the sub-path that is relevant for the demo site.

@onedrawingperday you're doing a great job managing the theme repo.

[onedrawingperday]

@bep Thanks! I try...

Hm... your suggestion made me test further and I finally found out what's going on.

@EmielH
No need to include an Example Site.
In your head partial under /tale-hugo/layouts/partials/ change line 22 to the following:
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

And the compiled/minified CSS will load when executing the Build Script of the Hugo Themes site.

---

Now isn't that interesting @digitalcraftsman ?

In traditional Hugo themes whenever a relative URL is used the Build Script causes assets to go missing because relURL is always relative to the root.

But for assets published through Hugo Pipes .Permalink renders the wrong URL and .RelPermalink produces the correct one.

---

Also @EmielH in your README your screenshot is missing, change its URL to the following:
https://raw.githubusercontent.com/EmielH/tale-hugo/master/images/screenshot.png

Do the above changes and I will finally mark your theme as ready to be added to the Hugo website.

[EmielH]

@onedrawingperday Thanks a lot for the help! I updated the head partial, and I replaced all relative links in README.md to absolute ones (I guess the relative link to the license would also break when viewed on the Hugo Themes site).

[onedrawingperday]

@EmielH
Thanks for making the changes. All is good on my end.

@digitalcraftsman
This theme is ready to be added to the website. It will be the first theme that uses Hugo Pipes.

[EmielH]

@onedrawingperday Is there any way I can make sure that future updates to the theme don't break the Hugo Theme site? -- If this question is too off topic for this issue, I can take it to the forums if you like.

[onedrawingperday]

@EmielH Don't worry, you cannot break the Hugo Theme Site.

If something stops working with your demo, it will not be generated.

There are already themes listed on the site that currently do not have a demo for various reasons (some of them are for older versions of Hugo).

As long as you follow Hugo's future releases and watch out for features that become deprecated or rewritten your demo should be fine.

[digitalcraftsman]

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