panr / hugo-theme-hello-friend Goto Github PK

Looks all fine when in local mode but when I am generating the site to upload to my server is duplicating the menu items and the dark/light mode icon is disappearing.

Just wanted to say this is a very nice looking theme. Super approachable and does an excellent job on the README. The color palette is simple and non-distracting. I had to find the demo when I saw the light bulb icon on the theme site screenshot just to click it. And it worked gloriously. Cheers.

Hello panr,

can you please add R as language in prism?

Thank you.

Is there a way to let the user click on large images and zoom them in? I'd like to work with some high-dimension image files, either as figure or cover image.

A a full-page-width image could help as well.

Thanks!

Hey there,

I'd like to customize parts of the theme. As you mentioned over in #29, this would require adding a static/style.css - which I did. When building the site, an according directory is built in public/static/style.css. Weirdly as well, though, an an empty style.css is always created upon build in the root of the public directory. Copying the contents to this empty file does have no effect.

As an end result, the page is locally built like this:

<link rel="stylesheet" href="http://localhost:1313/assets/style.css">


<link rel="stylesheet" href="http://localhost:1313/style.css">

The first link points to the default theme CSS, the second one to the empty file in the root.

What do I need to change for the default CSS to be overwritten and my adaption to be rendered correctly?

I've just started using this theme for a website, and I'm adding a few custom elements. I'd like those elements to have dark- and light-mode theming, so in imitation of how hello-friend's CSS does per-theme styling, I wrote my CSS elements like the following:

.element {
  color: var(--light-color);
  .dark-theme & {
    color: var(--dark-color);
  }
}

However, this doesn't have any effect: anything styled in this way, if they're my own CSS classes, only ever use the light mode colors. I've tried a few different variants of this, but I'm pretty unfamiliar with CSS, so I haven't gotten anywhere so far. Presumably there are some other requirements with regards to the parents hierarchy of elements styled like this. What exactly do I need to do to give my custom CSS classes dark-mode-specific styling?

I'd like to have the light mode as default. Would be possible to add a configuration parameter to set that?

Issue:

When using markdown such as the following for code blocks:

```python
print("Line one")
print("Line two")
print("Line three")
```

The first line rendered is misaligned with the following lines.

Software Used:

OS - Windows 10
Browsers - Chrome 68 and Microsoft Edge
Hugo version - 0.46

Hello @panr

I just tested your theme with the Build Script. Thank you for fixing the content of /showcase/

However now the homepage renders empty.

The culprit is due to commit b0dfb76

You have made it so that the parameter contentTypeName = "post" is required in the config.toml of the Example Site but you haven't defined it there so the Paginator Pages range renders empty now.

Can you look into fixing this?

Thanks

cc: @digitalcraftsman

Commit 7427cfa breaks tag filtering, all posts are shown also on tags/ pages. Verified that it works correctly by undoing this commit.

Tested on Hugo version 0.56.3 and 0.57.2.

The following line:

Check the original theme license for additional licensing information.

Contains a link. That link is broken. All forks containing that link will also be broken. You probably don't need that line though as the X11 license is fairly self-explanatory.

• Hey buddy, I want to add a single page for tags and count their quantity

#such as "Tag name - number"

Tag-a (12)  Tag-b( 22)

Should I create a new layout for tags then custom the css style what I want ?

TY & Sry for my bad English.

When I write a new post and I want to set a cover image for it, the image path needs to be complete from the root URL.
However, I think it would be more appropriate if the path would already be set to be the root of the current post, so you only specify the image relative to the post.
Let's make this more concrete:

Assume I have content/posts/a-great-new-post/index.md and my cover image is in content/posts/a-great-new-post/cover.png, then currently I need to set
cover: "posts/a-great-new-post/cover.png"
to make it work.

I am afraid that this will be awkward in the future if you happen to change some URLs / paths of your posts and then the cover URL will be wrong.

What I am suggesting is to make the cover be relative to the blog post, so we would set it as:
cover: "cover.png"
in this case.

What do you think?

