Refactor sidebar logic + Add Table of Contents in reading page (hugo-…

…toha#33) * Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
jadarve · Jul 21, 2020 · fa4d474 · fa4d474
1 parent 647578e
commit fa4d474
Show file tree

Hide file tree

Showing 59 changed files with 1,704 additions and 648 deletions.
diff --git a/README.md b/README.md
@@ -59,9 +59,13 @@ markup:
  goldmark:
  renderer:
  unsafe: true
+ tableOfContents:
+ startLevel: 2
+ endLevel: 6
+ ordered: false
 
 # Enable Google Analytics
-googleAnalytics: UA-xxxxxxxx
+googleAnalytics: UA-XXXXXXXXX-X
 
 # Enable Disqus forum
 disqusShortname: does-not-exist
@@ -83,6 +87,9 @@ params:
  # specify whether you want to write blog post or not
  enableBlogPost: true
 
+ # specify whether you want to show Table of Contents in reading page
+ enableTOC: true
+
  # specify the list of custom menus that you want to show in the top navbar.
  # they will be separated by a divider from the main menus.
  customMenus:
@@ -92,6 +99,7 @@ params:
  # some information about you
  author:
  name: "Jane Doe"
+ nickname: "Jane"
  image: "images/avatar.png"
  # give your some contact information. they will be used in the footer
  contactInfo:
@@ -192,7 +200,7 @@ Here, are the current plan and progress of various components of this theme. The
 
 - [x] Post Cards
 - [x] Sidebar
-- [ ] Pagination
+- [x] Pagination
 
 ### Reading Page
 
@@ -201,7 +209,7 @@ Here, are the current plan and progress of various components of this theme. The
 - [x] Next & Previous Page Navigation
 - [x] `Improve This Page` Button
 - [x] Disqus Comment
-- [ ] Option to navigate to list page
+- [x] Option to navigate to list page
 
 ### Tracking and Comments
 

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
@@ -8,9 +8,13 @@ markup:
  goldmark:
  renderer:
  unsafe: true
+ tableOfContents:
+ startLevel: 2
+ endLevel: 6
+ ordered: false
 
 # Enable Google Analytics
-googleAnalytics: UA-xxxxxxxx
+googleAnalytics: UA-XXXXXXXXX-X
 
 # Enable Disqus forum
 disqusShortname: does-not-exist
@@ -32,6 +36,9 @@ params:
  # specify whether you want to write blog post or not
  enableBlogPost: true
 
+ # specify whether you want to show Table of Contents in reading page
+ enableTOC: true
+
  # specify the list of custom menus that you want to show in the top navbar.
  # they will be separated by a divider from the main menus.
  customMenus:

diff --git a/exampleSite/data/sections/achievements.yaml b/exampleSite/data/sections/achievements.yaml
@@ -5,7 +5,7 @@ section:
  weight: 6
  showOnNavbar: true
  # Can optionally hide the title in sections
- # hideTitle: true 
+ # hideTitle: true
 
 # Your achievements achievements
 achievements:

diff --git a/exampleSite/data/sections/projects.yaml b/exampleSite/data/sections/projects.yaml
@@ -5,7 +5,7 @@ section:
  weight: 4
  showOnNavbar: true
  # Can optionally hide the title in sections
- # hideTitle: true 
+ # hideTitle: true
 
 # filter buttons
 buttons:

diff --git a/exampleSite/data/sections/recent-posts.yaml b/exampleSite/data/sections/recent-posts.yaml
@@ -5,6 +5,6 @@ section:
  weight: 5
  showOnNavbar: true
  # Can optionally hide the title in sections
- # hideTitle: true 
+ # hideTitle: true
 
 # no additional configuration is required
diff --git a/exampleSite/data/sections/skills.yaml b/exampleSite/data/sections/skills.yaml
@@ -5,7 +5,7 @@ section:
  weight: 2
  showOnNavbar: true
  # Can optionally hide the title in sections
- # hideTitle: true 
+ # hideTitle: true
 
 # Your Skills.
 # Give a summary of you each skill in the summary section.

diff --git a/layouts/404.html b/layouts/404.html
@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
- {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+ {{ partial "navigators/navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
 {{ end }}
 
 {{ define "content" }}

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -14,13 +14,19 @@
  {{ end }}
  </head>
 
- <body>
+ <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
  <div class="container-fluid bg-dimmed wrapper">
  <!----- ADD NAVBAR --------------->
  {{ block "navbar" . }} {{ end }}
 
+ <!----- ADD SIDEBAR --------------->
+ {{ block "sidebar" . }} {{ end }}
+
  <!----- ADD PAGE CONTENT --------->
  {{ block "content" . }} {{ end }}
+
+ <!----- ADD TABLE OF CONTENTS ----------->
+ {{ block "toc" . }} {{ end }}
  </div>
 
  <!------- ADD FOOTER ------------>

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,39 +1,44 @@
 {{ define "header" }}
  <link rel="stylesheet" href="/assets/css/list.css">
+ <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
 {{ define "navbar" }}
- {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL" .Site.BaseURL ) }}
+ {{ partial "navigators/navbar-2.html" . }}
 {{ end }}
 
-{{ define "content" }}
-<div class="sidebar" id="sidebar">
- <div class="sidebar-tree">
- <input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
- <ul class="tree" id="tree">
- <li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
- <div class="subtree">
- {{ partial "sections.html" .Sections }}
+{{ define "sidebar" }}
+ <section class="sidebar-section" id="sidebar-section">
+ <div class="sidebar-holder">
+ <div class="sidebar" id="sidebar">
+ <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
+ <div class="sidebar-tree">
+ <ul class="tree" id="tree">
+ <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+ <div class="subtree">
+ {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+ </div>
+ </ul>
  </div>
- </ul>
+ </div>
  </div>
- </div>
+ </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
  <div class="content container-fluid" id="content">
- <div class="content-cards">
- <div class="container-fluid filtr-container post-cards" id="post-cards">
- {{ range (where site.RegularPages "Type" "in" site.Params.mainSections) }}
- {{ partial "cards/post.html" . }}
- {{ end }}
- {{/* {{ $paginator := .Paginate .Site.RegularPages 120 }}
- {{ range $paginator.Pages }}
- {{ partial "cards/post.html" . }}
- {{ end }} */}}
- </div>
- {{/* <div class="paginator">
- {{ template "_internal/pagination.html" . }}
- </div> */}}
+ <div class="container-fluid post-card-holder" id="post-card-holder">
+ {{ $paginator := .Paginate .RegularPagesRecursive 12 }}
+ {{ range $paginator.Pages }}
+ {{ partial "cards/post.html" . }}
+ {{ end }}
+ </div>
+ <div class="paginator">
+ {{ template "_internal/pagination.html" . }}
  </div>
  </div>
+</section>
 {{ end }}
 
 {{ define "scripts" }}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -4,56 +4,93 @@
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
 />
 <link rel="stylesheet" href="/assets/css/single.css" />
+<link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
 {{ define "navbar" }}
- {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL" "/posts") }}
+ {{ partial "navigators/navbar-2.html" . }}
 {{ end }}
 
-{{ define "content" }}
-<div class="container p-0 read-area">
- <!--Hero Area-->
- <div class="hero-area col-sm-12" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
- </div>
-
- <!--Content Start-->
- <div class="page-content">
- <div class="author-profile ml-auto align-self-lg-center">
- <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
- <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
- <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
- </div>
-
- <div class="title">
- <h1>{{ .Page.Title }}</h1>
+{{ define "sidebar" }}
+ <section class="sidebar-section" id="sidebar-section">
+ <div class="sidebar-holder">
+ <div class="sidebar" id="sidebar">
+ <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
+ <div class="sidebar-tree">
+ <ul class="tree" id="tree">
+ <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+ <div class="subtree">
+ {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+ </div>
+ </ul>
+ </div>
+ </div>
  </div>
+ </section>
+{{ end }}
 
- <div class="post-content" id="post-content">
- {{ .Page.Content }}
+{{ define "content" }}
+<section class="content-section" id="content-section">
+ <div class="content">
+ <div class="container p-0 read-area">
+ <!--Hero Area-->
+ <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
+ </div>
+
+ <!--Content Start-->
+ <div class="page-content">
+ <div class="author-profile ml-auto align-self-lg-center">
+ <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
+ <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
+ <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
+ </div>
+
+ <div class="title">
+ <h1>{{ .Page.Title }}</h1>
+ </div>
+
+ <div class="post-content" id="post-content">
+ {{ .Page.Content }}
+ </div>
+
+ <!--- Improve this page button --->
+ {{ if .Site.Params.GitRepo }}
+ <div class="btn-improve-page">
+ <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
+ <i class="fas fa-code-branch"></i>
+ Improve This Page
+ </a>
+ </div>
+ {{ end }}
+
+ <!---Next and Previous Navigator -->
+ <hr />
+ {{ partial "navigators/next-prev-navigator.html" . }}
+ <hr />
+ <!-- Add Disqus forum -->
+ {{ if .Site.DisqusShortname }}
+ {{ partial "disqus.html" . }}
+ {{ end }}
+ </div>
  </div>
+ </div>
+</section>
+{{ end }}
 
- <!--- Improve this page button --->
- {{ if .Site.Params.GitRepo }}
- <div class="btn-improve-page">
- <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
- <i class="fas fa-code-branch"></i>
- Improve This Page
- </a>
+{{ define "toc" }}
+ <section class="toc-section" id="toc-section">
+ {{ if site.Params.enableTOC }}
+ <div class="toc-holder">
+ <h5 class="text-center pl-3">Table of Contents</h5>
+ <hr>
+ <div class="toc">
+ {{ .TableOfContents }}
  </div>
+ </div>
  {{ end }}
-
- <!---Next and Previous Navigator -->
- <hr />
- {{ partial "next-prev-navigator.html" . }}
- <hr />
- <!-- Add Disqus forum -->
- {{ if .Site.DisqusShortname }}
- {{ partial "disqus.html" . }}
- {{ end }}
-</div>
+ </section>
 {{ end }}
 
-
 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
 <script src="/assets/js/single.js"></script>

diff --git a/layouts/index.html b/layouts/index.html
@@ -6,13 +6,13 @@
  {{- partial "header.html" . -}}
 
  <!-- import index page specific headers -->
- <link rel="stylesheet" href="/assets/css/home.css" />
- <link rel="stylesheet" href="/assets/css/about.css" />
- <link rel="stylesheet" href="/assets/css/skills.css" />
- <link rel="stylesheet" href="/assets/css/experiences.css" />
- <link rel="stylesheet" href="/assets/css/projects.css" />
- <link rel="stylesheet" href="/assets/css/recent-posts.css" />
- <link rel="stylesheet" href="/assets/css/achievements.css" />
+ <link rel="stylesheet" href="/assets/css/sections/home.css" />
+ <link rel="stylesheet" href="/assets/css/sections/about.css" />
+ <link rel="stylesheet" href="/assets/css/sections/skills.css" />
+ <link rel="stylesheet" href="/assets/css/sections/experiences.css" />
+ <link rel="stylesheet" href="/assets/css/sections/projects.css" />
+ <link rel="stylesheet" href="/assets/css/sections/recent-posts.css" />
+ <link rel="stylesheet" href="/assets/css/sections/achievements.css" />
 
  <!-- Add Google Analytics if enabled in configuration -->
  {{ if .Site.GoogleAnalytics }}
@@ -22,10 +22,10 @@
  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
 
  <!--- NAVBAR ------------------------->
- {{- partial "navbar.html" . -}}
+ {{- partial "navigators/navbar.html" . -}}
 
  <!--- ADD HOME SECTION ---------------->
- {{- partial "home.html" . -}}
+ {{- partial "sections/home.html" . -}}
 
  <!--- ADD OPTIONAL SECTIONS ----------->
  {{ if .Site.Data.sections }}
@@ -36,7 +36,7 @@
  {{ if .section.template }}
  {{- partial .section.template . -}}
  {{ else }}
- {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+ {{- partial (printf "sections/%s.html" (replace (lower .section.name) " " "-")) . -}}
  {{ end }}
  </div>
  <!--- alter background color for next section --->
@@ -59,5 +59,6 @@
  <script src="/assets/js/itype.min.js"></script>
  <script src="/assets/js/github-button.js"></script>
  <script src="/assets/js/home.js"></script>
+ <script src="/assets/js/jquery.filterizr.min.js"></script>
  </body>
 </html>
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
@@ -1,4 +1,4 @@
-<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
+<div class="post-card">
  <a href="{{ .RelPermalink }}" class="post-card-link">
  <div class="card">
  <div class="card-head">