athul/archie

A minimal Hugo Theme

👋 Hello! I'm Athul.

Blog • Twitter

• 🔭 I’m currently working at KnowBe4 as an SRE
• 💬 Ask me about Go, Git and Python
• 📫 How to reach me: @athulcajay on Twitter
• ⚡ Fun fact: Big Fan of the ⚡ emoji

---

📝 Latest Blog Posts

• Yearly Review 2023
• For Abraham, forever ago
• 20 → 22
• The Purpose of being Purposeless
• 22 and Still Dumb!

---

📊 Weekly development breakdown

Python      3 hrs 16 mins   █████████░░░░░░░░░░░░░░░░   36.15 %
Nix         2 hrs 39 mins   ███████▒░░░░░░░░░░░░░░░░░   29.32 %
Markdown    2 hrs 10 mins   ██████░░░░░░░░░░░░░░░░░░░   24.06 %
TOML        25 mins         █▒░░░░░░░░░░░░░░░░░░░░░░░   04.67 %
CSS         24 mins         █░░░░░░░░░░░░░░░░░░░░░░░░   04.49 %

---

archie's Issues

Links to Header Sections

It would be nice if header sections linked to themselves. For example, here is a link to the python section from an article on the example site: https://athul.github.io/archie/posts/langs/#python

I added #python to get that section - but why not have the header ## python link to that url automatically?

GA4 support

not supported and google analytics version 4

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MHKZRCJN0C"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<TAG-ID-FIRST-G>');
</script>

Font weight not working

hugo v0.112.3-ba6f74e40420d76f15fc8c2358be90f7aca98e0e+extended darwin/arm64 BuildDate=2023-05-24T14:42:50Z VendorInfo=gohugoio

Archie commit 0f3a862fc89e1f4a56e4380b9f27b7b71f964a34

It doesn't seem like any font weights other than 500 are installed - this means that, for example, bold text does not display as bold. This is visible even on the example site when using inspect element to change font weights.

TikTok Icon

Can an icon be made for TikTok?

How to change the default page?

Hi, I would like to change the index to the about page. Would this be possible? If so, how can I do it?

Add support for rst tables

Hi, I am interested in using this theme with restructuredText. Everything looks pretty good other than the tables, which are not stylized. Would it be possible to add support for this?

Example:

== ====
ID Text
== ====
 0   a
 1   b
 2   c
 3   d
== ====



.. table:: Table 1 - Packet structure

    +-------------+-----------+--------------+---------------+------------------------+------------+
    |     byte    |     0     |       1      |       2       |            3           |  4 .. End  |
    +-------------+-----------+--------------+---------------+----------+-------------+------------+
    |     bit     |                                          |  15 .. 8 |    7 .. 0   |            |
    +=============+===========+==============+===============+==========+=============+============+
    | description | Report ID | Device Index | Feature Index | Function | Software ID | Parameters |
    +-------------+-----------+--------------+---------------+----------+-------------+------------+

error in feather.min.js path in header.html

When using a social tag and using local js libraries, there is an error loading feather.min.js

[params]
	useCDN = false # don't use CDNs for fonts and icons, instead serve them locally.

[[params.social]]
name = "GitHub"
icon = "github"
url = "https://github.com/sebasr"

Error encountered when loading the root page

sebasr.com/:1     GET https://sebasr.comjs/feather.min.js net::ERR_NAME_NOT_RESOLVED
(index):29 Uncaught ReferenceError: feather is not defined
    at (index):29:182
(anonymous) @ (index):29

Header and nav bar overlapped

header and nav bar overlapped when shrink screen resolution . I suspect this is due to {margin: 0} of these 2 element

Text selection color is probably wrong for dark mode

Light mode mode has a red accent color and red text selection color.

Dark mode has a green accent color and red text selection color? Besides, it look pretty ugly. I suspect it was supposed to be green.

To be clear about what I mean by text selection color:
https://www.w3schools.com/howto/howto_css_text_selection.asp

suggestion: change from feathericons to simpleicons

Since feather icons are not going to add more brand icons (see issue below), would it be feasible for this project to switch to another theme provider? E.g., icon theme for Mastodon won't be added which is a large social media site(s).

feathericons/feather#763

Recommended way to use custom css with Archie

