Merge pull request #7 from xoxys/add-validation

add validation
2020-06-02 18:19:33 +02:00 · 2020-06-02 18:19:33 +02:00 · 7db91ce611
parent f07cb738b1 616569ffb4
commit 7db91ce611
39 changed files with 485 additions and 211 deletions
--- a/.dictionary
+++ b/.dictionary
@ -0,0 +1,29 @@
+([a-zA-Z0-9]+[_=])+\S+
+.gdoc.*
+
+Geekdoc
+Kaussow
+(S|s)hortcode[s]?
+hugo-book
+relref
+href
+(t|T)o(c|C)
+toc-.*
+macOS
+SVG
+[a-z0-9]+Diagram
+HC-primary
+
+# used color codes
+1c388e
+324b99
+73bfb8
+cf5f46
+d1d7e8
+e4ba48
+e66a4e
+eb8771
+fae1db
+fecf50
+fef5dc
+ffffff
--- a/.drone.yml
+++ b/.drone.yml
@ -1,3 +1,52 @@
+---
+kind: pipeline
+name: test
+
+platform:
+  os: linux
+  arch: amd64
+
+steps:
+- name: assets
+  image: node:lts
+  commands:
+  - npm install -g gulp
+  - npm install
+  - gulp default
+  environment:
+    FORCE_COLOR: true
+    NPM_CONFIG_LOGLEVEL: error
+
+- name: testbuild
+  image: klakegg/hugo:0.72.0-ext-alpine
+  commands:
+  - mkdir exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekdoc
+  - hugo-official -s exampleSite/ -b http://localhost/
+
+- name: html-validation
+  image: validator/validator
+  commands:
+  - vnu --skip-non-html --also-check-css --errors-only exampleSite/public
+
+- name: link-validation
+  image: xoxys/link-validator
+  commands:
+  - link-validator -ro
+  environment:
+    LINK_VALIDATOR_BASE_DIR: exampleSite/public
+
+- name: page-validation
+  image: patrickhulce/lhci-client
+  user: root
+  commands:
+  - lhci autorun
+
+trigger:
+  ref:
+  - refs/heads/master
+  - refs/tags/**
+  - refs/pull/**
+
 ---
 kind: pipeline
 name: build
@ -8,31 +57,28 @@ platform:

 steps:
 - name: assets
-  image: node
+  image: node:lts
  commands:
-  - npm install -g gulp -s
-  - npm install -s
+  - npm install -g gulp
+  - npm install
  - gulp default
+  environment:
+    FORCE_COLOR: true
+    NPM_CONFIG_LOGLEVEL: error

- name: test
-  image: klakegg/hugo:0.69.0-ext-alpine
-  commands:
-  - cd exampleSite/
-  - mkdir themes/ && ln -s ../../. themes/hugo-geekdoc && hugo-official
-
- name: build
+- name: package
  image: alpine
  commands:
  - mkdir dist/
  - echo "${DRONE_TAG:-latest}" > VERSION
-  - tar -zcvf dist/hugo-geekdoc.tar.gz . --exclude='.git*' --exclude='.drone*' --exclude='dist' --exclude='.git*' --exclude='example*' --exclude='src' --exclude='gulp*' --exclude='package*' --exclude='node*' --exclude='local*'
+  - tar -zcvf dist/hugo-geekdoc.tar.gz -X .tarignore .

 - name: checksum
  image: alpine
  commands:
  - cd dist/ && sha256sum * > ../sha256sum.txt

- name: publish
+- name: release
  image: plugins/github-release
  settings:
    api_key:
@ -43,15 +89,13 @@ steps:
    note: CHANGELOG.md
    overwrite: true
    title: ${DRONE_TAG}
-  when:
-    ref:
-    - refs/tags/**

 trigger:
  ref:
-  - refs/heads/master
  - refs/tags/**
-  - refs/pull/**
+
+depends_on:
+- test

 ---
 kind: pipeline
@ -65,16 +109,34 @@ concurrency:
  limit: 1

 steps:
+- name: markdownlint
+  image: node:lts-alpine
+  commands:
+  - npm install -g markdownlint-cli
+  - markdownlint 'exampleSite/content/**/*.md' 'README.md'
+  environment:
+    FORCE_COLOR: true
+    NPM_CONFIG_LOGLEVEL: error
+
+- name: spellcheck
+  image: node:lts-alpine
+  commands:
+  - npm install -g spellchecker-cli
+  - spellchecker --files 'exampleSite/content/**/*.md' 'README.md' -d .dictionary -p spell indefinite-article syntax-urls --no-suggestions
+  environment:
+    FORCE_COLOR: true
+    NPM_CONFIG_LOGLEVEL: error
+
 - name: assets
  image: byrnedo/alpine-curl
  commands:
  - mkdir -p exampleSite/themes/hugo-geekdoc/
