diff options
Diffstat (limited to 'notes')
| -rw-r--r-- | notes/_plain-html.html | 70 | ||||
| -rw-r--r-- | notes/_plain-html.md | 28 | ||||
| -rw-r--r-- | notes/index.html | 11 | ||||
| -rw-r--r-- | notes/index.html.tmpl | 31 |
4 files changed, 64 insertions, 76 deletions
diff --git a/notes/_plain-html.html b/notes/_plain-html.html deleted file mode 100644 index d60275e..0000000 --- a/notes/_plain-html.html +++ /dev/null @@ -1,70 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width, initial-scale=1"> -<title>The case for plain HTML — notes — tjp.lol</title> -<meta name="description" content="A note on writing plain, durable HTML."> -<link rel="stylesheet" href="../style.css"> -</head> -<body> -<div class="wrap"> - - <header class="site"> - <h1 class="brand"><a href="../index.html">~tjp<span class="cur"> $_</span></a></h1> - <nav class="main"> - <a href="../weblog/index.html">weblog</a> - <a href="../notes/index.html" aria-current="page">notes</a> - <a href="../projects/index.html">projects</a> - <a href="../about/index.html">about</a> - <a href="../feed.xml">rss</a> - </nav> - </header> - - <main> - <article class="post"> - <div class="post-head"> - <p class="meta"><a href="../notes/index.html" style="text-decoration:none;">← notes</a> / tended <time datetime="2026-05-30">2026-05-30</time> · planted <time datetime="2024-08-11">2024-08-11</time></p> - <h1>The case for plain HTML</h1> - </div> - - <div class="note-body"> - <p><em>A note, not an essay — expect it to change. This page shows how a wiki note reads: internal <a class="wiki" href="index.html">[[wiki links]]</a> render as underlined-dotted links, and a backlinks panel sits at the bottom.</em></p> - - <p>A hand-written HTML page is the most durable document format I know of that still looks like a document. It has no runtime, no dependencies, and no version that can go out of date. A file I wrote in 2004 opens today, pixel-for-pixel, in a browser that didn't exist then.</p> - - <p>This connects to <a class="wiki" href="index.html">Gemtext & the small web</a> — both are bets that <em>constraint outlives capability</em>. See also <a class="wiki" href="index.html">How I take notes</a> for why I keep the source in plain text.</p> - - <h2>Things I no longer do</h2> - <ul> - <li>Reach for a framework before there's a second page.</li> - <li>Add a build step to save five keystrokes.</li> - <li>Load a web font when the reader already owns a good one.</li> - </ul> - - <h2>The test</h2> - <p>Turn JavaScript off. If the page is worse, I've added fragility I have to maintain forever. If it's identical, I'm done. This whole site passes that test — see the <a class="wiki" href="../about/index.html">colophon</a>.</p> - </div> - - <div class="backlinks"> - <h2>Linked from</h2> - <ul class="posts"> - <li><a href="index.html">Gemtext & the small web</a></li> - <li><a href="index.html">Home-lab & self-hosting</a></li> - <li><a href="../weblog/moving-off-gemini.html">Moving my weblog off Gemini (without leaving it)</a></li> - </ul> - </div> - </article> - </main> - - <footer> - <div class="ring"> - <span>webring:</span> - <a href="#">← prev</a><a href="#">rand</a><a href="#">next →</a> - </div> - <p>hand-written in slc · ©2026 tjp · <a href="../feed.xml">feed</a></p> - </footer> - -</div> -</body> -</html> diff --git a/notes/_plain-html.md b/notes/_plain-html.md new file mode 100644 index 0000000..6d6e078 --- /dev/null +++ b/notes/_plain-html.md @@ -0,0 +1,28 @@ +--- +description: A note on writing plain, durable HTML. +planted: 2024-08-11 +tended: 2026-05-30 +--- +# The case for plain HTML + +*A note, not an essay — expect it to change. This page shows how a wiki note reads: internal wiki links render as underlined-dotted links, and a backlinks panel sits at the bottom.* + +A hand-written HTML page is the most durable document format I know of that still looks like a document. It has no runtime, no dependencies, and no version that can go out of date. A file I wrote in 2004 opens today, pixel-for-pixel, in a browser that didn't exist then. + +This connects to [Gemtext & the small web](index.html) — both are bets that *constraint outlives capability*. See also [How I take notes](index.html) for why I keep the source in plain text. + +## Things I no longer do + +- Reach for a framework before there's a second page. +- Add a build step to save five keystrokes. +- Load a web font when the reader already owns a good one. + +## The test + +Turn JavaScript off. If the page is worse, I've added fragility I have to maintain forever. If it's identical, I'm done. This whole site passes that test — see the [colophon](../about/index.html). + +## Linked from + +- [Gemtext & the small web](index.html) +- [Home-lab & self-hosting](index.html) +- [Moving my weblog off Gemini (without leaving it)](../weblog/moving-off-gemini.html) diff --git a/notes/index.html b/notes/index.html index 1a8db13..ea988cf 100644 --- a/notes/index.html +++ b/notes/index.html @@ -14,7 +14,7 @@ <h1 class="brand"><a href="../index.html">~tjp<span class="cur"> $_</span></a></h1> <nav class="main"> <a href="../weblog/index.html">weblog</a> - <!-- <a href="../notes/index.html" aria-current="page">notes</a> --> + <a href="../projects/index.html">projects</a> <a href="../about/index.html">about</a> <a href="../feed.xml">feed</a> @@ -32,17 +32,16 @@ <section> <h2 class="sec">all notes</h2> + </section> </main> <footer> - <!-- <div class="ring"> - <span>webring:</span> - <a href="#">← prev</a><a href="#">rand</a><a href="#">next →</a> - </div> --> - <p>hand-written in slc · ©2026 tjp · <a href="../feed.xml">feed</a></p> + + <p>©2026 tjp · content <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> unless noted · <a href="../feed.xml">feed</a></p> </footer> </div> </body> </html> + diff --git a/notes/index.html.tmpl b/notes/index.html.tmpl new file mode 100644 index 0000000..468a466 --- /dev/null +++ b/notes/index.html.tmpl @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Notes — tjp.lol</title> +<meta name="description" content="A public cut of my Obsidian notes — a small digital garden."> +<link rel="stylesheet" href="../style.css"> +</head> +<body> +<div class="wrap"> + +{{template "header" .}} + <main> + <section class="intro"> + <p>This is a digital garden — a public slice of the notes I keep in Obsidian. Unlike the <a href="../weblog/index.html">weblog</a>, these aren't essays. They're living pages: some are a paragraph, some are years old, most link to each other. Start anywhere and follow the threads.</p> + </section> + + <section> + <h2 class="sec">start here</h2> + </section> + + <section> + <h2 class="sec">all notes</h2> + {{$notes := sortPages (index .Pages "notes") "mod_time"}}{{with $notes}}<div class="note-index"> + {{range .}}<a href="{{rel "notes/index.html" .OutputPath}}">{{.Title}}</a>{{end}} + </div>{{end}} + </section> + </main> + +{{template "footer" .}} |