built-in Chroma

2024-12-03 15:56:54 +01:00 · 2022-07-24 01:39:42 +02:00 · 2022-07-24 01:39:42 +02:00 · 8411411a67
commit 8411411a67
parent ebe7400f54
16 changed files with 153 additions and 1820 deletions
--- a/5
+++ b/5
@ -0,0 +1,5 @@
+run-example:
+	cd exampleSite && hugo server -D --gc -p 13131
+
+chroma-css:
+	hugo gen chromastyles --style=dracula > assets/css/common/chroma.css
--- a/README.md
+++ b/README.md
@ -1,96 +1,10 @@
-<h1 align=center>Hugo PaperMod | <a href="https://adityatelange.github.io/hugo-PaperMod/" rel="nofollow">Demo</a></h1>
+WonderMod is a fork of an original theme for [Hugo](https://gohugo.io/) called [PaperMod](https://github.com/adityatelange/hugo-PaperMod) (made by adityatelange). Since PaperMod isn't interested in a few changes such as removing inline JavaScript, which I personally require to harden my websites, I decided to maintain my own fork (I didn't want to keep overwriting a bunch of files as a fork workflow is much cleaner). Don't expect a ton of changes, and unless you know me, you probably don't want to use WonderMod.

-<h4 align=center>☄️ Fast | ☁️ Fluent | 🌙 Smooth | 📱 Responsive</h4>
-<br>
-
-> Hugo PaperMod is a theme based on [hugo-paper](https://github.com/nanxiaobei/hugo-paper).
-> The goal of this project is to add more features and customization to the og theme.
-
-The [demo](https://adityatelange.github.io/hugo-PaperMod/) includes a lot of documentation about Installation, Features with a few more stuff. Make sure you visit it, to get an awesome hands-on experience and get to know about the features ...
-
-**ExampleSite** can be found here: [exampleSite](https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite). Demo is built up with [exampleSite](https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite) as source.
-
-[![Minimum Hugo Version](https://img.shields.io/static/v1?label=min-HUGO-version&message=0.83.0&color=blue&logo=hugo)](https://github.com/gohugoio/hugo/releases/tag/v0.83.0)
-[![Build GH-Pages](https://github.com/adityatelange/hugo-PaperMod/workflows/Build%20GH-Pages/badge.svg)](https://github.com/adityatelange/hugo-PaperMod/deployments/activity_log?environment=github-pages)
-[![GitHub](https://img.shields.io/github/license/adityatelange/hugo-PaperMod)](https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE)
-[![hugo-papermod](https://img.shields.io/badge/Hugo--Themes-@PaperMod-blue)](https://themes.gohugo.io/themes/hugo-papermod/)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=adityatelange_hugo-PaperMod&metric=alert_status)](https://sonarcloud.io/dashboard?id=adityatelange_hugo-PaperMod)
-![code-size](https://img.shields.io/github/languages/code-size/adityatelange/hugo-PaperMod)
-[![Discord](https://img.shields.io/discord/971046860317921340?label=Discord)](https://discord.gg/ahpmTvhVmp)
-
---
-
-<p align="center">
-  <kbd><img src="https://user-images.githubusercontent.com/21258296/114303440-bfc0ae80-9aeb-11eb-8cfa-48a4bb385a6d.png" alt="Mockup image" title="Mockup"/></kbd>
-</p>
-
---
-
-## Features/Mods 💥
-
-   Uses Hugo's asset generator with pipelining, fingerprinting, bundling and minification by default.
-   3 Modes:
-    -   [Regular Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#regular-mode-default-mode)
-    -   [Home-Info Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#home-info-mode)
-    -   [Profile Mode.](https://github.com/adityatelange/hugo-PaperMod/wiki/Features#profile-mode)
-   Table of Content Generation (newer implementation).
-   Archive of posts.
-   Social Icons (home-info and profile-mode)
-   Social-Media Share buttons on posts.
-   Menu location indicator.
-   Multilingual support. (with language selector)
-   Taxonomies
-   Cover image for each post (with Responsive image support).
-   Light/Dark theme (automatic theme switch a/c to browser theme and theme-switch button).
-   SEO Friendly.
-   Multiple Author support.
-   Search Page with Fuse.js
-   Other Posts suggestion below a post
-   Breadcrumb Navigation
-   Code Block Copy buttons
-   No webpack, nodejs and other dependencies are required to edit the theme.
-
-Read Wiki For More Details => **[PaperMod - Features](https://github.com/adityatelange/hugo-PaperMod/wiki/Features)**
-
---
-
-## Install/Update 📥
-
-Read Wiki For More Details => **[PaperMod - Installation](https://github.com/adityatelange/hugo-PaperMod/wiki/Installation)**
-
---
-
-## Social-Icons/Share-Icons 🖼️
-
-Read Wiki For More Details => **[PaperMod-Icons](https://github.com/adityatelange/hugo-PaperMod/wiki/Icons)**
-
---
-
-## FAQs / How To's Guide 🙋
-
-Read Wiki For More Details => **[PaperMod-FAQs](https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs)**
-
---
-
-## Release Changelog 📃
-
-Release ChangeLog has info about stuff added: **[Releases](https://github.com/adityatelange/hugo-PaperMod/releases)**
-
---
-
-## [Pagespeed Insights (100% ?)](https://pagespeed.web.dev/report?url=https://adityatelange.github.io/hugo-PaperMod/) 👀
-
---
-
-## Special Thanks 🌟
-
-   [**Highlight.js**](https://github.com/highlightjs/highlight.js)
-   [**Fuse.js**](https://github.com/krisk/fuse)
-   [**Feather Icons**](https://github.com/feathericons/feather)
-   [**Simple Icons**](https://github.com/simple-icons/simple-icons)
-   **All Contributors and Supporters**
-
-## Stargazers over time 📈
-
-<kbd>[![Stargazers over time](https://starchart.cc/adityatelange/hugo-PaperMod.svg)](https://starchart.cc/adityatelange/hugo-PaperMod)</kbd>
+Current "main" changes are as follows:
+- Remove inline JavaScript ([2528906](https://github.com/Wonderfall/hugo-WonderMod/commit/2528906a38a1ca8a50b3e3a74ffcf9a01a0483a7))
+- Improved YouTube shortcode ([4dc3bee](https://github.com/Wonderfall/hugo-WonderMod/commit/4dc3bee5477b6d22ce830faa13375f4c2e6a216b))
+- Built-in Chroma instead of client-side syntax highlighting with HLJS (see [documentation](https://gohugo.io/content-management/syntax-highlighting/))
+- Bunch of CSS and other changes (see [commit history](https://github.com/Wonderfall/hugo-WonderMod/commits/master))

+Additional credits:
+- [PaperModX](https://github.com/reorx/hugo-PaperModX/) by reorx
--- a/assets/css/common/chroma.css
+++ b/assets/css/common/chroma.css
@ -0,0 +1,82 @@
+/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 20px; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #ff79c6 }
+/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+/* KeywordType */ .chroma .kt { color: #8be9fd }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #50fa7b }
+/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #50fa7b }
+/* NameConstant */ .chroma .no {  }
+/* NameDecorator */ .chroma .nd {  }
+/* NameEntity */ .chroma .ni {  }
+/* NameException */ .chroma .ne {  }
+/* NameFunction */ .chroma .nf { color: #50fa7b }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+/* NameNamespace */ .chroma .nn {  }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #ff79c6 }
+/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #f1fa8c }
+/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+/* LiteralNumber */ .chroma .m { color: #bd93f9 }
+/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+/* Operator */ .chroma .o { color: #ff79c6 }
+/* OperatorWord */ .chroma .ow { color: #ff79c6 }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #6272a4 }
+/* CommentHashbang */ .chroma .ch { color: #6272a4 }
+/* CommentMultiline */ .chroma .cm { color: #6272a4 }
+/* CommentSingle */ .chroma .c1 { color: #6272a4 }
+/* CommentSpecial */ .chroma .cs { color: #6272a4 }
+/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ff5555 }
+/* GenericEmph */ .chroma .ge { text-decoration: underline }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh { font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
+/* GenericOutput */ .chroma .go { color: #44475a }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs {  }
+/* GenericSubheading */ .chroma .gu { font-weight: bold }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w {  }
--- a/assets/css/common/post-entry.css
+++ b/assets/css/common/post-entry.css
@ -3,7 +3,7 @@
    display: flex;
    flex-direction: column;
    justify-content: center;
-    min-height: 320px;
+    min-height: 220px;
    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
 }

@ -16,7 +16,7 @@

 .first-entry .entry-header h1 {
    font-size: 34px;
-    line-height: 1.3;
+    line-height: 1.4;
 }

 .first-entry .entry-content {
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@ -155,7 +155,6 @@

 .post-content .highlight:not(table) {
    margin: 10px auto;
-    background: var(--hljs-bg) !important;
    border-radius: var(--radius);
    direction: ltr;
 }
@ -189,26 +188,39 @@
    margin-bottom: 0;
 }

+.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
+    display: none;
+}
+
+/* code block */
+.post-content .chroma {
+    border-radius: var(--radius);
+}
+
 .post-content code {
+    /* inline code */
+    background-color: var(--tertiary);
    margin: auto 4px;
    padding: 4px 6px;
    font-size: 0.78em;
    line-height: 1.5;
-    background: var(--code-bg);
-    border-radius: 2px;
+    border-radius: 4px;
 }

 .post-content pre code {
+    /* reset inline code */
+    background-color: unset;
    display: block;
    margin: auto 0;
    padding: 10px;
-    color: rgb(213, 213, 214);
-    background: var(--hljs-bg) !important;
-    border-radius: var(--radius);
    overflow-x: auto;
    word-break: break-all;
 }

+.post-content .chroma code {
+    background-color: inherit;
+}
+
 .post-content blockquote {
    margin: 20px 0;
    padding: 0 14px;
@ -255,7 +267,7 @@
 .toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
-    background: var(--code-bg);
+    background: var(--tertiary);
    border-radius: var(--radius);
    padding: 0.4em;
 }
@ -316,12 +328,7 @@
    color: var(--secondary);
    font-size: 14px;
    line-height: 34px;
-    background: var(--code-bg);
-}
-
-.post-tags a:hover,
-.paginav a:hover {
-    background: var(--border);
+    background: var(--tertiary);
 }

 .share-buttons {
@ -358,6 +365,8 @@ h6:hover .anchor {
    display: flex;
    line-height: 30px;
    border-radius: var(--radius);
+    background: none;
+    border: none;
 }

 .paginav a {
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@ -6,27 +6,25 @@
    --header-height: 60px;
    --footer-height: 60px;
    --radius: 8px;
-    --theme: rgb(255, 255, 255);
-    --entry: rgb(255, 255, 255);
+    --theme: #e2e4f2;
+    --entry: #efefff;
    --primary: rgb(30, 30, 30);
    --secondary: rgb(108, 108, 108);
-    --tertiary: rgb(214, 214, 214);
+    --tertiary: #c3c5d0;
    --content: rgb(31, 31, 31);
-    --hljs-bg: rgb(28, 29, 33);
-    --code-bg: rgb(245, 245, 245);
+    --code-bg: #e2e4f2;
    --border: rgb(238, 238, 238);
 }

 .dark {
-    --theme: rgb(29, 30, 32);
-    --entry: rgb(46, 46, 51);
+    --theme: #1f2125;
+    --entry: #26282e;
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
-    --tertiary: rgb(65, 66, 68);
+    --tertiary: #3a3c42;
    --content: rgb(196, 196, 197);
-    --hljs-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
-    --border: rgb(51, 51, 51);
+    --border: none;
 }

 .list {
--- a/assets/css/extended/youtube.css
+++ b/assets/css/extended/youtube.css
@ -0,0 +1,15 @@
+.youtube-embed-div {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.youtube-embed-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+} 
--- a/assets/css/hljs/an-old-hope.min.css
+++ b/assets/css/hljs/an-old-hope.min.css
@ -1,63 +0,0 @@
-.hljs-comment,
-.hljs-quote {
-    color: #b6b18b;
-}
-
-.hljs-deletion,
-.hljs-name,
-.hljs-regexp,
-.hljs-selector-class,
-.hljs-selector-id,
-.hljs-tag,
-.hljs-template-variable,
-.hljs-variable {
-    color: #eb3c54;
-}
-
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-link,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-params,
-.hljs-type {
-    color: #e7ce56;
-}
-
-.hljs-attribute {
-    color: #ee7c2b;
-}
-
-.hljs-addition,
-.hljs-bullet,
-.hljs-string,
-.hljs-symbol {
-    color: #4fb4d7;
-}
-
-.hljs-section,
-.hljs-title {
-    color: #78bb65;
-}
-
-.hljs-keyword,
-.hljs-selector-tag {
-    color: #b45ea4;
-}
-
-.hljs {
-    display: block;
-    overflow-x: auto;
-    background: #1c1d21;
-    color: #c0c5ce;
-    padding: .5em;
-}
-
-.hljs-emphasis {
-    font-style: italic;
-}
-
-.hljs-strong {
-    font-weight: 700;
-}
--- a/assets/js/highlight.min.js
+++ b/assets/js/highlight.min.js
--- a/assets/js/papermod.js
+++ b/assets/js/papermod.js
@ -105,8 +105,4 @@ function showCodeCopyButtons() {
 initializeMenu();
 if (params.scrollToTop) scrollToTop();
 if (params.themeToggle) themeToggle();
-if (params.showCodeCopyButtons) showCodeCopyButtons();
-
-if ('hljs' in window) {
-    hljs.highlightAll();
-}
+if (params.showCodeCopyButtons) showCodeCopyButtons();
--- a/go.mod
+++ b/go.mod
@ -1,3 +1,3 @@
-module github.com/adityatelange/hugo-PaperMod
+module github.com/Wonderfall/hugo-WonderMod

 go 1.12
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -6,9 +6,9 @@
    <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
    {{- end }}
    <span>
-        Powered by
+        - Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
-        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
+        <a href="https://github.com/Wonderfall/hugo-WonderMod/" rel="noopener" target="_blank">WonderMod</a>
    </span>
 </footer>
 {{- end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -51,13 +51,10 @@
 {{- $media := (resources.Get "css/core/zmedia.css") }}
 {{- $license_css := (resources.Get "css/core/license.css") }}
 {{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }}
-
-{{- /* include `an-old-hope` if hljs is on */}}
-{{- $isHLJSdisabled := (site.Params.assets.disableHLJS | default false) }}
-{{- $hljs := (cond ($isHLJSdisabled) (".chroma { background-color: unset !important;}" | resources.FromString "assets/css/hljs-blank.css") (resources.Get "css/hljs/an-old-hope.min.css")) }}
+{{- $commonHighlight := (resources.Get "css/common/chroma.css") }}

 {{- /* order is important */}}
-{{- $core := (slice $theme_vars $reset $common $hljs $includes_all $media) | resources.Concat "assets/css/core.css" | resources.Minify }}
+{{- $core := (slice $theme_vars $reset $common $includes_all $media) | resources.Concat "assets/css/core.css" | resources.Minify }}
 {{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" | resources.Minify }}

 {{- /* bundle all required css */}}
@ -106,7 +103,6 @@
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
-                --hljs-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }
--- a/layouts/partials/post_nav_links.html
+++ b/layouts/partials/post_nav_links.html
@ -1,4 +1,4 @@
-{{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{- $pages := .CurrentSection.RegularPages.ByTitle }}
 {{- if and (gt (len $pages) 1) (in $pages . ) }}
 <nav class="paginav">
  {{- with $pages.Next . }}
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@ -13,18 +13,6 @@
 {{- end }}
 {{- end -}}

-{{- /* Highlight.js */}}
-{{- $isHLJSdisabled := (site.Params.assets.disableHLJS | default .Params.disableHLJS ) }}
-{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (not $isHLJSdisabled)) }}
-{{- if not site.Params.assets.disableFingerprinting }}
-{{- $highlight := slice (resources.Get "js/highlight.min.js") | resources.Concat "assets/js/highlight.js" | fingerprint }}
-<script defer crossorigin="anonymous" src="{{ $highlight.RelPermalink }}" integrity="{{ $highlight.Data.Integrity }}"></script>
-{{- else }}
-{{- $highlight := slice (resources.Get "js/highlight.min.js") | resources.Concat "assets/js/highlight.js" }}
-<script defer crossorigin="anonymous" src="{{ $highlight.RelPermalink }}"></script>
-{{- end }}
-{{- end }}
-
 {{- /* PaperMod.js */}}
 {{- $scrollToTop := (not site.Params.disableScrollToTop | default .Params.disableScrollToTop ) }}
 {{- $themeToggle := (not site.Params.disableThemeToggle | default .Params.disableThemeToggle ) }}
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@ -0,0 +1,4 @@
+{{- $id := .Get "id" | default (.Get 0) -}}
+<div class="youtube-embed-div">
+    <iframe src="https://www.youtube-nocookie.com/embed/{{ $id }}" class="youtube-embed-frame" allowfullscreen title="YouTube Video"></iframe>
+</div>