Hi ~ thanks for this theme! I just getting started with Hugo and been linking images using the standard markdown format ![](image url from static folder) but big images are slow to load.

Then I read about Hugo's image processing and page resources, however, it doesn't work with static folder.

How can I use something like this in my blog content?

// Resize to a width of 600px and preserve ratio
{{ $image := $resource.Resize "600x" }} 

or

{{ $image.Resize "600x q50" }}

When serving the site from a path (like https://llauren.gitlab.io/kalla-mej-efraim/), the page won't render correctly, since layouts/partials/head.html tries to load /assets/style.css and /style.css directly without taking the baseUrl into account.

I suggest inserting {{ $.Site.BaseURL }} in front of the two stylesheet urls.

Apart from that, it's a really neat looking theme and i hope to be using it!

images and figcaptions are left aligned. I want to align images to center. The changes I made at css files did not affect. can someone help?

<link rel="stylesheet" href="/assets/style.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
{{ partial "inject.stylesheet.html" . }}

Line 1 and 3.

Preconditions:
Blog with one post

After upgrading to hugo 0.57.0, the front page showed the post caption, but not the summary. After clicking on "Read more", a new page opened under posts/, which looks like the proper front page from hugo 0.56.3.

One of these fixed issues could cause the problem: gohugoio/hugo#6153 or gohugoio/hugo#6154

Hey! I am using your theme to create my portfolio website. I uploaded some PDFs on "static" folder in the repository. I am trying to link these PDFs to my "courses" page, but some of them are not loading. Is there a bug? Or am I doing something wrong? I am a beginner at programming language. Thank you.

Maybe I'm missing something, but "404" page looks completely different from my other pages, it even uses "default" title instead of my own defined in config.toml.

Hi!

I love your theme and I want to use if for my personal blog, but I encountered a problem with code highlighting. I've tested some languages and it seems only a few of them are being highlighted correctly.
I have both pygmentsuseclasses = true and pygmentsCodeFences = true in my config file.
For example, python and elixir:

Is there a way to fix that?

I've added new language, but it doesn't show any link to another language. I've to manually append my url by the language code first. Is it expected?
I organize my content by folder, something like this:

content
├── english
│   ├── page
│   │   └── about.md
│   └── post
│       ├── 2019-02-24-hello-world.md
└── indonesian
    ├── page
    │   └── about.md
    └── post
        ├── 2019-02-24-hello-world.md

And I tried this configuration

baseurl = "https://blog.agung.io/"
languageCode = "en"
theme = "hello-friend"
paginate = 5
DefaultContentLanguage = "en"

[params]
  # dir name of your blog content (default is `content/posts`)
  contentTypeName = "posts"
  # "light" or "dark"
  defaultTheme = "dark"
  # if you set this to 0, only submenu trigger will be visible
  showMenuItems = 3
  # Show reading time in minutes for posts
  showReadingTime = true
  showRelatedPosts = true

[[menu.main]]
    name = "Blog"
    url = ""
    weight = 1

[[menu.main]]
    name = "About"
    url = "page/about/"
    weight = 3
    
# Language Setup
[languages]
  [languages.en]
    title = "Hello Friend"
    subtitle = "A simple theme for Hugo"
    contentDir = "content/english"
    contentTypeName = "post"
    keywords = ""
    copyright = ""
    menuMore = "Show more"
    writtenBy = "Written by"
    readMore = "Read more"
    readOtherPosts = "Read other posts"
    newerPosts = "Newer posts"
    olderPosts = "Older posts"
    minuteReadingTime = "min read"

    [languages.en.params.logo]
      logoText = "hello friend"
      logoHomeLink = "/"
    # or
    #
    # path = "/img/your-example-logo.svg"
    # alt = "Your example logo alt text"

  [languages.id]
    title = "Hello Friend"
    subtitle = "A simple theme for Hugo"
    contentDir = "content/indonesian"
    contentTypeName = "post"
    

    # [languages.id.params.logo]
    #   logoText = "hello friend"
    #   logoHomeLink = "/"
    # or
    #
    # path = "/img/your-example-logo.svg"
    # alt = "Your example logo alt text"

It doesn't show the Indonesian as a blog menu. I expect that is shown so the reader can switch the language.

Using beautifulhugo theme, it shows this

your theme is awesome Is there the possibility of adding icons with social networks with their respective icons ?. for example twitter. At the end of the page in the "footer" you have enough space for it.
Another idea is the possibility of adding both logoText and .svg at the same time in [params.logo].
Anyway, I love your theme. My congratulations!

Hello, I'm using this theme but I can't find a way changing the cover size. Is there any way to do that?

Thank you.

Imho this is more anoying than helping?

All code highlighted by prism.js is converted to uppercase. I don't know whether this is a problem with prism.js or css in this theme.

You can see it in this link.

I've used your theme for my website which I've built using Hugo but there's one problem for me that if I want to add a comment section in my post how can I achieve that.?

Just pulled the theme. Added to a post the following on the YAML:

date: "2019-07-27T18:38:42-04:00"
title: "A title"
description: "A description."
cover: "/resources/a-title-cover-image.png"
image:
  - "/resources/a-title-cover-image.png"

The meta tags show:

[…]
<meta name="twitter:image" content="http://example.com/" />
[…]
<meta property="og:image" content="http://example.com/" />

It is also not grabbing the description and title from YAML, but the one from the config.toml.

What am I doing wrong?

Thank you for this great theme!

I have been diving into this theme to learn how to configure and edit it. It appears that I need to add my own colours (at least) and hence edit the postCSS files.

Do you see an easy way to do so without managing git branches? I would like to keep the theme up to date if it evolves in the future.

Thank you for your attention!

Footer breaks when you assign a value to copyright in the config.toml

Feature: Archives Page

I think it would be great having some sort of a archives page provided by the theme, so it'll be much easier to search for a specific post.

Possible Implementation:

Create a Layout for the archives page in layout/defaults/archives.html so it can be called by creating an archives.md in the content folder by setting layout: "archives" in the toml/yaml.

Possible Solution:

Something like this:

{{ partial "head.html" . }}
    {{ partial "header.html" . }}

<main class="content" role="main">
    <div class="inner">
        {{ range (.Site.RegularPages.GroupByDate "2006") }}
            <h3 class="archive-year">{{ .Key }}</h3>

            <ul class="archive-list">
                {{ range (where .Pages "Type" "post") }}
                    <li>
                        {{ .PublishDate.Format "02 Jan" }}
                        -
                        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                    </li>
                {{ end }}
            </ul>
        {{ end }}
    </div>
</main>

{{ partial "footer.html" . }}

Process:

Feel free to assign me to this issues if you want to implement an archives page or do it yourself if you feel comfortable with doing so.

The build script for the Hugo Themes site generates a demo for each theme by creating a theme folder named after the Git repository where the theme resides.

In your case the theme folder is called hugo-theme-hello-friend.

However Hugo is unable to find your theme and generate the demo because in the config.toml of your example site you have entered theme = "hello-friend"

Please change that line to theme = "hugo-theme-hello-friend" so that your demo can once again be generated on the Hugo Themes site.

Thank you!

Hi, I've been using the theme for quite a while and I'd like to request support for the mentioned languages if possible :)