-  - curl -L https://github.com/xoxys/hugo-geekdoc/releases/latest/download/hugo-geekdoc.tar.gz | tar -xz -C exampleSite/themes/hugo-geekdoc/ --strip-components=1
+  - curl -sSL https://github.com/xoxys/hugo-geekdoc/releases/latest/download/hugo-geekdoc.tar.gz | tar -xz -C exampleSite/themes/hugo-geekdoc/ --strip-components=1

- name: test
-  image: klakegg/hugo:0.69.0-ext-alpine
+- name: build
+  image: klakegg/hugo:0.72.0-ext-alpine
  commands:
-  - cd exampleSite/ && hugo-official
+  - hugo-official -s exampleSite/

 - name: publish
  image: plugins/s3-sync
@ -89,11 +151,16 @@ steps:
      from_secret: s3_secret_access_key
    source: exampleSite/public/
    strip_prefix: exampleSite/public/
+  when:
+    ref:
+    - refs/heads/master
+    - refs/tags/**

 trigger:
  ref:
  - refs/heads/master
  - refs/tags/**
+  - refs/pull/**

 depends_on:
 - build
@ -133,11 +200,12 @@ trigger:
  - failure

 depends_on:
+- test
 - build
 - docs

 ---
 kind: signature
-hmac: c78faf65f2d038c8daa5b56c592a1fa6264b40633cd2375d61257a3027897c3c
+hmac: c9158b4a7c4fb787644c711560925ffae038a982953f958d5f535158f640032f

 ...
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 # local environments
 .swp
 .env*
+dist/
 node_modules/
 exampleSite/themes/
 exampleSite/public/
@ -10,3 +11,6 @@ layouts/partials/icons-svg-symbols.html
 static/main.*
 static/favicon/
 resources/_gen/
+
+# testing
+.lighthouseci/
--- a/.lighthouserc.yml
+++ b/.lighthouserc.yml
@ -0,0 +1,19 @@
+---
+ci:
+  collect:
+    numberOfRuns: 2
+    staticDistDir: exampleSite/public
+    url:
+      - http://localhost/
+      - http://localhost/404.html
+      - http://localhost/posts/
+    settings:
+      chromeFlags: "--no-sandbox"
+  assert:
+    preset: "lighthouse:no-pwa"
+    assertions:
+      uses-long-cache-ttl: off
+      render-blocking-resources: off
+      tap-targets: off
+      first-contentful-paint: off
+      first-meaningful-paint: off
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@ -0,0 +1,4 @@
+---
+default: True
+MD013: False
+MD041: False
--- a/.tarignore
+++ b/.tarignore
@ -0,0 +1,13 @@
+.tarignore
+.dictionary*
+.git*
+.drone*
+.lighthouse*
+.markdownlint*
+example*
+gulp*
+package*
+node*
+local*
+dist
+src
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,2 +1,10 @@
-* ENHANCEMENT
-  * [#6](https://github.com/xoxys/hugo-geekdoc/pull/6) improve code block formatting
+* BUGFIX
+  * optimize resource loading
+  * resfactor expand shortcode to use valid html
+  * fix formatting of nested shortcodes markdown
+* INTERNAL
+  * add markdown linting to CI (markdownlint-cli)
+  * add spellchecking to CI (spellcheck-cli)
+  * add html/css validation to CI (nu.validator)
+  * add page validation to CI (lighthouse-ci)
+  * add broken link check to CI (broken-link-checker)
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@ -5,14 +5,14 @@ title: Documentation
 [![Build Status](https://img.shields.io/drone/build/xoxys/hugo-geekdoc?logo=drone)](https://cloud.drone.io/xoxys/hugo-geekdoc)
 [![Hugo Version](https://img.shields.io/badge/hugo-0.65-blue.svg)](https://gohugo.io)
 [![GitHub release](https://img.shields.io/github/v/release/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/releases/latest)
-[![License: MIT](https://img.shields.io/github/license/xoxys/hugo-geekdoc)](LICENSE)
+[![License: MIT](https://img.shields.io/github/license/xoxys/hugo-geekdoc)](https://github.com/xoxys/hugo-geekdoc/blob/master/LICENSE)

 Geekdoc is a simple Hugo theme for documentations. This work is inspired and partially based on the [hugo-book](https://github.com/alex-shpak/hugo-book) theme.

 ## Features

- Clean simple design
+- Clean and simple design
 - Light and mobile-friendly
- Customisable
+- Easy customization
 - Zero initial configuration
 - Handy shortcodes
--- a/exampleSite/content/posts/hello_geekdoc.md
+++ b/exampleSite/content/posts/hello_geekdoc.md
@ -6,4 +6,6 @@ date: 2020-01-06

 This is the first release of the Geekdoc theme.

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
+
+Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram. Que no rota alters, ad sea sues exercise main rum, cu diam mas facility sea.
--- a/exampleSite/content/posts/initial_release.md
+++ b/exampleSite/content/posts/initial_release.md
@ -6,4 +6,4 @@ date: 2020-01-08

 This is the first release of the Geekdoc theme.

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
--- a/exampleSite/content/shortcodes/columns.md
+++ b/exampleSite/content/shortcodes/columns.md
@ -1,43 +1,46 @@
 Columns help organize shorter pieces of content horizontally for readability.

-
 ```html
 {{</* columns */>}} <!-- begin columns block -->
 # Left Content
