wip pull requests post

input.css

···
          font-display: swap;
      }
 
-     h1, h2, h3 {
+     h1 {
         @apply text-2xl;
-        @apply font-display;
         @apply text-black;
         @apply font-bold;
     }
···
     }
 
     @layer base {
+        html {
+            font-size: 15px;
+        }
+        @supports (font-variation-settings: normal) {
+          html {
+            font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1;
+          }
+        }
+
         a {
-          @apply no-underline text-black hover:underline hover:text-gray-800;
+            @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
         }
 
         label {
-            @apply block text-sm text-black;
+            @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
         }
         input {
-            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+            @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
         }
         textarea {
-            @apply bg-white border border-black rounded-sm focus:ring-black p-2;
+            @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
+        }
+        details summary::-webkit-details-marker {
+            display: none;
         }
     }
 

pages/blog/fork-pulls.md

···
+---
+atroot: true
+template:
+slug: fork-pulls
+title: the lifecycle of a pull request
+subtitle: We shipped a bunch of PR features recently; here's how we built it
+date: 2025-04-15
+author: Anirudh Oppiliappan
+authorEmail: [e-mail]
+authorHandle: icyphox.sh
+draft: true
+---
+
+We're having great fun building pull requests -- so far you can create a
+PR on Tangled using one of three ways:
+
+- paste a diff in the UI
+- compare two local branches within the same repository
+- compare across forks
+
+[!!!reword this]
+
+We figured it would be fun to write about the engineering that went into
+building this, especially because Tangled is federated and Git repos
+can live across different servers (called "knots"). If you're new here,
+[read our intro](/intro) for the full story!
+
+Now, on with the show!
+
+## your patch makes the rounds
+
+Creating a PR in Tangled starts with heading to `/pulls/new` in your
+target repository. Once there, you're presented with three options:
+
+- paste a patch in the UI
+- compare two local branches (you'll see this only if you're a
+collaborator on the repo)
+- compare across forks
+
+Whatever you choose, at the core of every PR is the patch. You either
+supply it and make everyone's lives easier, or we generate it ourselves
+by comparing branches (we'll talk more about this in a bit, it's very
+cool actually). We'll skip explaining the part where you click around on
+the UI to create a new PR -- instead, let's talk about what comes after.
+
+We call it "rounds". Each round consists of a code review, and updating
+the patch results in a new round. Rounds are -- obviously -- 0-indexed.
+Here's an example.
+
+<figure class="max-w-[450px] m-auto flex flex-col items-center justify-center">
+    <img class="h-auto max-w-full" src="/static/img/patch-pr-main.png">
+    <figcaption class="text-center">A new pull request with a couple
+rounds of reviews.</figcaption>
+</figure>
+
+[!!!write more about how this is good?]
+
+Hitting the 'View Patch' button lets you see the diff for each round.
+Inter-diffing -- what changed *between* two rounds -- is planned!
+
+[!!!close off this section]
+
+## fine, we'll make a patch ourselves
+
+[!!!also write about the sh.tangled.repo.patch lexicon] 
+
+
+<figure class="max-w-[550px] m-auto flex flex-col items-center justify-center">
+    <img class="h-auto max-w-full" src="/static/img/pr-flow.png">
+    <figcaption class="text-center">Simplified pull request flow.</figcaption>
+</figure>
+
+
+## what's in a fork?
+
+Forks are just "clones" of another repository. They aren't your typical
+clones from `git clone` however, since we're operating on top of [bare
+repositories][bare-repo]. Hence, forks are "bare clones". You can create
+one yourself locally:
+
+```
+git clone --bare [e-mail]:tangled.sh/core
+```
+
+[bare-repo]: https://git-scm.com/book/en/v2/Git-on-the-Server-Getting-Git-on-a-Server
+
+On Tangled, forking a repo results in a new
+[`sh.tangled.repo`][repo-record] record in your PDS. What's interesting
+is the new `source` field that's an AT URI pointing to the original
+repository:
+
+    {
+      "knot": "test.hel.tangled.network",
+      "name": "core",
+      "$type": "sh.tangled.repo",
+      "owner": "did:plc:hwevmowznbiukdf6uk5dwrrq",
+      "source": "at://did:plc:wshs7t2adsemcrrd4snkeqli/sh.tangled.repo/3liuighjy2h22",
+      "addedAt": "2025-04-14T12:53:45Z"
+    }
+
+[repo-record]: https://pdsls.dev/at://did:plc:hwevmowznbiukdf6uk5dwrrq/sh.tangled.repo/3lmrm7gu5dh22
+
+Great, we've got a fork on your knot now. You can now work on your
+change safely here -- but how do you now propose a pull request from
+your fork? And before that, what exactly is a "pull request" anyway?
+
+### ref comparisons across forks
+
+Great, so we now understand the anatomy of a PR and how comparing
+branches (or more generally, refs) works. Astute readers would've
+realised that so far, this only works *within* the same repository --
+and not across forks, which is another git repository entirely.
+
+We'll admit: we ... omitted some sneaky bits in the forks section above.
+The idea is simple: we already have all the bits needed to compare two
+local refs, so why not just "localize" the remote ref?
+
+That's where our hidden tracking refs come in. When you create a pull
+request from a fork, we create a refspec that tracks the remote branch,
+which we then use to produce a diff. A refspec is a rule that tells Git
+how to map references between a remote and your local repository during
+fetch or push.
+
+Let's say your fork has a feature branch called `feature-1`, and you're
+making a pull request into the `main` branch of the original repository.
+We fetch the remote `main` into a local hidden ref using a refspec like
+this:
+
+```
++refs/heads/main:refs/hidden/feature-1/main
+```
+
+And since we already have a remote (`origin`, by default) towards the
+original repo (we just cloned it, rememeber?), we're able to `fetch`
+this refspec and bring the remote `main` to our local hidden ref. Each
+PR gets its own little hidden ref and hence the
+`refs/hidden/:localRef/:remoteRef` format. We keep this ref up to date
+whenever you push new commits to your feature branch, ensuring that the
+comparison -- and any potential merge conflicts -- are always based on
+the latest target branch state.

