add lighthouse-ci to drone

.drone.yml

@@ -21,7 +21,7 @@ steps:
   image: klakegg/hugo:0.69.0-ext-alpine
   commands:
   - cd exampleSite/
-  - mkdir themes/ && ln -s ../../. themes/hugo-geekdoc && hugo-official
+  - mkdir themes/ && ln -s ../../. themes/hugo-geekdoc && hugo-official -b http://localhost/
 
 - name: spellcheck
   image: node:lts-alpine
@@ -44,12 +44,18 @@ steps:
   environment:
     LINK_VALIDATOR_BASE_DIR: /drone/src/exampleSite/public
 
+- name: page-validator
+  image: patrickhulce/lhci-client
+  user: root
+  commands:
+  - lhci autorun
+
 - name: build
   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
@@ -162,6 +168,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: ca1ffdbbe56ee6624fad160c24071dcd3da2de55d580c3614dd0e6a23cdb338a
+hmac: 6c9fc660b81ed9086e1bcb0f8176ba6b084834bc7ecafbaa0573943760698330
 
 ...

.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/

.lighthouserc.yml

@@ -0,0 +1,17 @@
+---
+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

.tarignore

@@ -0,0 +1,13 @@
+.tarignore
+.dictionary*
+.git*
+.drone*
+.lighthouse*
+.markdownlint*
+example*
+gulp*
+package*
+node*
+local*
+dist
+src

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" }}

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 }}

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" -}}

layouts/posts/list.html

@@ -6,15 +6,13 @@
                 <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>
             <div>
                 {{ .Summary }}
                 {{ if .Truncated }}
                 <a class="gdoc-post__readmore" title="Read full post" href="{{ .RelPermalink }}">
-                    Read more
+                    Read full post
                 </a>
                 {{ end }}
             </div>

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 }}

layouts/shortcodes/mermaid.html

@@ -1,7 +1,7 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
-<script src="{{ "js/mermaid.min.js" | relURL }}"></script>
-<script>
+<script defer src="{{ "js/mermaid.min.js" | relURL }}"></script>
+<script defer>
   mermaid.initialize({
     flowchart: { useMaxWidth: true }
   });

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;