Merge pull request #10 from xvallspl/TableOfContents

README.md

@@ -92,9 +92,35 @@ You can create a new blog post page by going to the root of your project and typ
 hugo new blog/:blog-post.md
 ```
 
-Where `:blog-post.md` is the name of the file of your new post.
+Where `:blog-post.md` is the name of the file of your new post. 
 
-The theme supports KaTeX which renders math typesetting in markdown document. Simply turn on by `math: true` in your post.
+This will execute the theme's `blog` archetype to create a new markdown file in `contents/blog/:blog-post.md` with the following frontmatter:
+
+```md
+# Default post frontmatter:
+
+# The title of your post. Default value is generated
+# From the markdown filename
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+# The date the post was created
+date: {{ .Date }}
+# The post filename
+slug: ""
+# Post description used for seo
+description: ""
+# Post keywords used for seo
+keywords: []
+# If true, the blog post will not be included in static build
+draft: true
+# Categorize your post with tags
+tags: []
+# Uses math typesetting
+math: false
+# Includes a table of contents on screens >1024px
+toc: false
+```
+
+The frontmatter above is the default for a new post, but all values can be changed.
 
 ### Adding a new section menu
 

archetypes/blog.md

@@ -6,5 +6,6 @@ description: ""
 keywords: []
 draft: true
 tags: []
-stylesheet: "post.css"
+math: false
+toc: false
 ---

assets/scss/pages/post.scss

@@ -1,13 +1,25 @@
-@import '../main';
-@import '../partials/github-syntax-highlighting';
-@import '../partials/colors';
+@import "../main";
+@import "../partials/github-syntax-highlighting";
+@import "../partials/colors";
+
+$tocBreakpoint: 1024px;
+
+/* Aligns ToC content */
+.flex-wrapper {
+  display: flex;
+}
+
+.post__container {
+  flex-grow: 1;
+}
 
 .post {
   width: 100%;
   max-width: 34rem;
   margin: 0 auto;
 
-  h2, h3 {
+  h2,
+  h3 {
     position: relative;
     padding-top: 10px;
 
@@ -44,17 +56,7 @@
   }
 }
 
-.post__content a {
-  font-weight: 400;
-  color: #0366d6;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.post__title {
+#post__title {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
@@ -64,42 +66,42 @@
   font-size: 0.8rem;
 }
 
-.cp_embed_wrapper {
-  margin-top: 1.5rem;
+.post__footer {
+  padding-top: 3rem;
 }
 
-.codepen__caption {
-  display: block;
-  width: 75%;
-  margin: 0.5rem auto 0;
-  color: $grey;
-  font-size: 0.8rem;
-  font-weight: 300;
-  text-align: center;
+.toc-container {
+  position: sticky;
+  align-self: start;
+  top: 3rem;
+  max-width: 350px;
+
+  @media screen and (max-width: $tocBreakpoint) {
+    visibility: hidden;
+    width: 0;
+    margin: 0;
+  }
 }
 
-.note {
-  width: 90%;
-  margin: 1rem auto 0;
-  font-size: 12px;
-  text-align: center;
-  line-height: 1.5;
-  color: $grey;
+.toc-post-title {
+  font-size: 0.9rem;
+  margin-bottom: 0.8rem;
+}
 
-  code {
-    font-size: 12px;
-    color: $darkGrey;
-    background-color: transparent;
-
-    &:before,
-    &:after {
-      content: '`';
-    }
+#TableOfContents {
+  ul {
+    list-style: none;
+    margin: 0;
   }
 
   a {
-    color: $darkGrey;
-    text-decoration: underline;
+    text-decoration: none;
+    color: #9b9b9b;
+    font-size: 0.9rem;
+  }
+
+  a.active {
+    color: rgb(51, 51, 51);
   }
 }
 
@@ -142,20 +144,6 @@
   }
 }
 
-p.warning {
-  background: #FFF9DF;
-  padding: 1rem;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: #747160;
-  border-left: 2px solid #747160;
-
-  a {
-    color: #747160;
-    text-decoration: underline;
-  }
-}
-
 .pagination {
   display: flex;
   flex-direction: column;
@@ -214,7 +202,6 @@ footer {
   }
 }
 