I saw that it is possible to override CSS for the theme but I can't seem to override the bright pink cursor color. Is there an example of how to do so?

If it's not possible yet, would it be reasonable to add another param to set it?

Why is it even used in in single.html and list.html for cover images that already are valid file names with paths?

Hello,
I can see that Hugo can handle PostCSS. In particular, this could help users to create an assets/ directory that would be used before the theme specific assets/ directory.

In particular, I assume that nodeJS would be mandatory. But that would not be the case of the is a way to create a condition (if postCSS is installed then compile, or else use the compiled CSS files).

What do you think of it?

Hi thanks for the beautiful theme!

I'm very new to Hugo so please forgive me if this is a stupid questions but.. I have followed the Hugo quickstart guide (https://gohugo.io/getting-started/quick-start/) and I've chosen to install your theme by adding it as a submodule. I've copied the config.toml to my site and I've made new posts and no posts show up on the index.. do I need to add an index page? or is there something I'm missing?

It's not mentioned anywhere in the README, but is that because it's so obvious and I'm just missing it?

thank you!

Imho a page should not require a date assigned because it is (never?) changing content, it currently defaults to 0001-01-01 which is ugly.
A check would be nice to hide the date if its not set or even never show it for single pages, only posts.

Hi,

I’m working this theme (hello-friend), and everything was all right until I wanted to build it to a static website, so I do hugo in the command line, it generate it and then, when I open the index.html, see the result:

