split out css

.drone.yml

@@ -60,6 +60,18 @@ steps:
     - 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
@@ -230,6 +242,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: 16fef8d3e0cba7202aa533623d9ec7bf8bd3b645aed4c488b9080667f02fa366
+hmac: 9ffa1706ed0a3368bafa619e2fe5dd07db1813c9c8f9e7b54a3f4e722393ffce
 
 ...

CHANGELOG.md

@@ -2,7 +2,16 @@
   - improve and normalize microblog formatting
   - add font and css preloading links
   - add node `gulp` script to package.json (@AgentEnder)
+  - 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 (@atorrescogollo)
 - OTHER
   - fix typos (@weidenhaus)
+- 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"
+}

gulpfile.js

@@ -12,12 +12,12 @@ const fs = require("fs");
 const svgSprite = require("gulp-svg-sprite");
 
 var CSSDEST = "static/";
-var FAVICON_DATA_FILE = "src/favicon/faviconData.json";
+var FAVICON_DATA_FILE = "tmp/faviconData.json";
 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(
@@ -36,11 +36,11 @@ gulp.task("favicon-generate", function (done) {
     {
       masterPicture: "src/favicon/favicon-master.svg",
       dest: "static/favicon",
-      iconsPath: "/",
+      iconsPath: "/favicon",
       design: {
         ios: {
           pictureAspect: "backgroundAndMargin",
-          backgroundColor: "#ffffff",
+          backgroundColor: "#2f333e",
           margin: "14%",
           assets: {
             ios6AndPriorIcons: false,
@@ -52,7 +52,7 @@ gulp.task("favicon-generate", function (done) {
         desktopBrowser: {},
         windows: {
           pictureAspect: "whiteSilhouette",
-          backgroundColor: "#2b5797",
+          backgroundColor: "#2f333e",
           onConflict: "override",
           assets: {
             windows80Ie10Tile: false,
@@ -66,7 +66,7 @@ gulp.task("favicon-generate", function (done) {
         },
         androidChrome: {
           pictureAspect: "shadow",
-          themeColor: "#ffffff",
+          themeColor: "#2f333e",
           manifest: {
             display: "standalone",
             orientation: "notSet",
@@ -79,9 +79,8 @@ gulp.task("favicon-generate", function (done) {
           },
         },
         safariPinnedTab: {
-          pictureAspect: "blackAndWhite",
-          threshold: 74.21875,
-          themeColor: "#5bbad5",
+          pictureAspect: "silhouette",
+          themeColor: "#2f333e",
         },
       },
       settings: {
@@ -111,6 +110,18 @@ gulp.task("favicon-check-update", function (done) {
 
 gulp.task("svg-sprite", function () {
   config = {
+    shape: {
+      dimension: {
+        maxWidth: 24,
+        maxHeight: 24,
+        attributes: false,
+      },
+      spacing: {
+        padding: 0,
+        box: "content",
+      },
+      dest: "tmp/intermediate-svg",
+    },
     svg: {
       xmlDeclaration: false,
       rootAttributes: {
@@ -120,7 +131,7 @@ gulp.task("svg-sprite", function () {
     mode: {
       inline: true,
       symbol: {
-        dest: "./",
+        dest: "layouts/partials/",
         sprite: "svg-icon-symbols.html",
         bust: false,
       },
@@ -130,7 +141,7 @@ gulp.task("svg-sprite", function () {
   return gulp
     .src("src/icons/*.svg")
     .pipe(svgSprite(config))
-    .pipe(gulp.dest("layouts/partials/"));
+    .pipe(gulp.dest("."));
 });
 
 gulp.task("iconfont", function () {
@@ -172,13 +183,7 @@ gulp.task("iconfont", function () {
 
 gulp.task(
   "default",
-  gulp.series(
-    "sass",
-    "svg-sprite",
-    "iconfont",
-    "favicon-check-update",
-    "favicon-generate"
-  )
+  gulp.series("sass", "svg-sprite", "iconfont", "favicon-generate")
 );
 
 gulp.task("devel", function () {

layouts/partials/head.html

@@ -15,11 +15,17 @@
 <link rel="preload" as="font" href="{{ "fonts/DroidSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" as="font" href="{{ "fonts/GeekdocIcons.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
 
-<link rel="preload" href="{{ "main.min.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
+<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="{{ "custom.css" | relURL }}" as="style">
-<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
+<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 "rss" -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

layouts/partials/page-header.html

@@ -22,19 +22,21 @@
 <div class="gdoc-page__header flex flex-wrap justify-between{{ if not $showEdit }} hidden-mobile{{ end }}{{ if (and (not $showBreadcrumb) (not $showEdit)) }} hidden {{ end }}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
     <span>
         {{if $showBreadcrumb }}
-            <span class="breadcrumb">
-                <svg class="icon path"><use xlink:href="#path"></use></svg>
-                {{ $name := (partial "title" .) }}
-                {{ template "breadcrumb" dict "page" . "value" $name }}
-            </span>
+        <span class="breadcrumb">
+            <svg class="icon path"><use xlink:href="#path"></use></svg>
+            {{ $name := (partial "title" .) }}
+            {{ template "breadcrumb" dict "page" . "value" $name }}
+        </span>
         {{ end }}
     </span>
     <span>
         {{ if $showEdit }}
+        <span class="editpage">
             <svg class="icon code"><use xlink:href="#code"></use></svg>
             <a href="{{ $geekdocRepo }}/{{ $geekdocEditPath }}/{{ $.Scratch.Get "geekdocFilePath" }}">
                 Edit this page
             </a>
+        </span>
         {{ end }}
     </span>
 </div>

layouts/partials/site-header.html

@@ -8,7 +8,7 @@
         {{ end }}
         <a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
             <span class="gdoc-brand flex align-center">
-                <img class="gdoc-brand__img" src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}" alt="{{ .Root.Site.Title }}" width=38 height=38>
+                <img class="gdoc-brand__img" src="{{ (default "brand.svg" .Root.Site.Params.GeekdocLogo) | relURL }}" alt="" width=38 height=38>
                 {{ .Root.Site.Title }}
             </span>
         </a>

src/sass/_base.scss

@@ -482,82 +482,3 @@ img {
   transition-property: transform, margin-left, opacity;
   will-change: transform, margin-left;
 }
-
-@media screen and (max-width: $sm-breakpoint) {
-  .gdoc-nav {
-    margin-left: -$menu-width;
-    font-size: $font-size-base;
-
-    &__control {
-      display: inline-block;
-    }
-  }
-
-  .gdoc-header {
-    .icon {
-      width: $font-size-16 * 1.5;
-      height: $font-size-16 * 1.5;
-    }
-  }
-
-  .gdoc-brand {
-    font-size: $font-size-16 * 1.5;
-
-    &__img {
-      display: none;
-    }
-  }
-
-  .gdoc-error {
-    padding: $padding-16 * 6 $padding-16;
-
-    .icon {
-      width: $font-size-16 * 4;
-      height: $font-size-16 * 4;
-    }
-
-    &__message {
-      padding-left: $padding-32;
-    }
-
-    &__line {
-      padding: $padding-4 0;
-    }
-
-    &__title {
-      font-size: $font-size-16 * 2;
-    }
-  }
-
-  .gdoc-page__header .breadcrumb,
-  .hidden-mobile {
-    display: none;
-  }
-
-  .gdoc-footer {
-    &__item {
-      width: 100%;
-    }
-  }
-
-  #menu-control:checked ~ main {
-    .gdoc-nav nav,
-    .gdoc-page {
-      transform: translateX($menu-width);
-    }
-
-    .gdoc-page {
-      opacity: 0.25;
-    }
-  }
-
-  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
-    .icon.menu {
-      display: none;
-    }
-
-    .icon.arrow-back {
-      display: inline-block;
-    }
-  }
-}

src/sass/_mobile.scss

@@ -0,0 +1,78 @@
+@media screen and (max-width: $sm-breakpoint) {
+  .gdoc-nav {
+    margin-left: -$menu-width;
+    font-size: $font-size-base;
+
+    &__control {
+      display: inline-block;
+    }
+  }
+
+  .gdoc-header {
+    .icon {
+      width: $font-size-16 * 1.5;
+      height: $font-size-16 * 1.5;
+    }
+  }
+
+  .gdoc-brand {
+    font-size: $font-size-16 * 1.5;
+
+    &__img {
+      display: none;
+    }
+  }
+
+  .gdoc-error {
+    padding: $padding-16 * 6 $padding-16;
+
+    .icon {
+      width: $font-size-16 * 4;
+      height: $font-size-16 * 4;
+    }
+
+    &__message {
+      padding-left: $padding-32;
+    }
+
+    &__line {
+      padding: $padding-4 0;
+    }
+
+    &__title {
+      font-size: $font-size-16 * 2;
+    }
+  }
+
+  .gdoc-page__header .breadcrumb,
+  .hidden-mobile {
+    display: none;
+  }
+
+  .gdoc-footer {
+    &__item {
+      width: 100%;
+    }
+  }
+
+  #menu-control:checked ~ main {
+    .gdoc-nav nav,
+    .gdoc-page {
+      transform: translateX($menu-width);
+    }
+
+    .gdoc-page {
+      opacity: 0.25;
+    }
+  }
+
+  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
+    .icon.menu {
+      display: none;
+    }
+
+    .icon.arrow-back {
+      display: inline-block;
+    }
+  }
+}

src/sass/_print.scss

@@ -1,9 +1,35 @@
 @media print {
   .gdoc-nav,
-  .gdoc-footer {
+  .gdoc-footer .container span:not(:first-child),
+  .editpage {
     display: none;
   }
 
+  .gdoc-footer {
+    border-top: 1px solid $gray-300;
+  }
+
+  .gdoc-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;
+  }
+
+  .gdoc-markdown code {
+    font-weight: bold;
+  }
+
+  a,
+  a:visited {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
   main {
     flex-direction: column-reverse;
   }

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,55 @@
+@media screen and (max-width:39rem) {
+  .gdoc-nav {
+    margin-left: -16rem;
+    font-size: 16px
+  }
+  .gdoc-nav__control {
+    display: inline-block
+  }
+  .gdoc-header .icon {
+    width: 1.5rem;
+    height: 1.5rem
+  }
+  .gdoc-brand {
+    font-size: 1.5rem
+  }
+  .gdoc-brand__img {
+    display: none
+  }
+  .gdoc-error {
+    padding: 6rem 1rem
+  }
+  .gdoc-error .icon {
+    width: 4rem;
+    height: 4rem
+  }
+  .gdoc-error__message {
+    padding-left: 2rem
+  }
+  .gdoc-error__line {
+    padding: .25rem 0
+  }
+  .gdoc-error__title {
+    font-size: 2rem
+  }
+  .gdoc-page__header .breadcrumb,
+  .hidden-mobile {
+    display: none
+  }
+  .gdoc-footer__item {
+    width: 100%
+  }
+  #menu-control:checked ~ main .gdoc-nav nav,
+  #menu-control:checked ~ main .gdoc-page {
+    transform: translateX(16rem)
+  }
+  #menu-control:checked ~ main .gdoc-page {
+    opacity: .25
+  }
+  #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.menu {
+    display: none
+  }
+  #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.arrow-back {
+    display: inline-block
+  }
+}

static/mobile.min.css

@@ -0,0 +1 @@
+@media screen and (max-width:39rem){.gdoc-nav{margin-left:-16rem;font-size:16px}.gdoc-nav__control{display:inline-block}.gdoc-header .icon{width:1.5rem;height:1.5rem}.gdoc-brand{font-size:1.5rem}.gdoc-brand__img{display:none}.gdoc-error{padding:6rem 1rem}.gdoc-error .icon{width:4rem;height:4rem}.gdoc-error__message{padding-left:2rem}.gdoc-error__line{padding:.25rem 0}.gdoc-error__title{font-size:2rem}.gdoc-page__header .breadcrumb,.hidden-mobile{display:none}.gdoc-footer__item{width:100%}#menu-control:checked~main .gdoc-nav nav,#menu-control:checked~main .gdoc-page{transform:translateX(16rem)}#menu-control:checked~main .gdoc-page{opacity:.25}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.menu{display:none}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.arrow-back{display:inline-block}}

static/print.css

@@ -0,0 +1,37 @@
+@media print {
+  .editpage,
+  .gdoc-footer .container span:not(:first-child),
+  .gdoc-nav {
+    display: none
+  }
+  .gdoc-footer {
+    border-top: 1px solid #dee2e6
+  }
+  .gdoc-markdown pre {
+    white-space: pre-wrap;
+    overflow-wrap: break-word
+  }
+  .chroma code {
+    border: 1px solid #dee2e6;
+    padding: .5rem!important;
+    font-weight: 400!important
+  }
+  .gdoc-markdown code {
+    font-weight: 700
+  }
+  a,
+  a:visited {
+    color: inherit!important;
+    text-decoration: none!important
+  }
+  main {
+    flex-direction: column-reverse
+  }
+  .gdoc-toc {
+    flex: none
+  }
+  .gdoc-toc nav {
+    position: relative;
+    width: auto
+  }
+}

static/print.min.css

@@ -0,0 +1 @@
+@media print{.editpage,.gdoc-footer .container span:not(:first-child),.gdoc-nav{display:none}.gdoc-footer{border-top:1px solid #dee2e6}.gdoc-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gdoc-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}main{flex-direction:column-reverse}.gdoc-toc{flex:none}.gdoc-toc nav{position:relative;width:auto}}