tailwind.config.js

···
-/** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
+
 module.exports = {
-	content: ["./templates/**/*.html"],
+	content: ["./templates/**/*.html", "./pages/**/*.md"],
+	darkMode: "media",
 	theme: {
 		container: {
 			padding: "2rem",
 			center: true,
 			screens: {
-				sm: "540px",
-				md: "640px",
-				lg: "768px",
-				xl: "900px",
-				"2xl": "1024px"
+				sm: "500px",
+				md: "600px",
+				lg: "800px",
+				xl: "1000px",
+				"2xl": "1200px",
 			},
 		},
 		extend: {
 			fontFamily: {
-        display: ["InterDisplay", "system-ui", "sans-serif", "ui-sans-serif"],
 				sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
-				mono: ["IBMPlexMono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
+				mono: [
+					"IBMPlexMono",
+					"ui-monospace",
+					"SFMono-Regular",
+					"Menlo",
+					"Monaco",
+					"Consolas",
+					"Liberation Mono",
+					"Courier New",
+					"monospace",
+				],
 			},
-			maxWidth: {
-				'prose': '65ch',
+			typography: {
+				DEFAULT: {
+					css: {
+						maxWidth: "70ch",
+						pre: {
+							backgroundColor: colors.gray[100],
+							color: colors.black,
+							"@apply font-normal text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border": {},
+						},
+						code: {
+							"@apply font-normal font-mono p-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700": {},
+						},
+						"code::before": {
+							content: '""',
+						},
+						"code::after": {
+							content: '""',
+						},
+						blockquote: {
+							quotes: "none",
+						},
+					},
+				},
 			},
 		},
 	},
-	plugins: [
-		require('@tailwindcss/typography'),
-	],
+	plugins: [require("@tailwindcss/typography")],
 };

templates/index.html

···
   </title>
 
   <body class="bg-slate-100">
-  <div class="prose mx-auto px-1 pt-4 min-h-screen flex flex-col">
+  <div class="prose mx-auto px-1 pt-4 min-h-screen flex flex-col container">
   <main>
     <header class="px-12">
     <h1 class="mb-0">{{ index .Meta "title" }}</h1>
···
                 <div>
                   <a class="title mb-0 text-lg" href="/{{ .Meta.slug }}.html">{{ .Meta.title }}</a>
                   {{ if .Meta.draft }}
-                    (<span class="draft">draft</span>)
+                    <span class="text-red-500">[draft]</span>
                   {{ end }}
                   <p class="italic mt-1 mb-0">{{ .Meta.subtitle }}</p>
                 </div>

templates/text.html

···
           </p>
 
           {{ if eq .Meta.draft "true" }}
-            <h1 class="title px-6 mb-0">{{ index .Meta "title" }} <span class="draft">[draft]</span></h1>
+            <h1 class="title px-6 mb-0">{{ index .Meta "title" }} <span
+                class="text-red-500">[draft]</span></h1>
           {{ else }}
             <h1 class="title px-6 mb-0">{{ index .Meta "title" }}</h1>
           {{ end }}