Skip to content

Commit 2af7e12

Browse files
sonofmagicsonofmagic
committed
fix: docs rendered
1 parent 849405a commit 2af7e12

20 files changed

+2526
-602
lines changed

‎pnpm-lock.yaml

Lines changed: 2135 additions & 438 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
public/_pagefind

‎website/app/[lang]/[[...mdxPath]]/page.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { generateStaticParamsFor, importPage } from 'nextra/pages'
2+
import { useMDXComponents } from '../../../mdx-components'
3+
4+
export const generateStaticParams = generateStaticParamsFor('mdxPath')
5+
6+
export async function generateMetadata(props: PageProps) {
7+
const params = await props.params
8+
const { metadata } = await importPage(params.mdxPath, params.lang)
9+
return metadata
10+
}
11+
12+
type PageProps = Readonly<{
13+
params: Promise<{
14+
mdxPath: string[]
15+
lang: string
16+
}>
17+
}>
18+
const Wrapper = useMDXComponents().wrapper
19+
20+
export default async function Page(props: PageProps) {
21+
const params = await props.params
22+
const result = await importPage(params.mdxPath, params.lang)
23+
const { default: MDXContent, toc, metadata } = result
24+
return (
25+
<Wrapper toc={toc} metadata={metadata}>
26+
<MDXContent {...props} params={params} />
27+
</Wrapper>
28+
)
29+
}

‎website/app/[lang]/layout.tsx

Lines changed: 98 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,122 @@
1-
import { Footer, LastUpdated, Layout, Navbar } from 'nextra-theme-docs'
2-
import { Banner, Head, Search } from 'nextra/components'
1+
import type { Metadata } from 'next'
2+
/* eslint-env node */
3+
import {
4+
Footer,
5+
LastUpdated,
6+
Layout,
7+
Link,
8+
LocaleSwitch,
9+
Navbar,
10+
} from 'nextra-theme-docs'
11+
import { Banner, Head } from 'nextra/components'
312
import { getPageMap } from 'nextra/page-map'
413
import { getDictionary, getDirection } from '../_dictionaries/get-dictionary'
5-
// Required for theme styles, previously was imported under the hood
6-
import 'nextra-theme-docs/style.css'
14+
import './styles.css'
715