-Lorem markdownum insigne...
+Dolor sit, sumo unique argument um no ...

 <---> <!-- magic sparator, between columns -->

 # Mid Content
-Lorem markdownum insigne...
+Dolor sit, sumo unique argument um no ...

 <---> <!-- magic sparator, between columns -->

 # Right Content
-Lorem markdownum insigne...
+Dolor sit, sumo unique argument um no ...
 {{</* /columns */>}}
 ```

 ## Example

 {{< columns >}}
-## Left Content
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+
+## Left
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.

 <--->

 ## Mid Content
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter!
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re.

 <--->

 ## Right Content
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
 {{< /columns >}}
--- a/exampleSite/content/shortcodes/expand.md
+++ b/exampleSite/content/shortcodes/expand.md
@ -1,18 +1,21 @@
 Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.

 ## Example
+
 ### Default

 ```tpl
 {{</* expand */>}}
 ## Markdown content
-Lorem markdownum insigne...
+Dolor sit, sumo unique ...
 {{</* /expand */>}}
 ```

 {{< expand >}}
+
 ## Markdown content
-Lorem markdownum insigne...
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re.
 {{< /expand >}}

 ### With Custom Label
@ -20,14 +23,16 @@ Lorem markdownum insigne...
 ```tpl
 {{</* expand "Custom Label" "..." */>}}
 ## Markdown content
