Skip to content

Commit f5710fe

Browse files
wackerowwackerow
committed
Merge branch 'dev' into lucide-next
2 parents b8fdd54 + 42e6555 commit f5710fe

File tree

13 files changed

+307
-167
lines changed

13 files changed

+307
-167
lines changed

‎.husky/pre-commit

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
npx lint-staged
1+
npx lint-staged

‎app/[locale]/developers/tutorials/_components/modal.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
"use client"
2+
3+
import React, { useState } from "react"
4+
5+
import Github from "@/components/icons/github.svg"
6+
import Translation from "@/components/Translation"
7+
import { Button } from "@/components/ui/buttons/Button"
8+
import { ButtonLink } from "@/components/ui/buttons/Button"
9+
import Modal from "@/components/ui/dialog-modal"
10+
import { Flex } from "@/components/ui/flex"
11+
12+
import { trackCustomEvent } from "@/lib/utils/matomo"
13+
14+
import { useBreakpointValue } from "@/hooks/useBreakpointValue"
15+
16+
const TutorialSubmitModal = ({
17+
dir,
18+
}: Pick<React.HTMLAttributes<React.JSX.Element>, "dir">) => {
19+
const [isModalOpen, setModalOpen] = useState(false)
20+
21+
const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
22+
23+
return (
24+
<>
25+
<Modal
26+
open={isModalOpen}
27+
onOpenChange={(open) => setModalOpen(open)}
28+
size={modalSize}
29+
contentProps={{ dir }}
30+
title={
31+
<Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
32+
}
33+
>
34+
<p className="mb-6">
35+
<Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />
36+
</p>
37+
<Flex className="flex-col gap-2 md:flex-row">
38+
<Flex className="w-full flex-col justify-between rounded-sm border border-border p-4">
39+
<b>
40+
<Translation id="page-developers-tutorials:page-tutorial-create-an-issue" />
41+
</b>
42+
<p className="mb-6">
43+
<Translation id="page-developers-tutorials:page-tutorial-create-an-issue-desc" />
44+
</p>
45+
<ButtonLink
46+
variant="outline"
47+
href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
48+
>
49+
<Github />
50+
<Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
51+
</ButtonLink>
52+
</Flex>
53+
</Flex>
54+
</Modal>
55+
56+
<Button
57+
className="px-3 py-2 text-body"
58+
variant="outline"
59+
onClick={() => {
60+
setModalOpen(true)
61+
trackCustomEvent({
62+
eventCategory: "tutorials tags",
63+
eventAction: "click",
64+
eventName: "submit",
65+
})
66+
}}
67+
>
68+
<Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
69+
</Button>
70+
</>
71+
)
72+
}
73+
74+
TutorialSubmitModal.displayName = "TutorialSubmitModal"
75+
76+
export default TutorialSubmitModal

‎app/[locale]/developers/tutorials/_components/tutorials.tsx

Lines changed: 10 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,10 @@ import { useLocale } from "next-intl"
1414
import { ITutorial, Lang } from "@/lib/types"
1515

1616
import Emoji from "@/components/Emoji"
17-
import FeedbackCard from "@/components/FeedbackCard"
18-
import Github from "@/components/icons/github.svg"
19-
import MainArticle from "@/components/MainArticle"
2017
import Translation from "@/components/Translation"
2118
import { getSkillTranslationId } from "@/components/TutorialMetadata"
2219
import TutorialTags from "@/components/TutorialTags"
23-
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
24-
import Modal from "@/components/ui/dialog-modal"
20+
import { Button } from "@/components/ui/buttons/Button"
2521
import { Flex, FlexProps } from "@/components/ui/flex"
2622
import { Tag, TagButton } from "@/components/ui/tag"
2723

@@ -37,12 +33,6 @@ import externalTutorials from "@/data/externalTutorials.json"
3733

3834
import { DEFAULT_LOCALE } from "@/lib/constants"
3935

40-
import { useBreakpointValue } from "@/hooks/useBreakpointValue"
41-
42-
type LinkFlexProps = FlexProps & {
43-
href: string
44-
}
45-
4636
const FilterTag = forwardRef<
4737
HTMLButtonElement,
4838
{ isActive: boolean; name: string } & ButtonHTMLAttributes<HTMLButtonElement>
@@ -67,6 +57,10 @@ const Text = ({ className, ...props }: HTMLAttributes<HTMLHeadElement>) => (
6757
<p className={cn("mb-6", className)} {...props} />
6858
)
6959

