Bigger type, add sections to documents page

src/app/docs/layers/documents/page.mdx

@@ -14,7 +14,7 @@ Authors create and join documents: mutable key-value stores that multiple users
   />
 </div>
 
-## Documents
+## Document Namespaces
 
 A document is a _namespace_ that is uniquely identified by a keypair.
 
@@ -49,14 +49,24 @@ ktrygcpxealfdtfmohw66nb2keivu52opk65cyj4j7jy7wior7ea
 
 Document IDs are base32-lower serialization of the public key of the document. They do _not_ change as the document changes.
 
-{/*
-## Permissions
+## Syncronizing Documents
 
-## Multiple Writers
+When an author wants to sync with a document, they first find the document's current state, then they perform a [range-based set reconciliation](https://arxiv.org/abs/2212.13567) to fill in any changes in the keyspace.
 
-## Collaging
+When two nodes want to sync, they perform a range-based set reconciliation to fill in any changes in the keyspace. Any node with the read key (document ID) can read & sync the latest state of the document. Having the read key denotes read access. All entries in the document are double-signed, once with an authorID (keypair) and the write key of the document.
 
-## Subscriptions
+<Note>
+Check out our [youtube video](https://www.youtube.com/watch?v=_D_tbAMqADM) on how range-based set reconciliation works!
+</Note>
 
-## Revocations & Key Rotations
-*/}
+After this synchronization step, we know the hashes of all the content the document references. By default iroh documents will fetch all content associated with the document.
+
+## Document PubSub
+
+Every document is it's own pubsub swarm, keyed by the public key of the document. Iroh pubsub swarms implement techniques described in [HyParView](https://asc.di.fct.unl.pt/~jleitao/pdf/dsn07-leitao.pdf?ref=bartoszsypytkowski.com) & PlumTree to keep a bounded number of active nodes any one node in the swarm needs to push to.
+
+<Note>
+Bartosz Sypytkowski has a great [blog post](https://www.bartoszsypytkowski.com/hyparview/) on HyParView & Plumtree, well worth reading.
+</Note>
+
+As authors write to a document, they publish these changes as pubsub messages that other peers pick up on & apply to their local state.

src/components/BlogPostLayout.jsx

@@ -47,13 +47,12 @@ export function BlogPostLayout({ article, references = [], children }) {
                 <h1 className="text-4xl font-space tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-4xl">
                   {article.title}
                 </h1>
-                <time
-                  dateTime={article.date}
-                  className="mt-5 flex items-center text-base text-zinc-400 dark:text-zinc-500"
-                >
-                  {formatDate(article.date)}
-                </time>
-                <span className='text-zinc-500'>by {article.author}</span>
+                <span className='mt-1 text-base text-zinc-400 dark:text-zinc-500'>
+                  <time dateTime={article.date}>
+                    {formatDate(article.date)}
+                  </time>
+                  <span>{' '}by {article.author}</span>
+                </span>
               </header>
               <Prose className="mt-8" data-mdx-content>
                 {children}

src/components/GithubStars.jsx

@@ -6,7 +6,7 @@ export default function GithubStars(props) {
   return (
     <Link href="https://github.com/n0-computer/iroh" className='p-2 -mt-2 flex text-sm leading-5 fill-zinc-400 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-600 dark:hover:fill-zinc-600 hover:bg-black/10 rounded'>
       <GithubIcon className="h-5 w-5" />
-      <span className='ml-2 mt-0'>1.4k</span>
+      <span className='ml-2 mt-0'>1.5k</span>
     </Link>
   )
 }

src/components/Header.jsx

@@ -17,6 +17,7 @@ import {ThemeToggle} from '@/components/ThemeToggle';
 import GithubStars from './GithubStars';
 
 export const navItems = [
+  {content: 'Blog', href: '/blog'},
   {content: 'Docs', href: '/docs'},
   {content: 'YouTube', href: 'https://www.youtube.com/@n0computer'},
 ];
@@ -26,7 +27,7 @@ export function TopLevelNavItem({href, children}) {
     <li>
       <Link
         href={href}
-        className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+        className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-600 dark:hover:text-white"
       >
         {children}
       </Link>

src/components/Navigation.jsx

@@ -221,6 +221,7 @@ export function Navigation(props) {
   return (
     <nav {...props}>
       <ul role="list">
+        <TopLevelNavItem href="/blog">Blog</TopLevelNavItem>
         <TopLevelNavItem href="/docs">Docs</TopLevelNavItem>
         <TopLevelNavItem href="https://github.com/n0-computer/iroh">GitHub</TopLevelNavItem>
         <TopLevelNavItem href="https://www.youtube.com/@n0computer">YouTube</TopLevelNavItem>

typography.js

@@ -56,12 +56,13 @@ module.exports = ({ theme }) => ({
 
       // Text
       p: {
+        fontSize: theme('fontSize.base')[0],
         marginTop: theme('spacing.6'),
         marginBottom: theme('spacing.6'),
       },
       '[class~="lead"]': {
-        fontSize: theme('fontSize.base')[0],
-        ...theme('fontSize.base')[1],
+        fontSize: theme('fontSize.lg')[0],
+        ...theme('fontSize.lg')[1],
       },
 
       // Lists