jakewies/hugo-theme-codex

A minimal blog theme for Hugo 🍜

hugo-theme-codex's Issues

Add a new homepage-like page

I want a new page that is more like a homepage. But I'm unable to do that by creating a _index.html file.

I want to have a section in the middle of the page (same as the homepage) but I want that to be on a different page and just a paragraph of text.

Fix Nav-Links

Right now, the navigation links in the top-right corner about and blog lead to /blog and /blog/blog respectively and thus do not work correctly.

Blog page file names issue on Windows

Hi there,

I have switched over from Linux to Windows and upon doing so I am running into issues with the blog markdown pages prefixing with a colon (:).

Windows cannot work out what to do with the colon. What are my options here to continue using this theme? Furthermore, just out of curiosity, why do the blog file names prefix with a colon?

Thanks.

Useful link for some background

Code highlighting not working properly

Code blocks are illegible.

Even in a simple code block like:

function(){}

is rendered as

For instance, The following C++ block

 std::unique_ptr<TF1> f1("f1", "gaus");
 f1->SetParameters(1, 0, 1);
 
 h1->Fit(f1);

generates a black block (the text is still there when highlighting the line with the mouse)

Add sidenote support

Hi folks.

I've been playing with adding sidenote support. My current implementation puts sidenotes to the right of the text on wider screens:

On mobile, sidenotes appear inline.

They are added via shortcode. For example:

{{< sidenote note="Ut quis turpis quis enim rhoncus vehicula vel et neque. Nullam porta nunc rutrum velit faucibus interdum. Cras in quam non leo mattis feugiat. Fusce interdum nisl nibh, quis pellentesque turpis vehicula sit amet." >}}

I may also add an option for margin notes which leave the number out entirely.

The bulk of the work done, but need to iron out a few things--mainly having it play nice with the ToC. If this is something that fits the project, I can add a PR when it's ready.

Issue with ordering

Hey everyone.

Firstly, thank you for creating and maintaining this Hugo theme. I've been having fun playing with the content and the theme, in general. 💯

But, there's something silly I've been struggling with and failing to figure out what's the root cause for it. So for instance, here's the ordering which I can see locally on my machine when I build.

However, this is the ordering which gets deployed (I use Vercel).

I'm sure it's got to be something trivial, but I'm currently failing to figure out the exact issue. Has someone faced this before? I can share the link to the hosted website, too, if that helps.

Build assets automatically for exampleSite

After #62, which adds the resources/_gen folder back to the exampleSite, we should re-generate those resources whenever there's a style change, so the demo site can reflect those changes properly.

@jakewies I'm not sure what the available git hooks are for this project, any thoughts?

Twitter Meta Tags

Hi Everyone,

playing around with the meta tags codex generates I found the following:

hugo-theme-codex/layouts/_default/baseof.html

Line 22 in a9a6f0c

<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}" />

As per the twitter card documentation this value should not be the url but the @username of content creator
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup

On a similar note the twitter:site meta tag should not be a url either but @username of website.

hugo-theme-codex/layouts/_default/baseof.html

Line 21 in a9a6f0c

<meta name="twitter:site" content="@{{ .Site.Params.twitter }}" />

Obviously both can, in many cases, be the same @username.

I would be happy to discuss and implement something to make the use of twitter tags more in line with the official twitter documentation.
As I am not deeply familiar with project layout or hugo templating in general I would love some help to get me started.
I will try to take a first stab at it later today.

From my understanding this would be require changes along the lines of

• Introduce new settings twitter_author_handle and twitter_site_handle
• Changing _default/basof.html to prefer the new settings for both fields and falling back to the twitter setting to not introduce backwards breaking changes
• Updating the documentation to explain the new behaviour

The twitter link used in the social icons should, from my understanding, not be affected by this at all.

Add support for Admonitions

It would be really nice to have support for Admonitions: https://gohugo.io/contribute/documentation/#admonitions

I personally like the style and variety of the mkdocs Material theme, but I don't know about their fit with codex: https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types

