commit 1f5ff21b34235e190dc5e52639cebce72925fc12 (patch)
parent aed8575ae0de045e6e1f5cac1ad02fb6f11d025b
Author: Alex Karle <alex@alexkarle.com>
Date: Sun, 4 Sep 2022 00:05:32 -0400
theme: Go full Acme/Plan 9
A few commits ago, I explored the idea of using Acme's cream
colored background for my site. It didn't feel quite right,
missing the other elements of the Acme UI. So I settled on
just using it for code blocks.
It was a fun challenge writing the CSS to mock the entire Acme
window (tag and all), and I'm really happy with how it turned
out. I feel like I've spent enough hours in Acme to claim to
be a fan, and my site _did_ need more color than the black on
white.
Diffstat:
8 files changed, 202 insertions(+), 103 deletions(-)
diff --git a/bin/gencrumbs b/bin/gencrumbs
@@ -14,13 +14,11 @@ FILE=$(readlink -f "$1")
rel=${FILE##$REPO/www}
parts=$(echo "$rel" | sed 's#/# #g')
-printf "<small><code><a href=\"/\">/home/alex</a>"
-curr=""
+printf "/home/alex"
for p in $parts; do
if [ "$p" = "index.html" ]; then
continue
fi
- curr="$curr/$p"
- printf " / <a href=\"$curr\">$p</a>"
+ printf "/$p"
done
-echo "</code></small>"
+echo
diff --git a/bin/genpage b/bin/genpage
@@ -16,41 +16,34 @@ cat <<EOM
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Inspired by https://www.swyx.io/css-100-bytes/ -->
<style>
-html {
- max-width: 80ch;
- padding: 3em 1em;
- margin: auto;
- font-size: 1em;
- font-family: sans-serif;
-}
-footer {
- margin-top: 50px;
- font-size: .8em;
-}
-code { font-family: consolas, courier, monospace; }
-h1 { font-size: 1.5em; }
-h2 { font-size: 1.2em; }
-h3 { font-size: 1.1em; }
-blockquote, pre {
- background: #ffffea;
- overflow: auto;
- padding: 10px;
- border: 2px solid black;
-}
+EOM
+cat "$REPO/www/style.css"
+cat <<EOM
</style>
<title>$title</title>
</head>
<body>
+<div id="acme">
+<div id="home-tag">
+<a href="/">Home</a>
+<a href="/blog">Blog</a>
+<a href="/license.html">License</a>
+</div>
+<div id="tag">
EOM
-
"$REPO/bin/gencrumbs" "${1%%txt}html"
+
+cat <<EOM
+Del Snarf Get | Look</div>
+<div id="content">
+EOM
+
nihdoc < "$1"
cat <<EOM
-<footer>
- © 2019-2022 Alex Karle | <a href="/">Home</a> | <a href="/license.html">License</a>
-</footer>
+</div>
+</div>
</body>
</html>
EOM
diff --git a/bin/jam-index.sh b/bin/jam-index.sh
@@ -17,38 +17,29 @@ cat <<EOM
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Inspired by https://www.swyx.io/css-100-bytes/ -->
<style>
-html {
- max-width: 80ch;
- padding: 3em 1em;
- margin: auto;
- font-size: 1em;
- font-family: sans-serif;
-}
-footer {
- margin-top: 50px;
- font-size: .8em;
-}
-code { font-family: consolas, courier, monospace; }
-h1 { font-size: 1.5em; }
-h2 { font-size: 1.2em; }
-h3 { font-size: 1.1em; }
-blockquote, code pre {
- background: #ffffea;
- overflow: auto;
- padding: 10px;
- border: 2px solid black;
-}
+EOM
+cat "$REPO/www/style.css"
+cat <<EOM
.jam-artists tr:nth-child(even) {
- background-color: #e3e3e3;
+ background-color: #f2f2bd;
}
-td.jam-artists, th.jam-artists, table.jam-artists {
+table.jam-artists {
+ margin: 0 auto;
border: 1px solid black;
}
</style>
<title>Jam Tuesday Archive</title>
</head>
<body>
-<small><code><a href="/">/home/alex</a> / <a href="/jam-tuesday">jam-tuesday</a></code></small>
+<div id="acme">
+<div id="home-tag">
+<a href="/">Home</a>
+<a href="/blog">Blog</a>
+<a href="/license.html">License</a>
+</div>
+<div id="tag">/home/alex/jam-tuesday.html
+Del Snarf Get | Look</div>
+<div id="content">
<h1>Jam Tuesday Archive</h1>
<h2>About</h2>
<p>
@@ -117,11 +108,9 @@ sed 's/.*, *//' "$ALL" | sort -u -f | while read artist; do
done
cat <<EOM
</table>
-<br><br>
-<p style="font-size: 0.7em">Last Updated: $(date)</p>
-<p class="foot-license">
-© 2019-2022 Alex Karle | <a href="/">Home</a> | <a href="/license.html">License</a>
-</p>
+<p>Last Updated: $(date)</p>
+</div>
+</div>
</body>
</html>
EOM
diff --git a/www/index.txt b/www/index.txt
@@ -3,11 +3,13 @@
## About Me
Hi! I'm Alex. I'm a software engineer living near Boston, MA.
-My current technical interests include operating systems,
-developer tooling, and small internet protocols like
-[Gopher](/blog/burrowing.html), but I'm constantly learning new
-things that I get excited about. Occasionally, I might write
-about it here on my [blog](/blog).
+By day I work at [Studio](https://studio.com) as
+a backend generalist and infrastructure/tooling specialist.
+By night I spend my time exploring niche operating
+systems like [Plan 9](/blog/exploring-plan9.html), perusing the
+"smolweb" via internet protocols like [Gopher](/blog/burrowing.html),
+and sysadmin-ing [several servers](/blog/starting-a-tilde.html).
+Occasionally, I might write about it here on my [blog](/blog).
Outside of tech, I enjoy playing music, hiking, and a good board
game shared among friends.
@@ -31,6 +33,10 @@ site buildable by base OpenBSD as a
[creative limitation](/blog/creative-coding.html),
I took the opportunity to write my own
lightweight markup parser, [`nihdoc`](https://git.sr.ht/~akarle/nihdoc).
+
+Currently, this site is an homage to [Plan 9](https://9p.io/plan9/)
+and its editor/interface [Acme](https://en.wikipedia.org/wiki/Acme_%28text_editor%29).
+
[Stay tuned](/atom.xml) for more!
## Projects Found Here
diff --git a/www/jam-tuesday/index.html b/www/jam-tuesday/index.html
@@ -5,38 +5,86 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Inspired by https://www.swyx.io/css-100-bytes/ -->
<style>
+/* inlined via bin/genpage to limit network calls */
html {
max-width: 80ch;
- padding: 3em 1em;
margin: auto;
font-size: 1em;
font-family: sans-serif;
+ background: #757a76; /* rio gray */
}
-footer {
- margin-top: 50px;
- font-size: .8em;
+body {
+ margin: 12px 0 12px 0;
+}
+#acme {
+ border: 4px solid #58a9aa; /* rio aqua */
+ background: #ffffea; /* acme yellow */
+}
+#content {
+ margin: 0 12px 0 12px;
+ padding: 6px;
+ border-left: 1px solid #9a984b;
+}
+#home-tag {
+ width: 100%;
+ background: #eafeff;
+ border-bottom: 2px solid black;
+ padding: 0 4px 0 4px;
+ box-sizing: border-box;
+}
+#tag {
+ display: block;
+ background: #eafeff;
+ padding-left: 4px;
+ border-left: 13px solid #8887c9;
+ border-bottom: 1px solid #8887c9;
}
code { font-family: consolas, courier, monospace; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
-blockquote, code pre {
- background: #ffffea;
+blockquote, pre {
overflow: auto;
padding: 10px;
border: 2px solid black;
}
+::selection {
+ background: #eeeda0;
+}
+#tag::selection, #home-tag::selection, #home-tag a::selection {
+ background: #9fefe7;
+}
+a {
+ color: #020097;
+ text-decoration: none;
+}
+a:visited {
+ color: #400070;
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: underline;
+}
.jam-artists tr:nth-child(even) {
- background-color: #e3e3e3;
+ background-color: #f2f2bd;
}
-td.jam-artists, th.jam-artists, table.jam-artists {
+table.jam-artists {
+ margin: 0 auto;
border: 1px solid black;
}
</style>
<title>Jam Tuesday Archive</title>
</head>
<body>
-<small><code><a href="/">/home/alex</a> / <a href="/jam-tuesday">jam-tuesday</a></code></small>
+<div id="acme">
+<div id="home-tag">
+<a href="/">Home</a>
+<a href="/blog">Blog</a>
+<a href="/license.html">License</a>
+</div>
+<div id="tag">/home/alex/jam-tuesday.html
+Del Snarf Get | Look</div>
+<div id="content">
<h1>Jam Tuesday Archive</h1>
<h2>About</h2>
<p>
@@ -74,29 +122,29 @@ instrument is specified, it's me switching to it). We both
</ul>
<h3>Top 10 Artists (Frequency, Name):</h3>
<ul>
-<li> 40 The Front Bottoms</li>
-<li> 37 Peach Pit</li>
-<li> 29 Manchester Orchestra</li>
-<li> 16 Vulfpeck</li>
-<li> 16 Dr. Dog</li>
-<li> 15 The Dear Hunter</li>
-<li> 10 Atta Boy</li>
-<li> 9 Cage The Elephant</li>
-<li> 7 Lake Street Dive</li>
-<li> 7 Her's</li>
+<li> 40 The Front Bottoms</li>
+<li> 37 Peach Pit</li>
+<li> 29 Manchester Orchestra</li>
+<li> 16 Vulfpeck</li>
+<li> 16 Dr. Dog</li>
+<li> 15 The Dear Hunter</li>
+<li> 10 Atta Boy</li>
+<li> 9 Cage The Elephant</li>
+<li> 7 Lake Street Dive</li>
+<li> 7 Her's</li>
</ul>
<h3>Top 10 Songs (Frequency, Name):</h3>
<ul>
-<li> 12 Twin Size Mattress, The Front Bottoms</li>
-<li> 11 Rhode Island, The Front Bottoms</li>
-<li> 11 Alrighty Aphrodite, Peach Pit</li>
-<li> 10 Shadow People, Dr. Dog</li>
-<li> 10 Brian's Movie, Peach Pit</li>
-<li> 8 The Beers, The Front Bottoms</li>
-<li> 8 Jack and Blow, Atta Boy</li>
-<li> 6 That I Miss You, Vansire</li>
-<li> 6 Lauren, Men I Trust</li>
-<li> 6 Drop the Guillotine, Peach Pit</li>
+<li> 12 Twin Size Mattress, The Front Bottoms</li>
+<li> 11 Rhode Island, The Front Bottoms</li>
+<li> 11 Alrighty Aphrodite, Peach Pit</li>
+<li> 10 Shadow People, Dr. Dog</li>
+<li> 10 Brian's Movie, Peach Pit</li>
+<li> 8 The Beers, The Front Bottoms</li>
+<li> 8 Jack and Blow, Atta Boy</li>
+<li> 6 That I Miss You, Vansire</li>
+<li> 6 Lauren, Men I Trust</li>
+<li> 6 Drop the Guillotine, Peach Pit</li>
</ul>
<h2>Setlists</h2>
Updated weekly:
@@ -126,9 +174,9 @@ Updated weekly:
<tr><th>Artist</th><th>Song</th><th>Plays</th></tr>
<tr><td>311</td><td>Amber</td><td>1</td></tr>
<tr><td>A Great Big Pile Of Leaves</td><td>Alligator Bop</td><td>1</td></tr>
+<tr><td>A Tribe Called Quest</td><td>Can I Kick It?</td><td>1</td></tr>
<tr><td>Anderson .Paak</td><td>Make It Better</td><td>1</td></tr>
<tr><td>Anderson .Paak & Bruno Mars</td><td>Leave the Door Open</td><td>1</td></tr>
-<tr><td>A Tribe Called Quest</td><td>Can I Kick It?</td><td>1</td></tr>
<tr><td>Atta Boy</td><td>Jack and Blow</td><td>8</td></tr>
<tr><td></td><td>Walden Pond</td><td>2</td></tr>
<tr><td>Bad Books</td><td>Baby Shoes</td><td>1</td></tr>
@@ -163,9 +211,9 @@ Updated weekly:
<tr><td>Goo Goo Dolls</td><td>Iris</td><td>1</td></tr>
<tr><td>Gorillaz</td><td>Feel Good Inc.</td><td>1</td></tr>
<tr><td>Harvey Danger</td><td>Flagpole Sitta</td><td>1</td></tr>
-<tr><td>Herbie Hancock</td><td>Chameleon</td><td>3</td></tr>
<tr><td>Her's</td><td>Blue Lips</td><td>6</td></tr>
<tr><td></td><td>Cool With You</td><td>1</td></tr>
+<tr><td>Herbie Hancock</td><td>Chameleon</td><td>3</td></tr>
<tr><td>Jay Som</td><td>Baybee</td><td>1</td></tr>
<tr><td>Jimmy Eat World</td><td>The Middle</td><td>1</td></tr>
<tr><td>John Mayer</td><td>Moving On and Getting Over</td><td>1</td></tr>
@@ -181,7 +229,7 @@ Updated weekly:
<tr><td></td><td>Hypotheticals</td><td>5</td></tr>
<tr><td>Lenny Kravitz</td><td>Fly Away</td><td>1</td></tr>
<tr><td>Mac DeMarco</td><td>My Old Man</td><td>2</td></tr>
-<tr><td>Mac Miller</td><td>What's the Use</td><td>3</td></tr>
+<tr><td>Mac Miller</td><td>What's The Use</td><td>3</td></tr>
<tr><td>Manchester Orchestra</td><td>Bed Head</td><td>3</td></tr>
<tr><td></td><td>Everything To Nothing</td><td>1</td></tr>
<tr><td></td><td>I Can Barely Breathe</td><td>1</td></tr>
@@ -260,9 +308,9 @@ Updated weekly:
<tr><td>The Head and The Heart</td><td>Honeybee</td><td>1</td></tr>
<tr><td></td><td>Lost In My Mind</td><td>2</td></tr>
<tr><td></td><td>Rivers and Roads</td><td>2</td></tr>
-<tr><td>Theo Katzman</td><td>You Could Be President</td><td>1</td></tr>
<tr><td>The Raconteurs</td><td>Steady As She Goes</td><td>1</td></tr>
<tr><td>The White Stripes</td><td>We're Going To Be Friends</td><td>1</td></tr>
+<tr><td>Theo Katzman</td><td>You Could Be President</td><td>1</td></tr>
<tr><td>Third Eye Blind</td><td>Semi Charmed Life</td><td>1</td></tr>
<tr><td>Three Doors Down</td><td>Kryptonite</td><td>1</td></tr>
<tr><td>Tonic</td><td>If You Could Only See</td><td>1</td></tr>
@@ -284,10 +332,8 @@ Updated weekly:
<tr><td></td><td>If You're Wondering If I Want You To</td><td>1</td></tr>
<tr><td></td><td>The World Has Turned and Left Me Here</td><td>1</td></tr>
</table>
-<br><br>
-<p style="font-size: 0.7em">Last Updated: Fri Sep 2 11:45:17 PM EDT 2022</p>
-<p class="foot-license">
-© 2019-2022 Alex Karle | <a href="/">Home</a> | <a href="/license.html">License</a>
-</p>
+<p>Last Updated: Sun Sep 4 00:03:19 EDT 2022</p>
+</div>
+</div>
</body>
</html>
diff --git a/www/license.txt b/www/license.txt
@@ -5,5 +5,10 @@ licensed under a Creative Commons Attribution 4.0 license
[(CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/).
Any code snippets, including the
-[code used to build this site](https://sr.ht/~akarle/alexkarle.com)
+[code used to build this site](https://sr.ht/~akarle/alexkarle.com),
are licensed under a [MIT license](/LICENSE).
+
+The site is made to look like the
+[Acme editor](https://en.wikipedia.org/wiki/Acme_%28text_editor%29)
+running inside [Plan 9](https://9p.io/plan9/)'s
+`rio(1)` window manager.
diff --git a/www/style.css b/www/style.css
@@ -0,0 +1,60 @@
+/* inlined via bin/genpage to limit network calls */
+html {
+ max-width: 80ch;
+ margin: auto;
+ font-size: 1em;
+ font-family: sans-serif;
+ background: #757a76; /* rio gray */
+}
+body {
+ margin: 12px 0 12px 0;
+}
+#acme {
+ border: 4px solid #58a9aa; /* rio aqua */
+ background: #ffffea; /* acme yellow */
+}
+#content {
+ margin: 0 12px 0 12px;
+ padding: 6px;
+ border-left: 1px solid #9a984b;
+}
+#home-tag {
+ width: 100%;
+ background: #eafeff;
+ border-bottom: 2px solid black;
+ padding: 0 4px 0 4px;
+ box-sizing: border-box;
+}
+#tag {
+ display: block;
+ background: #eafeff;
+ padding-left: 4px;
+ border-left: 13px solid #8887c9;
+ border-bottom: 1px solid #8887c9;
+}
+code { font-family: consolas, courier, monospace; }
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.2em; }
+h3 { font-size: 1.1em; }
+blockquote, pre {
+ overflow: auto;
+ padding: 10px;
+ border: 2px solid black;
+}
+::selection {
+ background: #eeeda0;
+}
+#tag::selection, #home-tag::selection, #home-tag a::selection {
+ background: #9fefe7;
+}
+a {
+ color: #020097;
+ text-decoration: none;
+}
+a:visited {
+ color: #400070;
+ text-decoration: none;
+}
+a:hover {
+ text-decoration: underline;
+}
diff --git a/www/uses.txt b/www/uses.txt
@@ -21,6 +21,8 @@ most important tool, it's definitely the most impactful.
Other editors I use:
+- [`acme(1)`](https://en.wikipedia.org/wiki/Acme_%28text_editor%29)
+ for fun / in my plan 9 explorations (if you can't tell by the theme)
- [`vi(1)`](https://man.openbsd.org/vi.1) for system configs
(super snappy on OpenBSD)
- [`ed(1)`](https://man.openbsd.org/ed.1) for fun and for slow/serial
