@@ -2,7 +2,7 @@ import { NetworkType } from '@pinax/graph-networks-registry'
22import { useData } from 'nextra/hooks'
33import type { ComponentPropsWithoutRef } from 'react'
44
5- import { classNames , Link as LegacyLink , Tooltip } from '@edgeandnode/gds'
5+ import { classNames , ExperimentalLink , Tooltip } from '@edgeandnode/gds'
66import {
77 Clock ,
88 Firehose ,
@@ -15,7 +15,7 @@ import {
1515} from '@edgeandnode/gds/icons'
1616import { NetworkIcon } from '@edgeandnode/go'
1717
18- import { Card , Heading , Link } from '@/components'
18+ import { Card , Heading } from '@/components'
1919import { useI18n } from '@/i18n'
2020import { getSupportedNetworks } from '@/supportedNetworks'
2121
@@ -25,7 +25,7 @@ export default function HomePage() {
2525 return (
2626 < >
2727 < div className = "graph-docs-not-markdown grid grid-cols-subgrid" >
28- < div className = "pointer-events-none absolute inset-x-0 -top-8 flex h-72 justify-center xs:h-90" >
28+ < div className = "absolute inset-x-0 -top-8 flex h-72 justify-center pointer-events-none xs:h-90" >
2929 < img alt = "" src = { `${ process . env . BASE_PATH } } className = "h-full max-w-none" />
3030 </ div >
3131 < div className = "col-[container] py-20 xs:py-30" >
@@ -50,9 +50,13 @@ export default function HomePage() {
5050 < Card
5151 title = { t ( 'index.products.subgraphs.title' ) }
5252 description = { t ( 'index.products.subgraphs.description' ) }
53- cta = { < Link href = "/subgraphs/quick-start/" > { t ( 'index.products.subgraphs.cta' ) } </ Link > }
53+ cta = {
54+ < ExperimentalLink href = "/subgraphs/quick-start/" >
55+ { t ( 'index.products.subgraphs.cta' ) }
56+ </ ExperimentalLink >
57+ }
5458 icon = {
55- < div className = "top-0.5 flex size-8 items-center justify-center rounded-4 bg-purple text-white" >
59+ < div className = "flex size-8 items-center justify-center rounded-4 bg-purple text-white" >
5660 < Subgraph size = { 4 } />
5761 </ div >
5862 }
@@ -61,9 +65,13 @@ export default function HomePage() {
6165 < Card
6266 title = { t ( 'index.products.substreams.title' ) }
6367 description = { t ( 'index.products.substreams.description' ) }
64- cta = { < Link href = "/substreams/quick-start/" > { t ( 'index.products.substreams.cta' ) } </ Link > }
68+ cta = {
69+ < ExperimentalLink href = "/substreams/quick-start/" >
70+ { t ( 'index.products.substreams.cta' ) }
71+ </ ExperimentalLink >
72+ }
6573 icon = {
66- < div className = "top-0.5 flex size-8 items-center justify-center rounded-4 bg-pink text-white" >
74+ < div className = "flex size-8 items-center justify-center rounded-4 bg-pink text-white" >
6775 < Substreams size = { 4 } />
6876 </ div >
6977 }
@@ -74,29 +82,37 @@ export default function HomePage() {
7482 < Card
7583 title = { t ( 'index.products.sps.title' ) }
7684 description = { t ( 'index.products.sps.description' ) }
77- cta = { < Link href = "/sps/tutorial/" > { t ( 'index.products.sps.cta' ) } </ Link > }
85+ cta = { < ExperimentalLink href = "/sps/tutorial/" > { t ( 'index.products.sps.cta' ) } </ ExperimentalLink > }
7886 icon = {
79- < div className = "flex size-8 items-center justify-center rounded-4 bg-white-8 text-white" >
87+ < div className = "flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white" >
8088 < SubstreamsPoweredSubgraph size = { 4 } />
8189 </ div >
8290 }
8391 />
8492 < Card
8593 title = { t ( 'index.products.graphNode.title' ) }
8694 description = { t ( 'index.products.graphNode.description' ) }
87- cta = { < Link href = "/indexing/tooling/graph-node/" > { t ( 'index.products.graphNode.cta' ) } </ Link > }
95+ cta = {
96+ < ExperimentalLink href = "/indexing/tooling/graph-node/" >
97+ { t ( 'index.products.graphNode.cta' ) }
98+ </ ExperimentalLink >
99+ }
88100 icon = {
89- < div className = "flex size-8 items-center justify-center rounded-4 bg-white-8 text-white" >
101+ < div className = "flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white" >
90102 < GraphNode size = { 4 } />
91103 </ div >
92104 }
93105 />
94106 < Card
95107 title = { t ( 'index.products.firehose.title' ) }
96108 description = { t ( 'index.products.firehose.description' ) }
97- cta = { < Link href = "/indexing/tooling/firehose/" > { t ( 'index.products.firehose.cta' ) } </ Link > }
109+ cta = {
110+ < ExperimentalLink href = "/indexing/tooling/firehose/" >
111+ { t ( 'index.products.firehose.cta' ) }
112+ </ ExperimentalLink >
113+ }
98114 icon = {
99- < div className = "flex size-8 items-center justify-center rounded-4 bg-white-8 text-white" >
115+ < div className = "flex size-8 items-center justify-center rounded-4 bg-space-1400 text-white" >
100116 < Firehose size = { 4 } />
101117 </ div >
102118 }
@@ -111,12 +127,12 @@ export default function HomePage() {
111127 < Heading . H2 id = "supported-networks" > { t ( 'index.supportedNetworks.title' ) } </ Heading . H2 >
112128 < p >
113129 { t ( 'index.supportedNetworks.description.base' , [
114- < Link key = "link-1" href = "/supported-networks/" >
130+ < ExperimentalLink key = "link-1" href = "/supported-networks/" >
115131 90+ { t ( 'index.supportedNetworks.description.networks' ) }
116- </ Link > ,
117- < Link key = "link" href = "https://edgeandnode.typeform.com/to/b3507xSL" >
132+ </ ExperimentalLink > ,
133+ < ExperimentalLink key = "link" href = "https://edgeandnode.typeform.com/to/b3507xSL" >
118134 { t ( 'index.supportedNetworks.description.completeThisForm' ) }
119- </ Link > ,
135+ </ ExperimentalLink > ,
120136 ] ) }
121137 </ p >
122138 < SupportedNetworks className = "mt-8" />
@@ -130,50 +146,50 @@ export default function HomePage() {
130146 < div className = "graph-docs-not-markdown mt-8 grid gap-4" >
131147 < div className = "grid grid-cols-1 gap-4 lg:grid-cols-3" >
132148 < Card
149+ href = "/subgraphs/explorer/"
133150 title = { t ( 'index.guides.explorer.title' ) }
134151 description = { t ( 'index.guides.explorer.description' ) }
135- href = "/subgraphs/explorer/"
136152 icon = { < GraphExplorer alt = "" /> }
137153 slotAboveTitle = { < Time variant = "reading" minutes = { 10 } /> }
138154 />
139155 < Card
156+ href = "/subgraphs/developing/publishing/publishing-a-subgraph/"
140157 title = { t ( 'index.guides.publishASubgraph.title' ) }
141158 description = { t ( 'index.guides.publishASubgraph.description' ) }
142- href = "/subgraphs/developing/publishing/publishing-a-subgraph/"
143159 icon = { < Subgraph alt = "" /> }
144160 slotAboveTitle = { < Time variant = "reading" minutes = { 3 } /> }
145161 />
146162 < Card
163+ href = "/substreams/publishing/"
147164 title = { t ( 'index.guides.publishSubstreams.title' ) }
148165 description = { t ( 'index.guides.publishSubstreams.description' ) }
149- href = "/substreams/publishing/"
150166 icon = { < Substreams alt = "" /> }
151167 slotAboveTitle = { < Time variant = "duration" minutes = { 3 } /> }
152168 />
153169 </ div >
154170 < div className = "grid grid-cols-1 gap-4 lg:grid-cols-2" >
155171 < Card
172+ href = "/subgraphs/querying/best-practices/"
156173 title = { t ( 'index.guides.queryingBestPractices.title' ) }
157174 description = { t ( 'index.guides.queryingBestPractices.description' ) }
158- href = "/subgraphs/querying/best-practices/"
159175 slotAboveTitle = { < Time variant = "reading" minutes = { 9 } /> }
160176 />
161177 < Card
178+ href = "/subgraphs/cookbook/timeseries/"
162179 title = { t ( 'index.guides.timeseries.title' ) }
163180 description = { t ( 'index.guides.timeseries.description' ) }
164- href = "/subgraphs/cookbook/timeseries/"
165181 slotAboveTitle = { < Time variant = "reading" minutes = { 4 } /> }
166182 />
167183 < Card
184+ href = "/subgraphs/querying/managing-api-keys/"
168185 title = { t ( 'index.guides.apiKeyManagement.title' ) }
169186 description = { t ( 'index.guides.apiKeyManagement.description' ) }
170- href = "/subgraphs/querying/managing-api-keys/"
171187 slotAboveTitle = { < Time variant = "reading" minutes = { 2 } /> }
172188 />
173189 < Card
190+ href = "/subgraphs/cookbook/transfer-to-the-graph/"
174191 title = { t ( 'index.guides.transferToTheGraph.title' ) }
175192 description = { t ( 'index.guides.transferToTheGraph.description' ) }
176- href = "/subgraphs/cookbook/transfer-to-the-graph/"
177193 slotAboveTitle = { < Time variant = "reading" minutes = { 3 } /> }
178194 />
179195 </ div >
@@ -187,38 +203,35 @@ export default function HomePage() {
187203 < Heading . H2 id = "videos" className = "+:m-0" >
188204 { t ( 'index.videos.title' ) }
189205 </ Heading . H2 >
190- { /* TODO: Use `ExperimentalLink` */ }
191- < LegacyLink
192- variant = "secondary"
206+ < ExperimentalLink
193207 href = "https://www.youtube.com/@GraphProtocol"
194208 target = "_blank"
195- size = "14px"
196- className = "- top-1 "
209+ iconBefore = { < SocialYouTube alt = "" /> }
210+ className = "top-[-3px] text-14 text-space-200 "
197211 >
198- < SocialYouTube alt = "" className = "+:max-lg:hidden" />
199212 < span className = "max-lg:hidden" > { t ( 'index.videos.watchOnYouTube' ) } </ span >
200213 < span className = "lg:hidden" > YouTube</ span >
201- </ LegacyLink >
214+ </ ExperimentalLink >
202215 </ div >
203216 < div className = "graph-docs-not-markdown mt-8 grid grid-cols-1 gap-4" >
204217 < Card
218+ href = "https://www.youtube.com/watch?v=hn-sJUpZ_aM"
205219 title = { t ( 'index.videos.theGraphExplained.title' ) }
206220 description = { t ( 'index.videos.theGraphExplained.description' ) }
207- href = "https://www.youtube.com/watch?v=hn-sJUpZ_aM"
208221 slotBelowDescription = { < Time variant = "duration" minutes = { 1 } className = "mt-1" /> }
209222 videoThumbnailSrc = { `${ process . env . BASE_PATH } }
210223 />
211224 < Card
225+ href = "https://www.youtube.com/watch?v=VACg8bitnVc"
212226 title = { t ( 'index.videos.whatIsDelegating.title' ) }
213227 description = { t ( 'index.videos.whatIsDelegating.description' ) }
214- href = "https://www.youtube.com/watch?v=VACg8bitnVc"
215228 slotBelowDescription = { < Time variant = "duration" minutes = { 4 } className = "mt-1" /> }
216229 videoThumbnailSrc = { `${ process . env . BASE_PATH } }
217230 />
218231 < Card
232+ href = "https://www.youtube.com/watch?v=RmKi-Nq9E_A"
219233 title = { t ( 'index.videos.howToIndexSolana.title' ) }
220234 description = { t ( 'index.videos.howToIndexSolana.description' ) }
221- href = "https://www.youtube.com/watch?v=RmKi-Nq9E_A"
222235 slotBelowDescription = { < Time variant = "duration" minutes = { 5 } className = "mt-1" /> }
223236 videoThumbnailSrc = { `${ process . env . BASE_PATH } }
224237 />
@@ -237,7 +250,7 @@ interface TimeProps extends ComponentPropsWithoutRef<'div'> {
237250function Time ( { variant, minutes, className, ...props } : TimeProps ) {
238251 const { t } = useI18n ( )
239252 return (
240- < div className = { classNames ( [ 'flex items-center gap-1' , className ] ) } { ...props } >
253+ < div className = { classNames ( [ 'flex items-center gap-1 leading-none ' , className ] ) } { ...props } >
241254 < Clock
242255 alt = { variant === 'reading' ? t ( 'index.time.reading' ) : t ( 'index.time.duration' ) }
243256 variant = "fill"
@@ -253,10 +266,10 @@ function SupportedNetworks({ className, ...props }: ComponentPropsWithoutRef<'di
253266
254267 return (
255268 < div
256- className = { classNames ( [ 'graph-docs-not-markdown overflow-clip rounded-8 border border-white/8 ' , className ] ) }
269+ className = { classNames ( [ 'graph-docs-not-markdown overflow-clip rounded-8 border border-space-1500 ' , className ] ) }
257270 { ...props }
258271 >
259- < ul className = "grid grid-cols-auto-fill-16 gap-px text-white/64 " >
272+ < ul className = "grid grid-cols-auto-fill-16 gap-px text-space-500 " >
260273 { supportedNetworks
261274 // TODO: Don't filter out testnets that don't have a mainnet
262275 . filter ( ( network ) => network . networkType === NetworkType . Mainnet )
@@ -270,12 +283,7 @@ function SupportedNetworks({ className, ...props }: ComponentPropsWithoutRef<'di
270283 . filter ( ( network ) => network . id !== 'zora' )
271284 . map ( ( network ) => (
272285 < Tooltip key = { network . id } content = { network . shortName } >
273- < li
274- className = { `
275- -mb-px -mr-px flex aspect-square items-center justify-center border-b border-r border-white/8
276- bg-clip-padding transition hover:bg-white/8
277- ` }
278- >
286+ < li className = "-mb-px -mr-px flex aspect-square items-center justify-center border-b border-r border-space-1500 transition hover:bg-space-1600" >
279287 < NetworkIcon caip2Id = { network . caip2Id as any } size = { 6 } />
280288 </ li >
281289 </ Tooltip >
0 commit comments