adityatelange/hugo-papermod

A fast, clean, responsive Hugo theme.

📕 Latest Blog Posts on https://adityatelange.in

• Android phone as a Webcam on Linux
• Breaking down Reverse shell commands
• HackTheBox - Photobomb
• How AOSP Security Patches are merged into Android Custom ROMs?
• Primer on HTTP Security Headers

hugo-papermod's Issues

Relative path for cover image

From the installation notes I see that the cover image supports absolute path. I'm trying to migrate from another theme where the following relative path for cover image works

cover = "media/small-cover-spotify.png"

which resolves to http://localhost:1313/media/small-cover-spotify.png
instead of http://localhost:1313/blog/how-spotify-is-killing-the-open-podcast-ecosystem/media/small-cover-spotify.png

How can I get this working?

Social icons on homepage are filtered by uBlock's "Cosmetic Filtering"

Filtered out by the "##.social-icons" rule from one of the default lists. This is "working as intended" behaviour in terms of hiding share icons from posts, but should not be allowed to break the display of the homepage imo.

How can I get a dark theme like your demo site?

Thanks for your paperMod theme which is clean and fast.

But how can I get a dark theme like what's like as your demo site?

By the way, could you put an Example Site in the theme folder like other themes ?

Thanks again.

[Feature][Discussion] Tree-style category list page

It's possible to list multiple categories for each page. This can be handled one of two ways:

1. The page is part of each category
2. The categories nest

Take the following example:

categories:
  - tutorials
  - git

With option 1, the page would be part of the tutorials category and the git category.
With option 2, the page would be a part of the git subcategory of tutorials.

Anyways, with option 2, it's possible to have a nesting (tree-style) category list such as the following:

(This is public at https://kasad.com/blog/categories/)

How do you feel about implementing this feature?

found no layout file for "HTML"

Hey! Trying to set up a new site with this theme and I get a bunch of warnings that don't appear to be covered in the install instructions:

WARN 2020/11/05 10:02:50 found no layout file for "HTML" for layout "archives" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

WARN 2020/11/05 10:02:50 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

And the same for a bunch of other page types (tags, home, post).
I'm pretty new to Hugo but I haven't run into this in the other 2 sites I've build with it.

Am I missing something obvious? Thanks :)

discord icon

Recognizing the discord icon for social media links would be super cool!

Navbar Submenu

Hello,

When can a Navbar Submenu be added?
Good work.

expand share icons and supported networks for sharing

Just as the author can add 34 icons to diverse social platforms s/he might have an account on; it would be interesting if a visitor was able to share a post onto those same platforms.

Also, there are other fediverse networks out there, such as

• pleroma and misskey for microblogging (like twitter);
• funkwhale for audio (soundcloud, spotify);
• peertube for video (youtube, lbry);
• pixelfed for images (instagram);
• GNU social, friendica, hubzilla and diaspora* for general social networking (facebook).

[Discussion]Meta Tags for better Social Sharing of posts.

How would you feel about adding meta tags for various social networks to the head.html partial to make the shared posts better looking?
The theme already supports easy sharing using the buttons, it would be nice to have the posts also look good on social media.