-Lorem markdownum insigne...
+Dolor sit, sumo unique ...
 {{</* /expand */>}}
 ```

 {{< expand "Custom Label" "..." >}}
-## Markdown content
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+
+## More markdown
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
+feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
+copious quo ad. Stet probates in duo.
 {{< /expand >}}
--- a/exampleSite/content/shortcodes/hints.md
+++ b/exampleSite/content/shortcodes/hints.md
@ -4,8 +4,8 @@ There are 3 colors to choose: `info`, `warning` and `danger`.
 ```tpl
 {{</* hint [info|warning|danger] */>}}
 **Markdown content**\
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
+ Ornateness bland it ex enc, est yeti am bongo detract re.
 {{</* /hint */>}}
 ```

@ -13,18 +13,18 @@ stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa

 {{< hint info >}}
 **Markdown content**\
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
+ Ornateness bland it ex enc, est yeti am bongo detract re.
 {{< /hint >}}

 {{< hint warning >}}
 **Markdown content**\
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
+ Ornateness bland it ex enc, est yeti am bongo detract re.
 {{< /hint >}}

 {{< hint danger >}}
 **Markdown content**\
-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
+ Ornateness bland it ex enc, est yeti am bongo detract re.
 {{< /hint >}}
--- a/exampleSite/content/shortcodes/includes.md
+++ b/exampleSite/content/shortcodes/includes.md
@ -1,4 +1,4 @@
-Include Shortcode can include files of different types. By specifying a language, the included file will have syntax highlighting.
+Include shortcode can include files of different types. By specifying a language, the included file will have syntax highlighting.

 ## Shortcode

@ -15,7 +15,7 @@ Attributes:
 | markdown | included file is markdown | false |
 | options | highlighting [options](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) | linenos=table |

-\* if not set, the content will be rendered as plain html
+\* if not set, the content will be rendered as plain HTML

 ### Include *.yml file with options

@ -31,21 +31,21 @@ Included markdown files will be rendered using the `markdownify` filter.

 {{< hint warning >}}
 **Location of markdown files**\
-If you include markdown files that should not get a menu entry, place them outside the content folder or exlude them otherwise.
+If you include markdown files that should not get a menu entry, place them outside the content folder or exclude them otherwise.
 {{< /hint >}}

 ```tpl
-{{</* include file="static/table.md" markdown="true" */>}}
+{{</* include file="static/includes/table.md.part" markdown="true" */>}}
 ```

-{{< include file="static/table.md" markdown="true" >}}
+{{< include file="static/includes/table.md.part" markdown="true" >}}

 ### Include *.html file

-Html content will be filtered by the `safeHTML` filter and added to the rendered page output.
+HTML content will be filtered by the `safeHTML` filter and added to the rendered page output.

 ```tpl
-{{</* include file="static/example.html" */>}}
+{{</* include file="static/includes/example.html.part" */>}}
 ```

-{{< include file="static/example.html" >}}
+{{< include file="static/includes/example.html.part" >}}
--- a/exampleSite/content/shortcodes/mermaid.md
+++ b/exampleSite/content/shortcodes/mermaid.md
@ -1,8 +1,9 @@
-[Mermaid](https://mermaidjs.github.io/) is library for generating svg charts and diagrams from text.
+[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.

 ## Example

 {{< columns >}}
+
 ```tpl
 {{</* mermaid class="text-center"*/>}}
 sequenceDiagram
