Skip to content

Commit baaf8d1

Browse files
corwintinescorwintines
authored
Merge pull request #15265 from ethereum/devStaging
Dev staging
2 parents 60b05bf + 4cc06f1 commit baaf8d1

File tree

4 files changed

+152
-101
lines changed

4 files changed

+152
-101
lines changed

‎app/[locale]/_components/home.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,11 @@ const HomePage = ({
260260
href="/resources/"
261261
isSecondary
262262
variant="outline"
263+
customEventOptions={{
264+
eventCategory: eventCategory,
265+
eventAction: "ethereum_activity",
266+
eventName: "ethereum_activity",
267+
}}
263268
>
264269
{t("page-index:page-index-activity-action")} <ChevronNext />
265270
</ButtonLink>

‎app/[locale]/resources/_components/resources.tsx

Lines changed: 140 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ResourceItem, ResourcesContainer } from "@/components/Resources"
1313
import { useResources } from "@/components/Resources/useResources"
1414
import Translation from "@/components/Translation"
1515
import { ButtonLink } from "@/components/ui/buttons/Button"
16+
import { Stack, VStack } from "@/components/ui/flex"
1617
import Link from "@/components/ui/Link"
1718
import { Section } from "@/components/ui/section"
1819

@@ -23,11 +24,12 @@ import { GITHUB_REPO_URL } from "@/lib/constants"
2324
import { useActiveHash } from "@/hooks/useActiveHash"
2425
import { useTranslation } from "@/hooks/useTranslation"
2526
import heroImg from "@/public/images/heroes/guides-hub-hero.jpg"
26-
2727
interface ResourcesPageProps {
2828
txCostsMedianUsd: MetricReturnData
2929
}
3030

31+
const EVENT_CATEGORY = "dashboard"
32+
3133
const ResourcesPage = ({ txCostsMedianUsd }: ResourcesPageProps) => {
3234
const { t } = useTranslation("page-resources")
3335
const resourceSections = useResources({ txCostsMedianUsd })
@@ -46,6 +48,11 @@ const ResourcesPage = ({ txCostsMedianUsd }: ResourcesPageProps) => {
4648
GITHUB_REPO_URL
4749
).toString()}
4850
className="visited:text-white"
51+
customEventOptions={{
52+
eventCategory: EVENT_CATEGORY,
53+
eventAction: "links",
54+
eventName: "Ethereum.org Github Page Feedback",
55+
}}
4956
>
5057
{t("page-resources-share-feedback")}
5158
</Link>
@@ -57,112 +64,146 @@ const ResourcesPage = ({ txCostsMedianUsd }: ResourcesPageProps) => {
5764
description={t("page-resources-hero-description")}
5865
heroImg={heroImg}
5966
/>
60-
61-
<div className="sticky top-1 my-8 flex flex-col items-center gap-3 py-4 text-center md:top-6 md:px-2">
62-
<div className="my-2 text-body-medium">
63-
{t("page-resources-whats-on-this-page")}
64-
</div>
65-
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
66-
{resourceSections.map(({ key, title, icon }) => (
67-
<ButtonLink
68-
key={key}
69-
href={`#${key}`}
70-
variant="ghost"
71-
isSecondary
72-
className={cn(
73-
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
74-
activeSection === key && "!text-primary"
75-
)}
76-
>
77-
{activeSection === key && (
78-
<motion.div
79-
layoutId="active-section-highlight"
80-
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
81-
/>
82-
)}
83-
{icon && <span className="z-10 text-lg">{icon}</span>}
84-
<span className="relative z-10">{title}</span>
85-
</ButtonLink>
86-
))}
87-
</nav>
88-
</div>
89-
90-
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
91-
<section id={key} key={key} className="mb-16 scroll-mt-40">
92-
<div className="group flex w-full items-center gap-3 border-b bg-transparent px-4 py-6">
93-
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
94-
{icon || <StackIcon />}
95-
</div>
96-
<h2 className="flex-1 text-start font-black">{sectionTitle}</h2>
67+
<Stack className="gap-4 px-2 py-6 md:gap-8 md:px-4 lg:px-8 xl:gap-11">
68+
<div className="sticky top-5 flex flex-col items-center gap-3 text-center md:top-6 md:px-2">
69+
<div className="my-2 text-body-medium">
70+
{t("page-resources-whats-on-this-page")}
9771
</div>
98-
<div className="grid grid-cols-1 gap-8 px-4 pb-12 pt-8 md:pb-12 md:pt-8 lg:grid-cols-2">
99-
{boxes.map(({ title, metric, items, className }) => (
100-
<div
72+
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
73+
{resourceSections.map(({ key, title, icon }) => (
74+
<ButtonLink
75+
key={key}
76+
href={`#${key}`}
77+
variant="ghost"
78+
isSecondary
10179
className={cn(
102-
"overflow-hidden rounded-2xl border shadow-lg",
103-
className
80+
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
81+
activeSection === key && "!text-primary"
10482
)}
105-
key={title}
83+
customEventOptions={{
84+
eventCategory: EVENT_CATEGORY,
85+
eventAction: "whats_on_this_page",
86+
eventName: key,
87+
}}
10688
>
107-
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
108-
{title}
89+
{activeSection === key && (
90+
<motion.div
91+
layoutId="active-section-highlight"
92+
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
93+
/>
94+
)}
95+
{icon && <span className="z-10 text-lg">{icon}</span>}
96+
<span className="relative z-10">{title}</span>
97+
</ButtonLink>
98+
))}
99+
</nav>
100+
</div>
101+
<Stack className="gap-11 pt-12 md:gap-16 lg:gap-24">
102+
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
103+
<Stack key={key} asChild>
104+
<section id={key} className="scroll-mt-40 gap-8 md:gap-6">
105+
<div className="group flex w-full items-center gap-4 border-b bg-transparent px-2 py-4">
106+
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
107+
{icon || <StackIcon />}
108+
</div>
109+
<h2 className="flex-1 text-start font-black">
110+
{sectionTitle}
111+
</h2>
109112
</div>
110-
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
111-
{metric && metric}
112-
<ResourcesContainer>
113-
{items.map((item) => (
114-
<ResourceItem item={item} key={item.title} />
115-
))}
116-
</ResourcesContainer>
113+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-y-6">
114+
{boxes.map(({ title, metric, items, className }) => (
115+
<div
116+
className={cn(
117+
"overflow-hidden rounded-2xl border shadow-lg",
118+
className
119+
)}
120+
key={title}
121+
>
122+
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
123+
{title}
124+
</div>
125+
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
126+
{metric && metric}
127+
<ResourcesContainer>
128+
{items.map((item) => (
129+
<ResourceItem item={item} key={item.title} />
130+
))}
131+
</ResourcesContainer>
132+
</div>
133+
</div>
134+
))}
117135
</div>
118-
</div>
119-
))}
120-
</div>
121-
</section>
122-
))}
123-
124-
<div className="mb-20 text-center">
125-
<Translation id="page-resources:page-resources-find-more" />
126-
</div>
136+
</section>
137+
</Stack>
138+
))}
139+
</Stack>
127140

