commit e7d229174ce62ac4f0a7245f36b7574ddf1bbd63
parent 57a8fc9cede9e701b644ab06848d229fc37fbde4
Author: Jack Sangdahl <jack@pngu.org>
Date: Sat, 17 Jan 2026 09:22:18 -0700
Fix code rendering and switch to code/pre blocks
Diffstat:
17 files changed, 262 insertions(+), 189 deletions(-)
diff --git a/content.html b/content.html
@@ -14,6 +14,7 @@
<li>Gentoo Desktop</li>
<li>Artix Laptop</li>
<li>macOS Laptop</li>
+ <li>Debian Server</li>
<li>Programs & Utilities</li>
<li><a href="kernel.html">Kernel Configuration</a></li>
</ul>
diff --git a/fonts/LiberationMono-Bold.ttf b/fonts/LiberationMono-Bold.ttf
Binary files differ.
diff --git a/fonts/LiberationMono-BoldItalic.ttf b/fonts/LiberationMono-BoldItalic.ttf
Binary files differ.
diff --git a/fonts/LiberationMono-Italic.ttf b/fonts/LiberationMono-Italic.ttf
Binary files differ.
diff --git a/fonts/LiberationMono-Regular.ttf b/fonts/LiberationMono-Regular.ttf
Binary files differ.
diff --git a/fonts/LiberationSerif-Bold.ttf b/fonts/LiberationSerif-Bold.ttf
Binary files differ.
diff --git a/fonts/LiberationSerif-BoldItalic.ttf b/fonts/LiberationSerif-BoldItalic.ttf
Binary files differ.
diff --git a/fonts/LiberationSerif-Italic.ttf b/fonts/LiberationSerif-Italic.ttf
Binary files differ.
diff --git a/fonts/LiberationSerif-Regular.ttf b/fonts/LiberationSerif-Regular.ttf
Binary files differ.
diff --git a/gpg_key_git.html b/gpg_key_git.html
@@ -15,32 +15,34 @@
I spent much time trying to figure out the following error when trying to
sign a commit:
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- gpg: skipped "Foo Bar <FooBar@baz>": No secret key[GNUPG:] INV_SGNR 9 FooBar <FooBar@baz>[GNUPG:] FAILURE sign 17
- gpg: signing failed: No secret key
- </div>
+ <pre>
+ <code>
+gpg: skipped "Foo Bar <FooBar@baz>": No secret key[GNUPG:] INV_SGNR 9 FooBar <FooBar@baz>[GNUPG:] FAILURE sign 17
+gpg: signing failed: No secret key
+ </code>
+ </pre>
<p>
After searching and coming up empty handed, one thing stood out. The name
and email in <code>~/.gitconfig</code> must match exactly to the name and
email associated with the GPG key:
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- $ gpg --list-secret-keys --keyid-format=long
- /home/foo/.gnupg/pubring.kbx
- -----------------------------
- sec rsa4096/FC53C827D09C7050 2019-03-24 [SC]
- ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
- uid [ultimate] <b>Foo Bar <Foo_Bar@baz></b>
- ssb rsa4096/2EE67124D597BB00 2019-03-24 [E]
+ <pre>
+ <code class="language-shell">
+$ gpg --list-secret-keys --keyid-format=long
+/home/foo/.gnupg/pubring.kbx
+-----------------------------
+sec rsa4096/FC53C827D09C7050 2019-03-24 [SC]
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
+uid [ultimate] <b>Foo Bar <Foo_Bar@baz></b>
+ssb rsa4096/2EE67124D597BB00 2019-03-24 [E]
- $ head -n 4 .gitconfig
- [user]
- <strong>name = Foo Bar
- email = Foo_Bar@baz</strong>
- signingkey = FC53C827D09C7050
- </div>
+$ head -n 4 .gitconfig
+[user]
+ <strong>name = Foo Bar
+ email = Foo_Bar@baz</strong>
+ signingkey = FC53C827D09C7050
+ </code>
+ </pre>
<script src="frame.js"></script>
</body>
</html>
diff --git a/hardware_key.html b/hardware_key.html
@@ -26,11 +26,12 @@
tool is somewhat broken with the latest FIDO2 library, meaning it must be
installed explicitly at 0.9.3.
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- $ pip install solo1
- $ pip install fido2==0.9.3
- </div>
+ <pre>
+ <code class="language-shell">
+$ pip install solo1
+$ pip install fido2==0.9.3
+ </code>
+ </pre>
<p>
After building, I didn't use it much, as many services don't support
security keys quite yet, or required a paid subscription (I.e. Bitwarden).
@@ -53,12 +54,13 @@
>
if you choose however.
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- $ mkdir ~/.config/Yubico
- $ pamu2fcfg > ~/.config/Yubico/u2f_keys
- Enter PIN for /dev/hidraw2:
- </div>
+ <pre>
+ <code class="language-shell">
+$ mkdir ~/.config/Yubico
+$ pamu2fcfg > ~/.config/Yubico/u2f_keys
+Enter PIN for /dev/hidraw2:
+ </code>
+ </pre>
<p>
Assuming all has been successful, you can configure PAM services to use
the device. The following configures
@@ -67,12 +69,13 @@
line can be added in other files where needed (eg. display manager,
<code>system-local-login</code>, etc.)
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- auth sufficient pam_u2f.so cue pinverification=0
- auth include system-auth
- ...
- </div>
+ <pre>
+ <code>
+auth sufficient pam_u2f.so cue pinverification=0
+auth include system-auth
+...
+ </code>
+ </pre>
<p>
Above, <strong>sufficient</strong> indicates that authentication from the
device alone is enough to fully authenticate. Use
@@ -92,30 +95,32 @@
<a href="https://pamtester.sourceforge.net" target="_blank">pamtester</a>
to test for authentication success.
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- #!/bin/bash
+ <pre>
+ <code class="language-shell">
+#!/bin/bash
- if [ "$1" == "lock" ]; then
- # lock system (e.g. gtklock -d)
- else
- if [ echo "" | pamtester login >user< authenticate ]; then
- # kill lock program
- fi
- fi
- exit 0
- </div>
+if [ "$1" == "lock" ]; then
+ # lock system (e.g. gtklock -d)
+else
+ if [ echo "" | pamtester login >user< authenticate ]; then
+ # kill lock program
+ fi
+fi
+exit 0
+ </code>
+ </pre>
<p>
Now, a custom udev rule that lives in
<code>/etc/udev/rules.d/70-solokey.rules</code>
and looks for a matching VID/PID and executes this script when found with
the appropriate argument.
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- ACTION::"remove", ENV{DEVTYPE}::"usb_device", ENV{PRODUCT}::"0483/a2Ca", RUN+:"/usr/local/sbin/keyauth.sh lock"
- ACTION::"add", ENV{DEVTYPE}::"usb_device", ENV{ID_BUS}::"usb", ENV{PRODUCT}::"0483/a2Ca", RUN+:"/usr/local/sbin/keyauth.sh unlock"
- </div>
+ <pre>
+ <code>
+ACTION::"remove", ENV{DEVTYPE}::"usb_device", ENV{PRODUCT}::"0483/a2Ca", RUN+:"/usr/local/sbin/keyauth.sh lock"
+ACTION::"add", ENV{DEVTYPE}::"usb_device", ENV{ID_BUS}::"usb", ENV{PRODUCT}::"0483/a2Ca", RUN+:"/usr/local/sbin/keyauth.sh unlock"
+ </code>
+ </pre>
<script src="frame.js"></script>
</body>
</html>
diff --git a/index.html b/index.html
@@ -32,7 +32,7 @@
<hr />
</center>
<h3>Contact & Platforms</h3>
- <div class="header">
+ <div style="line-height: 1.5">
<p>
Email:
<!-- prettier-ignore -->
diff --git a/ssh_agent.html b/ssh_agent.html
@@ -20,16 +20,17 @@
file (e.g.
<code>~/.zshrc</code>).
</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- if [ ! -S $HOME/.ssh/ssh_auth_sock ]; then
- eval "$(ssh-agent)"
- ln -sf "$SSH_AUTH_SOCK" $HOME/.ssh/ssh_auth_sock
- fi
+ <pre>
+ <code class="language-shell">
+if [ ! -S $HOME/.ssh/ssh_auth_sock ]; then
+ eval "$(ssh-agent)"
+ ln -sf "$SSH_AUTH_SOCK" $HOME/.ssh/ssh_auth_sock
+fi
- export SSH_AUTH_SOCK=$HOME/.ssh/ssh_auth_sock
- ssh-add -l > /dev/null || ssh-add
- </div>
+export SSH_AUTH_SOCK=$HOME/.ssh/ssh_auth_sock
+ssh-add -l > /dev/null || ssh-add
+ </code>
+ </pre>
<p>
Then, just copy the needed key between machines with
<code>ssh-copy-id -i ~/.ssh/id_xxx.pub name@host</code>.
@@ -38,13 +39,14 @@
MacOS however, has its own provision for this. The following can simply be
added to your <code>~/.ssh/config</code> file:
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- Host *
- UseKeychain yes
- AddKeysToAgent yes
- IdentityFile ~/.ssh/id_ed25519
- </div>
+ <pre>
+ <code>
+Host *
+ UseKeychain yes
+ AddKeysToAgent yes
+ IdentityFile ~/.ssh/id_ed25519
+ </code>
+ </pre>
<script src="frame.js"></script>
</body>
</html>
diff --git a/style.css b/style.css
@@ -1,20 +1,71 @@
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
+@font-face {
+ font-family: "LiberationMono";
+ src: url("fonts/LiberationMono-Bold.ttf") format("truetype");
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "LiberationMono";
+ src: url("fonts/LiberationMono-BoldItalic.ttf") format("truetype");
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: "LiberationMono";
+ src: url("fonts/LiberationMono-Italic.ttf") format("truetype");
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: "LiberationMono";
+ src: url("fonts/LiberationMono-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "LiberationSerif";
+ src: url("fonts/LiberationSerif-Bold.ttf") format("truetype");
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "LiberationSerif";
+ src: url("fonts/LiberationSerif-BoldItalic.ttf") format("truetype");
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: "LiberationSerif";
+ src: url("fonts/LiberationSerif-Italic.ttf") format("truetype");
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: "LiberationSerif";
+ src: url("fonts/LiberationSerif-Regular.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+}
body {
+ font-family: LiberationSerif, serif;
+ font-size: 12pt;
+ line-height: 1.2;
max-width: 65%;
margin: auto;
- line-height: 1;
padding: 15px 0px;
- font-size: 12pt;
-}
-
-.header {
- line-height: 1.5;
}
.email {
+ font-family: LiberationMono, monospace;
font-size: 25%;
- font-family: monospace;
white-space: pre;
line-height: 1;
display: inline-block;
@@ -22,22 +73,21 @@ body {
}
code {
- font-family: "JetBrains Mono", monospace;
+ font-family: LiberationMono, monospace;
font-size: smaller;
- border: 0.5px solid grey;
- border-radius: 3px;
+}
+
+code {
+ background-color: #eeeeee;
color: darkgrey;
+ border-radius: 3px;
+ padding: 2px 4px;
}
-.code-block {
- font-family: "JetBrains Mono", monospace;
- font-size: smaller;
- white-space: pre;
- width: inherit;
+pre {
+ white-space: pre-wrap;
overflow-x: auto;
overflow-y: hidden;
- line-height: 1;
display: block;
- padding-top: 10px;
- padding-bottom: 10px;
+ font-size: smaller;
}
diff --git a/synacor.html b/synacor.html
@@ -49,67 +49,72 @@
</p>
<h4>Code 1</h4>
<p>This one is found in plain text in the <code>arch-spec</code> file.</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- == hints ==
- - Start with operations 0, 19, and 21.
- - Here's a code for the challenge website: <CODE>
- </div>
+ <pre>
+ <code>
+== hints ==
+- Start with operations 0, 19, and 21.
+- Here's a code for the challenge website: <CODE>
+ </code>
+ </pre>
<h4>Code 2</h4>
<p>
After implementing a basic interpreter that supports the first subset of
opcodes (<code>out</code>, <code>noop</code>, and <code>halt</code>), this
one is found in the output of program itself.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- Welcome to the Synacor OSCON 2012 Challenge!
- Please record your progress by putting codes like
- this one into the challenge website: <CODE>
- </div>
+ <pre>
+ <code>
+Welcome to the Synacor OSCON 2012 Challenge!
+Please record your progress by putting codes like
+this one into the challenge website: <CODE>
+ </code>
+ </pre>
<p>
Just for fun, this one can also be spotted early on in the hexdump of the
binary file:
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- 00000210 13 00 20 00 13 00 49 00 13 00 6d 00 13 00 6f 00 |.. ...I...m...o.|
- 00000220 13 00 46 00 13 00 7a 00 13 00 74 00 13 00 57 00 |..F...z...t...W.|
- 00000230 13 00 51 00 13 00 43 00 13 00 76 00 13 00 78 00 |..Q...C...v...x.|
- 00000240 13 00 6a 00 13 00 0a 00 13 00 0a 00 13 00 45 00 |..j.............|
- </div>
+ <pre>
+ <code>
+00000210 13 00 20 00 13 00 49 00 13 00 6d 00 13 00 6f 00 |.. ...I...m...o.|
+00000220 13 00 46 00 13 00 7a 00 13 00 74 00 13 00 57 00 |..F...z...t...W.|
+00000230 13 00 51 00 13 00 43 00 13 00 76 00 13 00 78 00 |..Q...C...v...x.|
+00000240 13 00 6a 00 13 00 0a 00 13 00 0a 00 13 00 45 00 |..j.............|
+ </code>
+ </pre>
<h4>Code 3</h4>
<p>
To retrieve this code, the interpreter must be fully implemented and must
pass the initial self-tests. If those conditions are met, the third code
is printed.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- Executing self-test...
+ <pre>
+ <code>
+Executing self-test...
- self-test complete, all tests pass
- The self-test completion code is: <CODE>
- </div>
+self-test complete, all tests pass
+The self-test completion code is: <CODE>
+ </code>
+ </pre>
<h4>Code 4</h4>
<p>
Now, the adventure aspect of the challenge begins. Pay attention to the
things of interest, and <code>take</code>/<code>use</code> them as needed,
like the tablet here.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- What do you do?
- take tablet
+ <pre>
+ <code>
+What do you do?
+take tablet
- Taken.
+Taken.
- What do you do?
- use tablet
+What do you do?
+use tablet
- You find yourself writing <CODE> on the tablet. Perhaps it's some
- kind of code?
- </div>
+You find yourself writing <CODE> on the tablet. Perhaps it's some
+kind of code?
+ </code>
+ </pre>
<h4>Code 5</h4>
<p>
This appears to be a maze puzzle after several entries of some cardinal
@@ -118,27 +123,29 @@
<a href="https://zork.fandom.com/wiki/Grue" target="_blank">Grue's</a>
numerous times.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- What do you do?
- east
+ <pre>
+ <code>
+What do you do?
+east
- Chiseled on the wall of one of the passageways, you see:
+Chiseled on the wall of one of the passageways, you see:
- <CODE>
- </div>
+ <CODE>
+ </code>
+ </pre>
<h4>Code 6</h4>
<p>
The next puzzle is a maths problem. There will be some coins each with a
numeric value that you can inspect to see. The coins must be arranged in a
specific order to satisfy the equation on the wall.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- There is a strange monument in the center of the hall with circular slots and unusual symbols. It reads:
+ <pre>
+ <code>
+There is a strange monument in the center of the hall with circular slots and unusual symbols. It reads:
- _ + _ * _^2 + _^3 - _ = 399
- </div>
+_ + _ * _^2 + _^3 - _ = 399
+ </code>
+ </pre>
<ul>
<li>Red coin: 2</li>
<li>Blue coin: 9</li>
@@ -158,15 +165,16 @@
completing this, a previously locked door opens and our next code is
revealed.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- What do you do?
- use teleporter
+ <pre>
+ <code>
+What do you do?
+use teleporter
- You activate the teleporter! As you spiral through time and space, you think you see a pattern in the stars...
+You activate the teleporter! As you spiral through time and space, you think you see a pattern in the stars...
- <CODE>
- </div>
+ <CODE>
+ </code>
+ </pre>
<h4>Code 7</h4>
<p>
This is by far the most clever puzzle in this challenge. There's a strange
@@ -188,14 +196,15 @@
this. Once set to the correct value (25734 in my case), the seventh code
is shown.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- You wake up on a sandy beach with a slight headache. The last thing you remember is activating that teleporter... but now you can't find it anywhere in your pack. Someone seems to have drawn a message in the sand here:
+ <pre>
+ <code>
+You wake up on a sandy beach with a slight headache. The last thing you remember is activating that teleporter... but now you can't find it anywhere in your pack. Someone seems to have drawn a message in the sand here:
- <CODE>
+ <CODE>
- It begins to rain. The message washes away. You take a deep breath and feel firmly grounded in reality as the effects of the teleportation wear off.
- </div>
+It begins to rain. The message washes away. You take a deep breath and feel firmly grounded in reality as the effects of the teleportation wear off.
+ </code>
+ </pre>
<h4>Code 8</h4>
<p>
This puzzle looks to be some sort of arrangement of tiles, each with a
@@ -211,15 +220,16 @@
to achieve this. After inputting the appropriate cardinal directions, we
see the final code in a mirror. Of course, it is entered in reverse.
</p>
- <!-- prettier-ignore -->
- <div class="code-block">
- You gaze into the mirror, and you see yourself gazing back.
- But wait!
- It looks like someone wrote on your face while you were unconscious on the beach!
- Through the mirror, you see <CODE> scrawled in charcoal on your forehead.
+ <pre>
+ <code>
+You gaze into the mirror, and you see yourself gazing back.
+But wait!
+It looks like someone wrote on your face while you were unconscious on the beach!
+Through the mirror, you see <CODE> scrawled in charcoal on your forehead.
- Congratulations; you have reached the end of the challenge!
- </div>
+Congratulations; you have reached the end of the challenge!
+ </code>
+ </pre>
<script src="frame.js"></script>
</body>
</html>
diff --git a/template.html b/template.html
@@ -11,19 +11,21 @@
<h2>Page Header</h2>
<p><i>2026-01-14</i></p>
<hr />
- <p>Some text on a web page.</p>
- <!-- prettier-ignore -->
- <div class="code-block language-c">
- int function(int x) {
- return x * x;
- }
-
- int main() {
- int x = 42;
- printf("%d\n", function(x));
- return 0;
- }
- </div>
+ <p>Some text on a web page00.</p>
+ <p>Along with a <code>function()</code>.</p>
+ <pre class="language-c">
+ <code>
+int function(int x) {
+ return x * x;
+}
+
+int main() {
+ int x = 42;
+ printf("%d\n", function(x) + function(x) + function(x) + function(x) + function(x) + function(x));
+ return 0;
+}
+ </code>
+ </pre>
<script src="frame.js"></script>
</body>
</html>
diff --git a/wpa_supplicant.html b/wpa_supplicant.html
@@ -12,24 +12,25 @@
<p><i>2022-11-26</i></p>
<hr />
<p>Frequently forgotten usage of the <code>wpa_cli</code> tool.</p>
- <!-- prettier-ignore -->
- <div class="code-block language-shell">
- $ wpa_cli
- > scan
- ...
- <3>CTRL-EVENT-SCAN-RESULTS # wait for this to appear
- > scan_results
- bssid / freq / sig lvl / flags / ssid
- ...
- > add_network
- 5
- > set_network 5 ssid "network"
- > set_network 5 psk "psswd"
- # or if no password:
- > set_network 5 key_mgmt NONE
- > enable_network 5
- > save_config
- </div>
+ <pre>
+ <code>
+$ wpa_cli
+> scan
+...
+<3>CTRL-EVENT-SCAN-RESULTS # wait for this to appear
+> scan_results
+bssid / freq / sig lvl / flags / ssid
+...
+> add_network
+5
+> set_network 5 ssid "network"
+> set_network 5 psk "psswd"
+# or if no password:
+> set_network 5 key_mgmt NONE
+> enable_network 5
+> save_config
+ </code>
+ </pre>
<p>
However, one should strongly consider moving
<a
