From 5ae7f2f132ea5508a4e0e16cd389c86a7ac123e2 Mon Sep 17 00:00:00 2001 From: John Bowdre Date: Fri, 3 Nov 2023 23:08:45 -0500 Subject: [PATCH] begin replacing chroma highlighter with torchlight --- assets/css/syntax.css | 86 ------------- assets/css/torchlight.css | 119 ++++++++++++++++++ config/_default/markup.toml | 12 -- .../index.md | 39 +++--- .../render-codeblock-command-session.html | 3 - .../_markup/render-codeblock-command.html | 3 - .../render-codeblock-commandroot-session.html | 3 - .../_markup/render-codeblock-commandroot.html | 3 - layouts/partials/footer.html | 4 +- layouts/partials/head.html | 6 +- static/css/custom.css | 8 +- torchlight.config.js | 64 ++++++++++ 12 files changed, 212 insertions(+), 138 deletions(-) delete mode 100644 assets/css/syntax.css create mode 100644 assets/css/torchlight.css delete mode 100644 layouts/_default/_markup/render-codeblock-command-session.html delete mode 100644 layouts/_default/_markup/render-codeblock-command.html delete mode 100644 layouts/_default/_markup/render-codeblock-commandroot-session.html delete mode 100644 layouts/_default/_markup/render-codeblock-commandroot.html create mode 100644 torchlight.config.js diff --git a/assets/css/syntax.css b/assets/css/syntax.css deleted file mode 100644 index 7bd6b16..0000000 --- a/assets/css/syntax.css +++ /dev/null @@ -1,86 +0,0 @@ -/* Background */ .bg { color: #f8f8f2; background-color: #272822; } -/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } -/* CodeLine */ .chroma .cl { } -/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #ffffcc3f } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #66d9ef } -/* KeywordConstant */ .chroma .kc { color: #66d9ef } -/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } -/* KeywordNamespace */ .chroma .kn { color: #f92672 } -/* KeywordPseudo */ .chroma .kp { color: #66d9ef } -/* KeywordReserved */ .chroma .kr { color: #66d9ef } -/* KeywordType */ .chroma .kt { color: #66d9ef } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color: #a6e22e } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color: #a6e22e } -/* NameConstant */ .chroma .no { color: #66d9ef } -/* NameDecorator */ .chroma .nd { color: #a6e22e } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { color: #a6e22e } -/* NameFunction */ .chroma .nf { color: #a6e22e } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { color: #a6e22e } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #f92672 } -/* NameVariable */ .chroma .nv { } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { color: #ae81ff } -/* LiteralDate */ .chroma .ld { color: #e6db74 } -/* LiteralString */ .chroma .s { color: #e6db74 } -/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } -/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } -/* LiteralStringChar */ .chroma .sc { color: #e6db74 } -/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } -/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } -/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } -/* LiteralStringEscape */ .chroma .se { color: #ae81ff } -/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } -/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } -/* LiteralStringOther */ .chroma .sx { color: #e6db74 } -/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } -/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } -/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } -/* LiteralNumber */ .chroma .m { color: #ae81ff } -/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } -/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } -/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } -/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } -/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } -/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } -/* Operator */ .chroma .o { color: #f92672 } -/* OperatorWord */ .chroma .ow { color: #f92672 } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #75715e } -/* CommentHashbang */ .chroma .ch { color: #75715e } -/* CommentMultiline */ .chroma .cm { color: #75715e } -/* CommentSingle */ .chroma .c1 { color: #75715e } -/* CommentSpecial */ .chroma .cs { color: #75715e } -/* CommentPreproc */ .chroma .cp { color: #75715e } -/* CommentPreprocFile */ .chroma .cpf { color: #75715e } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #f92672 } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { color: #a6e22e } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #75715e } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { } diff --git a/assets/css/torchlight.css b/assets/css/torchlight.css new file mode 100644 index 0000000..197c2cc --- /dev/null +++ b/assets/css/torchlight.css @@ -0,0 +1,119 @@ +/* + Margin and rounding are personal preferences, + overflow-x-auto is recommended. +*/ +pre { + border-radius: 0.25rem; + margin-top: 1rem; + margin-bottom: 1rem; + overflow-x: auto; + padding: 0; +} + +/* +Add some vertical padding and expand the width +to fill its container. The horizontal padding +comes at the line level so that background +colors extend edge to edge. +*/ +pre.torchlight { + display: block; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* +Horizontal line padding to match the vertical +padding from the code block above. +*/ +pre.torchlight .line { + padding-left: 1rem; + padding-right: 1rem; +} + +/* +Push the code away from the line numbers and +summary caret indicators. +*/ +pre.torchlight .line-number, +pre.torchlight .summary-caret { + margin-right: 1rem; +} + +.torchlight summary:focus { + outline: none; +} + +/* Hide the default markers, as we provide our own */ +.torchlight details > summary::marker, +.torchlight details > summary::-webkit-details-marker { + display: none; +} + +.torchlight details .summary-caret::after { + pointer-events: none; +} + +/* Add spaces to keep everything aligned */ +.torchlight .summary-caret-empty::after, +.torchlight details .summary-caret-middle::after, +.torchlight details .summary-caret-end::after { + content: " "; +} + +/* Show a minus sign when the block is open. */ +.torchlight details[open] .summary-caret-start::after { + content: "-"; +} + +/* And a plus sign when the block is closed. */ +.torchlight details:not([open]) .summary-caret-start::after { + content: "+"; +} + +/* Hide the [...] indicator when open. */ +.torchlight details[open] .summary-hide-when-open { + display: none; +} + +/* Show the [...] indicator when closed. */ +.torchlight details:not([open]) .summary-hide-when-open { + display: initial; +} + +/* + Blur and dim the lines that don't have the `.line-focus` class, + but are within a code block that contains any focus lines. +*/ +.torchlight.has-focus-lines .line:not(.line-focus) { + transition: filter 0.35s, opacity 0.35s; + filter: blur(.095rem); + opacity: .65; +} + +/* +When the code block is hovered, bring all the lines into focus. +*/ +.torchlight.has-focus-lines:hover .line:not(.line-focus) { + filter: blur(0px); + opacity: 1; +} + +.highlight div { + overflow-x: visible; +} + +.cmd::before { + color: var(--base07); + content: "$ "; +} + +.cmd_root::before { + color: var(--base08); + content: "# "; +} + +.cmd_return { + webkit-user-select: none; + user-select: none; +} \ No newline at end of file diff --git a/config/_default/markup.toml b/config/_default/markup.toml index 81fc728..3d4a8b9 100644 --- a/config/_default/markup.toml +++ b/config/_default/markup.toml @@ -6,18 +6,6 @@ [goldmark.extensions] typographer = false -[highlight] - anchorLineNos = true - codeFences = true - guessSyntax = true - hl_Lines = '' - lineNos = false - lineNoStart = 1 - lineNumbersInTable = false - noClasses = false - tabwidth = 2 - style = 'monokai' - # Table of contents # Add toc = true to content front matter to enable [tableOfContents] diff --git a/content/posts/adguard-home-in-docker-on-photon-os/index.md b/content/posts/adguard-home-in-docker-on-photon-os/index.md index 21e01cb..50f269b 100644 --- a/content/posts/adguard-home-in-docker-on-photon-os/index.md +++ b/content/posts/adguard-home-in-docker-on-photon-os/index.md @@ -34,7 +34,7 @@ Once the VM is created, I power it on and hop into the web console. The default ### Configure Networking My next step was to configure a static IP address by creating `/etc/systemd/network/10-static-en.network` and entering the following contents: -```cfg {linenos=true} +```ini [Match] Name=eth0 @@ -48,12 +48,12 @@ By the way, that `192.168.1.5` address is my Windows DC/DNS server that I use fo I also disabled DHCP by setting `DHCP=no` in `/etc/systemd/network/99-dhcp-en.network`: -```cfg {linenos=true} +```ini [Match] Name=e* [Network] -DHCP=no +DHCP=no # [tl! highlight] IPv6AcceptRA=no ``` @@ -70,27 +70,27 @@ Now that I'm in, I run `tdnf update` to make sure the VM is fully up to date. ### Install docker-compose Photon OS ships with Docker preinstalled, but I need to install `docker-compose` on my own to simplify container deployment. Per the [install instructions](https://docs.docker.com/compose/install/#install-compose), I run: -```commandroot -curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose +```shell +curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose # [tl! .cmd_root:1] chmod +x /usr/local/bin/docker-compose ``` And then verify that it works: -```commandroot-session -docker-compose --version -docker-compose version 1.29.2, build 5becea4c +```shell +docker-compose --version # [tl! .cmd_root] +docker-compose version 1.29.2, build 5becea4c # [tl! .cmd_return] ``` I'll also want to enable and start Docker: -```commandroot -systemctl enable docker +```shell +systemctl enable docker # [tl! .cmd_root:1] systemctl start docker ``` ### Disable DNSStubListener By default, the `resolved` daemon is listening on `127.0.0.53:53` and will prevent docker from binding to that port. Fortunately it's [pretty easy](https://github.com/pi-hole/docker-pi-hole#installing-on-ubuntu) to disable the `DNSStubListener` and free up the port: -```commandroot -sed -r -i.orig 's/#?DNSStubListener=yes/DNSStubListener=no/g' /etc/systemd/resolved.conf +```shell +sed -r -i.orig 's/#?DNSStubListener=yes/DNSStubListener=no/g' /etc/systemd/resolved.conf # [tl! .cmd_root:2] rm /etc/resolv.conf && ln -s /run/systemd/resolve/resolv.conf /etc/resolv.conf systemctl restart systemd-resolved ``` @@ -99,14 +99,15 @@ systemctl restart systemd-resolved Okay, now for the fun part. I create a directory for AdGuard to live in, and then create a `docker-compose.yaml` therein: -```commandroot -mkdir ~/adguard +```shell +mkdir ~/adguard # [tl! .cmd_root:2] cd ~/adguard vi docker-compose.yaml ``` And I define the container: -```yaml {linenos=true} +```yaml +# torchlight! {"lineNumbers": true} version: "3" services: @@ -133,9 +134,9 @@ services: Then I can fire it up with `docker-compose up --detach`: -```commandroot-session -docker-compose up --detach -Creating network "adguard_default" with the default driver +```shell +docker-compose up --detach # [tl! .cmd_root] +Creating network "adguard_default" with the default driver # [tl! .cmd_return:start] Pulling adguard (adguard/adguardhome:latest)... latest: Pulling from adguard/adguardhome 339de151aab4: Pull complete @@ -144,7 +145,7 @@ latest: Pulling from adguard/adguardhome bfad96428d01: Pull complete Digest: sha256:de7d791b814560663fe95f9812fca2d6dd9d6507e4b1b29926cc7b4a08a676ad Status: Downloaded newer image for adguard/adguardhome:latest -Creating adguard ... done +Creating adguard ... done # [tl! .cmd_return:end] ``` diff --git a/layouts/_default/_markup/render-codeblock-command-session.html b/layouts/_default/_markup/render-codeblock-command-session.html deleted file mode 100644 index 6386861..0000000 --- a/layouts/_default/_markup/render-codeblock-command-session.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{- highlight .Inner "bash" -}} -
diff --git a/layouts/_default/_markup/render-codeblock-command.html b/layouts/_default/_markup/render-codeblock-command.html deleted file mode 100644 index 6dd6714..0000000 --- a/layouts/_default/_markup/render-codeblock-command.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{- highlight .Inner "bash" -}} -
diff --git a/layouts/_default/_markup/render-codeblock-commandroot-session.html b/layouts/_default/_markup/render-codeblock-commandroot-session.html deleted file mode 100644 index f148561..0000000 --- a/layouts/_default/_markup/render-codeblock-commandroot-session.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{- highlight .Inner "bash" -}} -
diff --git a/layouts/_default/_markup/render-codeblock-commandroot.html b/layouts/_default/_markup/render-codeblock-commandroot.html deleted file mode 100644 index e3d93ad..0000000 --- a/layouts/_default/_markup/render-codeblock-commandroot.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{- highlight .Inner "bash" -}} -
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7898ca5..784aa97 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -4,6 +4,6 @@
View source.

