Skip to content

Commit aaf1c38

Browse files
PickleNikPickleNik
committed
cleanup, organize imports, add metadata to faq pages
1 parent 90b166e commit aaf1c38

10 files changed

Lines changed: 178 additions & 168 deletions

File tree

‎app/docs/[[...slug]]/page.tsx‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
} from 'fumadocs-ui/page';
88

99
import { notFound } from 'next/navigation';
10-
import { ComponentProps, FC } from 'react';
10+
import type { ComponentProps, FC } from 'react';
1111
import defaultMdxComponents from 'fumadocs-ui/mdx';
1212

1313
import { Callout } from '@/components/callout';
1414
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
1515
import { createRelativeLink } from 'fumadocs-ui/mdx';
16-
import FooterSection from '@/app/(home)/FooterSection';
16+
// import FooterSection from '@/app/(home)/FooterSection';
1717
import { EditButton } from '@/components/edit-button';
1818

1919
export default async function Page(props: {
@@ -39,45 +39,37 @@ export default async function Page(props: {
3939
}
4040

4141
return (
42-
<>
43-
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
44-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
45-
<div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
46-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
47-
</div>
48-
49-
<DocsPage toc={page.data.toc} full={page.data.full}
50-
tableOfContent={{
51-
style: 'clerk',
52-
single: false,
53-
}}
54-
>
55-
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
56-
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
57-
{page.data.lastModified && (
58-
<p className="text-sm text-fd-muted-foreground -mb-4">
59-
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
60-
</p>
61-
)}
62-
<div className="flex items-center justify-between mb-4">
63-
<div className="flex-1">
64-
<DocsTitle>{page.data.title}</DocsTitle>
65-
<DocsDescription>{page.data.description}</DocsDescription>
66-
</div>
67-
<EditButton filePath={filePath} version="v4" />
42+
<DocsPage toc={page.data.toc} full={page.data.full}
43+
tableOfContent={{
44+
style: 'clerk',
45+
single: false,
46+
}}
47+
>
48+
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
49+
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
50+
{page.data.lastModified && (
51+
<p className="text-sm text-fd-muted-foreground -mb-4">
52+
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
53+
</p>
54+
)}
55+
<div className="flex items-center justify-between mb-4">
56+
<div className="flex-1">
57+
<DocsTitle>{page.data.title}</DocsTitle>
58+
<DocsDescription>{page.data.description}</DocsDescription>
6859
</div>
69-
<DocsBody>
70-
<MDX components={{
71-
...defaultMdxComponents as any,
72-
a: createRelativeLink(source, page),
73-
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
74-
Tab, Tabs,
75-
Callout,
76-
}} />
77-
</DocsBody>
78-
{/* <FooterSection /> */}
79-
</DocsPage>
80-
</>
60+
<EditButton filePath={filePath} version="v4" />
61+
</div>
62+
<DocsBody>
63+
<MDX components={{
64+
...defaultMdxComponents as any,
65+
a: createRelativeLink(source, page),
66+
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
67+
Tab, Tabs,
68+
Callout,
69+
}} />
70+
</DocsBody>
71+
{/* <FooterSection /> */}
72+
</DocsPage>
8173
);
8274
}
8375

‎app/docs/faq/faq-items.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Link from "fumadocs-core/link";
2+
import type { FaqItem } from "@/components/faq-accordion"
3+
4+
export const items: FaqItem[] = [
5+
{
6+
title:
7+
"Does Nativewind Nativewind",
8+
content:
9+
'Yes, Nativewind Nativewinds',
10+
},
11+
{
12+
title:
13+
"Is Nativewind v5 out yet",
14+
content:
15+
(
16+
<>
17+
not yet, check out <Link href="/v5/faq" className="underline text-amber-500 hover:text-amber-600 dark:hover:text-amber-400">the v5 FAQ</Link> for more info.
18+
</>
19+
),
20+
},
21+
];

‎app/docs/faq/page.tsx‎

Lines changed: 20 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,34 @@
11
import {
22
DocsPage,
3-
DocsBody,
43
DocsTitle,
54
DocsDescription,
65
} from "fumadocs-ui/page";
6+
import type { Metadata } from "next";
77

8-
import { FaqAccordion, FaqItem } from "@/components/faq-accordion";
9-
import Link from "fumadocs-core/link";
10-
import { FileQuestionMark } from "lucide-react";
8+
import { items } from "./faq-items";
9+
import { V5FAQLink } from "./v5-faq-link";
10+
import { FaqAccordion } from "@/components/faq-accordion";
1111

12-
const items: FaqItem[] = [
13-
{
14-
title:
15-
"Does Nativewind Nativewind",
16-
content:
17-
'Yes, Nativewind Nativewinds',
18-
},
19-
{
20-
title:
21-
"Is Nativewind v5 out yet",
22-
content:
23-
(
24-
<>
25-
not yet, check out <Link href="/v5/faq" className="underline text-amber-500 hover:text-amber-600 dark:hover:text-amber-400">the v5 FAQ</Link> for more info.
26-
</>
27-
),
28-
},
29-
];
12+
export const metadata: Metadata = {
13+
title: "FAQ",
14+
description: "Frequently answered questions about NativeWind",
15+
};
3016

3117
export default async function FAQPage() {
3218
return (
33-
<>
34-
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
35-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
36-
<div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
37-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
38-
</div>
39-
40-
<DocsPage>
41-
<div className="flex justify-between mb-4 md:max-xl:px-12">
42-
<div className="flex-1">
43-
<DocsTitle>FAQ</DocsTitle>
44-
<DocsDescription className="!mb-0 text-balance">Frequently answered questions</DocsDescription>
45-
</div>
46-
<div className="flex items-start md:items-center gap-2">
47-
<Link href="/v5/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-amber-500 bg-fd-card border border-fd-border hover:border-amber-500/30 rounded-md hover:bg-amber-500/10 transition-colors">
48-
<FileQuestionMark className="size-4" />
49-
v5
50-
</Link>
51-
</div>
19+
<DocsPage>
20+
<div className="flex justify-between mb-4 md:max-xl:px-12">
21+
<div className="flex-1">
22+
<DocsTitle>FAQ</DocsTitle>
23+
<DocsDescription className="!mb-0 text-balance">Frequently answered questions</DocsDescription>
5224
</div>
53-
<div className="md:max-xl:px-12">
54-
<FaqAccordion items={items} />
25+
<div className="flex items-start md:items-center gap-2">
26+
<V5FAQLink />
5527
</div>
56-
</DocsPage>
57-
</>
28+
</div>
29+
<div className="md:max-xl:px-12">
30+
<FaqAccordion items={items} />
31+
</div>
32+
</DocsPage>
5833
);
5934
}

‎app/docs/faq/v5-faq-link.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Link from "fumadocs-core/link";
2+
import { FileQuestionMark } from "lucide-react";
3+
4+
export function V5FAQLink() {
5+
return (
6+
<Link href="/v5/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-amber-500 bg-fd-card border border-fd-border hover:border-amber-500/30 rounded-md hover:bg-amber-500/10 transition-colors">
7+
<FileQuestionMark className="size-4" />
8+
v5
9+
</Link>
10+
);
11+
}

‎app/docs/layout.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,12 @@ export default function Layout({ children }: { children: ReactNode }) {
8080
),
8181
}}
8282
>
83+
{/* background decoration */}
84+
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
85+
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
86+
<div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-fd-primary/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
87+
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
88+
</div>
8389
{children}
8490
</DocsLayout>
8591
);