Hi there
I am interested in adding a custom css file to make tweaks to my site's appearance. I think it is more sensible to work with a separate file rather than editing the built-in css files (main and dark). Please would you suggest a suitable place to put this file and how to link to it from config.toml so it can be read appropriately? Or is this not possible with this theme?

I've put a line under [params] in config.toml like this:

customCSS = "css/archie_tweaks.css"

but I don't think the theme is set up to include this? I have a file static/css/archie_tweaks.css with a couple of changes in it.

It would be great to have some clarification or guidance.
Thank you.

theme does not work over https

Hi,
Love your theme. Works great on local machine, but when deploying it (page: sebasr.com), it fails to load the css with the following errors (for all css)

Mixxed Content: The page at 'https://sebasr.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://sebasr.com/css/dark.726cd11ca6eb7c4f7d48eb420354f814e5c1b94281aaf8fd0511c1319f7f78a4.css'. This request has been blocked; the content must be served over HTTPS.

I think this has to do with the fact that it loads the css on http instead of https, but unsure how to fix this.

No social icons?

For some reason the social icons aren't appearing

Page: https://buymymojo.gitlab.io/buymymojo-hugo/

config:

baseurl = "https://buymymojo.gitlab.io/buymymojo-hugo/"
contentdir    = "content"
layoutdir     = "layouts"
publishdir    = "public"
title = "BuyMyMojo"
copyright = "© BuyMyMojo"

DefaultContentLanguage = "en-us"
theme = "archie"
metaDataFormat = "yaml"

pygmentsstyle = "monokai"
pygmentscodefences = true
pygmentscodefencesguesssyntax = true

enableEmoji = true
enableRobotsTXT = true

paginate=2

[Author]
name = "Owen Quinlan"
email = "[email protected]"
gitlab = "BuyMyMojo"
github = "BuyMyMojo"
linkedin = "owen-quinlan-b6b6431b7"
keybase = "bmmojo"

[sitemap]
    changefreq = 'daily'
    filename = 'sitemap.xml'
    priority = 0.5

[Params]
	mode="dark" # color-mode → light,dark,toggle or auto
	useCDN=false # don't use CDNs for fonts and icons, instead serve them locally.
    subtitle = "Mojos for the masses" # This sub title was generated by github copilot lmao
    logo = "img/avatar-icon.png"
    favicon = "img/favicon.ico"
    dateFormat = "January 2, 2006"

[[params.social]]
name = "GitHub"
icon = "github"
url = "https://github.com/BuyMyMojo/"

[[params.social]]
name = "Twitter"
icon = "twitter"
url = "https://twitter.com/OwenQuinlan7/"

[[params.social]]
name = "GitLab"
icon = "gitlab"
url = "https://gitlab.com/BuyMyMojo/"


[[menu.main]]
name = "Home"
url = "/"
weight = 1

[[menu.main]]
name = "All posts"
url = "/posts"
weight = 2

[[menu.main]]
name = "About"
url = "page/about/"
weight = 3

[[menu.main]]
name = "Tags"
url = "tags"
weight = 4

Do not use `.Site.BaseURL` in your templates

https://discourse.gohugo.io/t/46692/4

Use `pageRef` for internal links

https://github.com/athul/archie/blob/master/exampleSite/config.toml

how to make Utteranc.es theme follow archie's?

hello, I am a total beginer in web dev. I want to add comment system named "Utteranc.es" in archie. But I got some problems.

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-dark"
        crossorigin="anonymous"
        async>
</script>

my plan is, the theme of utterances follows archie's dark/light mode.
I tried the way like theme="github-{{mode}}" but failed.
But I can not find a way to do it. Any suggestions would be very appreciated!

Favicon ?

Hello,

Thank you for this theme.
How can I add a favicon? I see there is one on the demo site.

Code highlight block issues

