gohugoio / hugothemessite Goto Github PK
View Code? Open in Web Editor NEWThe source for https://themes.gohugo.io.
Home Page: https://themes.gohugo.io/
License: Apache License 2.0
The source for https://themes.gohugo.io.
Home Page: https://themes.gohugo.io/
License: Apache License 2.0
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.
So it looks prettier when shared.
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.
Not sure if this is the right place to report this, but can't access themes.gohugo.io anymore. Shows a 404.
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:
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.
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!
The refine this page link in the menu links to non-existing pages on Github.
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:
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):
Then we can add the necessary params one by one later.
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.
In stead of creating a lot of small tasks in separate issues, lets try to agree on a more compact list here.
readme.md
vs README.md
etc. -- get the themes to be uniform. Much easier in the long run.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.
Look in the upper right corner.
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.
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?
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
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.
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:
@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.
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.
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
).
https://themes.gohugo.io/tags/
Issues:
Non-issue but an improvement suggestion: Show the theme description too, along with the title.
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:
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.
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.
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.
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
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:
theme.toml
and simply <a href="#feature">
to jump down the page on the hugo theme site theme.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
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.
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?
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.
Maybe it would be better to change the link here from https://github.com/gohugoio/hugo to https://github.com/gohugoio/hugoThemes
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.
Originally posted at gohugoio/hugoThemes#695.
That is what is happening. It gets larger as the screen gets wider.
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.
Currently this is used in the Hugo Showcase but not in Hugo Themes.
This involves some PR openings ...
The names in theme.toml
are ignored and, I guess, the names of the theme directories are used instead for some reason? Why?
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.
I would be nice to add a filter to find themes easier. The following filter options could be useful:
Those could be defined in the theme.toml
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.