--- a/exampleSite/content/shortcodes/tabs.md
+++ b/exampleSite/content/shortcodes/tabs.md
@ -2,7 +2,7 @@ Tabs let you organize content by context, for example installation instructions

 ```tpl
 {{</* tabs "uniqueid" */>}}
-{{</* tab "MacOS" */>}} # MacOS Content {{</* /tab */>}}
+{{</* tab "macOS" */>}} # macOS Content {{</* /tab */>}}
 {{</* tab "Linux" */>}} # Linux Content {{</* /tab */>}}
 {{</* tab "Windows" */>}} # Windows Content {{</* /tab */>}}
 {{</* /tabs */>}}
@ -11,15 +11,16 @@ Tabs let you organize content by context, for example installation instructions
 ## Example

 {{< tabs "uniqueid" >}}
-{{< tab "MacOS" >}}
-# MacOS
+{{< tab "macOS" >}}

-This is tab **MacOS** content.
+# macOS

-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+This is tab **macOS** content.
+
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad
+prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim
+fastidious copious quo ad. Stet probates in duo.
 {{< /tab >}}

 {{< tab "Linux" >}}
@ -28,10 +29,10 @@ Miseratus fonte Ditis conubia.

 This is tab **Linux** content.

-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. __Ornateness__ bland it ex enc, est yeti am bongo detract re. Pro ad
+prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim
+fastidious copious quo ad. Stet probates in duo.
 {{< /tab >}}

 {{< tab "Windows" >}}
@ -40,9 +41,8 @@ Miseratus fonte Ditis conubia.

 This is tab **Windows** content.

-Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat
-stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
-protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes.
-Miseratus fonte Ditis conubia.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
+investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad
+prompts feud gait, quid exercise emeritus bis e. In pro quints consequent.
 {{< /tab >}}
 {{< /tabs >}}
--- a/exampleSite/content/shortcodes/toc.md
+++ b/exampleSite/content/shortcodes/toc.md
@ -8,30 +8,30 @@ Simple wrapper to generate a page Table of Content from a shortcode.

 ## Level 1

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.

 ## Level 2

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram.

 ### Level 2.1

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
+Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram.

 #### Level 2.1.1

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim.

 ##### Level 2.1.1.1

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+In pro quints consequent, denim fastidious copious quo ad.

 ###### Level 2.1.1.1.1

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+In pro quints consequent, denim fastidious copious quo ad.

 ### Level 2.2

-Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e.

-no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Amalia id per in minimum facility, quid facet modifier ea ma. Ill um select ma ad, en ferric patine sentient vim. Per expendable foreordained interpretations cu, maxim sole pertinacity in ram.
--- a/exampleSite/content/usage/code_blocks.md
+++ b/exampleSite/content/usage/code_blocks.md
@ -1,17 +1,20 @@
-There are multiple ways to add code blocks. Most of them works out of the box only the hugo shortcode `<highlight>` need some configuration to work properly.
+There are multiple ways to add code blocks. Most of them works out of the box only the Hugo shortcode `<highlight>` need some configuration to work properly.

 ## Inline code
+
 To display an inline shortcode use single quotes:
-```
+
+```plain
 `some code`
 ```

 **Example:** `some code`

 ## Code blocks
+
 Code blocks can be uses without language specification:

-````
+````markdown
 ```
 some code
 ```
@ -19,13 +22,13 @@ some code

 **Example:**

-```
+```plain
 some code
 ```

 ... or if you need language specific syntax highlighting:

-````
+````markdown
 ```Shell
 # some code
 echo "Hello world"
@ -41,26 +44,30 @@ echo "Hello World"

 ## Highlight shortcode

-Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your sites config:
+Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:

 {{< tabs "uniqueid" >}}
 {{< tab "TOML" >}}
+
 ```TOML
 pygmentsUseClasses=true
 pygmentsCodeFences=true
 ```
+
 {{< /tab >}}
 {{< tab "YAML" >}}
+
 ```YAML
 pygmentsUseClasses: true
 pygmentsCodeFences: true
 ```
+
 {{< /tab >}}
 {{< /tabs >}}

 You can use it like every other shortcode:

-```Markdown
+```markdown
 {{</* highlight Shell "linenos=table" */>}}
 # some code
 echo "Hello World"
@ -69,7 +76,9 @@ echo "Hello World"

 **Example:**

+<!-- markdownlint-disable -->
 {{< highlight Shell "linenos=table" >}}
 # some code
 echo "Hello World"
 {{< /highlight >}}
+<!-- markdownlint-enable -->
--- a/exampleSite/content/usage/color_schemes.md
+++ b/exampleSite/content/usage/color_schemes.md
@ -1,9 +1,10 @@
 If you want to customize the color scheme of the theme to give it your individual touch you are just a few lines CSS away. In general, you have to override the defaults, the easiest way to do so is to create a `static/custom.css` file right in your site root.

