From 0fc331b10fa02fc0ec8c6f847574e229dd546855 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Mon, 22 Apr 2024 23:11:04 -0400
Subject: [PATCH] Full compile-time code highlighting

---
 .helix/languages.toml                    |  25 +++
 .woodpecker.yml                          |   3 +
 templates/article.html                   |   4 +-
 templates/assets                         |   2 +-
 templates/css/code-theme.css             | 272 +++++++++++++++++++++++
 templates/css/compute-c23f91.webflow.css |   4 +
 6 files changed, 308 insertions(+), 2 deletions(-)
 create mode 100644 .helix/languages.toml
 create mode 100644 templates/css/code-theme.css

diff --git a/.helix/languages.toml b/.helix/languages.toml
new file mode 100644
index 0000000..ab93542
--- /dev/null
+++ b/.helix/languages.toml
@@ -0,0 +1,25 @@
+[[language]]
+name = "grz"
+scope = "scope.grz"
+injection-regex = "grz"
+file-types = ["grz"]
+roots = []
+auto-format = true
+comment-token = "//"
+indent = { tab-width = 4, unit = "    " }
+language-servers = ["grezi"]
+
+[[grammer]]
+name = "grz"
+
+[[language]]
+name = "djot"
+scope = "scope.djot"
+injection-regex = "dj|djot"
+file-types = ["dj"]
+roots = []
+comment-token = "{%"
+indent = { tab-width = 4, unit = "    " }
+
+[[grammar]]
+name = "djot"
diff --git a/.woodpecker.yml b/.woodpecker.yml
index e89d049..8218473 100644
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@@ -3,8 +3,11 @@ steps:
     image: journal
     environment:
       BASE_URL: https://compute.nations.lol
+      CODE_THEME: emacs
+      HELIX_RUNTIME: /usr/lib/helix/runtime
     commands:
       - bruin-journal-gen
     volumes:
       - /var/woodpecker:/var/woodpecker
       - /usr/share/fonts:/usr/share/fonts
+      - /usr/lib/helix/runtime/:/usr/lib/helix/runtime/
diff --git a/templates/article.html b/templates/article.html
index 93885ce..c30a34b 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -39,13 +39,15 @@
   <link href="{{base_url}}/css/normalize.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/webflow.css" rel="stylesheet" type="text/css">
   <link href="{{base_url}}/css/compute-c23f91.webflow.css" rel="stylesheet" type="text/css">
+  <link href="{{base_url}}/css/code-theme.css" rel="stylesheet" type="text/css">
   <script
     type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document);</script>
   <link href="{{base_url}}/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
   <link href="{{base_url}}/images/webclip.png" rel="apple-touch-icon">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap"
+  <link
+    href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Fira+Code:wght@300..700&display=swap"
     rel="stylesheet">
 </head>
 