I admit I didn't investigate much on this myself.. I'll post the issue just in case someone else experienced this (perhaps it's just me..).

I can see that:
The code highlight themes have their own text highlight color,
which take precedence over the red highlight color of archie light inside the code block.
My issue:
Choosing a light code highlight theme (ex. emacs) will change the text highlight color to a light one inside the block,
that will be used on the emacs light background, so that one cannot see highlighted text inside the code block
(lots of highlights, sorry).

Is there a way to make archie's default text highlight color override the one in the code highlight block?

Also setting
[markup]
[markup.highlight]
anchorLineNos = true
will have the unpleasant effect (but quite reasonable..) to have each line treated as an archie link, with underline.

My config.tml:

baseURL = 'someurl'
languageCode = 'en-us'
title = 'someblog'
theme = "archie"

[params]
mode = "auto"

[markup]
[markup.highlight]
anchorLineNos = true ## <-- line num treated as archie link
codeFences = true
guessSyntax = false
hl_Lines = ''
hl_inline = false
lineAnchors = ''
lineNoStart = 1
lineNos = true
lineNumbersInTable = false
noClasses = true
noHl = true
style = 'emacs'
tabWidth = 4

Trouble deploying theme on Netlify

Hello! This is an issue with myself, probably not your theme. I am having trouble getting the CSS and JS to render when I deploy my website to Netlify.

I have your theme forked:
https://github.com/jmwoliver/archie

And I am importing it as a submodule to my website:
https://github.com/jmwoliver/website

I then hooked it into Netlify to deploy from that repo. That is deployed here:
https://competent-goodall-6e9101.netlify.app/

Looking at the console logs, it looks like it can't get the JS (and I'm assuming the CSS):

Loading failed for the <script> with source “https://jmw.sh/js/feather.min.js”. [competent-goodall-6e9101.netlify.app:18:1](https://competent-goodall-6e9101.netlify.app/)
Loading failed for the <script> with source “https://jmw.sh/js/themetoggle.js”. [competent-goodall-6e9101.netlify.app:49:1](https://competent-goodall-6e9101.netlify.app/)
Uncaught ReferenceError: feather is not defined
    <anonymous> https://competent-goodall-6e9101.netlify.app/:100

My baseURL in config.toml is https://jmw.sh/, but I haven't done the DNS stuff to route the custom domain to the Netlify address, I was waiting to do that until I got this issue figured out. Could that be my problem, I need to route it first?

Sorry for the lame questions, I'm new to Hugo and deploying on Netlify and using a custom domain, so I'm not sure where the disconnect is. Any help would be appreciated! (P.S. your theme is great, I really like how it looks 😄)

What it looks ilke:

What it should look like:

How can I enabled Google Analytics and Disqus ?

Hi, I am new hugo and I like your theme. I use for my personal blog and I dont know how can enable Google A. and Disqus. I read som documents but I couldnt . Any suggestion for enable ?

Move social icons from feather to Simpleicons?

Hey!

The feather icons are only used for social icons, as far as I can tell. Feather has decided to deprecate brand icons, so any future requests for social networks and things like that will not be fulfilled.

The issue referenced above recommends using https://simpleicons.org/ instead.

This would address #49 as well.

Dark Mode Toggle

Currently the Light Mode to Dark mode switching is based on system theme. Implementing a Toggle would be easier for users to switch between the theme.

Light Mode is working (but make sure you dont use a Dark Mode extension when testing) :)

Edit: Sorry my bad. I had the Dark Reader extension enabled on multiple devices. The light/dark mode work just fine :D

Red and Black Theme (Dark/Light mode toggle)

Hey, would it be possible to request a red and black theme and a red and white theme toggle? I've noticed there is green/black. Example: https://not-matthias.github.io/

Mathjax Support

It seems mathjax requires the inclusion of a script to work, so I did 😃

Ready to make a PR if it's approved

search feature

Would you implement a search option on your theme? A cool minimalist Hugo theme with search feature would be great. Thanks for your hard work

More callouts: warning, danger

Would be nice.

PS: love the theme

Add `rel=me` to social links

This will allow the generated blog to be used for web verification, such as the one used by Mastodon

Markdown Syntax Supported?

Hello,

Thanks a lot for the great theme! I really would like to use it, but I was wondering if it could be made to render the markdown syntax, so # My Head 1 & ## My Head 2 would really look like:

My Head 1

My Head 2

In short, it would be so great if it could render all the markdown attributes :)

Thanks a lot in advance, George.

Unclosed tags

<article> and <main> are unclosed.

archie/layouts/_default/single.html

Line 8 in a0fb066

<article>

Add support to TOC

Hope it can add support to TOC, like hugo-theme-even:

https://hugo-theme-even.netlify.app/post/even-preview/

[lang] attribute not set in html element

