Skip to content

Commit 3131a03

Browse files
corwintinescorwintines
authored
Merge pull request #11807 from ethereum/new-illustrations
Add new guides image and image assets to /assets
2 parents 9b3c67a + 82ffc7b commit 3131a03

5 files changed

Lines changed: 171 additions & 39 deletions

File tree

‎src/assets/heroes/garden.jpg‎

842 KB
Loading

‎src/assets/heroes/guides-hub-hero.jpg‎

847 KB
Loading

‎src/intl/en/page-assets.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,13 @@
4949
"page-assets-page-assets-transparent-background": "Transparent background",
5050
"page-assets-robot": "Robot wallet",
5151
"page-assets-sharding": "Sharding",
52-
"page-assets-hackathon": "Hackathon"
52+
"page-assets-hackathon": "Hackathon",
53+
"page-assets-learn-hero-name": "Futuristic university",
54+
"page-assets-community-hero-name": "Community gathering",
55+
"page-assets-quizzes-hero-name": "Infinite playground",
56+
"page-assets-developers-hero-name": "Building the future",
57+
"page-assets-garden-name": "Garden of Ethereum",
58+
"page-assets-roadmap-hero-name": "Road(s) to the future",
59+
"page-assets-layer-2-hero-name": "Constructing Ethereum",
60+
"page-assets-guides-hero-name": "Ethereum lab"
5361
}

‎src/pages/assets.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,70 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
113113
artistUrl="https://liamcobb.com/"
114114
/>
115115
</Row>
116+
<Row>
117+
<AssetDownload
118+
title={t("page-assets-learn-hero-name")}
119+
alt={t("page-assets-learn-hero-name")}
120+
image={data.learnHero}
121+
artistName="Liam Cobb"
122+
artistUrl="https://liamcobb.com/"
123+
/>
124+
<AssetDownload
125+
title={t("page-assets-community-hero-name")}
126+
alt={t("page-assets-community-hero-name")}
127+
image={data.communityHero}
128+
artistName="Liam Cobb"
129+
artistUrl="https://liamcobb.com/"
130+
/>
131+
</Row>
132+
<Row>
133+
<AssetDownload
134+
title={t("page-assets-quizzes-hero-name")}
135+
alt={t("page-assets-quizzes-hero-name")}
136+
image={data.quizzesHub}
137+
artistName="Liam Cobb"
138+
artistUrl="https://liamcobb.com/"
139+
/>
140+
<AssetDownload
141+
title={t("page-assets-developers-hero-name")}
142+
alt={t("page-assets-developers-hero-name")}
143+
image={data.developersHero}
144+
artistName="Liam Cobb"
145+
artistUrl="https://liamcobb.com/"
146+
/>
147+
</Row>
148+
<Row>
149+
<AssetDownload
150+
title={t("page-assets-garden-name")}
151+
alt={t("page-assets-garden-name")}
152+
image={data.garden}
153+
artistName="Liam Cobb"
154+
artistUrl="https://liamcobb.com/"
155+
/>
156+
<AssetDownload
157+
title={t("page-assets-roadmap-hero-name")}
158+
alt={t("page-assets-roadmap-hero-name")}
159+
image={data.roadmapHero}
160+
artistName="Liam Cobb"
161+
artistUrl="https://liamcobb.com/"
162+
/>
163+
</Row>
164+
<Row>
165+
<AssetDownload
166+
title={t("page-assets-layer-2-hero-name")}
167+
alt={t("page-assets-layer-2-hero-name")}
168+
image={data.layer2Hero}
169+
artistName="Liam Cobb"
170+
artistUrl="https://liamcobb.com/"
171+
/>
172+
<AssetDownload
173+
title={t("page-assets-guides-hero-name")}
174+
alt={t("page-assets-guides-hero-name")}
175+
image={data.guidesHero}
176+
artistName="Liam Cobb"
177+
artistUrl="https://liamcobb.com/"
178+
/>
179+
</Row>
116180
<Row>
117181
<AssetDownload
118182
title={t("page-assets-doge")}
@@ -702,5 +766,31 @@ export const query = graphql`
702766
) {
703767
...assetItem
704768
}
769+
communityHero: file(relativePath: { eq: "heroes/community-hero.png" }) {
770+
...assetItem
771+
}
772+
developersHero: file(
773+
relativePath: { eq: "heroes/developers-hub-hero.jpg" }
774+
) {
775+
...assetItem
776+
}
777+
garden: file(relativePath: { eq: "heroes/garden.jpg" }) {
778+
...assetItem
779+
}
780+
guidesHero: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
781+
...assetItem
782+
}
783+
layer2Hero: file(relativePath: { eq: "heroes/layer-2-hub-hero.jpg" }) {
784+
...assetItem
785+
}
786+
learnHero: file(relativePath: { eq: "heroes/learn-hub-hero.png" }) {
787+
...assetItem
788+
}
789+
quizzesHub: file(relativePath: { eq: "heroes/quizzes-hub-hero.png" }) {
790+
...assetItem
791+
}
792+
roadmapHero: file(relativePath: { eq: "heroes/roadmap-hub-hero.jpg" }) {
793+
...assetItem
794+
}
705795
}
706796
`

