From 84cde2e97fe769d001a58b6a4b8c8521c7338733 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 18 Apr 2022 21:15:29 -0700 Subject: [PATCH] Internal: create + use figure shortcodes + hooks Create a for
and a render hook for code snippets inside figures, replacing some ugly and complex inline HTML in my markdown sources. The only visible change is slightly worse HTML alignment and programming language indicators (with microdata). This removed the need to use one of the regex replacements in the processed_content.html shortcode, and increased the minimum required Hugo version to 0.93. --- README.md | 2 +- content/posts/website-best-practices.md | 283 ++++++++---------- .../_markup/render-codeblock-figure.html | 23 ++ layouts/partials/processed-content.html | 8 +- layouts/shortcodes/figcaption.html | 22 ++ 5 files changed, 171 insertions(+), 167 deletions(-) create mode 100644 layouts/_default/_markup/render-codeblock-figure.html create mode 100644 layouts/shortcodes/figcaption.html diff --git a/README.md b/README.md index febc3ac..43650fe 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Dependencies To build: -- Hugo 0.90 or later +- Hugo 0.93 or later - Make - Git (Hugo uses Git info for features like date last updated) - [Efficient Compression Tool](https://github.com/fhanau/Efficient-Compression-Tool) It's like zopfli but more efficient and faster. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index d690ace..b8737b6 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -68,22 +68,22 @@ Consider taking hardening measures to maximize the security benefits made possib JavaScript and WebAssembly are responsible for the bulk of modern web exploits. If that isn't reason enough, most [non-mainstream search indexes](./../../../2021/03/10/search-engines-with-own-indexes.html) have little to no support for JavaScript. Ideally, a text-oriented site can enforce a scripting ban at the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) level.
-
+{{< figcaption type="code" >}} +this is the CSP for my main website, with hashes removed for readability. +{{< /figcaption >}} -Code snippet: this is the CSP for my main website, with hashes removed for readability. - -
- -
default-src 'none';
+``` figure {samp=true var1="HASH"}
+default-src 'none';
 img-src 'self' data:;
-style-src 'sha256-HASH';
+style-src 'sha256-HASH';
 style-src-attr 'none';
 frame-ancestors 'none';
 base-uri 'none';
 form-action 'none';
-manifest-src https://seirdy.one/manifest.min.HASH.webmanifest;
+manifest-src https://seirdy.one/manifest.min.HASH.webmanifest;
 upgrade-insecure-requests;
-sandbox allow-same-origin
+sandbox allow-same-origin +```
@@ -102,14 +102,10 @@ If you're able to control your HTTP headers, then use headers instead of a ` that's enforced late.

-
- — - - HTML Living Standard, section 4.2.5.3: Pragma directives, - - - -
+{{< figcaption type="citation" partOfType="TechArticle" >}} +HTML Living Standard, section 4.2.5.3: Pragma directives, + +{{< /figcaption >}} ### If you must enable scripts @@ -146,13 +142,13 @@ Optimal loading is a complex topic. Broadly, it covers three overlapping categor HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a `link` HTTP header.
-
+{{< figcaption type="code" >}} +my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. +{{< /figcaption >}} -Code snippet: my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. - -
- -
link: </favicon.HASH.svg>; rel=preload; as=image
+``` figure {var1="HASH" samp=true} +link: ; rel=preload; as=image +```
@@ -167,10 +163,14 @@ Requesting a high number of cached resources can decrease performance of the cac One way to help browsers decide which disk-cached resources to prioritize is to use immutable assets. Include the `immutable` directive in your `cache-control` headers, and cache-bust modified assets by changing their URLs.
-
-Code snippet: The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames. -
-
cache-control: max-age=31557600, immutable
+{{< figcaption type="code" >}} +The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames. +{{< /figcaption >}} + +``` figure {samp=true} +cache-control: max-age=31557600, immutable +``` +
You can also keep your asset counts low by combining textual assets (e.g. CSS) and inlining small resources. @@ -199,14 +199,10 @@ There is only one honest measure of web performance: **the time from when you cl Everything else is bullshit. -
- — - - {{ - -
+{{< figcaption type="citation" partOfType="TechArticle" >}} +{{