60+
type LinkFlexProps = FlexProps & {
61+
href: string
62+
}
63+
7064
const LinkFlex = ({ href, children, ...props }: LinkFlexProps) => {
7165
return (
7266
<Flex asChild {...props}>
@@ -86,15 +80,11 @@ const published = (locale: string, published: string) => {
8680
) : null
8781
}
8882

89-
type TutorialPageProps = {
83+
type TutorialsListProps = {
9084
internalTutorials: ITutorial[]
91-
contentNotTranslated: boolean
9285
}
9386

94-
const TutorialPage = ({
95-
internalTutorials,
96-
contentNotTranslated,
97-
}: TutorialPageProps) => {
87+
const TutorialsList = ({ internalTutorials }: TutorialsListProps) => {
9888
const locale = useLocale()
9989
const effectiveLocale = internalTutorials.length > 0 ? locale : DEFAULT_LOCALE
10090
const filteredTutorialsByLang = useMemo(
@@ -112,7 +102,6 @@ const TutorialPage = ({
112102
[filteredTutorialsByLang]
113103
)
114104

115-
const [isModalOpen, setModalOpen] = useState(false)
116105
const [filteredTutorials, setFilteredTutorials] = useState(
117106
filteredTutorialsByLang
118107
)
@@ -153,66 +142,8 @@ const TutorialPage = ({
153142
setSelectedTags([...tempSelectedTags])
154143
}
155144

156-
const dir = contentNotTranslated ? "ltr" : "unset"
157-
158-
const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
159145
return (
160-
<MainArticle
161-
className={`mx-auto my-0 mt-16 flex w-full flex-col items-center ${dir}`}
162-
>
163-
<h1 className="no-italic mb-4 text-center font-monospace text-[2rem] font-semibold uppercase leading-[1.4] max-sm:mx-4 max-sm:mt-4 sm:mb-[1.625rem]">
164-
<Translation id="page-developers-tutorials:page-tutorial-title" />
165-
</h1>
166-
<Text className="mb-4 text-center leading-xs text-body-medium">
167-
<Translation id="page-developers-tutorials:page-tutorial-subtitle" />
168-
</Text>
169-
170-
<Modal
171-
open={isModalOpen}
172-
onOpenChange={(open) => setModalOpen(open)}
173-
size={modalSize}
174-
contentProps={{ dir }}
175-
title={
176-
<Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
177-
}
178-
>
179-
<Text>
180-
<Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />
181-
</Text>
182-
<Flex className="flex-col gap-2 md:flex-row">
183-
<Flex className="w-full flex-col justify-between rounded-sm border border-border p-4">
184-
<b>
185-
<Translation id="page-developers-tutorials:page-tutorial-create-an-issue" />
186-
</b>
187-
<Text>
188-
<Translation id="page-developers-tutorials:page-tutorial-create-an-issue-desc" />
189-
</Text>
190-
<ButtonLink
191-
variant="outline"
192-
href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
193-
>
194-
<Github />
195-
<Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
196-
</ButtonLink>
197-
</Flex>
198-
</Flex>
199-
</Modal>
200-
201-
<Button
202-
className="px-3 py-2 text-body"
203-
variant="outline"
204-
onClick={() => {
205-
setModalOpen(true)
206-
trackCustomEvent({
207-
eventCategory: "tutorials tags",
208-
eventAction: "click",
209-
eventName: "submit",
210-
})
211-
}}
212-
>
213-
<Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
214-
</Button>
215-
146+
<>
216147
<div className="my-8 w-full shadow-table-box md:w-2/3">
217148
<Flex className="m-8 flex-col justify-center border-b border-border px-0 pb-4 pt-4 md:pb-8">
218149
<Flex className="mb-4 max-w-full flex-wrap items-center gap-2">
@@ -311,9 +242,8 @@ const TutorialPage = ({
311242
)
312243
})}
313244
</div>
314-
<FeedbackCard />
315-
</MainArticle>
245+
</>
316246
)
317247
}
318248

319-
export default TutorialPage
249+
export default TutorialsList

‎app/[locale]/developers/tutorials/page.tsx

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { pick } from "lodash"
2+
import dynamic from "next/dynamic"
23
import {
34
getMessages,
45
getTranslations,
@@ -7,20 +8,51 @@ import {
78

89
import { Lang } from "@/lib/types"
910

11+
import FeedbackCard from "@/components/FeedbackCard"
1012
import I18nProvider from "@/components/I18nProvider"
13+
import MainArticle from "@/components/MainArticle"
14+
import { Skeleton, SkeletonCardContent } from "@/components/ui/skeleton"
1115

1216
import { existsNamespace } from "@/lib/utils/existsNamespace"
1317
import { getTutorialsData } from "@/lib/utils/md"
1418
import { getMetadata } from "@/lib/utils/metadata"
1519
import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
1620

17-
import Tutorials from "./_components/tutorials"
21+
const TutorialsList = dynamic(() => import("./_components/tutorials"), {
22+
ssr: false,
23+
loading: () => (
24+
<div className="mt-8 w-full md:w-2/3">
25+
<div className="grid w-full grid-cols-3 gap-2 px-8 pb-16 pt-12 sm:grid-cols-4 lg:gap-4 2xl:grid-cols-5">
26+
{Array.from({ length: 30 }).map((_, index) => (
27+
<Skeleton key={"tag" + index} className="h-8 rounded-full" />
28+
))}
29+
</div>
30+
{Array.from({ length: 5 }).map((_, index) => (
31+
<SkeletonCardContent key={"card" + index} className="p-8" />
32+
))}
33+
</div>
34+
),
35+
})
36+
37+
const TutorialSubmitModal = dynamic(() => import("./_components/modal"), {
38+
ssr: false,
39+
loading: () => (
40+
<div className="w-full max-w-40 rounded border p-3">
41+
<Skeleton className="h-5 w-full" />
42+
</div>
43+
),
44+
})
1845

1946
const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
2047
const { locale } = await params
2148

2249
setRequestLocale(locale)
2350

51+
const t = await getTranslations({
52+
locale,
53+
namespace: "page-developers-tutorials",
54+
})
55+
2456
// Get i18n messages
2557
const allMessages = await getMessages({ locale })
2658
const requiredNamespaces = getRequiredNamespacesForPage(
@@ -29,13 +61,29 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
2961
const messages = pick(allMessages, requiredNamespaces)
3062

3163
const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
64+
const dir = contentNotTranslated ? "ltr" : "unset"
65+
66+
const internalTutorials = await getTutorialsData(locale)
3267

3368
return (
3469
<I18nProvider locale={locale} messages={messages}>
35-
<Tutorials
36-
internalTutorials={getTutorialsData(locale)}
37-
contentNotTranslated={contentNotTranslated}
38-
/>
70+
<MainArticle
71+
className="mx-auto my-0 mt-16 flex w-full flex-col items-center"
72+
dir={dir}
73+
>
74+
<h1 className="no-italic mb-4 text-center font-monospace text-[2rem] font-semibold uppercase leading-[1.4] max-sm:mx-4 max-sm:mt-4 sm:mb-[1.625rem]">
75+
{t("page-tutorial-title")}
76+
</h1>
77+
<p className="mb-4 text-center leading-xs text-body-medium">
78+
{t("page-tutorial-subtitle")}
79+
</p>
80+
81+
<TutorialSubmitModal dir={dir} />
82+
83+
<TutorialsList internalTutorials={internalTutorials} />
84+
85+
<FeedbackCard />
86+
</MainArticle>
3987
</I18nProvider>
4088
)
4189
}

‎docs/review-process.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,6 @@ Adding new products is currently a low-to-medium priority (depending on the type
5050

5151
Adding new tutorials to [ethereum.org](http://ethereum.org) is currently low-priority. We are currently in the middle of an epic to revamp our tutorials. As part of this, we’ll be reviewing our existing tutorials, purging outdated or low-quality tutorials, and refining our listing criteria for future tutorials to meet our increased standards. Please always create an issue to discuss the usefulness of your proposed tutorial before opening a PR.
5252

53+
New tutorials should be placed in `public/content/developers/tutorials/your-tutorial-name/index.md`, with `your-tutorial-name` added to `src/data/internalTutorials.json` for inclusion.
54+
5355
**Timeline:** PRs should be closed or merged within 30 days of opening.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"markdown-checker": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/markdownChecker.ts",
2323
"events-import": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/events-import.ts",
2424
"crowdin-needs-review": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/reports/generateReviewReport.ts",
25+
"update-tutorials": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/update-tutorials-list.ts",
2526
"prepare": "husky"
2627
},
2728
"dependencies": {

‎src/components/Translatathon/TranslatathonBanner.tsx

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)