Merge pull request #14 from thegeeklab/prepare-release

split out css
uci-hugo-doc
Robert Kaussow 2020-11-09 22:40:54 +01:00 committed by GitHub
commit 7ff16786bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 288 additions and 121 deletions

View File

@ -60,6 +60,18 @@ steps:
- failure - failure
- success - 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: trigger:
ref: ref:
- refs/heads/master - refs/heads/master
@ -230,6 +242,6 @@ depends_on:
--- ---
kind: signature kind: signature
hmac: 16fef8d3e0cba7202aa533623d9ec7bf8bd3b645aed4c488b9080667f02fa366 hmac: 9ffa1706ed0a3368bafa619e2fe5dd07db1813c9c8f9e7b54a3f4e722393ffce
... ...

View File

@ -2,7 +2,16 @@
- improve and normalize microblog formatting - improve and normalize microblog formatting
- add font and css preloading links - add font and css preloading links
- add node `gulp` script to package.json (@AgentEnder) - 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 - BUGFIX
- use relative URL's for fonts (@atorrescogollo) - use relative URL's for fonts (@atorrescogollo)
- OTHER - OTHER
- fix typos (@weidenhaus) - fix typos (@weidenhaus)
- INTERNAL
- publish Lighthouse CI overwiew to PR's

8
data/assets.json Normal file
View File

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

View File

@ -4,6 +4,7 @@ title: Geekdocs
theme: hugo-geekdoc theme: hugo-geekdoc
pygmentsUseClasses: true pygmentsUseClasses: true
pygmentsCodeFences: true pygmentsCodeFences: true
timeout: 180000
# Geekdoc configuration # Geekdoc configuration
disablePathToLower: true disablePathToLower: true

View File

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

View File

@ -2,12 +2,12 @@
{{ .Scratch.Set "geekdocSearchConfig" .Site.Params.GeekdocSearchConfig }} {{ .Scratch.Set "geekdocSearchConfig" .Site.Params.GeekdocSearchConfig }}
<!-- Remove after https://github.com/gohugoio/hugo/issues/6331 --> <!-- Remove after https://github.com/gohugoio/hugo/issues/6331 -->
{{ $searchJSFile := printf "js/%s.search.js" .Language.Lang }} {{ $searchJSFile := printf "js/%s.search.js" .Language.Lang }}
{{ $searchJS := resources.Get "js/search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify }} {{ $searchJS := resources.Get "js/search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify | fingerprint }}
<script defer src="{{ $searchJS.RelPermalink }}"></script> <script defer src="{{ $searchJS.RelPermalink }}"></script>
{{ end }} {{ end }}
{{ if default true .Site.Params.GeekdocAnchorCopy }} {{ if default true .Site.Params.GeekdocAnchorCopy }}
<script defer src="{{ "js/clipboard.min.js" | relURL }}"></script> <script defer src="{{ index .Site.Data.assets "js/clipboard.min.js" | relURL }}"></script>
<script> <script>
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
var clipboard = new ClipboardJS('.clip'); var clipboard = new ClipboardJS('.clip');

View File

@ -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/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" as="font" href="{{ "fonts/GeekdocIcons.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{ "main.min.css" | relURL }}" as="style"> <link rel="preload" href="{{ index .Site.Data.assets "main.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen"> <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="preload" href="{{ index .Site.Data.assets "mobile.min.css" | relURL }}" as="style">
<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen"> <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" -}} {{ with .OutputFormats.Get "rss" -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}

View File

@ -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"> <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> <span>
{{if $showBreadcrumb }} {{if $showBreadcrumb }}
<span class="breadcrumb"> <span class="breadcrumb">
<svg class="icon path"><use xlink:href="#path"></use></svg> <svg class="icon path"><use xlink:href="#path"></use></svg>
{{ $name := (partial "title" .) }} {{ $name := (partial "title" .) }}
{{ template "breadcrumb" dict "page" . "value" $name }} {{ template "breadcrumb" dict "page" . "value" $name }}
</span> </span>
{{ end }} {{ end }}
</span> </span>
<span> <span>
{{ if $showEdit }} {{ if $showEdit }}
<span class="editpage">
<svg class="icon code"><use xlink:href="#code"></use></svg> <svg class="icon code"><use xlink:href="#code"></use></svg>
<a href="{{ $geekdocRepo }}/{{ $geekdocEditPath }}/{{ $.Scratch.Get "geekdocFilePath" }}"> <a href="{{ $geekdocRepo }}/{{ $geekdocEditPath }}/{{ $.Scratch.Get "geekdocFilePath" }}">
Edit this page Edit this page
</a> </a>
</span>
{{ end }} {{ end }}
</span> </span>
</div> </div>

View File

@ -8,7 +8,7 @@
{{ end }} {{ end }}
<a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}"> <a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
<span class="gdoc-brand flex align-center"> <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 }} {{ .Root.Site.Title }}
</span> </span>
</a> </a>

View File

@ -1,6 +1,6 @@
{{ if not (.Page.Scratch.Get "mermaid") }} {{ if not (.Page.Scratch.Get "mermaid") }}
<!-- Include mermaid only first time --> <!-- 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> <script>
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
mermaid.initialize({ mermaid.initialize({

View File

@ -482,82 +482,3 @@ img {
transition-property: transform, margin-left, opacity; transition-property: transform, margin-left, opacity;
will-change: transform, margin-left; 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;
}
}
}

78
src/sass/_mobile.scss Normal file
View File

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

View File

@ -1,9 +1,35 @@
@media print { @media print {
.gdoc-nav, .gdoc-nav,
.gdoc-footer { .gdoc-footer .container span:not(:first-child),
.editpage {
display: none; 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 { main {
flex-direction: column-reverse; flex-direction: column-reverse;
} }

View File

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

3
src/sass/mobile.scss Normal file
View File

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

3
src/sass/print.scss Normal file
View File

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

55
static/mobile.css Normal file
View File

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

1
static/mobile.min.css vendored Normal file
View File

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

37
static/print.css Normal file
View File

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

1
static/print.min.css vendored Normal file
View File

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