modified to my own needs

":date_medium" matches "Jan 2, 2006" in english locales while adapting
to hugo's configured locale.

README.md

@@ -16,6 +16,7 @@ Forked from [Ezhil Theme](https://github.com/vividvilla/ezhil)
 - Auto Dark Mode(based on system theme)
 - Dark/Light Mode toggle
 - tl:dr; frontamatter
+- Table of contents
 - Cache busting for CSS files
 - Disqus Comments
 
@@ -29,6 +30,9 @@ $ git clone https://github.com/athul/archie.git
 Edit the `config.toml` file with `theme="archie"`
 For more information read the official [setup guide](https://gohugo.io/installation/) of Hugo.
 
+If you encounter any issues with Google Analytics, update Hugo to v0.125.0 or
+later and make sure your using the latest version of the theme.
+
 ## Writing Posts
 Create a new `.md` file in the *content/posts* folder
 ```yml
@@ -39,6 +43,7 @@ date:
 tldr: (optional)
 draft: true/false (optional)
 tags: [tag names] (optional)
+toc: true/false (optional)
 ---
 ```
 

assets/css/dark.css

@@ -67,6 +67,11 @@ h6::before {
   content: "###### ";
 }
 
+.toc {
+  background-color: #272822;
+  color: white;
+}
+
 a {
   border-bottom: 3px solid var(--darkMaincolor);
   color: inherit;

assets/css/main.css

@@ -70,6 +70,10 @@ img {
   border: 3px solid #ececec;
   max-width: 100%;
 }
+.img-badge {
+  border: 0px;
+  max-width: 15em;
+}
 
 figure {
   box-sizing: border-box;
@@ -136,14 +140,24 @@ pre code {
 header {
   display: flex;
   flex-wrap: wrap;
+  position: sticky;
+  position: sticky; 
+  top: 1em;
+  padding: 1em;
   justify-content: space-between;
-  margin: 1em 0;
+  background-color: #191830;
   line-height: 2.5em;
 }
 
+
 header .main {
   font-size: 1.5rem;
 }
+.no-dec {
+  text-decoration: none;
+  border: none;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-size: 1.2rem;
   margin-top: 2em;
@@ -156,14 +170,40 @@ h4::before { color: var(--maincolor); content: '#### '; }
 h5::before { color: var(--maincolor); content: '##### '; }
 h6::before { color: var(--maincolor); content: '###### '; }
 
+
+.site-title::before, .site-about::before, .site-param::before {
+  content: "";
+}
+
+.site-title {
+  font-size: 3em;
+}
+.site-about {
+  font-size: 1em;
+}
+.site-param {
+  font-size: 1.5em;
+}
+
 .meta {
   color: #999;
   letter-spacing: -0.5px;
 }
 
+.toc {
+  background-color: #ececec;
+  color: #232333;
+  padding: 10px;
+  padding-bottom: 0;
+  border-radius: 5px;
+  display: inline-block;
+}
+
 /* Footer */
 footer {
   display: flex;
+  flex-flow: row;
+  row-gap: 1em;
   align-items: center;
   border-top: 0.4rem dotted var(--bordercl);
   padding: 2rem 0rem;

exampleSite/config.toml

@@ -19,12 +19,13 @@ url = "https://github.com/athul/archie"
 [[params.social]]
 name = "Twitter"
 icon = "twitter"
-url = "https://github.com/athulcajay/"
+url = "https://twitter.com/athulcajay/"
 
 [[params.social]]
 name = "GitLab"
 icon = "gitlab"
 url = "https://gitlab.com/athul/"
+
 [[menu.main]]
 name = "Home"
 url = "/"

exampleSite/content/posts/post-6.md

@@ -21,7 +21,7 @@ description: Here is a demo of all shortcodes available in Hugo.
 
 ## Tweet
 
-{{< tweet 877500564405444608 >}}
+{{< tweet user="GoHugoIO" id="877500564405444608" >}}
 
 ## Vimeo
 

exampleSite/content/posts/tg-gh.md

@@ -3,6 +3,7 @@ title: Telegram Bot for  GitHub Actions
 date: "2020-04-01"
 description: Make a Telegram bot with Node.js and use it with GitHub Actions for sending notifications to you about the repo.
 tldr: Making GitHub Actions with Js Code
+toc: true
 ---
 ## Telegram
 [Telegram](https://telegram.org/) is a cloud-based mobile and desktop messaging app with a focus on security and speed. It is free to use and extensively hackable. It also has a good bot support system. The API is also easy to implement and has many wrappers for building bots with the API.

layouts/_default/list.html

@@ -9,7 +9,7 @@
 	{{- range .Data.Pages -}}
 		{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
 		<li class="post">
-			<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span>
+			<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span>
 		</li>
 		{{- end -}}
 	{{- end -}}

layouts/_default/single.html

@@ -3,7 +3,7 @@
 	<article>
 		<div class="title">
 			<h1 class="title">{{ .Title }}</h1>
-			<div class="meta">Posted on {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
+			<div class="meta">Posted on {{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
 		</div>
 		{{ if isset .Params "tldr" }}
 		<div class="tldr">
@@ -11,10 +11,21 @@
 			{{ .Params.tldr }}
 		</div>{{ end }}
 
+		{{ if isset .Params "toc" }}
+		<div class="toc">
+		<strong>Table of contents:</strong>
+		{{ .TableOfContents }}
+		</div>{{ end }}
+
 		<section class="body">
 			{{ .Content }}
+			<a href="https://notbyai.fyi/#not-by-ai-mission" class="no-dec" target="_blank">
+				<img class="img-badge" src="/Written-By-Human-Not-By-AI-Badge-white.svg" alt="Written by human, not by Ai" aria-label="Written by human, not by Ai">
+			</a>
 		</section>
 
+		{{ partial "chat.html" }}
+
 		<div class="post-tags">
 			{{ if ne .Type "page" }}
 			{{ if gt .Params.tags 0 }}
@@ -28,15 +39,6 @@
 			{{ end }}
 			{{ end }}
 		</div>
-		{{- $.Scratch.Set "isDisqus" true -}}
-		<!-- Check if disqus short name is given -->
-		{{ if not .Site.DisqusShortname }}
-		{{- $.Scratch.Set "isDisqus" false -}}
-		{{ end }}
-
-		{{- if eq ($.Scratch.Get "isDisqus") true -}}
-		{{- partial "disqus.html" . -}}
-		{{- end -}}
 	</article>
 </main>
 {{ end }}

layouts/_default/term.html

@@ -9,7 +9,7 @@
 	{{- range .Data.Pages -}}
 		{{- if (not (in (.Site.Params.excludedTypes | default (slice "page")) .Type)) -}}
 		<li class="post">
-			<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span>
+			<a href="{{ .RelPermalink }}">{{.Title}}</a> <span class="meta">{{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</span>
 		</li>
 		{{- end -}}
 	{{- end -}}

layouts/index.html

@@ -5,20 +5,24 @@
 		<div class="content">
 			{{ partial "head.html" . }}
 			
+			<h1 class="site-title"> {{ .Site.Params.Name }}</h1>
+			<h1 class="site-about"> {{ .Site.Params.About }}</h1>
+
+			<h1 class="site-param">My posts</h1>
 			<main class="list">
 				<div class="site-description">
 					{{- if isset .Site.Params "subtitle" -}}
-					<p>{{ .Site.Params.Subtitle | markdownify }}</p>
+					<p>{{ .Site.Params.Subtitle | .Page.RenderString }}</p>
 					{{- end -}}
 				</div>
-				{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
+				{{ $pages := (where .Site.RegularPages "Type" "post" | first 5) }}
 				{{ $paginator := .Paginate (where $pages "Params.hidden" "ne" true) }}
 				{{ range $paginator.Pages }}
 				<section class="list-item">
 					<h1 class="title"><a href="{{ .RelPermalink }}">{{.Title}}</a></h1>
-					<time>{{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</time>
+					<time>{{ dateFormat ":date_medium" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</time>
 					<br>{{ template "partials/pagedescription.html" . }}
-					<a class="readmore" href="{{ .RelPermalink }}">Read more ⟶</a>
+					<a class="readmore" href="{{ .RelPermalink }}">Read more</a>
 				</section>
 				{{ end }}
 				{{ template "partials/paginator.html" . }}

layouts/partials/chat.html

@@ -0,0 +1,12 @@
+<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
+<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
+<div id="comment-section"></div>
+<script>
+initComments({
+  node: document.getElementById("comment-section"),
+  defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
+  serverName: "cactus.chat",
+  siteName: "4o1x5dev",
+  commentSectionId: "{{ index .Params 0 }}"
+})
+</script>

layouts/partials/disqus.html

@@ -1,19 +0,0 @@
-<div id="disqus_thread"></div>
-<script type="text/javascript">
-    (function () {
-        // Don't ever inject Disqus on localhost--it creates unwanted
-        // discussions from 'localhost:1313' on your Disqus account...
-        if (window.location.hostname == "localhost")
-            return;
-
-        var dsq = document.createElement('script');
-        dsq.type = 'text/javascript';
-        dsq.async = true;
-        var disqus_shortname = '{{ .Site.DisqusShortname }}';
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-    })();
-</script>
-<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by
-        Disqus.</a></noscript>
-<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

layouts/partials/footer.html

@@ -1,21 +1,6 @@
 <footer>
-  <div style="display:flex">
-    {{- range $index, $key := .Site.Params.Social -}}
-    <a class="soc" href="{{ $key.url }}" rel="me" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>
-    <a class="border"></a>
-    {{- end -}}
-  </div>
   <div class="footer-info">
-    {{ dateFormat "2006" now }} {{ with .Site.Copyright }} {{ . }} | {{ end }} <a
+  <a href="https://matrix.to/#/@4o1x5:4o1x5.dev" target="_blank">@4o1x5:4o1x5.dev</a>
-      href="https://github.com/athul/archie">Archie Theme</a> | Built with <a href="https://gohugo.io">Hugo</a>
   </div>
 </footer>
-{{ if not .Site.IsServer }}
-{{ template "_internal/google_analytics_async.html" . }}
-{{ end }}
 
-{{- if (isset .Site.Params "social") -}}
-<script>
-  feather.replace()
-</script>
-{{- end -}}

layouts/partials/head.html

@@ -1,14 +1,10 @@
 <header>
 	<div class="main">
-		<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+		<a href="{{ absURL "/" }}">{{ .Site.Title }}</a>
 	</div>
 	<nav>
 		{{ range .Site.Menus.main }}
 		<a href="{{ .URL }}">{{ .Name }}</a>
 		{{ end }}
-		{{ if eq .Site.Params.mode "toggle" -}}
-        | <span id="dark-mode-toggle" onclick="toggleTheme()"></span>
-		<script src="{{ .Site.BaseURL }}js/themetoggle.js"></script>
-		{{ end }}
 	</nav>
 </header>

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<head>
+<head lang="{{ .Site.Language.Lang }}">
 	<meta charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	{{- $title := ( .Title ) -}}
@@ -23,10 +23,9 @@
 	{{- template "_internal/opengraph.html" . -}}
 	{{- template "_internal/twitter_cards.html" . -}}
 	{{ if and (isset .Site.Params "social") (.Site.Params.useCDN | default false) -}}
-		<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 	{{- else if or (isset .Site.Params "social") (eq .Site.Params.mode "toggle") -}}
-		<script src="{{ .Site.BaseURL }}js/feather.min.js"></script>
 	{{ end }}
+
 	{{ if .Site.Params.useCDN | default false -}}
         <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@1,500&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
@@ -49,7 +48,7 @@
 		<script type="text/javascript"
 		src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 		</script>
-	
+
 		<!-- inline Mathjax -->
 		<script type="text/x-mathjax-config">
 		MathJax.Hub.Config({
@@ -71,7 +70,7 @@
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css">
 		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js"></script>
 		<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
-		
+
 		<!-- inline KaTeX -->
 		<script>
 			document.addEventListener("DOMContentLoaded", function() {
@@ -84,7 +83,7 @@
 			});
 			</script>
 	{{ end }}
-	
+
 	<!-- Custom CSS style get applied last -->
 	{{- if isset .Site.Params "customcss" }}
 		{{ range .Site.Params.customCSS }}
@@ -98,7 +97,7 @@
 	{{- else if (hasPrefix . "<script")}}
     {{ .| safeHTML }}
 	{{- else }}
-	<script src="{{ $.Site.BaseURL }}{{ . }}"></script>
+	<script src="{{ absURL . }}"></script>
 	{{- end }}
 	{{- end }}
 </head>

layouts/shortcodes/chat.html

@@ -0,0 +1,12 @@
+<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
+<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
+<div id="comment-section"></div>
+<script>
+initComments({
+  node: document.getElementById("comment-section"),
+  defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
+  serverName: "cactus.chat",
+  siteName: "4o1x5dev",
+  commentSectionId: "{{ index .Params 0 }}"
+})
+</script>

static/js/themetoggle.js

@@ -1,23 +0,0 @@
-function setTheme(mode) {
-    localStorage.setItem("theme-storage", mode);
-    if (mode === "dark") {
-        document.getElementById("darkModeStyle").disabled=false;
-        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
-        feather.replace()
-    } else if (mode === "light") {
-        document.getElementById("darkModeStyle").disabled=true;
-        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
-        feather.replace()
-    }
-}
-
-function toggleTheme() {
-    if (localStorage.getItem("theme-storage") === "light") {
-        setTheme("dark");
-    } else if (localStorage.getItem("theme-storage") === "dark") {
-        setTheme("light");
-    }
-}
-
-var savedTheme = localStorage.getItem("theme-storage") || "light";
-setTheme(savedTheme);