‎app/v5/[[...slug]]/page.tsx‎

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
} from 'fumadocs-ui/page';
88

99
import { notFound } from 'next/navigation';
10-
import { ComponentProps, FC } from 'react';
10+
import type { ComponentProps, FC } from 'react';
1111
import defaultMdxComponents from 'fumadocs-ui/mdx';
1212

1313
import { Callout } from '@/components/callout';
1414
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
1515
import { createRelativeLink } from 'fumadocs-ui/mdx';
16-
import FooterSection from '@/app/(home)/FooterSection';
16+
// import FooterSection from '@/app/(home)/FooterSection';
1717
import { EditButton } from '@/components/edit-button';
1818
import { CopyInstallationButton } from '@/components/copy-installation-button';
1919

@@ -43,48 +43,40 @@ export default async function Page(props: {
4343
const isInstallationPage = params.slug?.join('/') === 'getting-started/installation';
4444

4545
return (
46-
<>
47-
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
48-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
49-
<div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
50-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
51-
</div>
52-
53-
<DocsPage toc={page.data.toc} full={page.data.full}
54-
tableOfContent={{
55-
style: 'clerk',
56-
single: false,
57-
}}
58-
>
59-
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
60-
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
61-
{page.data.lastModified && (
62-
<p className="text-sm text-fd-muted-foreground -mb-4">
63-
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
64-
</p>
65-
)}
66-
<div className="flex items-center justify-between mb-4">
67-
<div className="flex-1">
68-
<DocsTitle>{page.data.title}</DocsTitle>
69-
<DocsDescription>{page.data.description}</DocsDescription>
70-
</div>
71-
<div className="flex items-center gap-2">
72-
<EditButton filePath={filePath} version="v5" />
73-
{isInstallationPage && <CopyInstallationButton />}
74-
</div>
46+
<DocsPage toc={page.data.toc} full={page.data.full}
47+
tableOfContent={{
48+
style: 'clerk',
49+
single: false,
50+
}}
51+
>
52+
{/* // TODO: install DocsPage FumaDocsv15 and reorder contents */}
53+
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
54+
{page.data.lastModified && (
55+
<p className="text-sm text-fd-muted-foreground -mb-4">
56+
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
57+
</p>
58+
)}
59+
<div className="flex items-center justify-between mb-4">
60+
<div className="flex-1">
61+
<DocsTitle>{page.data.title}</DocsTitle>
62+
<DocsDescription>{page.data.description}</DocsDescription>
63+
</div>
64+
<div className="flex items-center gap-2">
65+
<EditButton filePath={filePath} version="v5" />
66+
{isInstallationPage && <CopyInstallationButton />}
7567
</div>
76-
<DocsBody>
77-
<MDX components={{
78-
...defaultMdxComponents as any,
79-
a: createRelativeLink(source5, page),
80-
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
81-
Tab, Tabs,
82-
Callout,
83-
}} />
84-
</DocsBody>
85-
{/* <FooterSection /> */}
86-
</DocsPage>
87-
</>
68+
</div>
69+
<DocsBody>
70+
<MDX components={{
71+
...defaultMdxComponents as any,
72+
a: createRelativeLink(source5, page),
73+
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
74+
Tab, Tabs,
75+
Callout,
76+
}} />
77+
</DocsBody>
78+
{/* <FooterSection /> */}
79+
</DocsPage>
8880
);
8981
}
9082

‎app/v5/faq/page.tsx‎

Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,32 @@ import {
33
DocsTitle,
44
DocsDescription,
55
} from "fumadocs-ui/page";
6+
import type { Metadata } from "next";
67

7-
import { FaqAccordion, type FaqItem } from "@/components/faq-accordion";
8-
import Link from "fumadocs-core/link";
9-
import { FileQuestionMark } from "lucide-react";
8+
import { items } from "./v5-faq-items";
9+
import { V4FAQLink } from "./v4-faq-link";
10+
import { FaqAccordion } from "@/components/faq-accordion";
1011

11-
const items: FaqItem[] = [
12-
{
13-
title:
14-
"Is v5 out yet?",
15-
content:
16-
'maybe',
17-
},
18-
{
19-
title:
20-
"Is v5 stable?",
21-
content:
22-
"almost",
23-
},
24-
];
12+
export const metadata: Metadata = {
13+
title: "v5 FAQ",
14+
description: "Frequently answered questions about NativeWind v5",
15+
};
2516

2617
export default async function FAQPage() {
2718
return (
28-
<>
29-
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
30-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
31-
<div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
32-
<div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
33-
</div>
34-
35-
<DocsPage>
36-
<div className="flex justify-between mb-4 md:max-xl:px-12">
37-
<div className="flex-1">
38-
<DocsTitle>V5 FAQ</DocsTitle>
39-
<DocsDescription className="!mb-0 text-balance">Frequently answered questions for v5</DocsDescription>
40-
</div>
41-
<div className="flex items-start md:items-center gap-2">
42-
<Link href="/docs/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-primary bg-fd-card border border-fd-border hover:border-fd-primary/30 rounded-md hover:bg-fd-primary/10 transition-colors">
43-
<FileQuestionMark className="size-4" />
44-
v4
45-
</Link>
46-
</div>
19+
<DocsPage>
20+
<div className="flex justify-between mb-4 md:max-xl:px-12">
21+
<div className="flex-1">
22+
<DocsTitle>V5 FAQ</DocsTitle>
23+
<DocsDescription className="!mb-0 text-balance">Frequently answered questions for v5</DocsDescription>
4724
</div>
48-
<div className="md:max-xl:px-12">
49-
<FaqAccordion items={items} />
25+
<div className="flex items-start md:items-center gap-2">
26+
<V4FAQLink />
5027
</div>
51-
</DocsPage>
52-
</>
28+
</div>
29+
<div className="md:max-xl:px-12">
30+
<FaqAccordion items={items} />
31+
</div>
32+
</DocsPage>
5333
);
5434
}

0 commit comments

Comments
 (0)