Skip to content

Commit 9649057

Browse files
b5b5
committed
drive protocols list with structured data
1 parent 8f9a04e commit 9649057

File tree

3 files changed

+76
-78
lines changed

3 files changed

+76
-78
lines changed

‎src/app/page.mdx‎

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {FromTheBlog} from '@/components/FromTheBlog';
1212
import {HammerWrenchCodeIcon} from '@/components/icons/HammerWrenchCodeIcon';
1313
import {PerfChartIllustration} from '@/components/PerfChartIllustration';
1414
import {ConnectDevicesIllustration} from '@/components/ConnectDevicesIllustration';
15+
import {ProtocolHeroList} from '@/components/ProtocolHeroList';
1516

1617
import logoGo from '@/images/logos/go.svg';
1718
import logoPython from '@/images/logos/python.svg';
@@ -82,84 +83,7 @@ export const metadata = {
8283
<h3 className='text-3xl font-bold mb-2'>Compose your own tailor-made protocol stack</h3>
8384
<p className='text-irohGray-600 dark:text-irohGray-400 text-lg'>An ecosystem of ready-made, composable protocols are built on top of iroh. <br />Mix & match to get the feature set you need.</p>
8485
</div>
85-
<div className='md:grid md:grid-cols-4 border-l border-t border-irohGray-300 dark:border-irohGray-800'>
86-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
87-
<Image
88-
src={iconOpen}
89-
alt=""
90-
className="h-12 w-12 float-left md:float-none"
91-
unoptimized
92-
/>
93-
<div className='pl-20 md:pl-0'>
94-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>Blobs</h2>
95-
<p className=''>Resumable, verifiable data transfer</p>
96-
</div>
97-
</GlowCard>
98-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
99-
<Image
100-
src={iconPlatforms}
101-
alt=""
102-
className="h-12 w-12 float-left md:float-none"
103-
unoptimized
104-
/>
105-
<div className='pl-20 md:pl-0'>
106-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>Gossip</h2>
107-
<p>Broadcast messages to groups of nodes by topic.</p>
108-
</div>
109-
</GlowCard>
110-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
111-
<Image
112-
src={iconOpen}
113-
alt=""
114-
className="h-12 w-12 float-left md:float-none"
115-
unoptimized
116-
/>
117-
<div className='pl-20 md:pl-0'>
118-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>DMs</h2>
119-
<p>Simple node-to-node message passing</p>
120-
</div>
121-
</GlowCard>
122-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
123-
<Image
124-
src={iconFaster}
125-
alt=""
126-
className="h-12 w-12 float-left md:float-none"
127-
unoptimized
128-
/>
129-
<div className='pl-20 md:pl-0'>
130-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>Documents</h2>
131-
<p>Realtime, multiwriter, key-value sync</p>
132-
</div>
133-
</GlowCard>
134-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
135-
<Image
136-
src={iconFaster}
137-
alt=""
138-
className="h-12 w-12 float-left md:float-none"
139-
unoptimized
140-
/>
141-
<div className='pl-20 md:pl-0'>
142-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>Willow</h2>
143-
<p>multiwriter, key-value sync with fine-grained access control</p>
144-
</div>
145-
</GlowCard>
146-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
147-
<Image
148-
src={iconFaster}
149-
alt=""
150-
className="h-12 w-12 float-left md:float-none"
151-
unoptimized
152-
/>
153-
<div className='pl-20 md:pl-0'>
154-
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>Automerge</h2>
155-
<p>CRDT-powered collaborative documents</p>
156-
</div>
157-
</GlowCard>
158-
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
159-
<h1 className='text-2xl mb-2 text-irohGray-500'>Browse all protocols</h1>
160-
<ArrowRightIcon className='w-10 h-10' />
161-
</GlowCard>
162-
</div>
86+
<ProtocolHeroList />
16387
</div>
16488
</section>
16589

‎src/components/ProtocolHeroList.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Image from 'next/image'
2+
import { ArrowRightIcon } from '@heroicons/react/24/outline'
3+
4+
import {protocols} from '@/protocols'
5+
import {GlowCard} from '@/components/GlowCard';
6+
7+
import iconCarat from '@/images/icons/icon_carat.svg';
8+
import iconFaster from '@/images/icons/icon_faster.svg';
9+
import iconOpen from '@/images/icons/icon_open.svg';
10+
import iconPlatforms from '@/images/icons/icon_platforms.svg';
11+
12+
const icons = {
13+
iconCarat,
14+
iconFaster,
15+
iconOpen,
16+
iconPlatforms
17+
}
18+
19+
export const ProtocolHeroList = function ProtocolHeroList() {
20+
return (
21+
<div className='md:grid md:grid-cols-4 border-l border-t border-irohGray-300 dark:border-irohGray-800'>
22+
{protocols.map((proto, i) => (
23+
<GlowCard key={i} className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
24+
<Image
25+
src={icons[proto.icon]}
26+
alt=""
27+
className="h-12 w-12 float-left md:float-none"
28+
unoptimized
29+
/>
30+
<div className='pl-20 md:pl-0'>
31+
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>{proto.title}</h2>
32+
<p className=''>{proto.tagline}</p>
33+
</div>
34+
</GlowCard>
35+
))}
36+
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
37+
<h1 className='text-2xl mb-2 text-irohGray-500'>Browse all protocols</h1>
38+
<ArrowRightIcon className='w-10 h-10' />
39+
</GlowCard>
40+
</div>
41+
)
42+
}

‎src/protocols.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const protocols = [
2+
{
3+
"icon": "iconOpen",
4+
"title": "Blobs",
5+
"tagline": "Resumable, verifiable data transfer"
6+
},
7+
{
8+
"icon": "iconPlatforms",
9+
"title": "Gossip",
10+
"tagline": "Broadcast messages to groups of nodes by topic."
11+
},
12+
// {
13+
// "icon": "iconOpen",
14+
// "title": "DMs",
15+
// "tagline": "Simple node-to-node message passing"
16+
// },
17+
{
18+
"icon": "iconFaster",
19+
"title": "Documents",
20+
"tagline": "Realtime, multiwriter, key-value sync"
21+
},
22+
// {
23+
// "icon": "iconFaster",
24+
// "title": "Willow",
25+
// "tagline": "multiwriter, key-value sync with fine-grained access control"
26+
// },
27+
// {
28+
// "icon": "iconFaster",
29+
// "title": "Automerge",
30+
// "tagline": "CRDT-powered collaborative documents"
31+
// }
32+
]

0 commit comments

Comments
 (0)