I won't have time to look at this for a while, so I leave it here just in case someone else wants to give it a try before I do :)

Add theme's url to the repo's about section

@jakewies Could you add https://themes.gohugo.io/hugo-theme-codex/ as this repo's website? That way the link will appear in the About section, making it easier to go to the demo page.

Tags page has hardcoded "/blog" link.

In Layouts/taxonomy/tag.html, the all posts link is hardcoded to "/blog", which causes issues if the blog is not hosted on the baseURL, or if the place with posts is not called "blog". I'm relatively new to Hugo so I don't have a specific code suggestion, but thought it would be good to raise this.

unparsable structured data

Just got notified of a new issue from the Google search console. May be an issue with content, I’m investigating.

Do we need to document the usage of hugo extended for scss support?

This is a question for @kentnek . I know in the README there is now a prerequisites section saying that users need the "Hugo extended" version. I didn't know this was a thing. Initial googling doesn't present a clear picture for me and I'm afraid others may have the same issue.

Should we document how to use the extended version a little better? Or is this a non-issue?

Various background colors are hardcoded

I noticed that various background colors (like that of the navbar) are currently hardcoded to #fff instead of using the $white variable defined in _colors.scss (or _vars). Is this intentional?

Clickable elements too close together

Hi there, thank you for this theme - I am a fan!

I've set up the theme on my website, where I have Google Search Console enabled to work on the SEO of the site. Google sent me an email after I switched to this theme with the following issue: "Clickable elements too close together". I believe they're referring to the items in the sidebar and the social icons. Just wanted to report the issue to see if you could help resolve it.

Thanks!

Suggestion to rename /icons directory for simpler compatibility with Apache web server

Most Apache web server installations come out of the box with a configuration file treating the /icons/ route as a special case.

More precisely, the mod_alias configuration file (enabled by default) sets the /icons/ route to point to the /usr/share/apache2/icons/ folder on the server instead of the /icons folder of the website being served.

Here is a mention of the "problem": https://serverfault.com/questions/153177/apache2-and-icons-path-behaving-differently

Using this route to serve images for the template may cause unexpected problems for Apache users unaware of this default configuration, such as 404 errors for images contained in the /icons folder.

I suggest renaming the folder/route to something like /images or /social to embrace a larger public 🙂 .

Enable pagination in blog view

Add configuration support in the blog section.

Am thinking about

[params]
  [params.blog]
     ...
     pagination = true
     paginate = 5

Adding Description under the blog titles

Is there a way to add a description under the blog titles in the /blog?

Something like whats present in Ramium?

Removing links to previous and next post

Hi,

I've used your theme and I think this would be a good feature. In post Params, we can insert another value like cleanPage = true. This would be useful here:

<div class="pagination">
  {{if .Params.cleanPage}}
  <div></div>
  {{else}}
    {{if .PrevInSection}}
      <a class="pagination__item" href="{{.PrevInSection.Permalink}}">
          <span class="pagination__label">Previous Post</span>
          <span class="pagination__title">{{.PrevInSection.Title}}</span>
      </a>
    {{end}}

    {{if .NextInSection}}
      <a class="pagination__item" href="{{.NextInSection.Permalink}}">
        <span class="pagination__label">Next Post</span>
        <span class="pagination__title" >{{.NextInSection.Title}}</a>
      </a>
    {{end}}
    {{end}}
</div>

please note, there has to be something in the first part of the if statement.

I'd add just one variable called cleanPost to page parameters and that parameter would remove the pagination. This would be useful on pages like /about, /cv, /resources etc.

Edit: i just wanted to ask if this was an okay feature to add, I could make a PR for it.

Update asset bundling pipeline

When I first built this site I used a combination of tools for styling and js. I wrote vanilla JS that I bundled using gulp and also bundled my styles which were written in stylus.

I don't have a problem with continuing it this way. Or we could switch it up. I don't think its that important. The styling can probably use some cleanup as well. There might be a lot of stuff in there no longer used.