128-
<Section
129-
id="contribute"
130-
className={cn(
131-
"before:absolute before:-inset-px before:bottom-0 before:z-hide before:rounded-[calc(theme(borderRadius.4xl)+1px)] before:content-['']", // Border/gradient positioning
132-
"before:bg-gradient-to-b before:from-primary-hover/[0.24] before:to-primary-hover/[0.08] before:dark:from-primary-hover/40 before:dark:to-primary-hover/20", // Border/gradient coloring
133-
"relative inset-0 rounded-4xl bg-background" // Paint background color over card portion
134-
)}
135-
>
136-
<div className="mb-12 flex flex-col gap-y-8 rounded-4xl bg-radial-a px-8 py-12 lg:mb-32 xl:mb-36">
137-
<div className="flex flex-col gap-y-4 text-center">
138-
<h2>{t("page-resources-contribute-title")}</h2>
139-
<p>{t("page-resources-contribute-description")}</p>
140-
</div>
141-
<div className="mx-auto grid grid-cols-1 gap-16 md:grid-cols-2">
142-
{/* TODO: Add issue template for resource listing and redirect to new template */}
143-
<ButtonLink
144-
href={new URL(
145-
"issues/new?template=feature_request.yaml",
146-
GITHUB_REPO_URL
147-
).toString()}
148-
variant="outline"
149-
isSecondary
150-
>
151-
{t("page-resources-suggest-resource")}
152-
</ButtonLink>
153-
<ButtonLink
154-
href={new URL(
155-
"issues/new?template=bug_report.yaml",
156-
GITHUB_REPO_URL
157-
).toString()}
158-
variant="outline"
159-
isSecondary
160-
>
161-
<FaGithub /> {t("page-resources-found-bug")}
162-
</ButtonLink>
141+
<VStack className="gap-4 py-16">
142+
<div className="text-center font-bold">
143+
<Translation id="page-resources:page-resources-find-more" />
163144
</div>
164-
</div>
165-
</Section>
145+
<ButtonLink
146+
href="https://ethereumdashboards.com"
147+
size="lg"
148+
customEventOptions={{
149+
eventCategory: EVENT_CATEGORY,
150+
eventAction: "links",
151+
eventName: "ethereumdashboards.com",
152+
}}
153+
>
154+
ethereumdashboards.com
155+
</ButtonLink>
156+
</VStack>
157+
158+
<Section
159+
id="contribute"
160+
className="relative rounded-4xl border border-body/5 bg-background"
161+
>
162+
<VStack className="rounded-4xl bg-radial-a px-4 py-6 md:py-12">
163+
<Stack className="max-w-xl gap-y-10 py-6 lg:max-w-[700px]">
164+
<div className="flex flex-col gap-y-4 text-center">
165+
<h2>{t("page-resources-contribute-title")}</h2>
166+
<p className="text-lg">
167+
{t("page-resources-contribute-description")}
168+
</p>
169+
</div>
170+
<div className="mx-auto grid grid-cols-1 gap-x-3 gap-y-4 md:grid-cols-2">
171+
{/* TODO: Add issue template for resource listing and redirect to new template */}
172+
<ButtonLink
173+
href={new URL(
174+
"issues/new?template=feature_request.yaml",
175+
GITHUB_REPO_URL
176+
).toString()}
177+
variant="outline"
178+
isSecondary
179+
customEventOptions={{
180+
eventCategory: EVENT_CATEGORY,
181+
eventAction: "links",
182+
eventName: "Ethereum.org Github Feature Request",
183+
}}
184+
>
185+
{t("page-resources-suggest-resource")}
186+
</ButtonLink>
187+
<ButtonLink
188+
href={new URL(
189+
"issues/new?template=bug_report.yaml",
190+
GITHUB_REPO_URL
191+
).toString()}
192+
variant="outline"
193+
isSecondary
194+
customEventOptions={{
195+
eventCategory: EVENT_CATEGORY,
196+
eventAction: "links",
197+
eventName: "Ethereum.org Github Bug Report",
198+
}}
199+
>
200+
<FaGithub /> {t("page-resources-found-bug")}
201+
</ButtonLink>
202+
</div>
203+
</Stack>
204+
</VStack>
205+
</Section>
206+
</Stack>
166207
</MainArticle>
167208
)
168209
}

