zjedi / hugo-scroll Goto Github PK

First off compliments on the template! I love it! However I would love to apply my own branding (colours) so it would be awesome to support CSS overrides. I am more than happy to submit a PR that implements a CSS override option if you are open to that!

I could imagine using the head.html to add an override.css in case the parameter is specified. We could even use the asset bundling option Hugo provides to combine CSS files. Feel free to assign to me and let me know if you want me to pick it up.

Hey Jan,

I really love your template and use it quite often to create quick websites, thanks a lot.

Yesterday I experimented a bit with videos in the header (instead of the image or plain color background) and added support for this in this commit:

thomasjungblut@126fbde

Would you be interested to include this in here? Happy to contribute this back.

I've been trying to have one of the content blocks display text in 2-3 columns, but for the life of me I can't figure it out.
I'm a novice css/HTML user so some help would be appreciated.

I've been trying to implement the solution listed here but can't the result I'm looking for.

I have a 3 column table on the page which is defined like this

||||
|---|---:|---:|
<data here>

While columns 1 and 2 are fine in the 3rd column before the last character a newline is added and I am not able to define the width of the columns so it won't add it.
E.g. if I write 50 m into the last column everything is fine but if I write a number there that is bigger than 99 the last character will be on a new line which then doesn't look good.
120 m will be written like this on screen
120
m

I want to build a private project using the template Hugo Scroll on Clodflare Pages. The bild fails with the following error:

2022-10-06T17:32:37.244171Z	Cloning repository...  
2022-10-06T17:32:38.619217Z	From https://github.com/txxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  
2022-10-06T17:32:38.619768Z	 * branch            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-> FETCH_HEAD  
2022-10-06T17:32:38.619977Z	  
2022-10-06T17:32:38.670751Z	HEAD is now at 7142189 Correct URL in config.toml
2022-10-06T17:32:38.671252Z	
2022-10-06T17:32:41.459058Z	Submodule 'themes/hugo-scroll' (https://github.com/janraasch/hugo-scroll.git) registered for path 'themes/hugo-scroll'
2022-10-06T17:32:41.459630Z	Cloning into '/opt/buildhome/clone/themes/hugo-scroll'...
2022-10-06T17:32:41.459830Z	Submodule path 'themes/hugo-scroll': checked out '989db1748409e8beaf13b2b7583d45c9084d71e2'
2022-10-06T17:32:41.459954Z	
2022-10-06T17:32:41.486952Z	Success: Finished cloning repository files
2022-10-06T17:32:42.129166Z	Installing dependencies
2022-10-06T17:32:42.140494Z	Python version set to 2.7
2022-10-06T17:32:45.485315Z	v12.18.0 is already installed.
2022-10-06T17:32:46.707748Z	Now using node v12.18.0 (npm v6.14.4)
2022-10-06T17:32:46.948974Z	Started restoring cached build plugins
2022-10-06T17:32:46.964782Z	Finished restoring cached build plugins
2022-10-06T17:32:47.444686Z	Attempting ruby version 2.7.1, read from environment
2022-10-06T17:32:50.930506Z	Using ruby version 2.7.1
2022-10-06T17:32:51.288071Z	Using PHP version 5.6
2022-10-06T17:32:51.452382Z	5.2 is already installed.
2022-10-06T17:32:51.478741Z	Using Swift version 5.2
2022-10-06T17:32:51.479062Z	Installing Hugo 0.54.0
2022-10-06T17:32:52.181461Z	Hugo Static Site Generator v0.54.0-B1A82C61A/extended linux/amd64 BuildDate: 2019-02-01T10:04:38Z
2022-10-06T17:32:52.184860Z	Started restoring cached go cache
2022-10-06T17:32:52.203111Z	Finished restoring cached go cache
2022-10-06T17:32:52.346416Z	go version go1.14.4 linux/amd64
2022-10-06T17:32:52.360595Z	go version go1.14.4 linux/amd64
2022-10-06T17:32:52.363514Z	Installing missing commands
2022-10-06T17:32:52.363784Z	Verify run directory
2022-10-06T17:32:52.363937Z	Executing user command: hugo
2022-10-06T17:32:52.526656Z	Building sites … Total in 110 ms
2022-10-06T17:32:52.526952Z	Error: Error building site: failed to render pages: render of "home" failed: "/opt/buildhome/repo/themes/hugo-scroll/layouts/index.html:4:50": execute of template failed: template: index.html:4:50: executing "main" at <where $sections "Dra...>: error calling where: Draft is neither a struct field, a method nor a map element of type resource.Resource
2022-10-06T17:32:52.533920Z	Failed: build command exited with code: 255
2022-10-06T17:32:53.43732Z	Failed: an internal error occurred

I think the problem is within the theme.

Regards

Thomas

I'm new to Hugo and hope I made a dumb mistake, but everything renders beautifully when I run localhost, but when I push the public directory to my destination, it loses all formatting. This is the case for both S3 and for Dreamhost. Why would this be?

I've updated my page to the newest version of the plugin
https://www.aikido-entspannung.de/

Local development works fine, but the generated page seems to be missing the stuff around .... :(

I've tried reinitialising the project and submodule with no success.
Config.toml is basically a copy of the one from exampleSite. The strange thing is that local development via:
hugo server
works fine and shows the page as expected with red background.

If I generate the page for deployment via:
hugo --gc --minify --enableGitInfo
and upload it to my host the page is broken.

Do you have any hints on how to fix this?
(Page worked perfectly well with the last version from Jan before)

Thanks

Also implement side menu visual guard to improve readability

External links should be

• available from the main menu #99
• available from content/anywhere #101
• allow opening in new tab #101
• be visually distinguishable #105 adding fa icon
• documented #105 exampleSite and readme

Using the default demo and 1200x1600 screen, the second of four elements is still active when reaching the bottom. Since when reaching the bottom of the page the active class is cleared for the third element, both second and fourth are active.

I suggest replacing line 86 of index.js:

$(".fn-item[item_index='" + (l - 1) + "']").removeClass("active")

With:

$(".fn-item").removeClass("active")

Is it possible to add a page separate from the homepage for blog posts? I setup Netlify CMS without issue and created a few posts. They end up in content/blog/some.md. Is there a method to modify the theme to have an additional page to display those posts in a traditional blog format?

Hi,

I really love your theme I'm making a website for my wife's store and wanted to add an Instagram feed.
I've done a small adjustment to the index.html to make it possible to add an Instagram feed to a post.

<main class="content" role="main">

    <div class='fixed-nav'>
    </div>
    {{ range $index_val, $elem_val := $sections }}
    <div class='post-holder'>
        <article id='{{ anchorize .Title }}'
            class='post {{ if eq $index_val 0 }}first{{ end }} {{ if eq (add $index_val 1) (len $sections) }}last{{ end }}'>
            <header class="post-header">
                <h2 class="post-title">{{ .Title }}</h2>
            </header>
            <section class="post-content">
                {{ .Content }}
                {{ if isset .Params "insta" }}
                {{ partial "instafeed.html" . }}
                {{ end }}
            </section>
        </article>
        <div class='post-after'></div>
    </div>
    {{ end }}
    <div class='post-holder'>

    </div>
</main>

And added an instafeed.html to render the instafeed, which uses https://profilepageimages.usecue.com to fetch your Instagram images. You can go upto 25 images and it's configurable via the font data in the .md files. Which would look something like:

title: 'Kleding'
weight: 2
header_menu: true
insta: true
instautl: https://profilepageimages.usecue.com/{username}
instaamount: 3

Would you be interested in adding this as a default feature, I could make an mr if so.
A link to a preview website: https://gjvanengelen.gitlab.io/lemon-hill/

BR Gerard

Would you consider replacing the rather old FontAwesome 4.7 icons with the more recent ForkAwesome / accept a PR that replaces it?

https://forkaweso.me/Fork-Awesome/

For example, I could then use the Mastodon icon.

The current CSS has a syntax error:

https://github.com/janraasch/hugo-scroll/blob/1d92c6b79b97577f48cb88d28c08f7bc75ccb000/static/css/screen.css#L417-L422

This is not valid CSS nesting (which is not supported by any browser anyway).

Should probably changed to this:

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
    background: transparent;
}

Hi,

I want to create an FAQ section on a seperate page using your theme.
The page is all there but I want to use something like this:
`

To have a list of questions which can be opened by the user if they have the same question.

But if I add it it isn't rendered on the page, is there something missing or another way to add this?

Even when you scroll till the end of the page, contact nav-item is not activated:

A suggestion: to make the theme more welcoming to academics looking for a more stylish personal website than other Hugo theme options, consider making it easy to include Academicons.

I assume it doesn't take many steps to do, if you already know how. The thing is, of course, learning how!

On a related issue, perhaps it is worth mentioning something about font awesome icons too? For example, are are the free ones built-in and ready to incorporate with the right code, like you do in themes/hugo-scroll/index.html? Or does the user need to take additional steps to be able to make use of other icons?

This is a very minor issue but I just wanted to let you know that the <hr> separator lines show in an odd section (with colored background) but not on an even one.

I solved it with this small addition in my custom_header.html

     hr { border-top: 1px solid #888888; }
     .odd hr { border-top: 1px solid #efefef; }

Before the latest version updates I used footer's copyright to include other links and my config.toml looked like that:

[params]
    # A "copyright"-line to be added at the bottom of the page.
    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
    copyright = "© 1850-2023 Author / [Help](/help) — [Login](/login)"

That rendered properly.

Now the page does not render any markdown anymore, thus I'm unable to use this mechanism to add footer links such as legal stuff.

Is there a workaround (without patching my partial file in my themes directory)

Thanks

The menu is not well visible against dark sections, readability should be preserved somehow.

I have a site with a section that will be temporary, but should be added at the top of the site. Essentially, an announcements section. However, adding this temporary section to the top will change which sections below it are odd vs even, which completely throws off all the styling that I want.

I was hoping that the .odd class assignment was handled in the html file, which would mean it could be controlled by an option in the config file. This would be great, because it would mean I could just enable the setting and the section when needed, and disable them both when not needed. But alas, it's assigned using JavaScript in index.js.

Is there any way to get around this and make it more accessible/flexible?

Following

• https://www.brycewray.com/posts/2022/06/get-good-git-info-hugo/
• https://stackoverflow.com/questions/57141806/how-can-i-get-gitinfo-in-hugo#57152994
  it should be rather easy to integrate a gitInfo into the theme.

Personally I'd prefer a git hash that is shown if
--enableGitInfo is used or config.toml contains
enableGitInfo=true
similar to the link shown depending on the configuration option hidedesignbyline.

Any thoughts on that? (Before I start with a PR) :)

Thanks

Currently, the "title" is used to display in the navigation menu.

I want to use a larger page/section title, but would like to use a shorter text for the menu. For example, I have a "now" page which I'd like to title "What I'm doing now", but I'd like the navigation (and the anchor) to show "Now" and the anchor link to be #now.

This is similar to how standard Hugo menus work.

https://gohugo.io/content-management/menus/

sample markdown header:

---
title: What I'm doing now
name: Now
weight: 20
header_menu: true
---

Hi
Great template! How can I add a custom logo above the header_headline?
Thanks!

Hi,

I just started experimenting with hugo-scroll and copied the example site. If I change anything on the site while hugo server is running, I end up with just the title, an empty menu and no sections. If I stop hugo server and restarted again the page looks fine including my changes.

Any idea what is going wrong here (maybe I am doing it wrong...)

Best regards
Lesstat

Hi,
First of all thanks for your theme HuGoScroll.
After publish my pages with Hugo and your themes I 'have the following error with Firefox on my web site : downloadable font: no supported format found (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:5) source: (end of source list) .
All Icones (from Font-awesome) on the pages are not dispayed and replaced by a square.
Have you an idea of that come from ?
Regards,
JC

Hi Jan,

i try to setup a new Site with your wonderfull Theme.
Unfortunately i can't get it to work.
Hugo render the homepage successfull but do not find the subpages under the homepage - Subdir.
Hugo renders the Pages but {{ $sections := $headless.Resources.ByType "page" }} get an empty array.

Any suggestions?

If you like, you can find the project under github

thanks in advance
Oliver

Hello! I'm trying to use the hugo-shortcode-gallery together with this theme, but I seem to be running into the same issue as mfg92/hugo-shortcode-gallery#19 which seems to point to a theme incompatibility.

The error I'm getting is gallery.justifiedgallery is not a function

Sadly I'm quite new to the whole hugo-thing so I'm not exactly sure what the fix would be in this case. Any pointers?

You should update your shipped jQuery version to a more recent one due to security issues with version 1.11.3.

Hi!

I'd like it if the theme would deliver the Google Fonts and jQuery locally. You can change this manually in the source code, but I think it would be better if you could simply specify this via an option in config.toml.

Unfortunately, I don't know how to modify the source code to make it configurable.

The lines in question are 24 and 29 in head.html for the Google Fonts. jQuery is loaded in line 12 in baseof.html.

ATB
Torsten

Thanks for the great theme that I integrated successfully under Ubuntu, but if I check out the project on a M1 and run npm install I'm unable to launch the local hugo server and get the following error message instead:

$ hugo server
Start building sites …                                                      
hugo v0.110.0+extended darwin/arm64 BuildDate=unknown
  Error: Error building site:                                                 
  "content/homepage/angebot.md:18:2": failed to                               
  extract shortcode: template for shortcode "icon" not found                  
  Built in 86 ms           

How can I debug this issue further or use my project under M1?
Somehow the fontawesome icons do not get recognized.

Thanks for any hint

When I add multilanguage support in the config.toml like

[languages]
[languages.de]
title = "Test Deutsch"
weight = 2

[languages.en]
title = "Test English"
weight = 1

and try to start the hugo server I get the error message:
Error: Error building site: "/home/content/impressum.de.md:13:1": failed to extract shortcode: template for shortcode "icon" not found

As soon as I remove the language section is works again. Any idea, what I am doing wrong?

Compared to the home page, additional pages are quite bare e.g. https://janraasch.github.io/hugo-scroll/services/

Obviously this is a question of taste, so that may be how you intend it to look.

From my perspective, compared to the home page, the change in look is substantial. Personally, I'd like additional pages to look more like the home page.

I guess that means I now need to learn how Hugo actually works 😃

Hello Jan, what seems weird is that the final build, after running the Hugo command, the pubic folder is produced, but the template doesn't get applied. When rendering in development with Hugo server, the template gets applied perfectly.
Can you suggest what I am missing here?

I even deployed my site to Netlify and hosted my files on GitHub.

The link to Netlify is https://priceless-shockley-4192a7.netlify.app

Link to GitHub repo: https://github.com/Sidra-Kazmi/makeyourfuture.git

The change introduced #48, while generally a step in the right direction, unfortunately broke my non-latin site, because the local fonts are only in latin set, which does not contain some Czechs letters (such as ě,š,...) and I am sure many others from other languages.

I could submit a PR which would include the full font character set, but that would of course increase the size of the font files.

Alternatively, there could be some configuration setting to select the desired sets, but that will be quite complicated to do and use.

Or I can do that locally on my site, replacing the fonts.css with my own version and add the proper font files.

What do you think, @janraasch ? BTW: Thank you so much for creating the theme and sharing it with us.

When running a site generated from this theme through Google Lighthouse it gives a warning about the unordered list structure that it might be problematic for some screen readers because the span to render the icon is in between the list elements. I have a small change to the template to render it in a compliant way. Are you open to a pull request for the change?

I am trying to build my site with Netlify. I want to make sure everything is working fine, before I release it.

In local builds, the CSS is fetched relative from the server root. But when I look at the deploy preview, it's CSS is pointing to the absolute path from the baseURL. Instead, it should be relative in this case to make it work.

https://github.com/janraasch/hugo-scroll/blob/9a99a8fb3afa167cd3ac66bc58c14069f5a848d2/layouts/partials/head.html#L22

repo: https://gitlab.com/metbril/home2020/

netlify deploy preview: https://stupefied-mcclintock-1d5947.netlify.app/

generated html:

<link rel="stylesheet" href="https://robertvanbregt.nl/css/screen.css">

If the content of the page is too short, the footer doesn't stay at the bottom of the browser window.

Your demo page does not have this short pages but you can reproduce this if you visit this demo page and reduce the zoom level to something like 30%.

I'm no expert on CSS but maybe something like this might help?

• Stackoverflow - place footer at bottom only if page is "short"
• Stackoverflow - viewports

Hi there, in the config.toml the themesDir = "../.." seems to be causing confusion or probably I am confused. When I try to test locally, only a red page displays. Also, there is an error when starting the Hugo server
On Windows it says;
Error: module "hugo-scroll" not found; either add it as a Hugo Module or store it in "C:\\".: module does not exist

On Mac it errors out
Error: module "hugo-scroll" not found; either add it as a Hugo Module or store it in "/Users/Amr".: module does not exist

And if I place the Hugo Module which I think is referring to the theme, on the C: drive on Windows and on /Users/Amr on Mac, it doesn't give any error but then there is a blank red page.

I also tried putting in the path where the hugo-scroll theme is placed in my website folder and though there are not errors there is only this blank red page. themesDir = "C:\\Hugo\\makeyourfuture\\themes\\"

Below is what I have in the config.toml file.

baseURL = "https://createyourfuture.today/"
languageCode = "en"
defaultContentLanguage = "en"
title = "Create Your Future Today"

#This is a "one page"-website, so we do not need these kinds of pages...
disableKinds = ["section", "taxonomy", "term", "RSS", "robotsTXT"]

theme = "hugo-scroll"
themesDir = "../.."
# themesDir = "C:\\Hugo\\makeyourfuture\\themes\\"   <-- I tried this one as well, didn't work

# The "title" of your website
# title = "Jane Doe - Nutrition Coach & Chef Consultant"

[params]
    # A "copyright"-line to be added at the bottom of the page.
    # Hint: Markdown is supported in here as well. So you may e.g. add a link to your legal imprint-page.
    copyright = "© Sidra Kazmi"

    # The "description" of your website. This is used in the meta data of your generated html.
    description = "Nutrition Coach & Chef Consultant"

    # The path to your "favicon". This should be a square (at least 32px x 32px) png-file.
    favicon = "images/favicon.png"

    # These "images" are used for the structured data templates. This will show up, when
    # services like Twitter or Slack want to generate a preview of a link to your site.
    # See https://gohugo.io/templates/internal#twitter-cards and
    # https://gohugo.io/templates/internal#open-graph.
    images = ["images/cover-image.jpg"]

    # Another "title" :-). This one is used as the site_name on the Hugo's internal
    # opengraph structured data template.
    # See https://ogp.me/ and https://gohugo.io/templates/internal#open-graph.
    title = "Jane Doe - Nutrition Coach & Chef Consultant"

    # This theme will, by default, inject a design-by-line at the bottom of the page.
    # You can turn it off, but we would really appreciate if you don’t :-)
    # hidedesignbyline = true

    [params.meta]
        keywords = "some, keywords, for, seo, you, know, google, duckduckgo, and, such"
`
```

The top sticky menu for narrow scenes doesn't seem to appear on screen resolutions of less than or equal to 500px wide. If the resolution starts above this, the page is scrolled to trigger the menu and then the screen width reduced below 500px the menu stays in place and works fine. Is there a way around this?

How can I add a reference to another section in my content?

For details please check out [this section](about-me).

The above will not work unless about-me.html is a separate page.

I use the icon shortcode to display a row of linked icons only. I use this format:

[{{<icon class="fa fa-github">}}](https://github.com/metbril)
[{{<icon class="fa fa-gitlab">}}](https://gitlab.com/metbril)

When put in a row, an extra whitespace character is added after each icon. This shows as an underscore, which is ugly.

This underscore can be removed by removing the blank line in the shortcode. I will submit a tiny PR for this.

Hi Jan,

Thanks for your work on your great theme, which I'm really happy to use.

I'm very new to Hugo and my web skills are super rusty. Is this a bug in your theme? These are two examples of extraneous

As a total aside I'm building my site here. Only the home page is up so far, as I'm still working on the others.

Thanks,
Damon

This theme is pretty well geared towards small businesses. I think they would greatly appreciate a way to include testimonials. I know I would defo made use of such a feature.

Hi,

The top menu is not displayed on mobile when scrolling down.
Can you fix this or tell me how it is managed, so I can try to fix it and create a PR ?

Thanks.

Hello,

I am not quite sure, if this is an issue, but I am not able to change the color of the background (default red) oder the buttons. Could you please explain me, how I can achieve this?

Best regards!

Depending on the size of each section, it is possible that the nav-item were not property activated.

For instance, see that "Services" is activated, but "About me" is not:

I think it has to do with the decimals when doing calculations on .js

I propose to change the next line:
https://github.com/janraasch/hugo-scroll/blob/4d6f8a51e53b531e7169ea4162e19972da3de480/static/js/index.js#L95

For something like:
if (w >= Math.floor(f) && w <= Math.ceil(b)) {

WDYT, would it make sense to change from a list in contributing.md to use

• https://keepachangelog.com/en/1.0.0/ and
• https://semver.org/spec/v2.0.0.html
  to release changes?

I'm not sure about release strategies in the hugo-themes sphere, but package.json seems to have a fixed version .....