Hugo-clarity theme should ultimately align with Clarity 4.0.0.

I am running hugo-clarity locally and receiving the following errors. I did clear the resources directory.

kevinbreit.net [new_theme●●] % hugo server -D
Building sites … ERROR 2020/08/03 16:35:01 render of "page" failed: execute of template failed: template: _default/single.html:24:6: executing "main" at <partial "sidebar" .>: error calling partial: "/Users/kbreit/Documents/Programming/kevinbreit.net/themes/hugo-clarity/layouts/partials/sidebar.html:35:45": execute of template failed: template: partials/sidebar.html:35:45: executing "partials/sidebar.html" at <first $numberOfTagsLimit>: error calling first: both limit and seq must be provided
ERROR 2020/08/03 16:35:01 render of "page" failed: execute of template failed: template: _default/single.html:24:6: executing "main" at <partial "sidebar" .>: error calling partial: "/Users/kbreit/Documents/Programming/kevinbreit.net/themes/hugo-clarity/layouts/partials/sidebar.html:35:45": execute of template failed: template: partials/sidebar.html:35:45: executing "partials/sidebar.html" at <first $numberOfTagsLimit>: error calling first: both limit and seq must be provided
ERROR 2020/08/03 16:35:01 render of "page" failed: execute of template failed: template: _default/single.html:24:6: executing "main" at <partial "sidebar" .>: error calling partial: "/Users/kbreit/Documents/Programming/kevinbreit.net/themes/hugo-clarity/layouts/partials/sidebar.html:35:45": execute of template failed: template: partials/sidebar.html:35:45: executing "partials/sidebar.html" at <first $numberOfTagsLimit>: error calling first: both limit and seq must be provided
ERROR 2020/08/03 16:35:01 render of "page" failed: execute of template failed: template: _default/single.html:24:6: executing "main" at <partial "sidebar" .>: error calling partial: "/Users/kbreit/Documents/Programming/kevinbreit.net/themes/hugo-clarity/layouts/partials/sidebar.html:35:45": execute of template failed: template: partials/sidebar.html:35:45: executing "partials/sidebar.html" at <first $numberOfTagsLimit>: error calling first: both limit and seq must be provided
Built in 165 ms
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:24:6: executing "main" at <partial "sidebar" .>: error calling partial: "/Users/kbreit/Documents/Programming/kevinbreit.net/themes/hugo-clarity/layouts/partials/sidebar.html:35:45": execute of template failed: template: partials/sidebar.html:35:45: executing "partials/sidebar.html" at <first $numberOfTagsLimit>: error calling first: both limit and seq must be provided

In the README, there is this text:

Going by the above 👆🏻 reason, we recommend adding custom css and js via this custom sass file and custom javascript file.

But the custom javascript link to: https://github.com/chipzoller/hugo-clarity/blob/master/assets/js/_custom.js gives a 404 error.

If possible, please document how to add javascript files to a blog using this theme, such that they end up in the bundled JS file.

The front matter of the post archetype has a parameter named "featured" described as follows:

featured: false # Sets if post is a featured post, making appear on the home page side bar.

Setting this parameter to true does not cause the post to appear in the side bar. To make the post appear in the "Featured Posts" section of the sidebar a tag with name featured is required.

I believe this is because in the sidebar.html the code is looking at tags instead of parameters for creating the list of featured posts:

<h2 class="mt-4">Featured Posts</h2>
<ul>
{{ range .Site.Taxonomies.tags.featured }}
 {{- if ne $title .Title }}
  <li>
    <a href="{{ .Permalink }}" class="nav-link">{{ .Title }}</a>
  </li>
{{- end }}
{{ end }}
</ul>

Note that even with the featured parameter set to false, if the tag exists the post is show in the side bar.

Hello and thank you for this amazing theme.
I'd like to ask 3 questions I couldn't find an answer for in the documentation:

1. I'm trying to keep posts and their resources (images, attachments, ecc) within the content folder, leveraging page bundles. One thing I noticed, the thumbnail image path apparently always points to the static folder. I couldn't manage to keep all the post's content within the same post folder "/content/post/2020-10-10-post-title-folder/"
   is there a way to do so? or am I missing something? what would be the best practice in terms of content management?

2. what would be the best way to customise the theme (color scheme, fonts, ecc)

3. I noticed the theme does not have "reading time" for articles and internal search option to search through the posts. I wonder a scenario where I have hundreds of posts in my blog and and I want to search for a word or a phrase. How would one achieve this?

Thanks and Regards,
Nicola

https://inspiring-jang-56bfc9.netlify.app/ example.

Hi,

Having played around with the theme for a few days, I have some usability suggestions:

1. In dark mode, I think the text colour of #FFFFFF can become a bit straining on the eyes. In clarity, the predominant text colour for dark mode is #ADBBC4, and I think making this the default (or making it configurable) would be an improvement.
2. When highlighting lines in a code fence with line numbers enabled, the line numbers are extremely difficult to read because the colours of the highlight and the line number are too similar. This is worse when in dark mode because the code fence highlight colour is lighter, reducing contrast even further. A possible solution would be to make the line number colour on a highlighted line the same colour as the text (#FFFFFF).

Thanks for the great work with the theme, it's awesome!

ERROR 2020/08/05 11:53:04 HUGO-CLARITY theme does not support Hugo version 0.54.0. Minimum version required is 0.63.0
But i already have the latest version : hugo 0.74.3 already installed

I can't upload from github to netlify because of this error.

I have checked all the prerequisites below and I'm yet experiencing a problem

• [Yes ] Read the README.md
• [Yes] Have the extended version of Hugo installed
• [Yes ] Used the exampleSite's config.toml as a reference

Describe the bug
"Series" is not visible on the Side Bar. Categories and Tags are visible. But in the Demo URL, ont he Side Bar, Series is vivible. I tried to check various options in config.toml, but could not get to make it visible on my local version,

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Chrome 85]

I've added the following shortcode to my config.toml

Disqus shortname

disqusShortname = "anticryptography"

and the generation step does not seem to be picking it up. There is no reference in any of the posts to Disqus. Does this require more than the shortname?

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

_variables.sass has paths for fonts, icons and images with a leading ../. This assumes a particular directory structure in the rendered site. If, for instance, your blog posts have paths like posts/2020/09/01/blog-post-title, those asset paths are not going to be correct and the assets won't load.

It seems to me like these paths should be set either from the root directory (of the rendered website, not the Hugo root), or using the baseurl Hugo variable to give an accurate reference to the assets.

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Firefox 80.0.1

Hello,
I have installed the last version of hugo 0.74.3 extended, and setup a new site with the clarity theme as a git submodule then copy the given exampleSite at the root.
The "Math Typesetting" page does not display math notation.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome and edge

Thanks

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

Twitter Share Link doesn't work by default.

To make it work I edited the layouts/partials/share.html and added | urlize behind the .Permalink entries.

Hi!

I'm using this awesome theme to blog via R's package {blogdown} (see example here) but for some reason all code features won't work (folding, line numbers etc). My guess is it occurs because of code block with rmarkdown are enclosed like

<pre class="r"><code>
## code goes here ##
</code>"

What should I change in code.js, _syntax.sass or elsewhere to enable r class and get it working?

obs.: .md theme's examples renders just fine

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

I tried to install this theme by following this procedure:

hugo new site mysite
cd mysite
git init
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
cp -a themes/hugo-clarity/exampleSite/* .
hugo server

but immediately after executing hugo server I got the following error message:

$ hugo server
Start building sites …
ERROR 2020/10/23 23:52:10 Failed to get JSON resource "https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BGvuInzyFAe/&maxwidth=640&omitscript=true": Failed to retrieve remote file: Bad Request
Built in 568 ms
Error: Error building site: logged 1 error(s)

Desktop (please complete the following information):

• OS: Windows 10 Version 10.0.19041.572
• hugo version: Hugo Static Site Generator v0.76.2/extended windows/amd64 BuildDate: unknown
• hugo-clarity: commit f59e0e1

to get it to work locally on my mac i had to disable the data integrity lines in baseof.html

When a post in recent and featured list is viewed, it is filtered out of the recent and featured list. I think it would make more sense to keep these two lists consistent.
Thank you for your great work.

Hi,

Firstly, awesome theme!

I've noticed that if you modify or remove the following code in footer.html: <span class = 'year'></span>, it breaks the links menu in the header. The links menu no longer folds out and will act as a home button when you click it.

I've been able to validate this locally by commenting out that part of the line (or the entire line).

Figuring out why this is happening is beyond my skills with Hugo but I wouldn't expect an edit in the footer to break something in the header, so it took a little while to track down.

draft = true is a valid post configuration.

this is used when writing a post but not having it generated with hugo build process. when draft = true the page is not rendered for preview on localhost:1313

this was tested in examplesite

Hello,
Lets say I want to use a different selfmade icon like I don't want linkedin and maybe want an email icon. How can I do it.

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

Setting the isMultiLingual site variable to 0 in the config.toml does not cause the Language selection nav to be hidden (or not rendered). Should this be expected behavior? The nav.html file contains a check if {{ if .Site.IsMultiLingual }}, Should the language navigation be disabled another way?

Desktop (please complete the following information):

• OS: Windows 10 w/ WSL running Hugo on Ubuntu 20.04
• Browser: Edge v 87.0.656.0 and 85.0.564.63

Hi,
I think, we should be able to define default colour mode ( light or dark ) from config.toml
thank you for this theme.

Apologies if I'm missing something basic here but seems like the getting started Option 1 steps are not correct in README.md

Currently the cp command here results in a exampleSite directory being copied to base dir of your new site. This doesn't work as expected.

hugo new site yourSiteName
cd yourSiteName
git init
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
cp -a themes/hugo-clarity/exampleSite/ .

When I did the following it does work as expected.

cp -a themes/hugo-clarity/exampleSite/* .

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

It would be great to support this

Right now, they come out like this:

I found that this theme contains different coding styles about HTML element property.

<!--no spaces delimiter-->
<meta property="foo" content="bar" />

<!--with spaces delimiter-->
<meta property = "fizz" content = "buzz" />

According to the standard, it doesn't matter. However, it is better to use the same coding style. So which one should be used when making a PR?

References:

• Using spaces before and after the = sign of HTML element attribute

Dear author,

Thank you so much for this amazing theme. It would be great if you please provide the setting on config file for adding the the link of Sign up form provided by mail-chimp.

The requested setting is provided by another hugo theme.

The function {{< highlight html >}} for code blocks in the source file shows an error on my webspace when I move the mouse pointer over a code box (see my webside). It does not matter which browser (e.g. Firefox or Chromium) I use, the error message appears on both browsers.

But if I call this page locally with the built-in webserver of hugo, no error message appears.

The page is available online at:
https://bluelupo.info/post/aktuelle-betaversionen-von-firefox-nutzen/

Here you can see the error.

regards
Michael

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

Unless I'm misreading option 1 or missing something, following its steps will create the following directory structure:

yourSiteName
yourSiteName/config.toml [default new site config]
yourSiteName/exampleSite
yourSiteName/exampleSite/config.toml [Hugo Clarity's exampleSite config]
yourSiteName/themes/hugo-clarity

Thus when you run hugo server, you'll still be in the root project folder (yourSiteName above) and it will use the default new site config to render the site, not the example site's. If you cd into exampleSite and try to run hugo server, it'll complain that the theme isn't in a subdirectory.

I think instead of
cp -a themes/hugo-clarity/exampleSite/ .
perhaps you meant
cp -a themes/hugo-clarity/exampleSite/* .
?

Additionally, as a final step before running hugo server I would suggest instructing users to edit the config.toml file and change the baseurl, or CSS files will be broken.

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser Firefox 80.0

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

When sharing the root of a site, there is nothing but the title and an image:

The meta tags for description are empty:

<meta property = "og:locale" content = "en_US" />
<meta property="og:type" content="website">
<meta name="description" content="">
<meta name = "twitter:card" content = "summary" />
<meta name = "twitter:creator" content = "@adriandotgoins">
<meta name = "twitter:title" content = "" />
<meta property = "og:url" content = "https://adriandotgoins.com/" />
<meta property = "og:title" content = "" />
<meta property = "og:description" content = "" />
<meta property = "og:image" content = "https://adriandotgoins.com/images/profile-picture-250px.png" />

I was able to fix this with an if/then block, but that may not be the correct way:

{{- if .IsHome }}
<meta property="og:type" content="website">
<meta property = "og:title" content = "{{ $site }}" />
<meta name = "twitter:title" content = "{{ $site }}" />
<meta property = "og:description" content = "{{ .Site.Params.description | truncate 160 }}" />
<meta name="description" content="{{ .Site.Params.description | truncate 160 }}">
{{- else }}
<meta property = "og:description" content = "{{ $summary }}" />
<meta property = "og:title" content = "{{ $title }}" />
<meta property="og:type" content="article">
<meta name="description" content="{{ $summary }}">
<meta name = "twitter:title" content = "{{ .Title }}" />
{{- end }}

This allowed me to use a description field under [params] in config.toml that gets picked up on the home page.

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser Firefox 80.0

social usernames for github/linkedin/twitter in header are missing from config.toml

I tried to run the project files using the instructions from readme page. but no luck in finding the same look and feel as mentioned.

Please suggest
below screenshots for reference

I have checked all the prerequisites below and I'm yet experiencing a problem

• [ x] Read the README.md
• [x ] Have the extended version of Hugo installed
• [ x] Used the exampleSite's config.toml as a reference

Describe the bug
When an image caption text contains double quotes, the rendered output breaks at that point. Removing double quotes shows all the text as expected.

Hi,

I have an issue where the theme seems to break when deploying my site with netlify. I'm using the latest version of the theme and Hugo 0.75.0 extended. The site and theme render fine when running locally. However when built via netlify, the build succeeds but the site looks like this: https://5f60b89d250b6d000748b738--vigilant-raman-d8e917.netlify.app/

I have not had this issue with any other themes including the theme I have reverted to, which is why I'm raising it as an issue as the problem seems to be specific to hugo-clarity. I'm not sure where to look next. Any thoughts or ideas?

As the title states I think it might be good to user {{ .Site.Copyright }} for the footer by default.

As a newbie to hugo I had to take out the trusted grep -ri hammer to find where the copyright notice is defined in the theme.

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

Preview: https://razonyang.com/en/

Desktop (please complete the following information):

• UC Browser V13.3.0.1302(Android)
• MicroSoft Edge(Windows 10)

Btw, is the theme not compatible with any version of IE?

I'm getting 404 for everything in the icons/ directory after uploading it to my shared webspace. Turns out there is a name clash, as a icons/ directory in the root has a special meaning in some apache default confits. See https://electrictoolbox.com/apache-icons-directory/ or https://www.hosteurope.de/faq/webhosting/hochladen-von-webinhalten-ftp/verzeichnisnamen-mit-besonderer-funktion/ (german, sorry) for details – or google for something like ' "icons" directory webserver 404 '.

Hence please consider renaming the static/icons/ to something else.

If setting the date key in the post's frontmatter to a day in the future, Hugo won't render the page. Is this something we can allow? Main use case I can forsee is when someone wants to use a CD platform to publish a post on a given timer and flip draft from true to false simultaneously.

I have checked all the prerequisites below and I'm yet experiencing a problem

• Read the README.md
• Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

I really liked the hugo-clarity theme and would like to use for my blog but is there a way or global variable which i can set, so that the default theme layout is always light.

In the current setup it always defaults to dark theme and I somehow felt it light theme should have be the default one.

I know there has been an enhancement request to make it a part config.toml but for the time being if can be somehow controlled via variables.sass or base.sass?

Desktop (please complete the following information):

• OS: [e.g. Ubuntu]
• Browser [firefox 80.0.1]

Just to keep things tidy, here is a Feature Request for this PR: #21 #39

My site has all clickable links (internal and external) opening in a new tab. I'm fairly certain this has something to do with a URL setting like baseurl, but different options I have tried are not yielding any different results. Here is the first few lines of my config.toml file.

# set `baseurl` to your root domain
# if you set it to "/" share icons won't work properly on production
baseurl = "http://anticryptography.io/"  # Include trailing slash
title = "Anticryptography"
author = "Shawn Masters"
copyright = "Copyright © 2014–2020, Shawn Masters; all rights reserved."
canonifyurls = false
paginate = 10
theme = "hugo-clarity"

I have checked all the prerequisites below and I'm yet experiencing a problem

• [X ] Read the README.md
• [X ] Have the extended version of Hugo installed
• Used the exampleSite's config.toml as a reference

Describe the bug

Regardless of what browser I use (Firefox, Brave, Edge, etc...) after building and deploying site into production, the toggle switch for Light/Dark mode ceases to work. I have no issue with localhost:1313, but once I upload the files to my server (https://mcalynn.com/), clicking the "sun" (☀) does nothing. No dark mode enabled.

C:\hugo>hugo env
Hugo Static Site Generator v0.74.3/extended windows/amd64 BuildDate: unknown
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.14.3"

C:\hugo\mcalynn>c:\hugo\hugo.exe server -v -w -t hugo-clarity
INFO 2020/08/31 14:06:23 No translation bundle found for default language "en"
INFO 2020/08/31 14:06:23 Translation func for language en not found, use default.
INFO 2020/08/31 14:06:23 i18n not initialized; if you need string translations, check that you have a bundle in /i18n that matches the site language or the default language.
INFO 2020/08/31 14:06:23 Using config file:
Building sites … INFO 2020/08/31 14:06:23 syncing static files to C:\hugo\mcalynn
WARN 2020/08/31 14:06:23 The []interface {} data from 'menu.yaml' overridden by higher precedence []interface {} data already in the data tree
WARN 2020/08/31 14:06:23 The []interface {} data from 'social.yaml' overridden by higher precedence []interface {} data already in the data tree

               | EN

-------------------+-----
Pages | 60
Paginator pages | 1
Non-page files | 1
Static files | 64
Processed images | 0
Aliases | 32
Sitemaps | 1
Cleaned | 0

Built in 159 ms
Watching for changes in C:\hugo\mcalynn{archetypes,content,data,layouts,static,themes}
Watching for config changes in C:\hugo\mcalynn\config.toml, C:\hugo\mcalynn\themes\hugo-clarity\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

In custom CSS and JS in the README you explain how to add Sass and JS to the theme, and how to override color variables: By editing files within the Hugo Clarity theme.

I appreciate that you created the custom.sass and custom.js files.

But modifying these files presents a problem: You either have to choose to continue using the theme as a git submodule (in which case you can't track modifications) or you have to commit the theme directory as a regular part of your own git repo (in which case you can't update the theme as a submodule).

Changing the color variables is worse: Now you're hacking the theme files themselves, meaning you have the problem above and if you ever update the theme, there will be merge conflicts.

Is there a way to provide support within the theme for custom Sass, JS and variable files within the parent project's directory? Perhaps in an assets directory of its own?

While it's true that right now you could override the CSS or JS in the parent project's directory, you can only do it by loading additional CSS/JS files (as you point out in that section of the README). And the only way to override the color variables -- because they're used throughout the theme's Sass files -- would be to replicate all the rendered CSS that those color variables touch.

What do you think?

I want to change the name of the theme to my website name? How?

Thansks.