Reference to an email social icon in README

I noticed that there is a reference to adding an email social icon in the README. @chuxinh was this a mistake? I don't think the theme supports this at the moment. If it is I'll go ahead and remove it for the time being.

Can't get navigation items to not be in alphabetical order

Hello,

Very new to Hugo, but thought I'd give it a go.

I'm trying to get my navigation items to not be displayed in alphabetical order (ie. 'Home' before 'Blog'). However, I can't seem to achieve this. Based off of the source code here, I tried adding 'weight' to my pages in the config, but that didn't change anything.

How can I achieve this? Many thanks.

Large padding at the bottom of the page

I just realized there's a huge padding at the bottom of blog posts that I recall was not there before.

Was it by design or a bug?

Dark Mode ?

Is Dark Mode support an option that I missed in the config.toml? I noticed you have it on your site @jakewies but I think your site is also a more modified version of the Codex theme.

Invisible `blockquote::before`

The semi-transparent double quotes get invisible randomly, I have to comment out this line in themes/hugo-theme-codex/assets/scss/partials/_reset.scss:

html,
body {
  // background-color: $white;
  color: $black;
  height: 100%;
}

to make the quotes work as expected, however I have no idea about the side effect.

odd URL behavior, deployed to AWS Amplify

I am new to Hugo, just spun up a new site using Codex theme and build and deploy it via AWS Amplify. I am seeing some off behavior in redirects and handling of pages.

Localhost works fine. I was able to fix the blog posts by adding a trailing / to the url like:

[[menu.main]]
  identifier = "blog"
  name = "blog"
  title = "Blog"
  url = "/blog/"

That seemed to fix that and did not break running it local, but I noticed now when deployed that the category does not work because it is missing the trailing /

hello-world

Python Tag works just fine, but the list of tags is created without the trailing / and lands to the home page https://www.jwalsh2.me/tags/python

I am trying to find which file to modify to add in the / to help this render.

Any help is appreciated!

Love the them, thanks for making it!

John

Heading anchors render on the wrong(?) line for multiline headings

IMO this should be rendering on the first line, not the second.

Add prettier

Code blocks break responsive view on mobile

I'm currently migrating my site to this theme, and running into a problem where pages with code blocks are just a tad bit too wide for the viewport and mess up the layout. I'm enlisting all the information I believe would be useful below.

• Source: https://github.com/msfjarvis/msfjarvis.dev/tree/codex
• Live version: https://staging.msfjarvis.dev
• Affected pages: https://staging.msfjarvis.dev/posts/simple-tricks-for-faster-rust-programs/, https://staging.msfjarvis.dev/posts/switching-my-email-to-purelymail/ and all other pages with code blocks.
• Changes to default layouts: baseof.html was edited to replace the default Twitter card metadata with hugo-social-metadata. single.html was edited to replace disqus with my Commento partial. browse-by-tag was overriden to instead list categories.

I've reset the theme layouts to their hugo-theme-codex versions in this commit so you can see exactly what changes I had made.

I have also tried disabling pygments to no benefit.

Duplicate `scss` directories in `resources/_gen/assets`?

@kentnek is this hugo's doing? While working on #69 I noticed that the generated scss files were placed at:

resources/_gen/assets/scss/scss/

Should it be:

resources/_gen/assets/scss/

?

And if so, how do we fix that?

EDIT: I just tested by deleting the resources directory and building the example site. Hugo is creating 2 scss directories. Not sure why? But I guess it is what is. I'll close.

Change subheading on the homepage with paragraph

