diff --git a/assets/js/zzo.js b/assets/js/zzo.js index 33bba31..640737d 100644 --- a/assets/js/zzo.js +++ b/assets/js/zzo.js @@ -104,4 +104,7 @@ $(document).ready(function() { $(this).removeClass('active'); } }); + + // highlight + $("pre[class*='language-']").removeAttr("style"); }); diff --git a/assets/sass/components/_diagram.scss b/assets/sass/components/_diagram.scss index 3b7f0f8..61886fe 100644 --- a/assets/sass/components/_diagram.scss +++ b/assets/sass/components/_diagram.scss @@ -1,4 +1,4 @@ -/* Mermaid.js div */ +// mermaid .mermaid { width: 100%; text-align: center; @@ -6,6 +6,45 @@ overflow: auto; } +// flowchart.js .diagram { overflow: auto; -} \ No newline at end of file +} + +// js-sequence-diagram +.language-msc { + background: #fcfcfa !important; +} + +// .sequence text { +// @include themify($themes) { +// fill: themed('body-color'); +// } +// } + +// .sequence path { +// @include themify($themes) { +// fill: themed('body-background-color'); +// } +// } + +// chart.js +.language-chart { + background: #fcfcfa !important; +} + +// wavedrom +.language-wave { + background: #fcfcfa !important; +} + +// div[id^=WaveDrom_Display] { +// background-color: #FCFCFA; +// border-radius: 0.25rem; +// } + +// viz.js +.language-viz-dot { + background: transparent !important; +} + diff --git a/assets/sass/components/_whoami.scss b/assets/sass/components/_whoami.scss index 7ba7036..dce02c5 100644 --- a/assets/sass/components/_whoami.scss +++ b/assets/sass/components/_whoami.scss @@ -21,12 +21,13 @@ } &__title { + font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; padding-bottom: 0.5rem; } &__desc { - + font-size: 1rem; } } \ No newline at end of file diff --git a/assets/sass/layout/_navigation.scss b/assets/sass/layout/_navigation.scss index b66ea06..59a25be 100644 --- a/assets/sass/layout/_navigation.scss +++ b/assets/sass/layout/_navigation.scss @@ -115,6 +115,7 @@ &__title { height: $grid_navbar_height; + font-size: 1.5rem; @include flexbox(); @include align-items(center); diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 0933665..c812bac 100644 --- a/assets/sass/pages/_single.scss +++ b/assets/sass/pages/_single.scss @@ -4,6 +4,7 @@ width: 100%; &__title { + font-size: 2.5rem; font-weight: 900; font-family: $single_title_font; line-height: 3rem; @@ -73,7 +74,7 @@ pre { @include themify($themes) { - background-color: themed("content-pre-background-color") !important; + background-color: themed("content-pre-background-color"); } border-radius: 0.5rem; position: relative; diff --git a/assets/sass/themes/_dark.scss b/assets/sass/themes/_dark.scss index c45ae50..ebb6b7d 100644 --- a/assets/sass/themes/_dark.scss +++ b/assets/sass/themes/_dark.scss @@ -101,4 +101,5 @@ $dark: ( gallery-mask-color: #FCFCFA, gallery-mask-background-color: rgba(0, 0, 0, 0.7), avatar-background-color: #403E41, + language-background-color: #bdbdbd, ); \ No newline at end of file diff --git a/data/lib.toml b/data/lib.toml index 60fd1b4..148eb32 100644 --- a/data/lib.toml +++ b/data/lib.toml @@ -27,6 +27,44 @@ sri = "sha256-ZATCxHgcbalqi3AxHm7sPmwbfs3oZ4feGmCARVDmXig=" url = "https://cdn.jsdelivr.net/npm/swiper@5.2.0/js/swiper.min.js" +[js.webfont] + sri = "" # no sri + url = "https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js" + +[js.snap_svg] + sri = "" # no sri + url = "https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg.min.js" + +[js.lodash] + sri = "sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" + url = "https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" + +[js.sequence_diagram] + sri = "sha256-eadHf9g1REH9Wvp2FLV/D9vKNvQUFKuVPgWFvmMQxBE=" + url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.js" + +[js.chart] + sri = "sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" + url = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" + +[js.wavedrom] + sri = "sha256-IDuClDzRPosOM4bqD2e6ANDjqDwqNJrQxvXvegg47eI=" + url = "https://cdn.jsdelivr.net/npm/wavedrom@2.1.6/wavedrom.min.js" + +[js.wavedrom_skin] + sri = "sha256-AcH/tECvCrfgPUHK98GALAPyAE7XpAYyEsbpmQrniFo=" + url = "https://cdn.jsdelivr.net/npm/wavedrom@2.1.6/skins/default.js" + +[js.viz] + sri = "" # no sri + url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.min.js" + +[js.viz_render] + sri = "sha256-Ogqs510LFnekr9o7OLdpelaaAmNss9egQRTyzCqV2NQ=" + url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js" + + + # css @@ -38,6 +76,9 @@ sri = "sha256-s2QA0JtYEOOqRUyzKN+k2a/RxcimDuF2HZBdsosQRbM=" url = "https://cdn.jsdelivr.net/npm/swiper@5.2.0/css/swiper.min.css" +[css.sequence_diagram] + sri = "sha256-On01v36B8LRDuL2tqhqs7Gb3Cm/NIpsLFy4OarOodUA=" + url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.css" diff --git a/data/msc.json b/data/msc.json new file mode 100644 index 0000000..7965916 --- /dev/null +++ b/data/msc.json @@ -0,0 +1,3 @@ +{ + "theme": "hand" +} \ No newline at end of file diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md new file mode 100644 index 0000000..a9a49e8 --- /dev/null +++ b/exampleSite/content/_index.md @@ -0,0 +1,72 @@ +--- +header: + - type: text + height: 235 + paddingX: 50 + paddingY: 0 + align: left + title: + - header title1 + - header title2 + subtitle: + - header subtitle1 + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 + + - type: img + image: images/header/background.jpg + height: 235 + paddingX: 50 + paddingY: 0 + align: center + title: + - header title1 + - header title2 + subtitle: + - header subtitle1 + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 + + - type: slide + height: 235 + slide: + - paddingX: 50 + paddingY: 0 + align: left + image: images/header/background.jpg + title: + - header title1 + subtitle: + - header subtitle1 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 + + - paddingX: 50 + paddingY: 0 + align: center + image: images/header/background.jpg + title: + - header title2 + subtitle: + - header subtitle2 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 + + - paddingX: 50 + paddingY: 0 + align: right + image: images/header/background.jpg + title: + - header title3 + subtitle: + - header subtitle3 + titleFontSize: 44 + subtitleFontSize: 16 + spaceBetweenTitleSubtitle: 20 +--- \ No newline at end of file diff --git a/exampleSite/content/posts/test-chartjs.md b/exampleSite/content/posts/test-chartjs.md new file mode 100644 index 0000000..5906cf5 --- /dev/null +++ b/exampleSite/content/posts/test-chartjs.md @@ -0,0 +1,51 @@ +--- +title: "Chart support" +date: 2019-11-18T12:00:06+09:00 +description: "Simple yet flexible JavaScript charting for designers & developers" +tags: +- +series: +- +categories: +- diagram +libraries: +- chart +featured_image: "feature1/graph.png" +--- + +```chart +{ + "type": "bar", + "data": + { + "labels": ["One", "Two", "Three", "Four", "Five", "Six"], + "datasets": [{ + "label": "# of Votes", + "data": [12, 19, 3, 5, 3, 8] + }] + } +} +``` + +```chart + { + "type": "line", + "data": { + "labels": ["One", "Two", "Three", "Four", "Five", "Six"], + "datasets": [ + { + "label": "# of Votes", + "data": [12, 19, 3, 5, 2, 3], + "backgroundColor":"transparent", + "borderColor":"orange" + }, + { + "label": "Some other set", + "data": [15, 8, 13, 5, 5, 9], + "backgroundColor":"transparent", + "borderColor":"#44ccff" + } + ] + } + } +``` diff --git a/exampleSite/content/posts/test-flowchart.md b/exampleSite/content/posts/test-flowchart.md index a4be750..4aa4c15 100644 --- a/exampleSite/content/posts/test-flowchart.md +++ b/exampleSite/content/posts/test-flowchart.md @@ -1,5 +1,5 @@ --- -title: "Flowchart Test" +title: "Flowchart support" date: 2019-11-14T12:00:06+09:00 description: "flowchart.js is a flowchart DSL and SVG render that runs in the browser and terminal. Nodes and connections are defined in separately so that nodes can be reused and connections can be quickly changed." diff --git a/exampleSite/content/posts/test-js-sequence-diagrams.md b/exampleSite/content/posts/test-js-sequence-diagrams.md new file mode 100644 index 0000000..e01ef48 --- /dev/null +++ b/exampleSite/content/posts/test-js-sequence-diagrams.md @@ -0,0 +1,28 @@ +--- +title: "JS Sequence Diagram support" +date: 2019-11-18T12:00:06+09:00 +description: "Generates UML sequence diagrams from simple text" +tags: +- +series: +- +categories: +- diagram +libraries: +- msc +featured_image: "feature2/transfer.png" +--- + +```msc +Alice->Bob: Hello Bob, how are you? +Note right of Bob: Bob thinks +Bob-->Alice: I am good thanks! +``` + +```msc +Title: Here is a title +A->B: Normal line +B-->C: Dashed line +C->>D: Open arrow +D-->>A: Dashed open arrow +``` \ No newline at end of file diff --git a/exampleSite/content/posts/test-katext.md b/exampleSite/content/posts/test-katext.md index 0b80dca..8910992 100644 --- a/exampleSite/content/posts/test-katext.md +++ b/exampleSite/content/posts/test-katext.md @@ -1,5 +1,5 @@ --- -title: "Katex Test" +title: "Katex support" date: 2019-11-15T12:00:06+09:00 description: "KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web." tags: diff --git a/exampleSite/content/posts/test-mathjax.md b/exampleSite/content/posts/test-mathjax.md index 5868d3c..a0255cf 100644 --- a/exampleSite/content/posts/test-mathjax.md +++ b/exampleSite/content/posts/test-mathjax.md @@ -1,5 +1,5 @@ --- -title: "MathJax Test" +title: "MathJax support" date: 2019-11-16T12:00:06+09:00 description: "A JavaScript display engine for mathematics that works in all browsers.No more setup for readers. It just works." tags: diff --git a/exampleSite/content/posts/test-mermaid.md b/exampleSite/content/posts/test-mermaid.md index 30aab3f..affeec0 100644 --- a/exampleSite/content/posts/test-mermaid.md +++ b/exampleSite/content/posts/test-mermaid.md @@ -1,5 +1,5 @@ --- -title: "Mermaid Test" +title: "Mermaid support" date: 2019-11-17T12:00:06+09:00 description: "Generate diagrams, charts, graphs or flows from markdown-like text via javascript." tags: diff --git a/exampleSite/content/posts/test-viz.md b/exampleSite/content/posts/test-viz.md new file mode 100644 index 0000000..8cca845 --- /dev/null +++ b/exampleSite/content/posts/test-viz.md @@ -0,0 +1,45 @@ +--- +title: "Viz support" +date: 2019-11-18T21:00:06+09:00 +description: "A hack to put Graphviz on the web." +tags: +- +series: +- +categories: +- diagram +libraries: +- viz +featured_image: "feature2/graph.png" +--- + +```viz-dot + digraph G { + + subgraph cluster_0 { + style=filled; + color=lightgrey; + node [style=filled,color=white]; + a0 -> a1 -> a2 -> a3; + label = "process #1"; + } + + subgraph cluster_1 { + node [style=filled]; + b0 -> b1 -> b2 -> b3; + label = "process #2"; + color=blue + } + start -> a0; + start -> b0; + a1 -> b3; + b2 -> a3; + a3 -> a0; + a3 -> end; + b3 -> end; + + start [shape=Mdiamond]; + end [shape=Msquare]; +} + +``` diff --git a/exampleSite/content/posts/test-wavedrom.md b/exampleSite/content/posts/test-wavedrom.md new file mode 100644 index 0000000..784c71d --- /dev/null +++ b/exampleSite/content/posts/test-wavedrom.md @@ -0,0 +1,24 @@ +--- +title: "Wavedrom support" +date: 2019-11-18T18:00:06+09:00 +description: "WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics." +tags: +- +series: +- +categories: +- diagram +libraries: +- wavedrom +featured_image: "feature1/wave.png" +--- + +```wave +{ + "signal": [ {"name": "CLK", "wave": "p.....|..."}, + {"name":"DAT", "wave":"x.345x|=.x", "data":["A","B","C","D"]}, + {"name": "REQ", "wave": "0.1..0|1.0"}, + {}, + {"name": "ACK", "wave": "1.....|01."} +]} +``` diff --git a/exampleSite/static/header/background.jpg b/exampleSite/static/header/background.jpg new file mode 100644 index 0000000..c248f25 Binary files /dev/null and b/exampleSite/static/header/background.jpg differ diff --git a/exampleSite/static/images/feature1/graph.png b/exampleSite/static/images/feature1/graph.png new file mode 100644 index 0000000..0597908 Binary files /dev/null and b/exampleSite/static/images/feature1/graph.png differ diff --git a/exampleSite/static/images/feature1/wave.png b/exampleSite/static/images/feature1/wave.png new file mode 100644 index 0000000..3759438 Binary files /dev/null and b/exampleSite/static/images/feature1/wave.png differ diff --git a/exampleSite/static/images/feature2/graph.png b/exampleSite/static/images/feature2/graph.png new file mode 100644 index 0000000..e6e7773 Binary files /dev/null and b/exampleSite/static/images/feature2/graph.png differ diff --git a/exampleSite/static/images/feature2/transfer.png b/exampleSite/static/images/feature2/transfer.png new file mode 100644 index 0000000..d8480e9 Binary files /dev/null and b/exampleSite/static/images/feature2/transfer.png differ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 30e3825..70147d0 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,8 +5,8 @@ {{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }} - {{ partial "head/scripts" . }} - {{ partial "head/styles" . }} + {{ partialCached "head/scripts" . }} + {{ partialCached "head/styles" . }} {{ partial "head/meta" . }} {{ partial "head/meta_json_ld" . }} {{ partial "head/service" . }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index d044c2b..41ec9c8 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,7 +4,7 @@ {{ partial "body/breadcrumb" . }} {{ end }}
-

