gohugoio / hugothemessite Goto Github PK

The names in theme.toml are ignored and, I guess, the names of the theme directories are used instead for some reason? Why?

Currently this is used in the Hugo Showcase but not in Hugo Themes.

ref: gohugoio/gohugoioTheme@d0a76eb

I know some themes are blacklisted. But the current builds of the theme site only include themes whose name's first character is between a and h.

/cc @bep

And a way to sort with it.

http://drjekyllthemes.github.io/trending

I guess this means rewriting the script to Go or something, maybe; my Bash skills has its limmits.

The README of a theme is used to add a more detailed description about the theme. At Github I created a table of contents with anchor tags that are linking to the different sections of the READNE. But this doesn't work in combination with Hugo, because cross-references are required. Therefor are the links broken.

As you can see, there is no space between "Download" and "Homepage":

Look in the upper right corner.

I opened this issue before: gohugoio/gohugoioTheme#119

It was addressed but then again I am still getting white text in a white search input box at the ThemeSite.

Many Hugo themes are being ported from existing open source themes created by authors on other static site generators. One rising star I've noticed is hugo-tranquilpeak-theme, which is a port from Hexo.

Based on the values provided in in theme.toml we have the ability to generate taxonomy for themes based on whether or not they're ported or unported.

Wanted to float this as I could see it being of value for authors looking to create derivative works and looking for a quick slice of the data on where to start. It also helps identify themes with less potential licensing snafus for those extending.

Thoughts?

See shell script in:

https://github.com/spf13/hugoThemeSiteScript

This now runs fine and builds a site with all the themes.

To run it locally:

./generateThemeSite.sh http://localhost:1313 && hugo server -s hugoThemeSite/themeSite

Most of the themes are now up-to-spec, but the site needs some general polishing:

• Do the necessary HTML/CSS adjustments to make it look good.
• Consider removing the left menu (put menu links in header) to let the themes get all the attention.

Seemed to have lost some SEO with the latest update. We kind of need the Twitter cards to look good when posting new themes in Twitter. The internal Hugo template should do?

/cc @budparr @digitalcraftsman

Override the default gohugo theme for the ThemeSite to fix the broken mobile menu.

See: gohugoio/gohugoioTheme#141 for a description of the problem.

Also check out whether: gohugoio/gohugoioTheme#104 fixes the problem.