{{ if (findRE " + {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 9aaafa4..1f16216 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -23,8 +23,8 @@ {{ if (findRE " - {{ $copyCss := resources.Get "css/code-copy-button.css" | minify }} - + {{ end }} diff --git a/static/css/custom.css b/static/css/custom.css index 5fcc6a3..d8db2e0 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -135,7 +135,7 @@ body.dark .notice { } /* Insert prompt char ::before on every line in command codeblocks */ -.command .line {display: inherit;} +/* .command .line {display: inherit;} .command .line::before { color: var(--base07); content: "$ "; @@ -145,12 +145,12 @@ body.dark .notice { .commandroot .line::before { color: var(--base08); content: "# "; -} +} */ /* Insert prompt char ::before on first line in cmd-session codeblocks (These are useful for showing returned values from commands) */ -.command-session .line {display: inherit;} +/* .command-session .line {display: inherit;} .command-session code::before { color: var(--base07); content: "$ "; @@ -160,5 +160,5 @@ body.dark .notice { .commandroot-session code::before { color: var(--base08); content: "# "; -} +} */ diff --git a/torchlight.config.js b/torchlight.config.js new file mode 100644 index 0000000..b9355ca --- /dev/null +++ b/torchlight.config.js @@ -0,0 +1,64 @@ +module.exports = { + // Your token from https://torchlight.dev + token: process.env.TORCHLIGHT_TOKEN, + + // The Torchlight client caches highlighted code blocks. Here you + // can define which directory you'd like to use. You'll likely + // want to add this directory to your .gitignore. Set to + // `false` to use an in-memory cache. You may also + // provide a full cache implementation. + cache: false, + + // Which theme you want to use. You can find all of the themes at + // https://torchlight.dev/docs/themes. + theme: 'one-dark-pro', + + // The Host of the API. + host: 'https://api.torchlight.dev', + + // Global options to control block-level settings. + // https://torchlight.dev/docs/options + options: { + // Turn line numbers on or off globally. + lineNumbers: false, + + // Control the `style` attribute applied to line numbers. + // lineNumbersStyle: '', + + // Turn on +/- diff indicators. + diffIndicators: true, + + // If there are any diff indicators for a line, put them + // in place of the line number to save horizontal space. + diffIndicatorsInPlaceOfLineNumbers: false + + // When lines are collapsed, this is the text that will + // be shown to indicate that they can be expanded. + // summaryCollapsedIndicator: '...', + }, + + // Options for the highlight command. + highlight: { + // Directory where your un-highlighted source files live. If + // left blank, Torchlight will use the current directory. + input: 'public', + + // Directory where your highlighted files should be placed. If + // left blank, files will be modified in place. + output: '', + + // Globs to include when looking for files to highlight. + includeGlobs: [ + '**/*.htm', + '**/*.html' + ], + + // String patterns to ignore (not globs). The entire file + // path will be searched and if any of these strings + // appear, the file will be ignored. + excludePatterns: [ + '/node_modules/', + '/vendor/' + ] + } +}