Skip to content

Commit

Permalink
Merge pull request #11807 from ethereum/new-illustrations
Browse files Browse the repository at this point in the history 
Add new guides image and image assets to /assets
  • Loading branch information
@corwintines
corwintines authored Dec 15, 2023
2 parents 9b3c67a + 82ffc7b commit 3131a03
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 39 deletions.
Binary file added src/assets/heroes/garden.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/heroes/guides-hub-hero.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 9 additions & 1 deletion src/intl/en/page-assets.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,5 +49,13 @@
"page-assets-page-assets-transparent-background": "Transparent background",
"page-assets-robot": "Robot wallet",
"page-assets-sharding": "Sharding",
"page-assets-hackathon": "Hackathon"
"page-assets-hackathon": "Hackathon",
"page-assets-learn-hero-name": "Futuristic university",
"page-assets-community-hero-name": "Community gathering",
"page-assets-quizzes-hero-name": "Infinite playground",
"page-assets-developers-hero-name": "Building the future",
"page-assets-garden-name": "Garden of Ethereum",
"page-assets-roadmap-hero-name": "Road(s) to the future",
"page-assets-layer-2-hero-name": "Constructing Ethereum",
"page-assets-guides-hero-name": "Ethereum lab"
}
90 changes: 90 additions & 0 deletions src/pages/assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,70 @@ const AssetsPage = ({ data }: PageProps<Queries.AssetsPageQuery, Context>) => {
artistUrl="https://liamcobb.com/"
/>
</Row>
<Row>
<AssetDownload
title={t("page-assets-learn-hero-name")}
alt={t("page-assets-learn-hero-name")}
image={data.learnHero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
<AssetDownload
title={t("page-assets-community-hero-name")}
alt={t("page-assets-community-hero-name")}
image={data.communityHero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
</Row>
<Row>
<AssetDownload
title={t("page-assets-quizzes-hero-name")}
alt={t("page-assets-quizzes-hero-name")}
image={data.quizzesHub}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
<AssetDownload
title={t("page-assets-developers-hero-name")}
alt={t("page-assets-developers-hero-name")}
image={data.developersHero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
</Row>
<Row>
<AssetDownload
title={t("page-assets-garden-name")}
alt={t("page-assets-garden-name")}
image={data.garden}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
<AssetDownload
title={t("page-assets-roadmap-hero-name")}
alt={t("page-assets-roadmap-hero-name")}
image={data.roadmapHero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
</Row>
<Row>
<AssetDownload
title={t("page-assets-layer-2-hero-name")}
alt={t("page-assets-layer-2-hero-name")}
image={data.layer2Hero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
<AssetDownload
title={t("page-assets-guides-hero-name")}
alt={t("page-assets-guides-hero-name")}
image={data.guidesHero}
artistName="Liam Cobb"
artistUrl="https://liamcobb.com/"
/>
</Row>
<Row>
<AssetDownload
title={t("page-assets-doge")}
Expand Down Expand Up @@ -702,5 +766,31 @@ export const query = graphql`
) {
...assetItem
}
communityHero: file(relativePath: { eq: "heroes/community-hero.png" }) {
...assetItem
}
developersHero: file(
relativePath: { eq: "heroes/developers-hub-hero.jpg" }
) {
...assetItem
}
garden: file(relativePath: { eq: "heroes/garden.jpg" }) {
...assetItem
}
guidesHero: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
...assetItem
}
layer2Hero: file(relativePath: { eq: "heroes/layer-2-hub-hero.jpg" }) {
...assetItem
}
learnHero: file(relativePath: { eq: "heroes/learn-hub-hero.png" }) {
...assetItem
}
quizzesHub: file(relativePath: { eq: "heroes/quizzes-hub-hero.png" }) {
...assetItem
}
roadmapHero: file(relativePath: { eq: "heroes/roadmap-hub-hero.jpg" }) {
...assetItem
}
}
`
110 changes: 72 additions & 38 deletions src/templates/static.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@ import { Lang } from "../utils/languages"

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

import { HubHero } from "../components/Hero"
import { getImage } from "gatsby-plugin-image"

const Pre = (props: ChildOnlyProp) => (
<Text
as="pre"
Expand Down Expand Up @@ -215,7 +218,7 @@ const components = {
}

const StaticPage = ({
data: { siteData, pageData: mdx },
data: { siteData, pageData: mdx, heroImage },
pageContext: { relativePath, slug },
location,
}: PageProps<Queries.StaticPageQuery, Context>) => {
Expand Down Expand Up @@ -246,6 +249,14 @@ const StaticPage = ({
const { editContentUrl } = siteData.siteMetadata || {}
const absoluteEditPath = `${editContentUrl}${relativePath}`

const parsedPathname = location.pathname
.split("/")
.filter((item) => item !== "")
.slice(1)
.join("/")

console.log(parsedPathname)

return (
<Box w="full">
{showPostMergeBanner && (
Expand All @@ -267,46 +278,59 @@ const StaticPage = ({
title={mdx.frontmatter.title}
description={mdx.frontmatter.description}
/>
<Box
as="article"
maxW="container.md"
w="full"
sx={{
".featured": {
pl: 4,
ml: -4,
borderLeft: "1px dotted",
borderLeftColor: "primary.base",
},
<Box>
{parsedPathname === "guides" ? (
<HubHero
heroImgSrc={getImage(heroImage)!}
header={mdx.frontmatter.title}
title={""}
description={mdx.frontmatter.description}
/>
) : (
<>
<Breadcrumbs slug={slug} mb="8" />
<Text
color="text200"
dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
>
<Translation id="page-last-updated" />:{" "}
{getLocaleTimestamp(language as Lang, lastUpdatedDate)}
</Text>
</>
)}
<Box
as="article"
maxW="container.md"
w="full"
sx={{
".featured": {
pl: 4,
ml: -4,
borderLeft: "1px dotted",
borderLeftColor: "primary.base",
},

".citation": {
p: {
color: "text200",
".citation": {
p: {
color: "text200",
},
},
},
}}
>
<Breadcrumbs slug={slug} mb="8" />
<Text
color="text200"
dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}
}}
>
<Translation id="page-last-updated" />:{" "}
{getLocaleTimestamp(language as Lang, lastUpdatedDate)}
</Text>
<TableOfContents
position="relative"
zIndex={2}
editPath={absoluteEditPath}
items={tocItems}
isMobile
maxDepth={mdx.frontmatter.sidebarDepth!}
hideEditButton={!!mdx.frontmatter.hideEditButton}
/>
<MDXProvider components={components}>
<MDXRenderer>{mdx.body}</MDXRenderer>
</MDXProvider>
<FeedbackCard isArticle />
<TableOfContents
position="relative"
zIndex={2}
editPath={absoluteEditPath}
items={tocItems}
isMobile
maxDepth={mdx.frontmatter.sidebarDepth!}
hideEditButton={!!mdx.frontmatter.hideEditButton}
/>
<MDXProvider components={components}>
<MDXRenderer>{mdx.body}</MDXRenderer>
</MDXProvider>
<FeedbackCard isArticle />
</Box>
</Box>
{tocItems && (
<TableOfContents
Expand Down Expand Up @@ -346,6 +370,16 @@ export const staticPageQuery = graphql`
}
}
}
heroImage: file(relativePath: { eq: "heroes/guides-hub-hero.jpg" }) {
childImageSharp {
gatsbyImageData(
width: 1504
layout: CONSTRAINED
placeholder: BLURRED
quality: 100
)
}
}
siteData: site {
siteMetadata {
editContentUrl
Expand Down

0 comments on commit 3131a03

Please sign in to comment.