-
 /* overrides */
 .post__content {
   ul {
@@ -224,7 +211,7 @@ footer {
       margin-bottom: 0.5rem;
 
       &::before {
-        content: '-';
+        content: "-";
         color: $darkGrey;
         position: absolute;
         margin-left: -15px;

exampleSite/content/blog/example-post.md

@@ -6,7 +6,8 @@ description: "This is an example post for hugo-theme-codex."
 keywords: ["gohugo", "hugo", "go", "blog"]
 draft: false
 tags: ["hugo"]
-stylesheet: "post.css"
+math: false
+toc: true
 ---
 
 ## The standard Lorem Ipsum passage

exampleSite/content/blog/markdown-syntax.md

@@ -6,7 +6,8 @@ description: "Sample article showcasing basic Markdown syntax and formatting for
 keywords: ["gohugo", "hugo", "go", "blog"]
 draft: false
 tags: ["markdown", "css", "html", "themes"]
-stylesheet: "post.css"
+math: false
+toc: false
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

exampleSite/content/blog/math-typesetting.md

@@ -6,8 +6,8 @@ description: "A brief guide to setup KaTeX"
 keywords: ["gohugo", "hugo", "go", "blog"]
 draft: false
 tags: ["math"]
-stylesheet: "post.css"
 math: true
+toc: false
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

exampleSite/content/blog/rich-content.md

@@ -6,7 +6,8 @@ description: "A brief description of Hugo Shortcodes"
 keywords: ["gohugo", "hugo", "go", "blog"]
 draft: false
 tags: ["shortcodes"]
-stylesheet: "post.css"
+math: false
+toc: false
 ---
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

layouts/_default/single.html

@@ -5,35 +5,53 @@
 {{ define "main" }}
     {{ $dateFormat := .Site.Params.dateFormat | default "Jan 2 2006" }}
 
-    <div class="post">
-      <header class="post__header">
-        <h1 class="post__title">{{.Title}}</h1>
-        <time datetime="{{ .Date }}" class="post__date"
-        >{{ .Date.Format $dateFormat }}</time>
-      </header>
-      <article class="post__content">
-          {{ partial "anchored-headings.html" .Content }}
-          {{ if or .Params.math .Site.Params.math }}
-              {{ partial "math.html" . }}
-          {{ end }}
-      </article>
-        {{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
+    <div class="flex-wrapper">
+      <div class="post__container">
+        <div class="post">
+          <header class="post__header">
+            <h1 id="post__title">{{.Title}}</h1>
+            <time datetime="{{ .Date }}" class="post__date"
+            >{{ .Date.Format $dateFormat }}</time>
+          </header>
+          <article class="post__content">
+              {{ partial "anchored-headings.html" .Content }}
+              {{ if or .Params.math .Site.Params.math }}
+                  {{ partial "math.html" . }}
+              {{ end }}
+          </article>
+          {{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
+          {{ template "_internal/disqus.html" . }}
+          <footer class="post__footer">
+            {{ partial "social-icons.html" .}}
+            <p>{{ replace .Site.Copyright "{year}" now.Year }}</p>
+          </footer>
+          </div>
+      </div>
+      {{ if .Params.toc }}
+      <div class="toc-container">
+          {{ if .Site.Params.showPageTitleInTOC }} <div class="toc-post-title">{{ .Title }}</div> {{ end }}
+        {{ .TableOfContents }}
+      </div>
+      {{ end }}
     </div>
-
-    {{ template "_internal/disqus.html" . }}
     
 {{ end }} 
 
-{{ define "footer" }}
-  <footer>
-      {{ partial "social-icons.html" .}}
-    <p>{{ replace .Site.Copyright "{year}" now.Year }}</p>
-  </footer>
-{{ end }} 
+{{ define "scripts" }}
+
+{{ end }}
+
 
 {{ define "scripts" }}
   {{/* Hardcode a specific prismjs version to avoid a redirect on every page load. */}}
   <script src="https://unpkg.com/prismjs@1.20.0/components/prism-core.min.js"></script>
+
+  {{/* Automatically loads the needed languages to highlight the code blocks. */}}
   <script src="https://unpkg.com/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"
     data-autoloader-path="https://unpkg.com/prismjs@1.20.0/components/"></script>
+
+  {{ if .Params.toc }}
+    <script src="/js/table-of-contents.js"></script>
+  {{ end }}
+
 {{ end }}

static/js/table-of-contents.js

@@ -0,0 +1,17 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const id = entry.target.getAttribute('id');
+      if (entry.intersectionRatio > 0) {
+        document.querySelector(`#TableOfContents ul li a[href="#${id}"]`).classList.add('active');
+      } else {
+        document.querySelector(`#TableOfContents ul li a[href="#${id}"]`).classList.remove('active');
+      }
+    });
+  });
+
+  // Track all headers that have an `id` applied
+  document.querySelectorAll('article h3[id], article h2[id]').forEach((section) => {
+    observer.observe(section);
+  });
+});