Merge pull request #68 from koirand/tags

Implement tags

README.md

@@ -4,11 +4,11 @@
 Pulp is a [Hugo](https://gohugo.io/) theme for getting a simple, easy-to-read blog site.
 
 ## Screenshots
-![screenshot-top](https://user-images.githubusercontent.com/17229643/55247370-c7a5b100-528a-11e9-835b-108bd6047699.png)
+![screenshot-top](https://user-images.githubusercontent.com/17229643/72672672-bd16fc80-3a01-11ea-9056-7439db39ed75.png)
 
-![screenshot-list](https://user-images.githubusercontent.com/17229643/55247387-d12f1900-528a-11e9-8144-c984031e16c0.png)
+![screenshot-list](https://user-images.githubusercontent.com/17229643/72672673-c607ce00-3a01-11ea-8356-d3cfc4ead65e.png)
 
-![screenshot-page](https://user-images.githubusercontent.com/17229643/55247395-d5f3cd00-528a-11e9-82ed-4830523c5bfa.png)
+![screenshot-page](https://user-images.githubusercontent.com/17229643/72672675-cacc8200-3a01-11ea-914e-c80876d03b16.png)
 ## Installation
 
 If your site is also under version control using git, the easiest way to install this theme is to add it as a submodule. If you have not created a git repo for your project yet, you need to run `git init` beforehand. Inside the folder of your Hugo site, run the following command.

assets/css/style.css

@@ -126,7 +126,7 @@ nav li {
   max-width: 600px;
   /* min-width: 300px; */
   margin: 0 auto;
-  top: 240px;
+  top: 330px;
   left: 0;
   right: 0;
   padding: 5px;
@@ -154,6 +154,27 @@ nav li {
   background-color: #dddfdf;
 }
 
+#tags ul {
+  max-width: 600px;
+  margin: 0 auto;
+  display: flex;
+  padding: 0;
+  justify-content: center;
+  flex-wrap: wrap;
+  list-style: none;
+}
+
+#tags li a {
+  display: block;
+  height: 24px;
+  margin: 5px;
+  padding: 0 5px;
+  background-color: #dddfdf;
+  border-radius: 5px;
+  font-size: 14px;
+  /* text-decoration: none; */
+}
+
 #contentsList {
   padding: 20px 0;
 }

assets/js/search.js

@@ -16,15 +16,6 @@ const bigramTokeniser = (obj, metadata) => {
     return []
   }
 
-  if (Array.isArray(obj)) {
-    return obj.map((t) => {
-      return new lunr.Token(
-        lunr.utils.asString(t).toLowerCase(),
-        lunr.utils.clone(metadata)
-      )
-    })
-  }
-
   let str = obj.toString().trim().toLowerCase()
   let tokens = []
 
@@ -70,6 +61,7 @@ const initLunr = () => {
       builder.pipeline.reset()
       builder.ref('ref')
       builder.field('title', { boost: 10 })
+      builder.field('tags', { boost: 10 })
       builder.field('body')
       builder.metadataWhitelist = ['position']
       for (let page of pagesIndex) {
@@ -112,11 +104,12 @@ const initUI = () => {
     const query = $(event.currentTarget).val()
 
     // Icon switching
+    const iconUrl = $('#searchBoxIcon').attr('src')
     if (query.length) {
-      $('#searchBoxIcon').attr('src', '../img/clear.png')
+      $('#searchBoxIcon').attr('src', iconUrl.replace('search.png', 'clear.png'))
       $('#searchBoxIcon').css('cursor', 'pointer')
     } else {
-      $('#searchBoxIcon').attr('src', '../img/search.png')
+      $('#searchBoxIcon').attr('src', iconUrl.replace('clear.png', 'search.png'))
       $('#searchBoxIcon').css('cursor', 'default')
     }
 

exampleSite/config.toml

@@ -7,9 +7,6 @@ hasCJKLanguage = true
 # pygmentsUseClasses = true
 # googleAnalytics = "{your tracking code}"
 
-[taxonomies]
-  series = "series"
-
 [params]
     author = "Your Name"
     avatar = "avatar.jpg"
@@ -24,8 +21,10 @@ hasCJKLanguage = true
     # custom_css = ["/css/custom.css"]
     # custom_js = ["/js/custom.js"]
 
+# Make sure setting a following option for search bar to work
 [outputs]
     section = ["JSON", "HTML"]
+    taxonomy = ["JSON", "HTML"]
 
 [[menu.main]]
     identifier = "blog"

exampleSite/content/blog/emoji-support.md

@@ -2,6 +2,7 @@
 title: "Emoji Support"
 date: 2019-03-05
 draft: false
+tags: [ "emoji" ]
 ---
 
 Emoji can be enabled in a Hugo project in a number of ways.

exampleSite/content/blog/markdown-syntax.md

@@ -2,6 +2,12 @@
 title: "Markdown Syntax Guide"
 date: 2019-03-11
 draft: false
+tags: [
+    "markdown",
+    "css",
+    "html",
+    "themes",
+]
 ---
 
 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/placeholder-text.md

@@ -2,6 +2,7 @@
 title: "Placeholder Text"
 date: 2019-03-09
 draft: false
+tags: [ "markdown", "text", ]
 ---
 
 ## Mole et vultus populifer quaque primoque non

exampleSite/content/blog/rich-content.md

@@ -2,6 +2,10 @@
 title: "Rich Content"
 date: 2019-03-10
 draft: false
+tags: [
+    "shortcodes",
+    "privacy",
+]
 ---
 
 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/list.html

@@ -1,4 +1,5 @@
 {{ define "main"}}
+  <h1>{{ .Title }}</h1>
   {{ partial "header.html" . }}
   <!-- search box -->
   <div id="searchBox">
@@ -7,6 +8,14 @@
   </div>
   <!-- search results -->
   <div id="searchResults"></div>
+  <!-- tags -->
+  <div id="tags">
+    <ul>
+      {{ range .Site.Taxonomies.tags.ByCount }}
+        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
+      {{ end }}
+    </ul>
+  </div>
   <!-- contents -->
   <div id="contentsList">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}

layouts/_default/list.json

@@ -3,6 +3,7 @@
         "ref": "{{ $page.Permalink }}",
         "title": {{ $page.Title | jsonify }},
         "section": "{{ $page.Section }}",
+        "tags": {{ $page.Params.tags | jsonify }},
         "date" : {{ $page.Date.Format "2006.01.02" | jsonify }},
         "body": {{ $page.Plain | jsonify }}
     }

layouts/_default/single.html

@@ -4,6 +4,17 @@
   <!-- date -->
   {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
   <p class="date">{{ .Date.Format $singlePageDateFormat }}</p>
+  <!-- tags -->
+  <div id="tags">
+    <ul>
+      {{ range .Param "tags" }}
+        {{ $name := . }}
+        {{ with $.Site.GetPage (printf "/tags/%s" ($name | urlize)) }}
+          <li><a href="{{ .Permalink }}">{{ $name }}</a></li>
+        {{ end }}
+      {{ end }}
+    </ul>
+  </div>
   <!-- content -->
   <div id="contentBody">
     {{ .Content }}

layouts/_default/terms.html

@@ -0,0 +1,13 @@
+{{ define "main"}}
+  <h1>{{ .Title }}</h1>
+  {{ partial "header.html" . }}
+  <!-- tags -->
+  <div id="tags">
+    <ul>
+      {{ range .Site.Taxonomies.tags.ByCount }}
+        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
+      {{ end }}
+    </ul>
+  </div>
+  {{ partial "footer.html" . }}
+{{ end }}