Correct rendering of the example site.

[ringods]

Renamed the exampleSite content files to correct .md extension, otherwise these pages are not processed and themed.

Set the themesDir option in the config file to allow for easy testing by running hugo serve in the exampleSite folder.

[cboettig]

@ringods Thanks, but I do not see why you want to rename the .html to .md. I believe Hugo supports either option (as long as it finds yaml / toml header in the files), and treating them as .md can create issues because much of the HTML code in those files is indented by 4 or more lines, which can cause a markdown parser to treat it as a code block rather than as literal html.

The example site seems to be rendering okay for me already, eg, here: https://cboettig.github.io/hugo-now-ui/ (modulo an unrelated issue I don't understand wherein relURL is not being applied to the background URL; for reasons I don't understand relURL seems to work only in cases such as <a href="{{ someurl | relURL }}"> and not in url({{someurl | relURL) .....)

[ringods]

@cboettig I don't think a lot of people will see your theme preview on the URL you mentioned. Everybody will go here, coming from the main themes site:

https://themes.gohugo.io/theme/hugo-now-ui/

If you click on most items in the menu, you see unstyled pages. When running hugo serve locally, I had the same unstyled pages. I tested this with Hugo 0.41. After the rename, everything was rendered fully themed.

[cboettig]

@ringods That is an excellent point! Not sure why it is failing on the main themes site. But I do not think the files need to be renamed to fix that -- the pages that are failing to render are doing so because somehow the css links in the URLs are wrong, so this appears to be an unrelated problem. (On the main themes site, you can see that Hugo has indeed processed those pages, so it's not a problem of file extensions or something, but that if you click on the links for the CSS files in those sources, the relative URLs throw 404 errors instead).

So, I don't think this will fix that problem (and might create additional problems). Can you test locally that things do or don't render for you with the original .html extensions?

[ringods]

@cboettig With the files back to .html, I have better results if I replace relURL with absURL in here:

https://github.com/cboettig/hugo-now-ui/blob/c4fd5508c875d5a4cd8ed29811c637ab3f22a193/layouts/partials/head.html#L12-L14

[cboettig]

@ringods yes; but that also makes the deployment more sensitive to setting the baseURL in the config.toml, right? In general I'd prefer using relURL unless there's a clear reason why that's not the correct approach. Do most other themes use absURL instead?

relURL works for me in all my testing, but I clearly need to understand more about what's going wrong on the official templates site. How are you deploying such that you are getting broken css links with the relURL? I gather you get locally the same problems that you see on the official templates site?

[cboettig]

p.s. thanks for the help and replies here, it's great to get input from others on these issues!

[ringods]

@digitalcraftsman, you seem to be doing a lot regarding the Hugo Themes site. Do you have an explanation why the preview of this theme renders correctly here:

https://cboettig.github.io/hugo-now-ui/

but not here:

https://themes.gohugo.io/theme/hugo-now-ui/

[ringods]

@onedrawingperday could you help us out with this issue on the Hugo themes site? See my previous comment above.

[onedrawingperday]

Do you have an explanation why the preview of this theme renders correctly here:

https://cboettig.github.io/hugo-now-ui/

but not here:

https://themes.gohugo.io/theme/hugo-now-ui/

@ringods On my end both demos have their images missing. It seems that you are using relative URLs. This kind of URL is always relative to the root of a Hugo project. However both demos are published in sub-directories and as a result the images are 404.

For example the URL of the header img on your GitHub Page points to https://cboettig.github.io/img/bg11.jpg instead of the actual location of the img at https://cboettig.github.io/hugo-now-ui/img/bg11.jpg

To rectify you should remove any forward slashes / from the URLs and use the absURL function to make the links absolute.

Also whenever a URL begins with a slash / Hugo constructs a link relative to the root (and even absURL has no effect).

This is the number one issue we see with theme assets when reviewing Hugo themes.

CC/ @cboettig

[ringods]

@onedrawingperday thanks for looking into this. Next to the images there is also the issue of the subpages not being "themed" correctly on the Hugo Themes site, e.g.:

https://cboettig.github.io/hugo-now-ui/landing/ vs https://themes.gohugo.io/theme/hugo-now-ui/landing

What I just notice is that on the Hugo themes site, the above URL does not have the trailing /. If I append it manually, the page is rendered "themed". How come the trailing slash is not generated?

[onedrawingperday]

https://cboettig.github.io/hugo-now-ui/landing/ vs https://themes.gohugo.io/theme/hugo-now-ui/landing

What I just notice is that on the Hugo themes site, the above URL does not have the trailing /. If I append it manually, the page is rendered "themed". How come the trailing slash is not generated?

@ringods That seems to be happening with the Hugo Now UI theme only.

For example

https://themes.gohugo.io/theme/pristine renders identical to https://themes.gohugo.io/theme/pristine/

In the config of the Hugo Now UI example site I see:

relativeurls = true

First of all it is relativeURLs and second I think that this parameter needs to be removed from the config.

Also the URLs of the main menu are defined in the config without the trailing slash.

For example

[[menu.main]]
    name = "Components"
url = "/components"

Should be url = "/components/" and so on for the rest of the menu links.

CC/ @cboettig

[onedrawingperday]

I just want to add a final comment.

When we review example sites for themes this is done locally with the Build Script of the Hugo themes site.

The local Hugo Server appends the trailing slash automatically, so it would be difficult to catch something like this before accepting a theme.

In any case I just tested the Example Site locally and it seems that the removal of relativeURLs from the config along with the use of absURL fixes the issues mentioned in this Pull Request about the Hugo Now UI theme.

So @cboettig whenever you feel like it push these changes and open a GitHub Issue at the Hugo Themes repo to notify us about updating your theme.

Thanks.

[cboettig]

Wonderful, thanks for this @onedrawingperday and @ringods . Really helpful to have this explanation! I went for relUrls because I thought it would be tricky to set an absolute URL that would 'work' deployed from multiple domains (i.e.: the Hugo themes site, the GitHub pages preview, localhost). But sounds like absURL is actually the way to do that, since it still works from a repo root and doesn't hardware in the URL root? (i.e. hardwire a base url of "cboettig.github.io"?

I should be able to fix this on the weekend as soon as a get some free time (Or a PR would also be welcome!)

[ringods]

@cboettig I have reverted the rename of the files from .html to .md and tried the absURL function for some some the images. But the rendered output is like this:

<img src="{{ img/bg1.jpg | absURL }}" alt="" class="img-raised">

It seems the template does not process Hugo functions when HTML is passed. Any idea how to fix this?

[cboettig]

I think there's two issues here. In general you can include raw html in markdown, but the indentation may make it be confused for a literal code block. But I think the problem is deeper, I don't think you can use Hugo functions in content/ regardless of whether it's html or md.

Content should just use an abs url, i.e. lead with / like @onedrawingperday says. I think these changes need to be made to the config.toml file too.

[ringods]

@cboettig do you really want to retain the HTML content in the exampleSite? I have the impression we will never get it right when sticking with HTML content because we can't use shortcodes or have layouts handling this case properly.

[ringods]

@cboettig the current PR content should contain the changes as proposed by @onedrawingperday

[cboettig]

Nice! this looks great, many thanks.

[cboettig]

okay, merged and tagged as a new release. Don't recall if I need to manually do anything further to release to https://themes.gohugo.io/theme/hugo-now-ui/ (?)