It should be a relatively easy addtion. (Here's an example of the tags for Twitter and Facebook):

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:title" content="Post Title">
<meta property="og:description" content="Post Description">
<meta property="og:image" content="<cover-image-url>">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://example.com/">
<meta property="twitter:title" content="Post Title">
<meta property="twitter:description" content="Post Description">
<meta property="twitter:image" content="<cove-image-url>">

Giving Error

I'm new to hugo and i am screwd up , what to do ?

1:35:21 PM: $ hugo --gc --minify
1:35:22 PM: Start building sites …
1:35:22 PM: ERROR 2020/10/11 08:05:22 render of "page" failed: execute of template failed: template: _default/single.html:5:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: _internal/opengraph.html:41:17: executing "_internal/opengraph.html" at <index $siteSeries $name>: error calling index: index of untyped nil
1:35:22 PM: ERROR 2020/10/11 08:05:22 render of "page" failed: execute of template failed: template: _default/single.html:5:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: _internal/opengraph.html:41:17: executing "_internal/opengraph.html" at <index $siteSeries $name>: error calling index: index of untyped nil
1:35:22 PM: ERROR 2020/10/11 08:05:22 render of "page" failed: execute of template failed: template: _default/single.html:5:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: execute of template failed: template: _internal/opengraph.html:41:17: executing "_internal/opengraph.html" at <index $siteSeries $name>: error calling index: index of untyped nil

Netlify CMS

Can you make this template friendly for NetlifyCMS?

Images not center aligned with custom shortcode

On my existing theme the custom figure shortcode below can center align images with the following usage

{{< figure src="./media/rss-icon.png" caption="RSS Icon" alt="RSS Icon" align="center" width="100">}}

Here's the HTML produced

<div style="text-align: center;">
<figure>
    <img src="./media/rss-icon.png" alt="RSS Icon" width="100"> <figcaption>
            <small><i>RSS Icon</i></small>
        </figcaption>
</figure>
</div>

You can see this in action on my blog - https://www.singhkays.com/blog/how-spotify-is-killing-the-open-podcast-ecosystem/

but with the PaperMod theme, I get the following

Code blocks for Docker / Dockerfile are broken

I am not sure if this is problem with Hugo or PaperMod, but while generating Docker codeblocks defined as

'''Docker
FROM ubuntu:focal

RUN apt-get update && apt-get upgrade -y
'''

The output I get looks like this:

FROM ubuntu:focal


RUN apt-get update && apt-get upgrade -y

Screens:

How to enable utteranc

Is there any support for https://utteranc.es ?

Cover Image isn't displayed properly in Default mode

Cover works fine with ProfileMode and HomeInfoMode

[Feature] Allow setting favicon path in config file

Can I set a custom path to favicon? In another theme 'minimo' (https://themes.gohugo.io/minimo/) I was able to specify the following

[params.assets]
favicon = "img/terminal.ico"
customCSS = ["css/custom.css"]

Add Mastodon social icon

From the Wikipedia:

Mastodon is a free and open-source self-hosted social networking service. It allows anyone to host their own server node in the network, and its various separately operated user bases are federated across many different servers. These nodes are referred to as "instances" by Mastodon users. These servers are connected as a federated social network, allowing users from different servers to interact with each other seamlessly. Mastodon is a part of the wider Fediverse, allowing its users to also interact with users on different open platforms that support the same protocol, such as PeerTube and Friendica.

I think this icon could be used when styled accordingly:

Mastodon_Logotype_(Svg).zip

Cannot use this theme for Hugo deployed on Vercel

Thank you very much for designing and developing this theme, I like it very much, but there is a problem when deploying Hugo on Vercel and applying this theme.

Error step:

1. Create a Vercel account and select the Hugo template.
2. Connect to Github, Vercel will create a repo.
3. Vercel initializes a Hugo address, which is normal and accessible
4. Use Papermod - Installation to install

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/hugo-PaperMod
git submodule update --init --recursive
git submodule update --remote --merge
theme = "ananke" >> theme = "hugo-PaperMod"

5. Terminal.exe hugo server -D, It work on loaclhost.
6. commit and pull to Github, Vercel will deploy hugo
7. An error occurred during deployment

This is Vercel Build Logs:

14:37:13.594  	Cloning github.com/Mosaic67/Hugo (Branch: master, Commit: dfe9c79)
14:37:14.533  	Cloning completed in 938ms
14:37:14.535  	Analyzing source code...
14:37:16.307  	Installing build runtime...
14:37:16.804  	Build runtime installed: 497.035ms
14:37:17.816  	Installing dependencies...
14:37:18.106  	yarn install v1.22.4
14:37:18.124  	info No lockfile found.
14:37:18.130  	[1/4] Resolving packages...
14:37:18.131  	[2/4] Fetching packages...
14:37:18.132  	[3/4] Linking dependencies...
14:37:18.139  	[4/4] Building fresh packages...
14:37:18.143  	success Saved lockfile.
14:37:18.145  	Done in 0.05s.
14:37:18.180  	WARN 2020/11/07 06:37:18 Module "hugo-PaperMod" is not compatible with this Hugo version; run "hugo mod graph" for more information.
14:37:18.201  	Error: add site dependencies: load resources: loading templates: "/vercel/workpath0/themes/hugo-PaperMod/layouts/shortcodes/collapse.html:4:1": parse failed: template: shortcodes/collapse.html:4: function "warnf" not defined
14:37:18.205  	Error: Command "hugo -D --gc" exited with 255
14:37:21.369  	Done with "config.toml"

And Netlify，

Can start, but the reality is not normal, I don’t know why

This is my netlify.toml

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.78.1"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.78.1"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.78.1"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.78.1"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

Order Profile Buttons

Hi,

I love the theme! I was wondering if it is possible to order the buttons on the profile page?

Currently, my config file uses the following settings for the buttons.

[params.profileMode.buttons]

    [params.profileMode.buttons.posts]
    name = "Posts"
    url = "/posts/"
    weight = 1

    [params.profileMode.buttons.archive]
    name = "Archive"
    url = "/archives/"
    weight = 2

    [params.profileMode.buttons.tags]
    name = "Tags"
    url = "/tags/"
    weight = 3

    [params.profileMode.buttons.about]
    name = "About"
    url = "/about/"
    weight = 4

But, the weight setting does not affect the placement of the buttons. They seem to be sorted alphabetically.

Is there any way to order them? Thanks!

add i18n for "toc"

Copyright option in config.yaml is unused

It would be great if there was a way to use copyright defined in the configuration file in the footer.

Currently, I can set a copyright in config.yaml:

copyright: "© 2020 Some Organization"

But it doesn't have any effect on the resulting page(s).

I don't necessarily want the copyright note in the footer to reference my site's title.

[Question] How to achieve non-blog-post pages

Hello,

I really like this theme. One thing I haven't figured out yet though is how I can create "normal pages" like you have for example at https://adityatelange.tk/about/.

What I've done
hugo new about.md
and then in config.yaml

menu:
  main:
    - name: Archives
      url: /archives/
      weight: 10
    - name: About
      url: /about/
      weight: 15

but the resulting page starts like a blog post:

About [draft]

October 6, 2020 · 0 min · Lars Eckart

I don't want a publish date or author for this article.

Any hints on how to achieve this?

Overriding Syntax Highlighting

Is there any way to override the default syntax highlighting of the theme?

Why does PaperMod modifies the default <strong> style?

Here it modifies the strong tag's style to use a custom font-weight (500) and not the default bold value.

hugo-PaperMod/assets/css/reset.css

Lines 54 to 57 in 16213a3

	strong,
	b {
	font-weight: 500;
	}

I was wondering if there is any reason for this I don't know about or is it just about different tastes?
In my opinion, the bolded phrases are not as bold as I wanted them to be.
Isn't it better to let the user's font decides how much bold should actually be bold?

Thanks

Blockquote with author needs additional margin

Looks like when you use the blockquote with author specified, the bottom margin needs to be increased to match the top margin

with author

without author

Theme button and default theme conflicts

6a9e9e1 is incomplete

Language switcher menu

I think a global language switcher menu is needed to let the user switch between different language home pages and not just only the translated posts.

[Discussion][Feature] Allow user configurable light/dark theme

It's great that the theme supports auto light/dark theme but some readers might not want to be forced upon dark mode at night. The theme should allow the reader to specify or set such an option like the Novela theme (https://themes.gohugo.io/theme/hugo-theme-novela)

[Feature] Additional emphasis on blockquotes/ [discussion on custom.css]

Often when you are quoting another article, you want to add additional emphasis on the quote. I like that there's a left border. But I have some more ideas that might help the blockquote text stand out

Italic style

Italic + serif font like Medium

yellow background like Stratechery

Multilingual Tags page

Hi,

Thank you for the great theme! I am now using it for my personal blog.
I am only starting to get familiar with Hugo and I am still struggling to see where all of the information is stored and how the pages are generated.

Here's a very minor feature request: I am writing in French and English and I would like to translate the word "Tags" on the tags page (not only on the link top right of the page which I can do in the config file). I guess this could be implemented via an entry in the i18n files?

Thank you,

Adrien

Images not rendering in Safari browsers

Hi @adityatelange, great theme!

I can't get images to render using ![alt text](/path/to/local/image.jpg. I also see that the images stored as .webp in the example site are not rendering: anchor link.

Is this a bug or is there a step that I should take between adding an image to the site directory and expecting to see it render?

Social icons not showing

Hi,
The social icons are not displaying for me. I've tried following as per: https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-icons/ and even with the example config.yml the icons are now showing up (see attached screenshot).

Here is my code: https://github.com/abhiyanbeta/hugo-test

Any idea how I would be able to fix it? Much appreciated!

Content not visible in profile mode

Hey, Firstly, love the theme, super clean, very minimal, kudos!

Is it possible to get the content to appear while using paper-mod in profile mode?
I created a test post that appears on the site when I switch to Home-Info mode.
I was going for a blog that looks like the image you posted in your examples.
https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png

But I can't get the posts to appear while using the theme on profile mode.

Wide code layout

I just noticed that in mobile the code boxes hit the viewport and have no margin.
Is this a choice?

Is there a way to weight the position of a page in tags?

I wanted to position certain pages under /tags/ to come before others by trying to set tags_weight key in content frontmatter, but it doesn't seem to work, i believe because the rendering doesn't happen in a list form? Is it possible with some other hacky way?

Add ko-fi.com to socialIcons.

Hi, It would be nice to add ko-fi.com to the list of social icons. Thanks.

Localization of months for archives page

Current archives page great, however names of the month are always in English, which is an issue for non-English blogs. I couldn't find any out-of-the-box way to localize it. The only thing that comes to mind is to pass the month name through i18n which should contain the correct translation.

Hugo official documentation suggests using data files with an array of month names: https://gohugo.io/content-management/multilingual/#customize-dates . I see two issues with this approach. First, it does not look very clean to me: if we use i18n for translation already, I see no reason to separate translation of month into a different mechanism. Second, it will not work in archives.html as we are working with array key rather than with date object.

Does anybody know of a better or already existing way? Would like to fix this issue for the theme but do not want to reinvent the wheel )

configurable dark/light image variants

Anytime an image url is specified in the config, it should be possible to allow a dark and light variant of that asset to be specified, so when the user switches themes, the asset can be switched as well.

Custom scripts to head and footer?

I there any way to add custom scripts to the header and footer of the site?
I have seen this feature in many themes.

ps: I am not try to spam this theme with issues. Sorry If you think so.

Parameter to make custom post snippet

Thanks for a great theme Aditya.

Is it possible to add a page and post parameter, to make the snippet seen on the list page custom?

[Feature] Can you set caption for cover image?

I'd like to set the following caption for the cover image

<span style="margin:-20 0 0 0; display:block; text-align: center;"><i><small>Photo by <a href="https://unsplash.com/@birminghammuseumstrust?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Birmingham Museums Trust</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></small></i></span>

Here's an example from another theme - https://minimo.netlify.app/docs/cover-image/

---
cover:
  image: /images/eden-farm-children-s-village.jpg
  alternate: Picture of a yellow wall with a blue window in the upper-left corner
  caption: Eden Farm Children's Village by Gareth Harper on Unsplash
  style: full
---

Table of Contents does not display a hierarchical structure

Code blocks overflow without highlightjs

Before highlightjs loading, code blocks are overflowing on the right, without possibility to scroll horizontally.

This make the overflowing code appear and then disappear during loading.

And for visitors using NoScript, it stays overflowing and can be partly unreadable if it goes beyond screen limits.

Adding overflow-x: auto; to the CSS fixes it and allows to scroll horizontally.

I have a pull request on the way.

[Feature] Support word wrap on code fragments

I have some code fragments that require horizontal scrolling. However, I tried the solution here https://stackoverflow.com/a/56469907 and got wrapping to work. Can this be implemented by default or at least a user settable property in config file?

code {
  white-space : pre-wrap !important;
}

bug: toc not support to scroll non-ascii title

question:
use chinese title, toc click will error.

this bug come to layouts/partials/footer.html#L34

Request for ExampleSite and .toml file?

Hello there. Thank you for this enhanced version of the theme. It looks so good!
But somehow I couldn't figure it out to deploy theme like the demo version and I am wondering is there any way to add ExampleSite folder like the demo (including content) and .toml file?
Thank you in advance.
Have a nice day. 🤗

Bold markdown doesn't work

how to add-on mathjax?

I read some articles for hugo & mathjax..
But, I can't do that.

Could you help me?

AWS Amplify build issue

Hi,
The local build works fine, but deploying on AWS Amplify causes this error.

Error: "/codebuild/output/src304702036/src/blog/themes/hugo-PaperMod/layouts/partials/toc.html:65:1": parse failed: template: partials/toc.html:65: illegal number syntax: "-"

There is an extra space in line 65. I am not sure why my local build(Mac) works fine but the one on AWS does not.

Does this theme support setting a google analytics tag?

Can you set a google analytics tag? Example here https://github.com/MunifTanjim/minimo/blob/master/exampleSite/config.toml#L9