Hey. First, I would say that this is really well built theme and I have been using it to build my personal website (it's not entirely done) and I have a suggestion that can be incorporated in the theme.

The subheading for the homepage is taken from _index.md's subheading section but it's really limiting. First, you can't have a line break for typing multiple paragraphs. I think most people would want to type out more than a couple of lines (I wanted to type out a couple of paragraphs describing myself) and that's not possible with a subheading. Second, the secondary content should be taken from _index.md's content section and rendered as <p> instead of <h2>.

I have tried to achieve the above by doing the following (I have little experience working with GO so the following code block as well as the subsequent code blocks would not be perfect and more of a work around to build the feature that I wanted):

<!-- Delete this block of code from index.html -->
<h2>
    {{ .Params.subheading }}
</h2>

<!-- And replace the above code block with this code -->
<p>
    {{ .Content }}
</p>

I also defined some paragraph specific styles in about.css so as to make it look better.

.splash p {
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.25;
  max-width: 30em;
}

And here's my _index.md

---
heading: "Hi, I'm Satyam Singh"
handle: "stymsing"
---
I am a first-year engineering student at Indraprastha University (New Delhi), pursuing a bachelor's degree in Information Technology.

I ❤️ exploring various technologies relating to Computer Science and writing highly optimized and scalable code that contributes towards solving a real, bigger problem as well as shell scripts for automating repetitive tasks.

Besides programming, I like reading about space and playing computer games.

This is how the homepage looks after implementing above changes

Bugs due to implementing the above feature

The above changes introduce a bug with how content of the homepage is viewed on smaller screens.

The homepage uses main {height: 100%;} to center the content vertically and it mostly does fine when there are only a couple of lines as the subheading (basically how the homepage was by default) but upon implementing the above changes and adding a couple of 3-4 line paragraphs, the content flows inside the hamburger menu. I have attached a few screenshots on how it looks on various small-screen devices:

Homepage on iPhone 6/7/8
Homepage on iPhone 5/SE

I think what's happening is since the height of main tag is set to be 100%, the webpage is trying to fit whole of the content in viewable area (so that a scrollbar is not displayed/required) and hence in doing so it pushes the content upwards and inside of the hamburger menu.

Now, I have tried to fix this issue by defining the height property only for large devices (>=800px as defined in the breakpoints) and changed the positioning of hamburger menu from fixed to sticky.

.burger__container {
  position: sticky;
}

.
.
.

main {
  padding-top: 0;
  padding-bottom: 0;
}

@media screen and (min-width:800px) {
  main {
    height:100%;
  }
}

The above change pushes the content down and it doesn't flow inside the hamburger menu anymore and also introduces a scroll bar. I have attached a few screenshots of the homepage after the above change:

Homepage on iPhone 6/7/8
Homepage on iPhone 5/SE

But now since I have restricted vertical centering only to larger devices (>=800px) this creates a problem with devices such as iPad since the content isn't vertically centered anymore (screenshot below). I haven't been able to solve this problem yet. Maybe defining flexbox separately for smaller screens would help.

Homepage on iPad

Add support for post's table of contents

Hi! Loved your theme and I want to use it for my blog. Thanks for opensourcing it :)

I am missing what I consider a very important feature for long posts, and that's the table of contents. This should be easy to implement as you can generate it with {{.TableOfContents}}, but getting it to fit perfectly with the style of the blog might be a challenge, and I'm definitely not a designer.

I don't know if this sounds right to you, but having an table of contents fixed on the right hand side could enhance the navigation and usability. It could even be optional for each post.

deactivate the home page ?

Hi everyone,

Is it possible to deactivate the home please ?
It will be perfect for me to just have the blog section at the home

Thanks for your work,
Julien

Enable summary for the post in blog

Enable summary into the posts of every blog

The blog post looks odd without any summary.

Emoji styling

Hi,

I am looking to use this Hugo theme. However, in different browsers, I am experiencing some inconsistencies with the emoji styling.

In chrome emojis look similar to:


Whereas in Firefox:

Furthermore, on another page, the emoji's on Firefox seem to resemble the format similar to how they are displayed in chrome:

There seems to be some inconsistencies here. Is there any way I can make them always look how they are presented in Firefox?

Thanks 😄

Make Twitter Cards a Configurable Option

Just released my first blog post to Twitter without any success in generating a Twitter card for the post. I followed a couple of tutorials, but none ended up working. I have to admit, I am still new to programming, so having this feature as a configurable option would be especially helpful for someone like me.