This seems like a no-brainer to me now, but to avoid stuffing of features in the keywords section (and to actually make use of the currently unused featues array in theme.toml theme site should be updated features are enumerated as deep links to anchors existing in documentation.

Benefits:

• Easy implementation.
• Makes feature stuffing a non-concern as nobody (hopefully) would try and create an anchor in their README to cover every feature listed in theme.toml and simply <a href="#feature"> to jump down the page on the hugo theme site theme.
• Makes the theme site more usable and helps highlight unique theme above the fold, paving the way to better alignment of feature sets and descriptions between themes without requiring heuristics.
• Rewards theme and theme component maintainers to write solid documentation by following the principles of Readme Driven Deveopment, something Tom Preston-Werner describes here.

The issue tracker of this repo is cluttered with inactive issues opened years ago.

So I will add stale to have these issues removed after a period of time.

Turns out that I cannot add stale since I am not an admin of this repo.

So @bep if you can please enable stale in this repo and then I will sort its settings and add a keep tag to issues that need to be kept active.

Huge file-size savings can be had if all the images in this repo are losslessly optimized. I suggest to install either:

• ImgBot - a free (for open-source projects) GitHub app https://github.com/marketplace/imgbot

• Calibre Image-Actions - a new free GitHub Action which works in a similar way https://github.com/marketplace/actions/image-actions

Originally posted at gohugoio/hugoThemes#695.

That is what is happening. It gets larger as the screen gets wider.

See:

https://github.com/spf13/HugoBasicExample

Also see #3 for how-to-build-this-site.

This is the site used for all the theme demos. In the config.toml there are some added params to get the themes up and running.

But there are more custom params that could be added so the different themes get the best possible presentation.

Casper is one, that takes a "big image" as site param.

We need some kind of config rewriting with a list of param addons (we do not want to commit this to the example site):

• Assume that we can have one config for all themes (they will ignore the one they don't know about)
• Use Casper as "proof of concept": Add the front page image on http://gohugo.io/ as a "splash image"

Then we can add the necessary params one by one later.

The buttons (download, demo and homepage) aren't very responsive on smaller screens since they are overlapping other content. Here's a screenshot of the issue:

The sections with further information about a theme contains also mentions the author but the name doesn't link to the authors homepage (see theme.toml -> homepage). Instead the url to the theme is added (à la localhost:1313/agency ).

On the themes.gohugo.io page, it would be great to be able to see all of the available theme tags so that you can filter by the tags right from the landing page. The feature seems pretty hidden unless you know it's there!

It's just an idea but I think it would be senseful to add a pagination to the index.html since the list of themes is already quite large and will grow in the future. Therefore a user needs, who browses the theme, has just a huge list.

Furthermore would this increase performance, since less items need to loaded and rendered.

In stead of creating a lot of small tasks in separate issues, lets try to agree on a more compact list here.

• add scripting for theme-specific params. A template file with key-values that the script can append to the config.toml should do. Also think about how to get the param-specific images (banner, logo etc.) into the example site. (@bep)
• handle mismatch of sections used in the different themes (post vs blog etc.); a symbolic link or two would be tempting, but I don't think that would work. not sure this is a problem
• Update README on hugoThemes about custom exampleSite @bep
• Rename examples to exampleSite in @digitalcraftsman sites where applicable
• Modify script to handle exampleSite if it exists in a theme @bep
• blacklist themes that doesn't follow "the standard" and breaks the site. Open up pull requests for changes needed. Do not work around readme.md vs README.mdetc. -- get the themes to be uniform. Much easier in the long run.
• Walk through the themes one by one and apply the fixes above (params, section mismatch etc.)
• Images that aren't linked to the "raw" version in the READMEs will not be shown

/cc @digitalcraftsman

The Minimo demo is broken.

In the gohugoio/hugoThemes repository, Minimo is at minimo@30e19ed, which is the latest commit.

But in the theme's demo site, it seems like the BaseURL is set to https://themes.gohugo.io instead of https://themes.gohugo.io/theme/minimo. So, the theme can't load Javascript assets.

Either that, or it's somehow stuck with a build from an older commit.

I would be nice to add a filter to find themes easier. The following filter options could be useful:

• category (blog, portfolio etc.)
• author
• license

Those could be defined in the theme.toml

The refine this page link in the menu links to non-existing pages on Github.

How does a user know what version of a theme they are using (especially if they just downloaded Zip, no Git)? In order to update a theme, users require a method to discover which version they have installed and compare it with the theme's release notes or changelog.

I suggest that we adhere to best practices and add theme version metadata as a parameter in theme.toml.

Then rename min_version to hugo_version going forward to avoid confusion between theme version and minimum Hugo version required.

Continuation of #28

e.g. display tag cloud on http://themes.gohugo.io/tags/minimal page so that user can navigate between tags without returning to homepage

In #32 we began effectively lazyloading image data to speed up the themes site. To do so we removed the src attribute from the image tags, which leads to the following perceived render for user agents supporting images with an unprimed cache:

Because the hyperlink used for individual themes wraps an img tag and the image tag itself does not have an intrinsic size assigned (e.g. using width and height attributes or CSS), the click area of the surrounding anchor makes themes unclickable until the images begin to load. This effect is exacerbated when a user scrolls the page rapidly as images far outside the viewport are not preloaded using a lazy queue (possible with lazysizes, but not really worth it yet).

To improve the current experience for mobile user agents and users on non-cable connections, we can leverage image placeholders, which will appear in place of theme images while theme images are being downloaded. The result of doing so will create a touch/click target the size of the thumbnail image to be loaded. To do this performantly, we can use a base64-endocoded SVG image asset showing the Hugo logo within a rectangle the size of the thumbnail being loaded.

If this is something you'd like to see please send me an SVG asset of the Hugo logo to [email protected] and I'll have a PR ready shortly. The work will be directly portable to the new theme site, so win-win.

Say you're on a theme page with some external links (e.g., hugo-theme-terminal) and click one of those links. You are now on an external site. To go back, you use the keyboard shortcut Alt+Left. This takes you back to the theme page, but it also triggers the theme navigation that's bound to Left. So you then end up on the previous theme.

This is on Firefox 66.0.1.

Maybe it would be better to change the link here from https://github.com/gohugoio/hugo to https://github.com/gohugoio/hugoThemes

Not sure if this is the right place to report this, but can't access themes.gohugo.io anymore. Shows a 404.

Currently the Hugo Theme Site has a 60s page load time as measured by WebPageTest:

While page load may not be the important metric it once was, it is still important. Here's why:

1. Theme site currently contains 165 images.
2. The 165 images represent 33966.8KB of image data.
3. Every new user visiting the theme site home page using a visual browser will attempt to download all 165 of those images.
4. Downloading 33966.8KB of images concurrently causes jank in the UI and hurts users on data-capped internet plans.
5. Browser busy indicators (the spinners) will typically spin for 60 seconds while the page loads images, even tough the user may only need or want to view a small portion of them.

PR to follow to fix this issue. But I wanted to get #29 in first because as it stands the analytics for this site are not being measured effectively.

https://themes.gohugo.io/tags/

Issues:

1. All themes are listed twice (or more!).
2. The font size seems too big.

Non-issue but an improvement suggestion: Show the theme description too, along with the title.

I was hoping we would have gotten rid of the deployment issue with the old and complex and not possible to administrate hosting solution by going to Netlify, but there still are issues, it seem.

Somehow Cloudflare still is in the picture:

• Hosting SSL? I see some HTTP error pages coming from Cloudflare ...
• Caching static resources, CSS. I added some tagcloud CSS here that isn't there yet (http://themes.gohugo.io/css/style.css) so I assume it is cached somewhere ...

@spf13 @digitalcraftsman can you not just fix this one and for all? How hard can it be?

After taking a look at the gallery I saw, that a demo is generated for each theme. This will work with most themes that require only a basic setup, but at least some of my themes have custom variables in the config file and/or the user needs to copy files in the data folder to get their Hugo site running.

The current analytics approach loads the old GA snippet near the bottom of the page. This approach was originally created before browsers could use the async attribute to download and run scripts in parallel without blocking the parser. Because Hugo internal templates provide the async tracking snippet we should use it as it helps with dogfooding.

PR to follow.

It happens not only in my project but also in other demo sites.
And this issue makes some "cors" issue on my project exampleSite.

The following is from the report of the latest deploy of the Hugo Themes website on Netlify:

1 out of 2 header rules could not be processed. Check your site’s /_headers file for verification. You can learn more in the docs, or test your rules in the Netlify playground.

In /_headers:

/* */

It seems that the problem is located at: https://github.com/gohugoio/hugoThemesSite/blob/master/static/_headers#L1

Can someone more knowledgeable than me look into this?

Thanks.

The site is down, or incorrect, in either case, it is not available when I try to browse there from the repository link at the top.

I wanted to browse Responsive themes on Android or iPhone.
Both just show all tags between Modern(12) and Widget(6).

It is impossible to scroll up or down and therefore one cannot select Responsive
or respectively any other tags outside of the range mentioned above.

Namely between the Sublime Hugo Theme and Slate

At https://themes.gohugo.io if I look at the sidebar, it says it has 7 themes with the docs tag, but if I click in the link ( https://themes.gohugo.io/tags/docs/ ) it shows only 4.

This probably happens with more tags...

refs gohugoio/hugo#4537

Hi, @bep 👍

themes.gohugo.io seems to be down

It doesn't throw any error but the page is blank.

On mobile, when the mobile menu is open and you touch the screen and begin to scroll when you release your finger the sidebar-menu gets display none. The JS could use some attention and refactoring.

This involves some PR openings ...

• See Deprecated errors when running this site
• Fix theme, bump min_version => 0.14 and create PR

See gohugoio/hugo#1172

@bep

I have been testing Hugo Themes with Goldmark and I have noticed that if a theme has a link in its README like so:

[Live Demo here!](https://<some-url>/)

Then the link is output as above i.e. (it does not become Live Demo here!).

In the config of the ThemesSite should we enter the unsafe parameter for Goldmark or not?

Steps to reproduce:

1. Open any theme.
2. Click on "demo" button.
3. Observe the error in the URL of the demo page.

Screenshot:

So it looks prettier when shared.

/cc @digitalcraftsman

Looks like the links to the theme images are broken on the landing page