Update website to use Zola 0.22 with new code block syntax highlighting

Author: Keavon

.github/workflows/website.yml

@@ -37,7 +37,7 @@ jobs:
       - name: 🕸 Install Zola
         uses: taiki-e/install-action@v2
         with:
-          tool: zola@0.20.0
+          tool: zola@0.22.0
 
       - name: 🔍 Check if `website/other` directory changed
         uses: dorny/paths-filter@v3

website/.gitignore

@@ -1,5 +1,4 @@
 node_modules/
 public/
 static/fonts/
-static/syntax-highlighting.css
 static/text-balancer.js

website/config.toml

@@ -6,12 +6,9 @@ feed_filenames = ["rss.xml"]
 compile_sass = true
 minify_html = false
 
-[markdown]
-highlight_code = true
-highlight_theme = "css"
-highlight_themes_css = [
-	{ theme = "kronuz", filename = "syntax-highlighting.css" },
-]
+[markdown.highlighting]
+error_on_missing_language = false
+theme = "gruvbox-dark-soft"
 
 [extra]
 # Put all your custom variables here

website/sass/component/code-snippet.scss

@@ -21,86 +21,27 @@ pre {
 
 	// Container for the element (span or table) containing the lines of code
 	code {
-		background: initial;
+		background: inherit;
 		color: inherit;
 		display: block;
 		overflow-x: auto;
-		padding: 20px;
-		width: 0;
+		padding: 10px 20px;
 		flex: 1 1 auto;
-	}
-
-	// Language name in top right corner
-	&[data-lang] {
-		padding-top: 28px;
+		width: 0;
 
-		&::before {
-			content: attr(data-lang);
-			color: rgba(var(--color-seaside-rgb), 0.5);
-			text-transform: lowercase;
-			font-family: "Inter Variable", sans-serif;
-			font-size: 0.75em;
-			font-weight: 700;
-			font-style: italic;
-			-webkit-user-select: none;
-			user-select: none;
-			pointer-events: none;
-			position: fixed;
-			top: 0;
-			line-height: 28px;
-			display: block;
+		.giallo-l {
+			display: inline-block;
+			min-height: 1lh;
 			width: 100%;
-			text-indent: 20px;
-			background: rgba(0, 0, 0, 0.25);
-
-			&[data-lang="sh"] {
-				content: "Shell";
-			}
-
-			&[data-lang="rs"] {
-				content: "Rust";
-			}
-
-			&[data-lang="js"] {
-				content: "JavaScript";
-			}
-
-			&[data-lang="ts"] {
-				content: "TypeScript";
-			}
 		}
-	}
-
-	// Code blocks with line numbers
-	&[data-linenos] table {
-		border-spacing: 0;
-		margin: -20px;
-
-		tr {
-			&:first-child td {
-				padding-top: 20px;
-			}
 
-			&:last-child td {
-				padding-bottom: 20px;
-			}
-
-			td {
-				&:first-child {
-					padding-left: 20px;
-					padding-right: 10px;
-					-webkit-user-select: none;
-					user-select: none;
-					vertical-align: top;
-					text-align: right;
-					background: rgba(0, 0, 0, 0.25);
-				}
-
-				&:last-child {
-					padding-left: 10px;
-					padding-right: 20px;
-				}
-			}
+		.giallo-ln {
+			display: inline-block;
+			user-select: none;
+			text-align: right;
+			margin-left: -10px;
+			padding-right: 16px;
+			min-width: 3ch;
 		}
 	}
 }

website/templates/book.html

@@ -4,7 +4,6 @@
 {%- set title = page.title -%}
 {%- set meta_article_type = true -%}
 {%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = "  ", to = " ") | trim | truncate(length = 200)) -%}
-{%- set linked_css = ["/syntax-highlighting.css"] -%}
 {%- set css = ["/template/book.css", "/layout/reading-material.css", "/component/code-snippet.css"] -%}
 {%- set js = ["/js/book.js"] -%}
 {%- endblock head -%}