‎src/components/Resources/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ export const ResourceItem = ({
3131
"flex gap-2 border-b p-3 text-body no-underline last-of-type:border-0 hover:bg-background-highlight hover:text-body",
3232
className
3333
)}
34+
customEventOptions={{
35+
eventCategory: "dashboard",
36+
eventAction: "links",
37+
eventName: title,
38+
}}
3439
hideArrow
3540
>
3641
<div className="my-1 size-[18px] shrink-0">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@
7676
"page-resources-hero-title": "Resources",
7777
"page-resources-hero-header": "Ethereum Dashboards",
7878
"page-resources-hero-description": "Discover a list of community-curated resources to stay updated on all major Ethereum ecosystem developments.",
79-
"page-resources-find-more": "Find more great resources on <a href=\"https://ethereumdashboards.com\" target=\"_blank\">ethereumdashboards.com</a>",
79+
"page-resources-find-more": "Find more great resources on",
8080
"page-resources-contribute-title": "Contribute",
8181
"page-resources-contribute-description": "This dashboard is a living page that requires frequent updates. Help find the best resources to give an overview of the Ethereum ecosystem.",
8282
"page-resources-suggest-resource": "Suggest a resource",
8383
"page-resources-found-bug": "Found a bug",
8484
"page-resources-whats-on-this-page": "What's on this page",
8585
"page-resources-banner-notification-message": "Resources dashboard is new!",
8686
"page-resources-share-feedback": "Please share your feedback with us"
87-
}
87+
}

0 commit comments

Comments
 (0)