‎src/templates/static.tsx‎

Lines changed: 72 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ import { Lang } from "../utils/languages"
5555

5656
import { ChildOnlyProp, Context } from "../types"
5757

58+
import { HubHero } from "../components/Hero"
59+
import { getImage } from "gatsby-plugin-image"
60+
5861
const Pre = (props: ChildOnlyProp) => (
5962
<Text
6063
as="pre"
@@ -215,7 +218,7 @@ const components = {
215218
}
216219

217220
const StaticPage = ({
218-
data: { siteData, pageData: mdx },
221+
data: { siteData, pageData: mdx, heroImage },
219222
pageContext: { relativePath, slug },
220223
location,
221224
}: PageProps<Queries.StaticPageQuery, Context>) => {
@@ -246,6 +249,14 @@ const StaticPage = ({
246249
const { editContentUrl } = siteData.siteMetadata || {}
247250
const absoluteEditPath = `${editContentUrl}${relativePath}`
248251

252+
const parsedPathname = location.pathname
253+
.split("/")
254+
.filter((item) => item !== "")
255+
.slice(1)
256+
.join("/")
257+
258+
console.log(parsedPathname)
259+
249260
return (
250261
<Box w="full">
251262
{showPostMergeBanner && (
@@ -267,46 +278,59 @@ const StaticPage = ({
267278
title={mdx.frontmatter.title}
268279
description={mdx.frontmatter.description}
269280
/>
270-
<Box
271-
as="article"
272-
maxW="container.md"
273-
w="full"
274-
sx={{
275-
".featured": {
276-
pl: 4,
277-
ml: -4,
278-
borderLeft: "1px dotted",
279-
borderLeftColor: "primary.base",
280-
},
281+
<Box>
282+
{parsedPathname === "guides" ? (
283+
<HubHero
284+
heroImgSrc={getImage(heroImage)!}
285+
header={mdx.frontmatter.title}
286+
title={""}
287+
description={mdx.frontmatter.description}
288+
/>
289+
) : (
290+
<>
291+
<Breadcrumbs slug={slug} mb="8" />
292+
<Text
293+
color="text200"
294+
dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
295+
>
296+
<Translation id="page-last-updated" />:{" "}
297+
{getLocaleTimestamp(language as Lang, lastUpdatedDate)}
298+
</Text>
299+
</>
300+
)}
301+
<Box
302+
as="article"
303+
maxW="container.md"
304+
w="full"
305+
sx={{
306+
".featured": {
307+
pl: 4,
308+
ml: -4,
309+
borderLeft: "1px dotted",
310+
borderLeftColor: "primary.base",
311+
},
281312

282-
".citation": {
283-
p: {
284-
color: "text200",
313+
".citation": {
314+
p: {
315+
color: "text200",
316+
},
285317
},
286-
},
287-
}}
288-
>
289-
<Breadcrumbs slug={slug} mb="8" />
290-
<Text
291-
color="text200"
292-
dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
318+
}}
293319
>
294-
<Translation id="page-last-updated" />:{" "}
295-
{getLocaleTimestamp(language as Lang, lastUpdatedDate)}
296-
</Text>
297-
<TableOfContents
298-
position="relative"
299-
zIndex={2}
300-
editPath={absoluteEditPath}
301-
items={tocItems}
302-
isMobile
303-
maxDepth={mdx.frontmatter.sidebarDepth!}
304-
hideEditButton={!!mdx.frontmatter.hideEditButton}
305-
/>
306-
<MDXProvider components={components}>
307-
<MDXRenderer>{mdx.body}</MDXRenderer>
308-
</MDXProvider>
309-
<FeedbackCard isArticle />
320+
<TableOfContents
321+
position="relative"
322+
zIndex={2}
323+
editPath={absoluteEditPath}
324+
items={tocItems}
325+
isMobile
326+
maxDepth={mdx.frontmatter.sidebarDepth!}
327+
hideEditButton={!!mdx.frontmatter.hideEditButton}
328+
/>
329+
<MDXProvider components={components}>
330+
<MDXRenderer>{mdx.body}</MDXRenderer>
331+
</MDXProvider>
332+
<FeedbackCard isArticle />
333+
</Box>
310334
</Box>
311335
{tocItems && (
312336
<TableOfContents
@@ -346,6 +370,16 @@ export const staticPageQuery = graphql`
346370
}
347371
}
348372
}
373+
heroImage: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
374+
childImageSharp {
375+
gatsbyImageData(
376+
width: 1504
377+
layout: CONSTRAINED
378+
placeholder: BLURRED
379+
quality: 100
380+
)
381+
}
382+
}
349383
siteData: site {
350384
siteMetadata {
351385
editContentUrl

0 commit comments

Comments
 (0)