PageSpeed insights recommend to set [lang] attribute in html header of the pages - which i would expect follow the defaultContentLanguage param in config.toml

element does not have a [lang] attribute If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.

Learn more about the lang attribute.

Right now, this is not the case. attribute is not set despite config.toml defining the following:

languageCode = "en-us"
defaultContentLanguage = 'en'

Use `.RenderString` instead of `markdownify`

https://discourse.gohugo.io/t/deprecate-markdownify/37789/23

Adding language selector to the header?

Hi! I really like this theme, but I want to add a language bar to have a multilingual blog. I have read this post on medium about how to work with multilingual blogs, but is targeted to the Aether theme.

I'm not a web developer, and my knowledge of HTML and CSS it's very basic, but the post include a little html and CSS code to add a language selector, targeted to the aether theme though, and isn't "compatible" with archie. How I can add a little selector like that? Thanks!!!

Read more link is gone in index.html

Looks like after #71, we accidentally removed the Read more -> element from the index page. Is this intended?

Tags do not work

Tried to run the code from the "site" branch through the hugo server -D and tags do not worked well.
Have you seen anything like this?

---

Hugo: v.0.73
OS: Windows 10 Enterprise x64

Google analytics integration

Hi , should adding the following in the config work ?

Your Google analytics code.

googleAnalytics = "UA-123-45"
Or is the GA integration still not available in this theme ?

-Thanks

Link to section

Would be great to add a click to create an anchor link to link to subsections. Here's an example:

I would love it if you could click on the ##Setup and get an anchor link like: https://swsmith.cc/posts/cost-explorer-pcluster.html#setup

The id is already setup so the only feature is to add this as a link to any headers in markdown.

Markdown syntax causing output issues and formatting errors

Overview:

When using certain markdown syntax in the Archie theme, the output is being affected in unexpected ways. This issue aims to address the problems related to specific markdown elements and formatting inconsistencies.

Steps to Reproduce:

1. Add the following markdown syntax:

   1. `v3[272]`
   2. [int execve(const char *pathname, char *const argv[], char *const envp[]);](https://man7.org/linux/man-pages/man2/execve.2.html)
   3. `CR4.VMXE[bit 13]`
   

2. Observe the output for the above markdown syntax and note any inconsistencies or rendering issues.
3. Additionally, insert two new lines between bullet points as follows:

   * https://github.com/
   
   * https://github.com/
   

4. Verify the output for the updated markdown syntax and identify any unexpected behavior or formatting errors.

Current Behavior:

The current behavior of the Archie theme when rendering the markdown syntax mentioned above is causing the following issues:

1. The text v3[272] is not being displayed correctly.
2. The hyperlink [int execve(const char *pathname, char *const argv[], char *const envp[]);](https://man7.org/linux/man-pages/man2/execve.2.html) is not rendering properly.
3. The text CR4.VMXE[bit 13] is being displayed incorrectly.
4. Two new lines between bullet points are not producing the expected line spacing in the rendered markdown output.

Expected Behavior:

The Archie theme should handle the specified markdown syntax consistently and accurately, ensuring the correct rendering of the content. The expected behavior is as follows:

1. The text v3[272] should be displayed correctly.
2. The hyperlink [int execve(const char *pathname, char *const argv[], char *const envp[]);](https://man7.org/linux/man-pages/man2/execve.2.html) should render properly.
3. The text CR4.VMXE[bit 13] should be displayed correctly.
4. Two new lines between bullet points should result in appropriate line spacing in the rendered markdown output.

Environment

• Theme: Archie
• Version: Latest version

Please let me know if you need any further information or clarification regarding this issue.

Academic Icons?

Hello,

I have been trying to create an Academic page using this theme, but I have realised that Feather does not have all the icons I would need (e.g. Google Scholar and Orcid).

I know that Academicons has most of them, so I was wondering if you would have any suggestions on how to call it from Archie.

Thanks in advance, George.

hugo build incorrect path for css

incorrect path in public/index.html
line 19

and after deployment, my github page look like this

after I fix the path, everything is ok

Mermaid diagram problem

Hi!

Does anyone make mermaid diagrams working with this theme? I've recently tried with either the official docs https://gohugo.io/content-management/diagrams/ or some others from google but it doesn't work properly. Basically diagram is renders so small.