punchlist fixes

Author: b5

diagrams.ai

@@ -9,7 +9,7 @@ import {Hero} from '@/components/HomeHero';
 import {UsersShowcase} from '@/components/UsersShowcase';
 import {GlowCard} from '@/components/GlowCard';
 import {FromTheBlog} from '@/components/FromTheBlog';
-import {HammerWrenchCodeIcon} from '@/components/icons/HammerWrenchCodeIcon';
+import {WrenchCodeIcon} from '@/components/icons/WrenchCodeIcon';
 import {PerfChartIllustration} from '@/components/PerfChartIllustration';
 import {ConnectDevicesIllustration} from '@/components/ConnectDevicesIllustration';
 import {ProtocolHeroList} from '@/components/ProtocolHeroList';
@@ -49,7 +49,7 @@ export const metadata = {
         <div className="absolute z-40 max-w-6xl mx-auto md:grid md:grid-cols-4 md:gap-4">
           <div className="col-span-2 pl-8" style={{ paddingTop: 100 }}>
             <h1 className="z-50 text-5xl font-bold font-space-mono leading-tight">
-              the networking stack for user agency
+              less net work for networks
             </h1>
             <h3 className="text-lg font-space-mono mt-3 leading-normal">Iroh is a library for building on direct connections between devices, putting more control in the hands of your users.</h3>
             <div className='flex mt-3'>
@@ -89,7 +89,7 @@ export const metadata = {
 
     <section className='max-w-6xl mx-auto border-l border-r border-irohGray-300 dark:border-irohGray-800 md:grid md:grid-cols-4'>
       <div className='md:col-span-2 px-10 py-20 md:border-r border-irohGray-300 dark:border-irohGray-800'>
-        <HammerWrenchCodeIcon className='w-20 h-20' />
+        <WrenchCodeIcon className='w-16 h-16 mb-8' />
         <h3 className='text-3xl font-bold mb-4'>Build your own protocol</h3>
         <p className='mb-10 text-irohGray-600 dark:text-irohGray-400'>Don&apos;t see a protocol you need? Build your own! Iroh gives you a reliable foundation for building distributed systems that reach the edge. The rest is up to you.</p>
         <Link href="/docs/quickstart" className={clsx(

src/app/page.mdx

@@ -28,7 +28,7 @@ function Article({ className, post }) {
 
 export async function FromTheBlog() {
   let posts = await getAllPosts()
-  posts = posts.slice(0, 4)
+  posts = posts.slice(0, 2)
 
   return (
     <div className="w-full md:grid md:grid-cols-4">

src/components/FromTheBlog.jsx

@@ -8,6 +8,7 @@ import iconCarat from '@/images/icons/icon_carat.svg';
 import iconFaster from '@/images/icons/icon_faster.svg';
 import iconOpen from '@/images/icons/icon_open.svg';
 import iconPlatforms from '@/images/icons/icon_platforms.svg';
+import Link from 'next/link';
 
 const icons = {
   iconCarat,
@@ -20,6 +21,7 @@ export const ProtocolHeroList = function ProtocolHeroList() {
   return (
     <div className='md:grid md:grid-cols-4 border-l border-t border-irohGray-300 dark:border-irohGray-800'>
       {protocols.map((proto, i) => (
+        <Link href={`/docs/components/${proto.slug}`} key={i}>
         <GlowCard key={i} className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
           <Image
             src={icons[proto.icon]}
@@ -32,10 +34,13 @@ export const ProtocolHeroList = function ProtocolHeroList() {
             <p className=''>{proto.tagline}</p>
           </div>
         </GlowCard>
+        </Link>
       ))}
       <GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
-        <h1 className='text-2xl mb-2 text-irohGray-500'>Browse all protocols</h1>
-        <ArrowRightIcon className='w-10 h-10' />
+        <Link href='/docs/components'>
+          <h1 className='text-2xl mb-2 text-irohGray-500'>Browse all protocols</h1>
+          <ArrowRightIcon className='w-10 h-10' />
+        </Link>
       </GlowCard>
     </div>
   )

src/components/ProtocolHeroList.jsx

@@ -84,7 +84,7 @@ export const UsersShowcase = function UsersShowcase() {
           <button
             key={index}
             className={`w-2 h-2 rounded-full ${
-              index === currentIndex ? 'bg-irohGray-300 dark:bg-irohGray-800' : 'bg-irohGray-300/40 dark:bg-irohGray-800/40'
+              index === currentIndex ? 'bg-irohGray-600 dark:bg-irohGray-300' : 'bg-irohGray-700/20 dark:bg-irohGray-600/40'
             }`}
             onClick={() => {
               setCurrentIndex(index)

src/components/UsersShowcase.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export const WrenchCodeIcon = ({ className }) => (
+  <div className={className}>
+    <WrenchCodeIconLight className='block dark:hidden' />
+    <WrenchCodeIconDark className='hidden dark:block' />
+  </div>
+)
+
+const WrenchCodeIconLight = ({ className }) => (
+<svg className={className} viewBox="0 0 66.14 73.07">
+    <defs>
+      <style>{`.wrench-code-dark-1,.wrench-code-dark-2{fill:none;stroke:#3b3b3b;}.wrench-code-dark-2{stroke-miterlimit:10;}`}</style>
+    </defs>
+    <path class="wrench-code-dark-1"
+      d="M4.26,17.53c0-1.09.34-1.99,1.04-2.7.69-.71,1.58-1.06,2.67-1.06h4.67v3.47h-3.33c-.87,0-1.3.48-1.3,1.45v15.42c0,1.09-.35,1.99-1.04,2.7-.69.71-1.6,1.06-2.72,1.06h-.58v.58h.58c1.12,0,2.03.35,2.72,1.06.69.71,1.04,1.61,1.04,2.7v15.42c0,.96.43,1.45,1.3,1.45h3.33v3.47h-4.67c-1.09,0-1.98-.35-2.67-1.06-.69-.71-1.04-1.61-1.04-2.7v-16.63c0-.93-.43-1.4-1.3-1.4H.5v-5.21h2.46c.87,0,1.3-.47,1.3-1.4v-16.63Z" />
+    <path class="wrench-code-dark-1"
+      d="M61.89,59.78c0,1.09-.34,1.99-1.04,2.7-.69.71-1.58,1.06-2.67,1.06h-4.67v-3.47h3.33c.87,0,1.3-.48,1.3-1.45v-15.42c0-1.09.35-1.99,1.04-2.7.69-.71,1.6-1.06,2.72-1.06h.58v-.58h-.58c-1.12,0-2.03-.35-2.72-1.06-.69-.71-1.04-1.61-1.04-2.7v-15.42c0-.96-.43-1.45-1.3-1.45h-3.33v-3.47h4.67c1.09,0,1.98.35,2.67,1.06.69.71,1.04,1.61,1.04,2.7v16.63c0,.93.43,1.4,1.3,1.4h2.46v5.21h-2.46c-.87,0-1.3.47-1.3,1.4v16.63Z" />
+    <rect class="wrench-code-dark-2" x="31.09" y="11.28" width="5.39" height="8.09" rx=".92" ry=".92"
+      transform="translate(30.66 -21.64) rotate(60.76)" />
+    <path class="wrench-code-dark-2"
+      d="M22.1,15.81c.75,2.59,2.39,4.76,4.55,6.35,0,0,3.1,2.52,3.1,7.95v38.41c0,2.23,1.81,4.04,4.04,4.04s4.04-1.81,4.04-4.04V31.78c0-6.46,4.98-11.07,4.98-11.07,1.93-2.15,3.11-4.98,3.11-8.09,0-5.86-4.16-10.75-9.69-11.88-.79-.16-1.61-.25-2.44-.25-.63,0-1.24.06-1.84.15l3.06,5.36s1.47,2.57-1.22,3.92-8.09,4.04-8.09,4.04l-3.6,1.83Z" />
+    <path class="wrench-code-dark-2"
+      d="M27.78,12.98s-2,.76-3.17-1.35-2.47-4.75-2.47-4.75c0,0-1.45,2.6-1.23,4.77s1.38,3.78,1.38,3.78l5.49-2.44Z" />
+  </svg>
+);
+
+const WrenchCodeIconDark = ({ className }) => (
+  <svg className={className} viewBox="0 0 66.14 73.07">
+  <defs>
+    <style>{`.wrench-code-light-1{stroke-miterlimit:10;}.wrench-code-light-1,.wrench-code-light-2{fill:none;stroke:#f8f8f8;}`}</style>
+  </defs>
+  <path class="wrench-code-light-2"
+    d="M4.26,17.53c0-1.09.34-1.99,1.04-2.7.69-.71,1.58-1.06,2.67-1.06h4.67v3.47h-3.33c-.87,0-1.3.48-1.3,1.45v15.42c0,1.09-.35,1.99-1.04,2.7-.69.71-1.6,1.06-2.72,1.06h-.58v.58h.58c1.12,0,2.03.35,2.72,1.06.69.71,1.04,1.61,1.04,2.7v15.42c0,.96.43,1.45,1.3,1.45h3.33v3.47h-4.67c-1.09,0-1.98-.35-2.67-1.06-.69-.71-1.04-1.61-1.04-2.7v-16.63c0-.93-.43-1.4-1.3-1.4H.5v-5.21h2.46c.87,0,1.3-.47,1.3-1.4v-16.63Z" />
+  <path class="wrench-code-light-2"
+    d="M61.89,59.78c0,1.09-.34,1.99-1.04,2.7-.69.71-1.58,1.06-2.67,1.06h-4.67v-3.47h3.33c.87,0,1.3-.48,1.3-1.45v-15.42c0-1.09.35-1.99,1.04-2.7.69-.71,1.6-1.06,2.72-1.06h.58v-.58h-.58c-1.12,0-2.03-.35-2.72-1.06-.69-.71-1.04-1.61-1.04-2.7v-15.42c0-.96-.43-1.45-1.3-1.45h-3.33v-3.47h4.67c1.09,0,1.98.35,2.67,1.06.69.71,1.04,1.61,1.04,2.7v16.63c0,.93.43,1.4,1.3,1.4h2.46v5.21h-2.46c-.87,0-1.3.47-1.3,1.4v16.63Z" />
+  <rect class="wrench-code-light-1" x="31.09" y="11.28" width="5.39" height="8.09" rx=".92" ry=".92"
+    transform="translate(30.66 -21.64) rotate(60.76)" />
+  <path class="wrench-code-light-1"
+    d="M22.1,15.81c.75,2.59,2.39,4.76,4.55,6.35,0,0,3.1,2.52,3.1,7.95v38.41c0,2.23,1.81,4.04,4.04,4.04s4.04-1.81,4.04-4.04V31.78c0-6.46,4.98-11.07,4.98-11.07,1.93-2.15,3.11-4.98,3.11-8.09,0-5.86-4.16-10.75-9.69-11.88-.79-.16-1.61-.25-2.44-.25-.63,0-1.24.06-1.84.15l3.06,5.36s1.47,2.57-1.22,3.92-8.09,4.04-8.09,4.04l-3.6,1.83Z" />
+  <path class="wrench-code-light-1"
+    d="M27.78,12.98s-2,.76-3.17-1.35-2.47-4.75-2.47-4.75c0,0-1.45,2.6-1.23,4.77s1.38,3.78,1.38,3.78l5.49-2.44Z" />
+</svg>
+);

src/components/icons/HammerWrenchCodeIcon.jsx

@@ -2,31 +2,37 @@ export const protocols = [
   {
     "icon": "iconOpen",
     "title": "Blobs",
-    "tagline": "Resumable, verifiable data transfer"
+    "tagline": "Resumable, verifiable data transfer",
+    "slug": "blobs"
   },
   {
     "icon": "iconPlatforms",
     "title": "Gossip",
-    "tagline": "Broadcast messages to groups of nodes by topic."
+    "tagline": "Broadcast messages to groups of nodes by topic.",
+    "slug": "gossip"
   },
   // {
   //   "icon": "iconOpen",
-  //   "title": "DMs",
-  //   "tagline": "Simple node-to-node message passing"
+  //   "title": "DM",
+  //   "tagline": "Simple node-to-node message passing",
+  //   "slug": "dm"
   // },
   {
     "icon": "iconFaster",
     "title": "Documents",
-    "tagline": "Realtime, multiwriter, key-value sync"
+    "tagline": "Realtime, multiwriter, key-value sync",
+    "slug": "documents"
   },
   // {
   //   "icon": "iconFaster",
   //   "title": "Willow",
-  //   "tagline": "multiwriter, key-value sync with fine-grained access control"
+  //   "tagline": "multiwriter, key-value sync with fine-grained access control",
+  //   "slug": "willow"
   // },
   // {
   //   "icon": "iconFaster",
   //   "title": "Automerge",
-  //   "tagline": "CRDT-powered collaborative documents"
+  //   "tagline": "CRDT-powered collaborative documents",
+  //   "slug": "automerge"
   // }
 ]