Started refactoring

This commit is contained in:
slashformotion 2021-07-21 20:23:55 +02:00
parent e2af7d63ca
commit c454c6f4ca
19 changed files with 186 additions and 124 deletions

View file

@ -5,25 +5,20 @@ Hugo-Tufte is a minimalist blog-like theme for the
[static site generator Hugo](https://gohugo.io) that [static site generator Hugo](https://gohugo.io) that
attempts to be a faithful implementation of the attempts to be a faithful implementation of the
[Tufte-css](https://github.com/edwardtufte/tufte-css) project. [Tufte-css](https://github.com/edwardtufte/tufte-css) project.
It supports mathematical typesetting via [MathJax](https://www.mathjax.org). It supports mathematical typesetting via [katex](https://katex.org/).
By utilizing copious partial templates the theme is largely customizable. By utilizing copious partial templates the theme is largely customizable.
## State of Project ## State of Project
This theme is largely unmaintained. If there is a particular fork This is a fork of the original [hugo-tufte](https://github.com/shawnohare/hugo-tufte);
that should be considered the primary project please submit a PR
updating the README, thanks!
## Math ## Math
Mathjax renders LaTeX written inside of markdown files. LaTeX can be [katex](https://katex.org/) renders LaTeX written inside of markdown files. LaTeX can be
written more or less as normal, but inline and display environments that written more or less as normal. Some examples:
start with `\` must be escaped. Some examples:
- `This $\LaTeX$ will be rendered inline.` - This `\\( \frac{1}{2} \\)` will be rendered inline.
- `This \\(\LaTeX\\) will be rendered inline.` - A simple displayed equation: `$$f(x, y) := e^{x^2 - y^2}.$$`
- `A simple displayed equation: $$f(x, y) := e^{x^2 - y^2}.$$`
- `A simple displayed equation: \\[f(x, y) := e^{x^2 - y^2}.\\]`
There currently seems to be some weirdness with other environments, There currently seems to be some weirdness with other environments,
such as the `align` environment. These environments will render provided such as the `align` environment. These environments will render provided
@ -78,9 +73,9 @@ support all the features present in the
- **Usage**: Accepts the named parameters `cite` and `footer`. - **Usage**: Accepts the named parameters `cite` and `footer`.
- **Example**: - **Example**:
```html ```html
{{% blockquote cite="www.shawnohare.com" footer="Shawn" %}} {{< blockquote cite="www.shawnohare.com" footer="Shawn" >}}
There is nothing more beautiful than an elegant mathematical proof. There is nothing more beautiful than an elegant mathematical proof.
{{% /blockquote %}}` {{< /blockquote >}}
``` ```
- `div` - `div`
@ -103,17 +98,20 @@ support all the features present in the
styled epigraph will be used if the `type` parameter is set to `compact`. styled epigraph will be used if the `type` parameter is set to `compact`.
- **Example**: - **Example**:
``` ```
{{% epigraph pre="Author Writer, " cite="Math is Fun" %}} {{< epigraph pre="Author Writer, " cite="Math is Fun" >}}
This is an example of an epigraph with some math This is an example of an epigraph with some math
\\( \mathbb N \subseteq \mathbb R \\) \\( \mathbb N \subseteq \mathbb R \\)
to start the beginning of a section. to start the beginning of a section.
{{% /epigraph %}} {{< /epigraph >}}
``` ```
- `marginnote` - `marginnote`
- **Description**: Wrap text to produce a numberless margin note. - **Description**: Wrap text to produce a numberless margin note.
- Usage: `{{% marginnote %}}...{{% /marginnote %}}` - Usage: `{{< marginnote >}}...{{< /marginnote >}}`
- **Example**: `{{% marginnote %}}Some marginnote{{% /marginnote%}}` - **Example**:
```html
{{< marginnote >}}Some marginnote{{< /marginnote>}}
```
- `section` - `section`
- **Description**: This shortcode is provided as a work-around for wrapping - **Description**: This shortcode is provided as a work-around for wrapping
@ -130,11 +128,14 @@ support all the features present in the
- `sidenote` - `sidenote`
- **Description**: Wrap text to produce an automatically numbered sidenote. - **Description**: Wrap text to produce an automatically numbered sidenote.
- **Usage**: identical to `marginnote` - **Usage**: identical to `marginnote`
`{{% sidenote %}}...{{% /sidenote %}}` `{{< sidenote >}}...{{< /sidenote >}}`
- **Example**: `{{% sidenote %}}Some sidenote{{% /sidenote %}}` - **Example**:
```html
{{< sidenote >}}Some sidenote{{< /sidenote >}}
```
## Templates
TODO #### TODO
- [ ] Describe the role of each template file, as commenting within the files - [ ] Describe the role of each template file. Commenting in template files works.
themselves seems to break the templates. - [ ] Fix the F**ing css

View file

@ -3,7 +3,7 @@ math = false
meta = true meta = true
toc = true toc = true
author = "AUTHOR NAME" author = "AUTHOR NAME"
type = "post"
+++ +++

View file

@ -1,9 +1,7 @@
contentdir = "content" themesDir = "../../"
layoutdir = "layouts"
publishdir = "public"
builddrafts = true
canonifyurls = true canonifyurls = true
baseurl = "https://github.com/shawnohare/hugo-tufte" # baseurl = "https://github.com/shawnohare/hugo-tufte"
theme = "hugo-tufte" theme = "hugo-tufte"
title = "Hugo-tufte Theme Example Site" title = "Hugo-tufte Theme Example Site"
@ -14,9 +12,11 @@ title = "Hugo-tufte Theme Example Site"
tag = "tags" tag = "tags"
[params] [params]
math = true
subtitle = "Subtitle goes here." subtitle = "Subtitle goes here."
copyrightHolder = "Copyright Holder" copyrightHolder = "Copyright Holder"
showPoweredBy = true showPoweredBy = true
hidedate = false
# ----------------------------------------------------------------------- # -----------------------------------------------------------------------
# Navigation menu # Navigation menu
@ -55,3 +55,9 @@ title = "Hugo-tufte Theme Example Site"
weight = -90 weight = -90
identifier = "twitter" identifier = "twitter"
url = "https://twitter.com" url = "https://twitter.com"
[markup]
[markup.goldmark]
unsafe = false

View file

@ -6,7 +6,7 @@ math = true
title = "Hugo-Tufte Features" title = "Hugo-Tufte Features"
subtitle = "Fancy Subtitle" subtitle = "Fancy Subtitle"
toc = true toc = true
categories = ["mathjax", "latex", "tufte-css"] categories = ["katex", "latex", "tufte-css"]
+++ +++
@ -16,23 +16,24 @@ of this theme. One of them is \\( \LaTeX \\) via MathJax.
{{< section "begin" >}} {{< section "begin" >}}
## A Bit About Mathematics ## A Bit About Mathematics
{{% epigraph pre="Shawn O'Hare, " cite="Math is Fun" %}} {{< epigraph pre="Shawn O'Hare, " cite="Math is Fun" >}}
This is an example of an epigraph with some math This is an example of an epigraph with some math
\\(\mathbb N \subseteq \mathbb R \\) \\(\mathbb N \subseteq \mathbb R \\)
to start the beginning of a section. to start the beginning of a section.
{{% /epigraph %}} {{< /epigraph >}}
<!--more--> <!--more-->
### Inline ### Inline
Some inline math: Some inline math:
{{% marginnote "mn-example" %}}This is a margin note.{{% /marginnote %}} {{< marginnote "mn-example" >}}This is a margin note.{{< /marginnote >}}
$e^{i \pi} = -1$ and \\(\sqrt{-1} = i \\) \\(e^{i \pi} = -1\\)
and \\(\sqrt{-1} = i \\)
and \\( a_2 = 3 \\). and \\( a_2 = 3 \\).
### Display ### Display
And display math using escaped brackets `\\[`: And display math using escaped brackets `\\[`:
{{% sidenote "sn-example" %}}This is a sidenote!{{% /sidenote %}} {{< sidenote "sn-example" >}}This is a sidenote!{{< /sidenote >}}
\\[ \\[
-- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y]. -- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].
\\] \\]
@ -73,7 +74,7 @@ is produced from
Some blockquotes. But first, we try to manually cite via Some blockquotes. But first, we try to manually cite via
<cite>This is between cite tags and has math: \\(e^x \\)</cite> <cite>This is between cite tags and has math: \\(e^x \\)</cite>
{{% blockquote cite="www.shawnohare.com" footer="Shawn O'Hare" %}} {{< blockquote cite="www.shawnohare.com" footer="Shawn O'Hare" >}}
This is a blockquote with two paragraphs, that employs the This is a blockquote with two paragraphs, that employs the
theme's `blockquote` shortcode. Lorem ipsum dolor sit amet, theme's `blockquote` shortcode. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
@ -82,7 +83,7 @@ Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing. id sem consectetuer libero luctus adipiscing.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
{{% /blockquote %}} {{< /blockquote >}}
### New thoughts ### New thoughts

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{- partial "header.html" . -}}
<body >
{{ block "main" . }}{{ end }}
<script>
feather.replace()
</script>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!-- +++
layout: "baseof"
+++ -->
{{ define "main" }}
<div id="layout" class="pure-g">
<article class="pure-u-1">
{{ partial "brand.html" . }}
{{ range first 5 .Site.Pages }}
{{ partial "content.header.html" . }}
<p>{{ .Summary }}</p>
{{ if .Truncated }}
<p><a href="{{ .RelPermalink }}">Read On &rarr;</a></p>
{{ end }}
{{ end }}
{{ partial "footer.html" . }}
</article>
</div>
{{ end }}

View file

@ -1,5 +1,6 @@
{{ partial "header.html" . }}
{{ partial "header.html" . }}
<body> <body>
<div id="layout" class="pure-g"> <div id="layout" class="pure-g">
<article class="pure-u-1"> <article class="pure-u-1">

View file

@ -1,3 +1,11 @@
{{/*
This template render single pages
*/}}
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<body> <body>

View file

@ -1,17 +1,25 @@
{{ partial "header.html" . }} {{ define "main" }}
<body>
<div id="layout" class="pure-g"> <div id="layout" class="pure-g">
<article class="pure-u-1"> <article class="pure-u-1">
{{ partial "brand.html" . }} {{ partial "brand.html" . }}
{{ range first 5 .Site.Pages }} {{ range where .Site.RegularPages "Type" "post"}}
{{ partial "content.header.html" . }}
<p>{{ .Summary }}</p> <h1 class="content-title">
{{ if .Truncated }} {{ if .IsNode }}
<p><a href="{{ .RelPermalink }}">Read On &rarr;</a></p> <a href="{{ .Permalink }}">{{ .Title}}</a>
{{ end }} {{ else }}
{{ end }} <a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a>
{{ partial "footer.html" . }} {{ end }}
</article> </h1>
<p>{{ truncate 120 .Summary }}</p>
{{/* {{ if .Truncated }} */}}
<p><a href="{{ .RelPermalink }}">Read On &rarr;</a></p>
{{/* {{ end }} */}}
{{ end }}
{{ partial "footer.html" . }}
</article>
</div> </div>
</body> {{ end }}
</html>

View file

@ -1,39 +1,42 @@
<section> <section>
<h1 class="content-title">
{{ if .IsNode }} <h1 class="content-title">
<a href="{{ .Permalink }}">{{ .Title}}</a> {{ if .IsNode }}
{{ else }} <a href="{{ .Permalink }}">{{ .Title}}</a>
<a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a> {{ else }}
<a href="{{ .RelPermalink }}">{{ .Title }}{{ if .Draft }} :: Draft {{end}}</a>
{{ end }}
</h1>
{{ if .IsPage }}
{{ if .Params.subtitle }}
<p class=subtitle>{{ .Params.subtitle }}</p>
{{ end }}
{{ if or (eq .Type "post") (.Params.meta) }}
<span class="content-meta">
{{ if .Params.author }}
<i class="fa fa-user">&nbsp;</i><span class="author">
&nbsp;{{ .Params.author }}</span> <br>
{{ end }}
{{ if not .Params.hidedate }}
<i class="fa fa-calendar"></i>
&nbsp;{{ .Date.Format "Jan 2, 2006" }}
{{end }}
{{ if not .Params.hidereadtime }}
&nbsp;<i class="fa fa-clock-o"></i>
&nbsp;{{ .ReadingTime }} min read
{{ end }}
{{ if .Params.categories }}
<br>
<i class="fa fa-tags"> </i>
{{ range .Params.categories }}
<a href="{{ "/categories/" | absURL }}{{ . | urlize }}">{{ . }}</a>
{{ end }}
{{ end }}
</span>
{{ end }}
{{ end }} {{ end }}
</h1> </section>
{{ if .IsPage }}
{{ if .Params.subtitle }}<p class=subtitle>{{ .Params.subtitle }}</p>{{ end }}
{{ if or (eq .Type "post") (.Params.meta) }}
<span class="content-meta">
{{ if .Params.author }}
<i class="fa fa-user">&nbsp;</i><span class="author">
&nbsp;{{ .Params.author }}</span> <br>
{{ end }}
{{ if not .Params.hidedate }}
<i class="fa fa-calendar"></i>
&nbsp;{{ .Date.Format "Jan 2, 2006" }}
{{end }}
{{ if not .Params.hidereadtime }}
&nbsp;<i class="fa fa-clock-o"></i>
&nbsp;{{ .ReadingTime }} min read
{{ end }}
{{ if .Params.categories }}
<br>
<i class="fa fa-tags"> </i>
{{ range .Params.categories }}
<a href="{{ "/categories/" | absURL }}{{ . | urlize }}">{{ . }}</a>
{{ end }}
{{ end }}
</span>
{{ end }}
{{ end }}
</section>

View file

@ -1,2 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">

View file

@ -1,7 +1,10 @@
{{ partial "doctype.html" . }}
<head> <head>
<title>{{ .Site.Title }} - {{ .Title }}</title> <title>{{ .Site.Title }} - {{ .Title }}</title>
{{ partial "meta.html" . }} <meta charset="utf-8">
{{ partial "opengraph.html" }} <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description"
content="{{ with .Description }}{{ . }}{{ else }}{{ with .Summary }}{{ . }}{{ else }}{{ .Site.Params.description }}{{end }}{{ end }} ">
<link rel="canonical" href="{{ .Permalink }}" />
{{ partial "header.includes.html" . }} {{ partial "header.includes.html" . }}
</head> </head>

View file

@ -1,6 +1,6 @@
<!-- Load MathJax, if necessary. --> <!-- Load Katex, if necessary. -->
{{ if or .Params.math .IsHome }} {{ if or .Params.math .IsHome }}
{{ partial "math.html" . }} {{ partial "math.html" . }}
{{ end }} {{ end }}
<!-- Syntax highlighting --> <!-- Syntax highlighting -->
@ -23,6 +23,7 @@
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script defer src="{{ "/js/main.js" | absURL }}"></script>
<!-- Main CSS file based on Pure blog layout --> <!-- Main CSS file based on Pure blog layout -->
<link rel="stylesheet" href="{{ "/css/tufte.css" | absURL }}"> <link rel="stylesheet" href="{{ "/css/tufte.css" | absURL }}">
<link rel="stylesheet" href="{{ "/css/hugo-tufte.css" | absURL }}"> <link rel="stylesheet" href="{{ "/css/hugo-tufte.css" | absURL }}">

View file

@ -1,18 +1,4 @@
<script type="text/x-mathjax-config"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">
MathJax.Hub.Config({ <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"></script>
tex2jax: { <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\\[','\\]']],
processEscapes: true,
processEnvironments: true,
menuSettings: { zoom: "Double-Click" },
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
</script>
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

View file

@ -1,7 +0,0 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ .Description }}">
<meta name="keywords" content="{{ range .Keywords }}{{ . }},{{ end }}">
<meta name="author" content="{{ .Site.Title }}">
{{ hugo.Generator }}

View file

@ -1,3 +1,6 @@
{{ $marginnoteDomIdSuffix := .Ordinal }}<label for="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle">&#8853;</label> {{ $marginnoteDomIdSuffix := .Ordinal }}
<input type="checkbox" id="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle"/> <label for="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}">
<span class="marginnote">{{ .Inner }}</span> class="margin-toggle">&#8853;
</label>
<input type="checkbox" id="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle" />
<span class="marginnote">{{ .Inner }}</span>

14
static/js/main.js Normal file
View file

@ -0,0 +1,14 @@
<script>
renderMathInElement(
document.body,
{
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: true},
{left: "\\(", right: "\\)", display: true}
],
displayMode: true
}
);
</script>