diff --git a/templates/assets b/templates/assets
index ec2e4be..bae6859 120000
--- a/templates/assets
+++ b/templates/assets
@@ -1 +1 @@
-../assets
\ No newline at end of file
+../assets/
\ No newline at end of file
diff --git a/templates/css/code-theme.css b/templates/css/code-theme.css
new file mode 100644
index 0000000..50eeb33
--- /dev/null
+++ b/templates/css/code-theme.css
@@ -0,0 +1,272 @@
+.content code .a {
+	color: #483D8B;
+}
+.content code .b {
+	color: #B22222;
+}
+.content code .c {
+	color: #008B8B;
+}
+.content code .d {
+	color: #483D8B;
+}
+.content code .e {
+	color: #228B22;
+}
+.content code .f {
+	text-decoration-color: #FF0000;
+	text-decoration: underline wavy;
+}
+.content code .g {
+	text-decoration-color: #008B8B;
+	text-decoration: underline wavy;
+}
+.content code .h {
+	text-decoration-color: #228B22;
+	text-decoration: underline wavy;
+}
+.content code .i {
+	text-decoration-color: #FF8C00;
+	text-decoration: underline wavy;
+}
+.content code .j {
+	color: #EE9A00;
+}
+.content code .k {
+	color: #EE0000;
+}
+.content code .l {
+	color: #00CD00;
+}
+.content code .m {
+	color: #FF0000;
+}
+.content code .n {
+	color: #0000FF;
+}
+.content code .o {
+	color: #483D8B;
+}
+.content code .p {
+	color: #0000FF;
+}
+.content code .q {
+	color: #483D8B;
+}
+.content code .r {
+	color: #483D8B;
+}
+.content code .s {
+	color: #008B8B;
+}
+.content code .t {
+	color: #228B22;
+}
+.content code .u {
+	color: #A020F0;
+}
+.content code .v {
+	color: #483D8B;
+}
+.content code .w {
+	font-weight: bold;
+}
+.content code .x {
+	color: #FFD700;
+	font-weight: bold;
+}
+.content code .y {
+	color: #0000FF;
+}
+.content code .z {
+	color: #A0522D;
+}
+.content code .aa {
+	color: #A020F0;
+}
+.content code .ab {
+	color: #B22222;
+}
+.content code .ac {
+	color: #228B22;
+}
+.content code .ad {
+	color: #008B8B;
+}
+.content code .ae {
+	color: #999999;
+}
+.content code .af {
+	font-style: italic;
+}
+.content code .ag {
+	color: #3A5FCD;
+}
+.content code .ah {
+	color: #3A5FCD;
+	text-decoration: underline;
+}
+.content code .ai {
+	color: #000000;
+}
+.content code .aj {
+	color: #999999;
+}
+.content code .ak {
+	color: #008B8B;
+}
+.content code .al {
+	color: #008B8B;
+}
+.content code .am {
+}
+.content code .an {
+	color: #008B8B;
+}
+.content code .ao {
+	color: #008B8B;
+}
+.content code .ap {
+	color: #A020F0;
+}
+.content code .aq {
+	color: #000000;
+}
+.content code .ar {
+	color: #0000FF;
+}
+.content code .as {
+	color: #8B2252;
+}
+.content code .at {
+	color: #8B2252;
+	font-weight: bold;
+}
+.content code .au {
+	color: #0000FF;
+}
+.content code .av {
+	color: #228B22;
+}
+.content code .aw {
+	color: #483D8B;
+}
+pre {
+	color: #000000;
+	background-color: #FFFFFF;
+}
+.content code .ay {
+	color: #000000;
+	background-color: #FFFFFF;
+}
+.content code .az {
+	color: #5C5C5C;
+	background-color: #E5E5E5;
+	text-decoration: underline;
+}
+.content code .ba {
+	color: #000000;
+	background-color: #FCFCFC;
+}
+.content code .bb {
+	background-color: #BFBFBF;
+}
+.content code .bc {
+	color: #FFFFFF;
+	background-color: #B3B3B3;
+}
+.content code .bd {
+	color: #FF0000;
+	background-color: #000000;
+}
+.content code .be {
+	color: #000000;
+	background-color: #40E0D0;
+}
+.content code .bf {
+	color: #FFFFFF;
+	background-color: #000000;
+}
+.content code .bg {
+	color: #FFFFFF;
+	background-color: #000000;
+}
+.content code .bh {
+	background-color: #B4EEB4;
+}
+.content code .bi {
+	background-color: #B4EEB4;
+}
+.content code .bj {
+	color: #8B0000;
+	background-color: #FFF8DC;
+}
+.content code .bk {
+	color: #999999;
+}
+.content code .bl {
+	color: #CCCCCC;
+}
+.content code .bm {
+	color: #000000;
+	background-color: #FFF8DC;
+}
+.content code .bn {
+	color: #8B0000;
+	background-color: #ADD8E6;
+}
+.content code .bo {
+	color: #000000;
+	background-color: #F7F7F7;
+}
+.content code .bp {
+	color: #000000;
+	background-color: #F7F7F7;
+}
+.content code .bq {
+	background-color: #FFEC8B;
+}
+.content code .br {
+	background-color: #EEDC82;
+}
+.content code .bs {
+	color: #000000;
+	background-color: #BFBFBF;
+}
+.content code .bt {
+	color: #333333;
+	background-color: #E5E5E5;
+}
+.content pre code {
+  border: 1px solid #999;
+  display: block;
+  padding: 20px;
+	color: #000000;
+}
+.content code .bv {
+	color: #000000;
+	background-color: #B4EEB4;
+}
+.content code .bw {
+	color: #BFBFBF;
+}
+.content code .bx {
+	background-color: #F2F2F2;
+}
+.content code .by {
+}
+.content code .bz {
+	color: #000000;
+}
+.content code .ca {
+	color: #A0522D;
+}
+.content code .cb {
+	color: #483D8B;
+}
+.content code .cc {
+	color: #A0522D;
+}
+.content code .cd {
+	color: #FF8C00;
+}
diff --git a/templates/css/compute-c23f91.webflow.css b/templates/css/compute-c23f91.webflow.css
index 4f8227c..ba9163d 100644
--- a/templates/css/compute-c23f91.webflow.css
+++ b/templates/css/compute-c23f91.webflow.css
@@ -8,6 +8,10 @@ body {
   font-family: 'Arimo', sans-serif;
 }
 
+code {
+  font-family: 'Fira Code', monospace;
+}
+
 .w-layout-vflex {
   flex-direction: column;
   align-items: flex-start;