Merge pull request #5 from thegeeklab/prepare-release

Prepare release

.drone.yml

@@ -56,13 +56,22 @@ steps:
     strip_prefix: lhci_reports/dist/
     target: /${DRONE_REPO_NAME}
   when:
-    ref:
-    - refs/heads/master
-    - refs/tags/**
     status:
     - failure
     - success
 
+- name: page-validation-link
+  image: thegeeklab/drone-github-comment
+  settings:
+    api_key:
+      from_secret: github_token
+    key: pr-${DRONE_PULL_REQUEST}
+    message: lhci_reports/dist/summary.md
+    update: true
+  when:
+    ref:
+    - refs/pull/**
+
 trigger:
   ref:
   - refs/heads/master
@@ -234,6 +243,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: d4a14c67312952bf2cba2f41bf5f2b5b7bc2b576bc2ff7cea2aa5442afb673a6
+hmac: aed300317299ce213f8f6369180d0563514592592ab4221299f3410d4f9d0ef3
 
 ...

CHANGELOG.md

@@ -1,2 +1,14 @@
 - ENHANCEMENT
   - add node `gulp` script to package.json
+  - remove `title` and set empty `alt` tag on branding image
+  - add minimal working CSS for printing
+  - split out mobile CSS
+  - load static css/js assets from data template:
+    This way users can hash static assets and overwrite the data template
+    to deliver the hashed assets. Thats helpful if you have to deal with
+    long cache settings but wont to ensure your updated assets are delivered
+    to clients.
+- BUGFIX
+  - use relative URL's for fonts
+- INTERNAL
+  - publish Lighthouse CI overwiew to PR's

data/assets.json

@@ -0,0 +1,8 @@
+{
+  "main.min.css": "main.min.css",
+  "mobile.min.css": "mobile.min.css",
+  "print.min.css": "print.min.css",
+  "custom.css": "custom.css",
+  "js/clipboard.min.js": "js/clipboard.min.js",
+  "js/mermaid.min.js": "js/mermaid.min.js"
+}

exampleSite/config.yml

@@ -5,6 +5,7 @@ theme: hugo-geekblog
 pygmentsUseClasses: true
 pygmentsCodeFences: true
 enableGitInfo: true
+timeout: 60000
 
 paginate: 5
 

exampleSite/content/posts/getting-started.md

@@ -127,7 +127,7 @@ To prepare your new site environment just a few steps are required:
    If you want to add some demo data you could use the content from the [Hugo basic example](https://github.com/gohugoio/hugoBasicExample):
 
    ```Shell
-    curl -L https://github.com/gohugoio/hugoBasicExample/archive/master.tar.gz | tar -xz --exclude "config*" --exclude "LICENSE" --exclude "README*" --strip-components=1
+   curl -L https://github.com/gohugoio/hugoBasicExample/archive/master.tar.gz | tar -xz --exclude "config*" --exclude "LICENSE" --exclude "README*" --strip-components=1
    ```
 
 ### Option 1: Download pre-build release bundle

gulpfile.js

@@ -17,7 +17,7 @@ var TIMESTAMP = Math.round(Date.now() / 1000);
 
 gulp.task("sass", function () {
   return gulp
-    .src("src/sass/main.scss")
+    .src("src/sass/{main,print,mobile}.scss")
     .pipe(sass({ errLogToConsole: true }))
     .pipe(cleanCSS({ format: "beautify" }))
     .pipe(

layouts/partials/foot.html

@@ -1,5 +1,5 @@
 {{ if default true .Site.Params.GeekblogAnchorCopy }}
-<script defer src="{{ "js/clipboard.min.js" | relURL }}"></script>
+<script defer src="{{ index .Site.Data.assets "js/clipboard.min.js" | relURL }}"></script>
 <script>
     document.addEventListener("DOMContentLoaded", function(event) {
         var clipboard = new ClipboardJS('.clip');

layouts/partials/head/others.html

@@ -1,5 +1,23 @@
-<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
-<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
+<link rel="preload" as="font" href="{{ "fonts/Metropolis.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/LiberationSans-Bold.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/LiberationSans-BoldItalic.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/LiberationSans-Italic.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/LiberationMono.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/DroidSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="{{ "fonts/GeekblogIcons.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
+
+<link rel="preload" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" media="all">
+
+<link rel="preload" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" media="screen and (max-width: 45rem)">
+
+<link rel="preload" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index .Site.Data.assets "print.min.css" | relURL }}" media="print">
+
+<link rel="preload" href="{{ index .Site.Data.assets "custom.css" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ index .Site.Data.assets "custom.css" | relURL }}" media="all">
 
 {{ with .OutputFormats.Get "atom" }}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

layouts/partials/site-header.html

@@ -2,7 +2,7 @@
     <div class="container flex align-center justify-center">
         <a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}">
             <span class="gblog-brand flex align-center justify-center">
-                <img class="gblog-brand__img" title="Branding of {{ .Site.Title }}" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="{{ .Site.Title }}" width=60 height=60>
+                <img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="" width=60 height=60>
                 {{ .Site.Title }}
             </span>
             {{ with .Site.Params.subtitle }}

layouts/shortcodes/mermaid.html

@@ -1,6 +1,6 @@
 {{ if not (.Page.Scratch.Get "mermaid") }}
 <!-- Include mermaid only first time -->
-<script defer src="{{ "js/mermaid.min.js" | relURL }}"></script>
+<script defer src="{{ index .Site.Data.assets "js/mermaid.min.js" | relURL }}"></script>
 <script>
     document.addEventListener("DOMContentLoaded", function(event) {
         mermaid.initialize({

package-lock.json

@@ -5236,9 +5236,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
-      "integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
+      "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
       "dev": true
     },
     "prettier-plugin-go-template": {

package.json

@@ -23,7 +23,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-svg-sprite": "^1.5.0",
-    "prettier": "^2.1.1",
+    "prettier": "^2.1.2",
     "prettier-plugin-go-template": "0.0.10",
     "run-sequence": "^2.2.1"
   },

src/sass/_base.scss

@@ -132,6 +132,7 @@ img {
 .gblog-nav {
   background: $second-color;
   color: $gray-200;
+  min-height: $padding-4;
 
   .container {
     padding-top: $padding-8;
@@ -429,85 +430,3 @@ img {
     text-decoration: none;
   }
 }
-
-@media screen and (max-width: $sm-breakpoint) {
-  .gblog-brand {
-    font-size: $font-size-32 * 1.1;
-  }
-
-  .gblog-nav {
-    .container {
-      padding: 0;
-    }
-
-    &__list {
-      background: lighten($second-color, 10%);
-      flex-direction: column;
-      justify-content: center;
-      max-height: 0;
-      overflow: hidden;
-    }
-
-    &__entry {
-      padding: $padding-16 0;
-      border: 0;
-      border-radius: 0;
-      display: block;
-      margin: 0;
-      text-align: center;
-
-      &:hover,
-      &.is-active {
-        background: lighten($second-color, 5%);
-      }
-    }
-
-    &__control {
-      display: block;
-      text-align: center;
-
-      label {
-        padding: $padding-16 0;
-      }
-    }
-  }
-
-  .gblog-error {
-    padding: $padding-16 * 6 $padding-16;
-
-    .icon {
-      font-size: $font-size-32 * 2.5;
-    }
-
-    &__message {
-      padding-left: $padding-16 * 2;
-    }
-
-    &__line {
-      padding: $padding-4 0;
-    }
-
-    &__title {
-      font-size: $font-size-16 * 2;
-    }
-  }
-
-  .gblog-footer {
-    &__item {
-      width: 100%;
-    }
-  }
-}
-
-#menu-control:checked ~ .gblog-nav__list {
-  max-height: 100%;
-}
-
-#menu-control:checked ~ .gblog-nav__control {
-  .icon.menu {
-    display: none;
-  }
-  .icon.clear {
-    display: inline-block;
-  }
-}

src/sass/_mobile.scss

@@ -0,0 +1,81 @@
+@media screen and (max-width: $sm-breakpoint) {
+  .gblog-brand {
+    font-size: $font-size-32 * 1.1;
+  }
+
+  .gblog-nav {
+    .container {
+      padding: 0;
+    }
+
+    &__list {
+      background: lighten($second-color, 10%);
+      flex-direction: column;
+      justify-content: center;
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    &__entry {
+      padding: $padding-16 0;
+      border: 0;
+      border-radius: 0;
+      display: block;
+      margin: 0;
+      text-align: center;
+
+      &:hover,
+      &.is-active {
+        background: lighten($second-color, 5%);
+      }
+    }
+
+    &__control {
+      display: block;
+      text-align: center;
+
+      label {
+        padding: $padding-16 0;
+      }
+    }
+  }
+
+  .gblog-error {
+    padding: $padding-16 * 6 $padding-16;
+
+    .icon {
+      font-size: $font-size-32 * 2.5;
+    }
+
+    &__message {
+      padding-left: $padding-16 * 2;
+    }
+
+    &__line {
+      padding: $padding-4 0;
+    }
+
+    &__title {
+      font-size: $font-size-16 * 2;
+    }
+  }
+
+  .gblog-footer {
+    &__item {
+      width: 100%;
+    }
+  }
+}
+
+#menu-control:checked ~ .gblog-nav__list {
+  max-height: 100%;
+}
+
+#menu-control:checked ~ .gblog-nav__control {
+  .icon.menu {
+    display: none;
+  }
+  .icon.clear {
+    display: inline-block;
+  }
+}

src/sass/_print.scss

@@ -1,19 +1,38 @@
 @media print {
   .gblog-nav,
-  .gblog-footer {
+  .gblog-footer .container div:not(:last-child),
+  .gblog-paging,
+  .gblog-post__readmore,
+  .gblog-post__anchor {
     display: none;
   }
 
-  main {
-    flex-direction: column-reverse;
+  .gblog-header {
+    border-bottom: 1px solid $gray-300;
   }
 
-  .gblog-toc {
-    flex: none;
+  .gblog-footer {
+    border-top: 1px solid $gray-300;
+  }
 
-    nav {
-      position: relative;
-      width: auto;
-    }
+  .gblog-markdown pre {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .chroma code {
+    border: 1px solid $gray-300;
+    padding: $padding-8 !important;
+    font-weight: normal !important;
+  }
+
+  .gblog-markdown code {
+    font-weight: bold;
+  }
+
+  a,
+  a:visited {
+    color: inherit !important;
+    text-decoration: none !important;
   }
 }

src/sass/main.scss

@@ -1,11 +1,10 @@
-@import "defaults";
+@import "_defaults";
 
-@import "normalize";
-@import "utils";
-@import "fonts";
-@import "base";
-@import "print";
+@import "_normalize";
+@import "_utils";
+@import "_fonts";
+@import "_base";
 
-@import "markdown";
-@import "chroma_github";
-@import "shortcodes";
+@import "_markdown";
+@import "_chroma_github";
+@import "_shortcodes";

src/sass/mobile.scss

@@ -0,0 +1,3 @@
+@import "_defaults";
+
+@import "_mobile";

src/sass/print.scss

@@ -0,0 +1,3 @@
+@import "_defaults";
+
+@import "_print";

static/mobile.css

@@ -0,0 +1,61 @@
+@media screen and (max-width:45rem) {
+  .gblog-brand {
+    font-size: 2.2rem
+  }
+  .gblog-nav .container {
+    padding: 0
+  }
+  .gblog-nav__list {
+    background: #454b5b;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 0;
+    overflow: hidden
+  }
+  .gblog-nav__entry {
+    padding: 1rem 0;
+    border: 0;
+    border-radius: 0;
+    display: block;
+    margin: 0;
+    text-align: center
+  }
+  .gblog-nav__entry.is-active,
+  .gblog-nav__entry:hover {
+    background: #3a3f4d
+  }
+  .gblog-nav__control {
+    display: block;
+    text-align: center
+  }
+  .gblog-nav__control label {
+    padding: 1rem 0
+  }
+  .gblog-error {
+    padding: 6rem 1rem
+  }
+  .gblog-error .icon {
+    font-size: 5rem
+  }
+  .gblog-error__message {
+    padding-left: 2rem
+  }
+  .gblog-error__line {
+    padding: .25rem 0
+  }
+  .gblog-error__title {
+    font-size: 2rem
+  }
+  .gblog-footer__item {
+    width: 100%
+  }
+}
+#menu-control:checked ~ .gblog-nav__list {
+  max-height: 100%
+}
+#menu-control:checked ~ .gblog-nav__control .icon.menu {
+  display: none
+}
+#menu-control:checked ~ .gblog-nav__control .icon.clear {
+  display: inline-block
+}

static/mobile.min.css

@@ -0,0 +1 @@
+@media screen and (max-width:45rem){.gblog-brand{font-size:2.2rem}.gblog-nav .container{padding:0}.gblog-nav__list{background:#454b5b;flex-direction:column;justify-content:center;max-height:0;overflow:hidden}.gblog-nav__entry{padding:1rem 0;border:0;border-radius:0;display:block;margin:0;text-align:center}.gblog-nav__entry.is-active,.gblog-nav__entry:hover{background:#3a3f4d}.gblog-nav__control{display:block;text-align:center}.gblog-nav__control label{padding:1rem 0}.gblog-error{padding:6rem 1rem}.gblog-error .icon{font-size:5rem}.gblog-error__message{padding-left:2rem}.gblog-error__line{padding:.25rem 0}.gblog-error__title{font-size:2rem}.gblog-footer__item{width:100%}}#menu-control:checked~.gblog-nav__list{max-height:100%}#menu-control:checked~.gblog-nav__control .icon.menu{display:none}#menu-control:checked~.gblog-nav__control .icon.clear{display:inline-block}

static/print.css

@@ -0,0 +1,32 @@
+@media print {
+  .gblog-footer .container div:not(:last-child),
+  .gblog-nav,
+  .gblog-paging,
+  .gblog-post__anchor,
+  .gblog-post__readmore {
+    display: none
+  }
+  .gblog-header {
+    border-bottom: 1px solid #dee2e6
+  }
+  .gblog-footer {
+    border-top: 1px solid #dee2e6
+  }
+  .gblog-markdown pre {
+    white-space: pre-wrap;
+    overflow-wrap: break-word
+  }
+  .chroma code {
+    border: 1px solid #dee2e6;
+    padding: .5rem!important;
+    font-weight: 400!important
+  }
+  .gblog-markdown code {
+    font-weight: 700
+  }
+  a,
+  a:visited {
+    color: inherit!important;
+    text-decoration: none!important
+  }
+}

static/print.min.css

@@ -0,0 +1 @@
+@media print{.gblog-footer .container div:not(:last-child),.gblog-nav,.gblog-paging,.gblog-post__anchor,.gblog-post__readmore{display:none}.gblog-header{border-bottom:1px solid #dee2e6}.gblog-footer{border-top:1px solid #dee2e6}.gblog-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gblog-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}}