8-
export const metadata = {
9-
// ... your metadata API
10-
// https://nextjs.org/docs/app/building-your-application/optimizing/metadata
16+
export const metadata: Metadata = {
17+
description:
18+
'SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.',
19+
title: {
20+
absolute: '',
21+
template: '%s | SWR',
22+
},
23+
metadataBase: new URL('https://swr.vercel.app'),
24+
openGraph: {
25+
images:
26+
'https://assets.vercel.com/image/upload/v1572282926/swr/twitter-card.jpg',
27+
},
28+
twitter: {
29+
site: '@vercel',
30+
},
31+
appleWebApp: {
32+
title: 'SWR',
33+
},
34+
other: {
35+
'msapplication-TileColor': '#fff',
36+
},
1137
}
1238

1339
export default async function RootLayout({ children, params }) {
1440
const { lang } = await params
15-
const pageMap = await getPageMap(lang)
16-
const direction = getDirection(lang)
1741
const dictionary = await getDictionary(lang)
18-
console.log(lang)
19-
return (
20-
<html
21-
lang={lang}
22-
// Required to be set
23-
dir={direction}
24-
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
25-
suppressHydrationWarning
42+
const pageMap = await getPageMap(`/${lang}`)
43+
44+
const navbar = (
45+
<Navbar
46+
logo={(
47+
<>
48+
<span
49+
className="ms-2 font-extrabold select-none max-md:hidden"
50+
title={`SWR: ${dictionary.logo.title}`}
51+
>
52+
SWR
53+
</span>
54+
</>
55+
)}
56+
projectLink="https://github.com/vercel/swr"
57+
chatLink="https://discord.com"
2658
>
27-
<Head />
59+
<LocaleSwitch />
60+
</Navbar>
61+
)
62+
const footer = (
63+
<Footer>
64+
<span className="flex">
65+
MIT
66+
{' '}
67+
{new Date().getFullYear()}
68+
{' '}
69+
©
70+
{' '}
71+
<a
72+
href="https://github.com/sonofmagic"
73+
rel="noreferrer"
74+
target="_blank"
75+
className="x:focus-visible:nextra-focus flex items-center gap-2 font-semibold"
76+
>
77+
sonofmagic
78+
</a>
79+
</span>
80+
</Footer>
81+
)
82+
return (
83+
<html lang={lang} dir={getDirection(lang)} suppressHydrationWarning>
84+
<Head
85+
backgroundColor={{
86+
dark: 'rgb(15,23,42)',
87+
light: 'rgb(254, 252, 232)',
88+
}}
89+
color={{
90+
hue: { dark: 120, light: 0 },
91+
saturation: { dark: 100, light: 100 },
92+
}}
93+
/>
2894
<body>
2995
<Layout
30-
// banner={<Banner storageKey="some-key">{dictionary.banner}</Banner>}
96+
97+
navbar={navbar}
98+
footer={footer}
3199
docsRepositoryBase="https://github.com/shuding/nextra/blob/main/examples/swr-site"
32-
editLink={dictionary.editPage}
33-
// feedback={{ content: dictionary.feedback }}
34-
footer={<Footer>1</Footer>}
35100
i18n={[
36101
{ locale: 'en', name: 'English' },
37-
{ locale: 'fr', name: 'Français' },
38-
{ locale: 'ru', name: 'Русский' },
102+
{ locale: 'zh', name: '中文' },
39103
]}
40-
lastUpdated={<LastUpdated>{dictionary.lastUpdated}</LastUpdated>}
41-
navbar={<Navbar logo={<div>Logo</div>} />}
104+
sidebar={{
105+
defaultMenuCollapseLevel: 1,
106+
autoCollapse: true,
107+
}}
108+
toc={{
109+
backToTop: dictionary.backToTop,
110+
}}
111+
editLink={dictionary.editPage}
42112
pageMap={pageMap}
43-
search={(
44-
<Search
45-
emptyResult="4"
46-
errorText="3"
47-
loading="2"
48-
placeholder="1"
49-
/>
50-
)}
113+
nextThemes={{ defaultTheme: 'dark' }}
114+
lastUpdated={<LastUpdated>{dictionary.lastUpdated}</LastUpdated>}
51115
themeSwitch={{
52116
dark: dictionary.dark,
53117
light: dictionary.light,
54118
system: dictionary.system,
55119
}}
56-
toc={{
57-
backToTop: dictionary.backToTop,
58-
title: '1',
59-
}}
60120
>
61121
{children}
62122
</Layout>

‎website/app/[lang]/styles.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import 'tailwindcss';
2+
@import 'nextra-theme-docs/style.css';
3+
@import '../_components/features.css';
4+
5+
@theme {
6+
}
7+
8+
body {
9+
--bg-dot-color: #d1d1d1;
10+
11+
.dark & {
12+
--bg-dot-color: #313131;
13+
}
14+
15+
background:
16+
linear-gradient(to bottom, transparent, rgb(var(--nextra-bg)) 300px),
17+
fixed 0 0 / 20px 20px
18+
radial-gradient(var(--bg-dot-color) 1px, transparent 0),
19+
fixed 10px 10px / 20px 20px
20+
radial-gradient(var(--bg-dot-color) 1px, transparent 0);
21+
}

‎website/app/_components/authors.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import type { Locale } from '@app/_dictionaries/i18n-config'
2+
import type { FC } from 'react'
3+
import { getDictionary } from '@app/_dictionaries/get-dictionary'
4+
5+
export const TopContent: FC<{
6+
title: string
7+
date: string
8+
authors: {
9+
name: string
10+
link: string
11+
}[]
12+
lang: Locale
13+
}> = async ({ title, date, authors, lang }) => {
14+
const dictionary = await getDictionary(lang)
15+
const dateObj = new Date(date)
16+
return (
17+
<>
18+
<h1>{title}</h1>
19+
<div className="mt-8 mb-16 text-sm text-gray-400">
20+
<time dateTime={dateObj.toISOString()}>
21+
{dateObj.toLocaleDateString(lang, {
22+
month: 'long',
23+
day: 'numeric',
24+
year: 'numeric',
25+
})}
26+
</time>
27+
{' '}
28+
{dictionary.by}
29+
{' '}
30+
{authors.map(author => (
31+
<span key={author.name} className="not-last:after:content-[',_']">
32+
<a
33+
href={author.link}
34+
target="_blank"
35+
rel="noreferrer"
36+
className="text-gray-800 dark:text-gray-100"
37+
>
38+
{author.name}
39+
</a>
40+
</span>
41+
))}
42+
</div>
43+
</>
44+
)
45+
}

‎website/app/_components/features.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.features {
2+
display: grid;
3+
grid-template-columns: 1fr 1fr 1fr 1fr;
4+
gap: 1rem 2rem;
5+
margin: 2.5rem 0 2rem;
6+
}
7+
.feature {
8+
@apply inline-flex items-center gap-2 max-sm:justify-center;
9+
}
10+
.feature h4 {
11+
font-weight: 700;
12+
font-size: 1.1rem;
13+
white-space: nowrap;
14+
}
15+
@media (max-width: 860px) {
16+
.features {
17+
gap: 1rem 0.5rem;
18+
}
19+
.feature h4 {
20+
font-size: 0.9rem;
21+
}
22+
}
23+
@media (max-width: 660px) {
24+
.features {
25+
grid-template-columns: 1fr 1fr;
26+
}
27+
}
28+
@media (max-width: 370px) {
29+
.feature h4 {
30+
font-size: 0.8rem;
31+
}
32+
.feature svg {
33+
width: 16px;
34+
stroke-width: 2.5px;
35+
}
36+
}

‎website/app/_dictionaries/en.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ export default {
77
logo: {
88
title: 'React Hooks for Data Fetching',
99
},
10-
// notFound: 'This page could not be found',
1110
poweredBy: 'Powered by',
12-
link: {
13-
vercel: 'https://vercel.com/?utm_source=swr',
14-
},
1511
lightweight: 'Lightweight',
1612
realtime: 'Realtime',
1713
suspense: 'Suspense',

‎website/app/_dictionaries/get-dictionary.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const dictionaries: Dictionaries = {
88
zh: () => import('./zh'),
99
}
1010

11-
export async function getDictionary(locale: Locale): Promise<Dictionary> {
11+
export async function getDictionary(locale: string): Promise<Dictionary> {
1212
const { default: dictionary } = await (
1313
dictionaries[locale] || dictionaries.en
1414
)()
@@ -17,10 +17,5 @@ export async function getDictionary(locale: Locale): Promise<Dictionary> {
1717
}
1818

1919
export function getDirection(locale: Locale): 'ltr' | 'rtl' {
20-
switch (locale) {
21-
case 'en':
22-
case 'zh':
23-
default:
24-
return 'ltr'
25-
}
20+
return 'ltr'
2621
}

‎website/app/_dictionaries/i18n-config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type EnglishLocale from './en'
22

33
export const i18n = {
44
defaultLocale: 'en',
5-
locales: ['en', 'es', 'ru'],
5+
locales: ['en', 'zh'],
66
} as const
77

88
export type Locale = (typeof i18n)['locales'][number]

0 commit comments

Comments
 (0)