https://ericfletcher.netlify.app/

Thank you very much.

Sincerely,

Eric Fletcher

Table of Contents adds overflow in mobile view

Hi,

I noticed that the TOC adds a bit of overflow when viewing any blog post on mobile, since the TOC is set to visibility: hidden instead of display: none.

[IMPORTANT] Demo site is broken

@jakewies could you look into this?

Adding new kinds of pages

Hi, I wanted to add a photo gallery to my website. Will that be possible?

Add a contact us icon with form popup

Add a chat icon at the bottom with a API from getform.io for sending emails to configured email.

Syntax highlighting broken

I noticed that syntax highlighting is broken for some languages, at least cpp using markdown's default, after importing ../partials/github-syntax-highlighting, which overrides the default font colors.

Add support for overriding the about page

Right now the theme only supports configuration of the about page, but it should be easy to override this for the user's own design. Right now the best way to expose that is probably by documenting how it can currently be done, and then brainstorm other options that are more user friendly than overriding the layouts/index.html page.

Make `baseof.html` more modular

I think we can make the baseof.html more modular by splitting into several partials that powerusers like me might modify, e.g. meta.html, favicon.html, styles.html, etc. you get the idea. Some examples are:

partials/base/title.html

This partial would hold the <title> element, for people to customize the website's title.

partials/base/favicon.html

Nowadays including a single favicon.ico is probably not enough for all devices. The best practice would be use a favicon generator to generate multiple sizes and a webmanifest file, so the icon would look crisp in all scenarios.

I personally use realfavicongenerator to help me prepare the icon package, and I'd put this chunk in baseof.html to configure:

<!-- Icons -->
<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192x192.png" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | relURL }}" color="#FF3DB4">
<meta name="theme-color" content="#ffffff">

If we have the partial favicon.html, I can just replace the existing line

<link rel="shortcut icon" type="image/png" href="/favicon.ico" />

with that chunk without needing to clone the baseof.html file.

Newb Q: How do I get Blog Titles onto the Homepage?

Hi,

I'd like to use this theme. It's rad. I would also like to bubble up Blog titles on to the beautifully minimal homepage. I presume if I knew Hugo better this would be easy. Can someone point me in the right direction? I'm very experienced with go, and a beginner at hugo.

Thank you!

Advanced Opengraph Support

As discussed in #82
For the moment just some quick notes on how we can do this:

• Extract the twitter & other open graph like tags from baseof.html into a file like opengraph.html
• Replicate current behavior in opengraph.html
• Overwrite opengraph.html in https://github.com/msfjarvis/hugo-social-metadata bringing more advanced features
• Telling users to submodule hugo-social-metadata and place it before codex in themes ( form my experience this works) to get enhanced behavior

This are just some quick notes early in the morning from mobile, excuse my formatting.
Happy for comments, I will update once I can try this later today.

@msfjarvis @jakewies

strange social icon display on site

I deploy the static website successfully at local but the social icon not appear at the about page
i check your github pages have same situation
hugo env

Hugo Static Site Generator v0.68.3/extended linux/amd64 BuildDate: 2020-03-25T06:15:45Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.13.8"

Expose accent color config

The current color scheme revolves around a single primary color: #9013fe. I think we could make this a configurable value, but I'm not yet sure how we can access the value in a stylesheet. Just something that popped into my head. I like the idea of having a configurable accent color that is used throughout the site.

Tags error when not using English

Hi!

I'm one of hugo theme codex user. Thank you for making a great simple, minimal theme.

When I use the codex theme, I found there is an error in the tags.

Typing tags not using English(e.g., Korean, Chinense), there is an error like the photo below.

I hope this issue can be fixed :>
Thank you!

JS/CSS files in the static directory are being marked as modified by git

Not yet sure why this is happening. Probably something to do with the way gulp is writing the files from their source.

Add more social icons?

More social icon SVGs, such as Instagram, LinkedIn and email, can be added.