Add mathjax and katex support (#75)

* Add mathjax and katex support

* update readme

README.md

@@ -26,7 +26,7 @@ $ cd themes
 $ 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/overview/installing/) of Hugo.
+For more information read the official [setup guide](https://gohugo.io/installation/) of Hugo.
 
 ## Writing Posts
 Create a new `.md` file in the *content/posts* folder
@@ -79,6 +79,8 @@ paginate=3 # articles per page
 	mode="auto" # color-mode → light,dark,toggle or auto
 	useCDN=false # don't use CDNs for fonts and icons, instead serve them locally.
 	subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"
+	mathjax = true # enable MathJax support
+	katex = true # enable KaTeX support
 
 # Social Tags
 

assets/css/fonts.css

@@ -1,5 +1,6 @@
 /* fira-sans-regular - latin */
 @font-face {
+  font-display: swap;
   font-family: 'Fira Sans';
   font-style: normal;
   font-weight: 400;
@@ -12,10 +13,11 @@
        url('../fonts/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
 }
 /* roboto-mono-regular - latin */
-@font-face {  
+@font-face {
+  font-display: swap;
   font-family: 'Roboto Mono';
   font-style: normal;
-  font-weight: 400;  
+  font-weight: 400;
   src: url('../fonts/roboto-mono-v12-latin-regular.eot'); /* IE9 Compat Modes */
   src: url('../fonts/roboto-mono-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/roboto-mono-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
@@ -25,6 +27,7 @@
 }
 /* ibm-plex-mono-500italic - latin */
 @font-face {
+  font-display: swap;
   font-family: 'IBM Plex Mono';
   font-style: italic;
   font-weight: 500;

assets/css/main.css

@@ -138,6 +138,7 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   margin: 1em 0;
+  line-height: 2.5em;
 }
 
 header .main {
@@ -171,11 +172,13 @@ footer {
 .soc {
   display: flex;
   align-items: center;
-  padding-right: 1rem;
-  margin-right: 1rem;
-  border-right: 2px solid;
   border-bottom: none;
 }
+.border {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  border: 1px solid;
+}
 .footer-info {
   padding: var(--footer-padding);
 }

layouts/index.html

@@ -17,14 +17,8 @@
 				<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>
-					<br><div class="description">
-						{{ if isset .Params "description" }}
-						{{ .Description }}
-						{{ else }}
-						{{ .Summary }}&hellip;
-						{{ end }}
-					</div>
-					<a href="{{ .RelPermalink }}">Read more ⟶</a>
+					<br>{{ template "partials/pagedescription.html" . }}
+					<a class="readmore" href="{{ .RelPermalink }}">Read more ⟶</a>
 				</section>
 				{{ end }}
 				{{ template "partials/paginator.html" . }}

layouts/partials/footer.html

@@ -1,7 +1,8 @@
 <footer>
   <div style="display:flex">
     {{- range $index, $key := .Site.Params.Social -}}
-    <a class="soc" href="{{ $key.url }}" title="{{ $key.name }}"><i data-feather="{{ $key.icon }}"></i></a>
+    <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">

layouts/partials/head.html

@@ -7,7 +7,7 @@
 		<a href="{{ .URL }}">{{ .Name }}</a>
 		{{ end }}
 		{{ if eq .Site.Params.mode "toggle" -}}
-        | <a id="dark-mode-toggle" onclick="toggleTheme()" href=""></a>
+        | <span id="dark-mode-toggle" onclick="toggleTheme()"></span>
 		<script src="{{ .Site.BaseURL }}js/themetoggle.js"></script>
 		{{ end }}
 	</nav>

layouts/partials/header.html

@@ -43,6 +43,47 @@
 		{{ $darkstyle := resources.Get "css/dark.css" | fingerprint }}
 		<link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} {{ if eq .Site.Params.mode "toggle" }}disabled{{ end }} />
 	{{ end }}
+
+	<!-- Mathjax support -->
+	{{ with .Site.Params.mathjax }}
+		<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({
+			tex2jax: {
+				inlineMath: [['$','$'], ['\\(','\\)']],
+				displayMath: [['$$','$$'], ['\[','\]']],
+				processEscapes: true,
+				processEnvironments: true,
+				skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+				TeX: { equationNumbers: { autoNumber: "AMS" },
+						 extensions: ["AMSmath.js", "AMSsymbols.js"] }
+			}
+		});
+		</script>
+	{{ end }}
+
+	<!-- KaTeX support -->
+	{{ with .Site.Params.katex }}
+		<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() {
+					renderMathInElement(document.body, {
+							delimiters: [
+									{left: "$$", right: "$$", display: true},
+									{left: "$", right: "$", display: false}
+							]
+					});
+			});
+			</script>
+	{{ end }}
 	
 	<!-- Custom CSS style get applied last -->
 	{{- if isset .Site.Params "customcss" }}
@@ -54,6 +95,8 @@
 	{{- range .Site.Params.customJS }}
 	{{- if or (hasPrefix . "http://") (hasPrefix . "https://") }}
 	<script src="{{ . }}"></script>
+	{{- else if (hasPrefix . "<script")}}
+    {{ .| safeHTML }}
 	{{- else }}
 	<script src="{{ $.Site.BaseURL }}{{ . }}"></script>
 	{{- end }}

layouts/partials/pagedescription.html

@@ -0,0 +1,7 @@
+<div class="description">
+	{{ if isset .Params "description" }}
+	{{ .Description }}
+	{{ else }}
+	{{ .Summary }}&hellip;
+	{{ end }}
+</div>