Hugo version: Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z

Here's the static build: https://github.com/Penkie/penkie.ch-v5

Sorry for my bad english, i’m french ^^

Penkie

Just a suggestion, I think it would be also great to have an optional Table of Contents for single pages since hugo already has a built-in page variable for that. 😄

Hi,

if only one menu item in main exists and config of pages.showMenuItems is set to 1
clicking inside the page generates a javascript error:
[Error] TypeError: null is not an object (evaluating 'c.classList') (anonyme Funktion) (main.js:1:1706)

This tracks back to source/js/menus.js line 23 where menuMore is null
because no submenu element is rendered
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }} in menu.html

One solution: Should a && menuMore after isMobile()

If I add the logoText variable to my config.toml file like this:

[params.logo]
  logoText = "Mario"

It fully removes the logo text without inserting the new value. This means:

1. The > Hello friend text doesn't show up (which is expected)
2. The new value Mario doesn't show up either (which is not expected)
3. Thus, the space where the > Hello friend text was, is now just blank

If I remove the logoText variable from the config.toml, the > Hello friend shows up again.

Tags will help us categorize the posts better. Are there any plans for this?

DELETE ME

I got a problem with the bulb icon.
The new round icon is not showed.

UPDATE
Problem resolved

Well, it took me nearly an hour to find out the reason.

I'm living in GMT+3, so at the moment of writing this issue it's 2019-07-05
However, "Hello-Friend" theme lives in GMT+0, so it's 2019-07-04!

As a result, "a post from future" is missing. I have 2 questions now:

1. How can I disable hiding "posts from future"?
2. How can I customize "date" property so it will show hours:minutes and timezone?

Currently code blocks show horizontal scrollbars for long lines.
Is it possible to enable wrapping instead?

Hi ;-)
Could it be possible to add a param to reduce the size of the font in the code block?
I find it a little to big now.

Thank you!

Hey man, thanks for the awesome theme. I found a problem with the width of listed posts in the mobile display. In portrait mode, they extend beyond the edges of the screen left and right. My quick fix was to add this to my /static/style.css file --

.posts {
    width: 100%;
}

I figured this would be the simplest solution to maintain the full width list but still limit the bounds.

Normally, I'd work this into your theme css somewhere and toss it into a simple pull request, but I'm unsure where it should go (perhaps main.css?) and how best to re-build and submit for you. I'm rather unfamiliar with this level of css styling and the related tools you've used (such as yarn which I don't know how to use at all).

Your guidance on how to best prepare and submit this request here would be awesome. Thanks, man.

Hugo ships with a feature called Internal Templates that enables boilerplate for features such as

• google analytics
• disqus (already suggested in comments partial)
• open graph
• and twitter cards

As seen in the comments partial disqus short tag is suggested
Can we implement these built-in shortcodes instead? Thank you

Hello! Thank you very much for making this theme, I absolutely love it! One quick question though, is there a way to change the order of the menu items in the menu.html partial? My config.toml has the following section for menus:

  [languages.en.menu]
    [[languages.en.menu.main]]
      identifier = "about"
      name = "About"
      url = "/about"

    [[languages.en.menu.main]]
      identifier = "tags"
      name = "Tags"
      url = "/tags"

    [[languages.en.menu.main]]
      identifier = "posts"
      name = "Posts"
      url = "/posts"

But no matter which way I arrange them in the config, they appear in the same order on the generated site. I'm new to hugo so I tried looking at the documentation and I think what I want is the .weight property but setting that in each of the menu entries isn't working. Is there something I'm missing?