From 178b92b0a05f26746497e296185e79c711a044d6 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Mon, 1 Jun 2020 15:59:02 +0200
Subject: [PATCH] add lighthouse-ci to drone

---
 .drone.yml                      | 12 +++++++++---
 .gitignore                      |  4 ++++
 .lighthouserc.yml               | 17 +++++++++++++++++
 .tarignore                      | 13 +++++++++++++
 layouts/partials/content.html   |  4 ++--
 layouts/partials/foot.html      |  6 ++++--
 layouts/partials/head.html      |  4 ++--
 layouts/posts/list.html         |  6 ++----
 layouts/posts/single.html       | 12 +++++++-----
 layouts/shortcodes/mermaid.html |  4 ++--
 src/sass/_base.scss             |  9 +++++++--
 11 files changed, 69 insertions(+), 22 deletions(-)
 create mode 100644 .lighthouserc.yml
 create mode 100644 .tarignore

diff --git a/.drone.yml b/.drone.yml
index f1cba01..237b144 100644
--- a/.drone.yml
+++ b/.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
 
 ...
diff --git a/.gitignore b/.gitignore
index 2af3041..bbfc527 100644
--- 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/
diff --git a/.lighthouserc.yml b/.lighthouserc.yml
new file mode 100644
index 0000000..10525f6
--- /dev/null
+++ b/.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
diff --git a/.tarignore b/.tarignore
new file mode 100644
index 0000000..16cdb49
--- /dev/null
+++ b/.tarignore
@@ -0,0 +1,13 @@
+.tarignore
+.dictionary*
+.git*
+.drone*
+.lighthouse*
+.markdownlint*
+example*
+gulp*
+package*
+node*
+local*
+dist
+src
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index f9d10d7..f7904b6 100644
--- 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" }}
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index cc5506b..5805bbb 100644
--- 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>
-    var clipboard = new ClipboardJS('.clip');
+    document.addEventListener("DOMContentLoaded", function(event) {
+        var clipboard = new ClipboardJS('.clip');
+    });
 </script>
 {{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 2d10cde..ac35c60 100644
--- 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" -}}
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
index f197591..33ff7ab 100644
--- a/layouts/posts/list.html
+++ b/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>
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index e4e390e..2ecc822 100644
--- 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 }}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index d144c6a..de129ec 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/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 }
   });
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 8144489..41ddc56 100644
--- 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;