-All necessary class names are listed below. If you miss some classes for theming you are very welcome to fill an [Issue](https://github.com/xoxys/hugo-geekdoc/issues). For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:
+All necessary class names are listed below. If you miss some classes required for a color scheme you are very welcome to create an [Issue](https://github.com/xoxys/hugo-geekdoc/issues) or Pull Request. For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:

+<!-- markdownlint-disable -->
 {{< highlight CSS "linenos=table" >}}
-/* defaut link color */
+/* default link color */
 a { color: #1c388e; }
 a:visited { color: #73bfb8 }

@ -30,7 +31,8 @@ a:visited { color: #73bfb8 }
 .gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
 .gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
 {{< /highlight >}}
+<!-- markdownlint-enable -->

-And that is how the result will looks like. Happy theming!
+And that is how the result will looks like. Happy customizing!

 [![HC-primary Color Scheme](/media/color_scheme_example.png)](/media/color_scheme_example.png)
--- a/exampleSite/static/includes/example.html.part
+++ b/exampleSite/static/includes/example.html.part
@ -1,13 +1,6 @@
-<!DOCTYPE html>
-<html>
-<body>
-
 <h1>This is heading 1</h1>
 <h2>This is heading 2</h2>
 <h3>This is heading 3</h3>
 <h4>This is heading 4</h4>
 <h5>This is heading 5</h5>
 <h6>This is heading 6</h6>
-
-</body>
-</html>
--- a/exampleSite/static/includes/table.md.part
+++ b/exampleSite/static/includes/table.md.part
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,7 +1,6 @@
 const gulp = require('gulp');
 const rename = require('gulp-rename');
 const sass = require('gulp-sass');
-const minifyCSS = require('gulp-csso');
 const cleanCSS = require('gulp-clean-css');
 const autoprefixer = require('gulp-autoprefixer');
 const iconfont = require('gulp-iconfont');
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -25,7 +25,7 @@

        {{ partial "site-footer" . }}
    </div>
-</body>

    {{ partial "foot" . }}
+</body>
 </html>
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@ -3,9 +3,9 @@

 {{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
 {{ if and $showAnchor $anchorLeft }}
-    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s</div>` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${3}` `${4}`) | safeHTML) }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" aria-label="Anchor %s" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s</div>` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${3}` `${2}` `${3}` `${4}`) | safeHTML) }}
 {{ else if and $showAnchor (not $anchorLeft) }}
-    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s</div>` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${4}`) | safeHTML) }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" aria-label="Anchor %s" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s</div>` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${3}` `${2}` `${4}`) | safeHTML) }}
 {{ end }}

 {{ $.Scratch.Get "content" }}
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@ -7,8 +7,10 @@
 {{ end }}

 {{ if default true .Site.Params.GeekdocAnchorCopy }}
-<script src="{{ "js/clipboard.min.js" | relURL }}"></script>
+<script defer src="{{ "js/clipboard.min.js" | relURL }}"></script>
 <script>
+    document.addEventListener("DOMContentLoaded", function(event) {
        var clipboard = new ClipboardJS('.clip');
+    });
 </script>
 {{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -5,9 +5,9 @@
 <title>{{ partial "title" . }} | {{ .Site.Title -}}</title>
 <link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">

-<link rel="stylesheet" href="{{ "main.min.css" | relURL }}">
+<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
 <!-- Theme stylesheet, you can customize css by creating static/custom.css` in your website -->
-<link rel="stylesheet" href="{{ "custom.css" | relURL }}">
+<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">

 <!-- RSS -->
 {{ with .OutputFormats.Get "rss" -}}
--- a/layouts/posts/list.html
+++ b/layouts/posts/list.html
@ -1,28 +1,21 @@
 {{ define "main" }}
    {{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
-    {{ $paginator := .Paginate (where .Pages "Params.hidden" "ne" true) }}
-
    {{ range sort .Paginator.Pages }}
        <article class="gdoc-markdown gdoc-post">
            <header>
                <h1 class="gdoc-post__title">
                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
                </h1>
+                <div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
            </header>
-            <h5>
-                <strong>{{ .Date.Format $dateFormat }}</strong>
-            </h5>
-            <section>
+            <div>
                {{ .Summary }}
                {{ if .Truncated }}
                <a class="gdoc-post__readmore" title="Read full post" href="{{ .RelPermalink }}">
-                    Read more
+                    Read full post
                </a>
                {{ end }}
-            </section>
+            </div>
        </article>
    {{ end }}
-
-    <!-- TODO: FIXME -->
-    {{ template "_internal/pagination.html" . }}
 {{ end }}
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@ -1,10 +1,12 @@
 {{ define "main" }}
    {{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
-    <article class="gdoc-markdown">
-        <h1>{{ .Title }}</h1>
-        <h5>
-            <strong>{{ .Date.Format $dateFormat }}</strong>
-        </h5>
+    <article class="gdoc-markdown gdoc-post">
+      <header>
+        <h1 class="gdoc-post__title">{{ .Title }}</h1>
+        <div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
+      </header>
+      <div>
        {{ partial "content" . }}
+      </div>
    </article>
 {{ end }}
--- a/layouts/shortcodes/expand.html
+++ b/layouts/shortcodes/expand.html
@ -1,12 +1,11 @@
+{{ $id := substr (sha1 .Inner) 0 8 }}
 <div class="gdoc-expand">
-  <label>
-    <div class="gdoc-expand__head flex justify-between">
+  <label class="gdoc-expand__head flex justify-between" for="{{ $id }}-{{ .Ordinal }}">
    <span>{{ default "Expand" (.Get 0) }}</span>
    <span>{{ default "↕" (.Get 1) }}</span>
-    </div>
-    <input type="checkbox" class="gdoc-expand__control hidden" />
+  </label>
+  <input id="{{ $id }}-{{ .Ordinal }}" type="checkbox" class="gdoc-expand__control hidden" />
  <div class="gdoc-markdown--nested gdoc-expand__content">
    {{ .Inner | markdownify }}
  </div>
-  </label>
 </div>
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@ -1,10 +1,12 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
-<script src="{{ "js/mermaid.min.js" | relURL }}"></script>
+<script defer src="{{ "js/mermaid.min.js" | relURL }}"></script>
 <script>
+    document.addEventListener("DOMContentLoaded", function(event) {
        mermaid.initialize({
            flowchart: { useMaxWidth: true }
        });
+    });
 </script>
 {{ .Page.Scratch.Set "mermaid" true }}
 {{ end }}
--- a/package-lock.json
+++ b/package-lock.json
@ -775,9 +775,9 @@
      }
    },
    "clean-css": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
-      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
      "dev": true,
      "requires": {
        "source-map": "~0.6.0"
@ -1381,6 +1381,12 @@
      "integrity": "sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==",
      "dev": true
    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
    "enabled": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/enabled/-/enabled-1.0.2.tgz",
@ -2684,13 +2690,13 @@
      }
    },
    "globule": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.1.tgz",
+      "integrity": "sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==",
      "dev": true,
      "requires": {
        "glob": "~7.1.1",
-        "lodash": "~4.17.10",
+        "lodash": "~4.17.12",
        "minimatch": "~3.0.2"
      }
    },
@ -2781,12 +2787,12 @@
      }
    },
    "gulp-clean-css": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.2.0.tgz",
-      "integrity": "sha512-r4zQsSOAK2UYUL/ipkAVCTRg/2CLZ2A+oPVORopBximRksJ6qy3EX1KGrIWT4ZrHxz3Hlobb1yyJtqiut7DNjA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-4.3.0.tgz",
+      "integrity": "sha512-mGyeT3qqFXTy61j0zOIciS4MkYziF2U594t2Vs9rUnpkEHqfu6aDITMp8xOvZcvdX61Uz3y1mVERRYmjzQF5fg==",
      "dev": true,
      "requires": {
-        "clean-css": "4.2.1",
+        "clean-css": "4.2.3",
        "plugin-error": "1.0.1",
        "through2": "3.0.1",
        "vinyl-sourcemaps-apply": "0.2.1"
@ -2814,17 +2820,6 @@
        "vinyl": "^2.0.0"
      }
    },
-    "gulp-csso": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/gulp-csso/-/gulp-csso-4.0.1.tgz",
-      "integrity": "sha512-Kg8gqmd6XcUlMTdBbqdCEcpHumc8ytc4khgm9AXeCjl8eHx7b6tC11y8haizFI+Zw/cSHL6HCj7GwGLwxxBUFQ==",
-      "dev": true,
-      "requires": {
-        "csso": "^4.0.0",
-        "plugin-error": "^1.0.0",
-        "vinyl-sourcemaps-apply": "^0.2.1"
-      }
-    },
    "gulp-iconfont": {
      "version": "10.0.3",
      "resolved": "https://registry.npmjs.org/gulp-iconfont/-/gulp-iconfont-10.0.3.tgz",
@ -2861,13 +2856,13 @@
      "dev": true
    },
    "gulp-sass": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.2.tgz",
-      "integrity": "sha512-q8psj4+aDrblJMMtRxihNBdovfzGrXJp1l4JU0Sz4b/Mhsi2DPrKFYCGDwjIWRENs04ELVHxdOJQ7Vs98OFohg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",
+      "integrity": "sha512-xIiwp9nkBLcJDpmYHbEHdoWZv+j+WtYaKD6Zil/67F3nrAaZtWYN5mDwerdo7EvcdBenSAj7Xb2hx2DqURLGdA==",
      "dev": true,
      "requires": {
        "chalk": "^2.3.0",
-        "lodash.clonedeep": "^4.3.2",
+        "lodash": "^4.17.11",
        "node-sass": "^4.8.3",
        "plugin-error": "^1.0.1",
        "replace-ext": "^1.0.0",
@ -3253,9 +3248,9 @@
      }
    },
    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
      "dev": true
    },
    "indent-string": {
@ -3416,13 +3411,10 @@
      "dev": true
    },
    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+      "dev": true
    },
    "is-fullwidth-code-point": {
      "version": "1.0.0",
@ -3589,9 +3581,9 @@
      }
    },
    "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
+      "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
      "dev": true
    },
    "js-tokens": {
@ -3912,12 +3904,6 @@
      "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU=",
      "dev": true
    },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-      "dev": true
-    },
    "lodash.defaults": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@ -4601,9 +4587,9 @@
      }
    },
    "node-sass": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
@ -4620,7 +4606,7 @@
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
        "stdout-stream": "^1.4.0",
        "true-case-path": "^1.0.2"
      },
@ -5746,15 +5732,138 @@
      "dev": true
    },
    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
      "dev": true,
      "requires": {
        "glob": "^7.0.0",
        "lodash": "^4.0.0",
        "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "dev": true,
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
      }
    },
    "sax": {
--- a/package.json
+++ b/package.json
@ -16,13 +16,12 @@
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
-    "gulp-clean-css": "^4.2.0",
+    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
-    "gulp-csso": "^4.0.1",
    "gulp-iconfont": "^10.0.3",
    "gulp-real-favicon": "^0.3.2",
    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^4.1.0",
    "gulp-svg-sprite": "^1.5.0",
    "run-sequence": "^2.2.1"
  },
--- a/src/favicon/faviconData.json
+++ b/src/favicon/faviconData.json
@ -1 +1 @@
-{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/browserconfig.xml","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/favicon.ico","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#5bbad5\">\n<meta name=\"msapplication-TileColor\" content=\"#2b5797\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/6df47a40ae616743cd933f790d5fd877fe56536b/favicon_preview.png","version":"0.16"}
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/browserconfig.xml","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/favicon.ico","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#5bbad5\">\n<meta name=\"msapplication-TileColor\" content=\"#2b5797\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/80e254dbfa2672ac1e4b404bddc9607fdb8612e8/favicon_preview.png","version":"0.16"}
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@ -286,16 +286,21 @@ img {
    }
  }

+  &__date {
+    font-weight: bold;
+    margin: 1em 0;
+  }
+
  &:first-child {
    border-top: 0;

    h1 {
-      margin: 0;
+      margin-top: 0;
    }
  }

  &__readmore {
-    margin: 1em 0;
+    margin-top: 1em;
    color: $color-link;
    display: block;

@ -461,7 +466,7 @@ img {
 .markdown {
  transition: 0.2s ease-in-out;
  transition-property: transform, margin-left, opacity;
-  will-change: transform!important, margin-left !important;
+  will-change: transform, margin-left;
 }

@media screen and (max-width: $sm-breakpoint) {
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@ -6,7 +6,7 @@
  }

  &--nested {
-    > :first-child {
+    :first-child {
      margin-top: 0;
    }
    > :last-child {
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@ -22,6 +22,10 @@
  &__control:checked + &__content {
    display: block;
  }
+
+  .gdoc-page__anchor {
+    display: none;
+  }
 }

 // {{< tabs >}}
--- a/static/fonts/GeekdocIcons.woff
+++ b/static/fonts/GeekdocIcons.woff
--- a/static/fonts/GeekdocIcons.woff2
+++ b/static/fonts/GeekdocIcons.woff2