{{ .Title }}

+

{{ .Title }}

🕓 {{ .Date.Format (i18n "single-dateformat") }} · ☕{{ .ReadingTime }} min read
diff --git a/layouts/partials/body/lib.html b/layouts/partials/body/lib.html index 0db7bb8..3f275c9 100644 --- a/layouts/partials/body/lib.html +++ b/layouts/partials/body/lib.html @@ -3,6 +3,7 @@ {{ if in .Params.Libraries "mermaid" }} {{ printf "" $js.mermaid.url $js.mermaid.sri | safeHTML }} + " $js.katex.url $js.katex.sri | safeHTML }} {{ printf "" $js.katex_auto_render.url $js.katex_auto_render.sri | safeHTML }} + " $js.mathjax.url $js.mathjax.sri | safeHTML }} - + {{ printf "" $js.mathjax.url $js.mathjax.sri | safeHTML }} + + +{{ end }} + +{{ if in .Params.Libraries "msc" }} + {{ printf "" $js.webfont.url | safeHTML }} + {{ printf "" $js.snap_svg.url | safeHTML }} + {{ printf "" $js.lodash.url $js.lodash.sri | safeHTML }} + {{ printf "" $js.sequence_diagram.url $js.sequence_diagram.sri | safeHTML }} + {{ printf "" $css.sequence_diagram.url $css.sequence_diagram.sri | safeHTML }} + + +{{ end }} + +{{ if in .Params.Libraries "chart" }} + {{ printf "" $js.chart.url $js.chart.sri | safeHTML }} + +{{ end }} + +{{ if in .Params.Libraries "wavedrom" }} + {{ printf "" $js.wavedrom.url $js.wavedrom.sri | safeHTML }} + {{ printf "" $js.wavedrom_skin.url $js.wavedrom_skin.sri | safeHTML }} + + +{{ end }} + +{{ if in .Params.Libraries "viz" }} + {{ printf "" $js.viz.url | safeHTML }} + {{ printf "" $js.viz_render.url $js.viz_render.sri | safeHTML }} + + {{ end }} \ No newline at end of file diff --git a/layouts/partials/body/whoami.html b/layouts/partials/body/whoami.html index f1500ef..8f570b0 100644 --- a/layouts/partials/body/whoami.html +++ b/layouts/partials/body/whoami.html @@ -16,10 +16,10 @@ {{ end }}
-
+
{{ .Site.Params.myname }}
-
+
{{ .Site.Params.whoami }}
diff --git a/layouts/partials/footer/select-theme.html b/layouts/partials/footer/select-theme.html index 47fb822..613a118 100644 --- a/layouts/partials/footer/select-theme.html +++ b/layouts/partials/footer/select-theme.html @@ -49,7 +49,7 @@ } } }); - + if (window.mermaid) { if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") { mermaid.initialize({ theme: 'dark' }); diff --git a/layouts/partials/navbar/site-nav.html b/layouts/partials/navbar/site-nav.html index 48c2872..b400b9b 100644 --- a/layouts/partials/navbar/site-nav.html +++ b/layouts/partials/navbar/site-nav.html @@ -6,7 +6,7 @@ {{ end }} -
{{ .Site.Params.logoText }}
+
{{ .Site.Params.logoText }}