Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 32 additions & 40 deletions app/docs/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
} from 'fumadocs-ui/page';

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

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

export default async function Page(props: {
Expand All @@ -39,45 +39,37 @@ export default async function Page(props: {
}

return (
<>
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
<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" />
<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" />
<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" />
</div>

<DocsPage toc={page.data.toc} full={page.data.full}
tableOfContent={{
style: 'clerk',
single: false,
}}
>
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
{page.data.lastModified && (
<p className="text-sm text-fd-muted-foreground -mb-4">
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
</p>
)}
<div className="flex items-center justify-between mb-4">
<div className="flex-1">
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
</div>
<EditButton filePath={filePath} version="v4" />
<DocsPage toc={page.data.toc} full={page.data.full}
tableOfContent={{
style: 'clerk',
single: false,
}}
>
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
{page.data.lastModified && (
<p className="text-sm text-fd-muted-foreground -mb-4">
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
</p>
)}
<div className="flex items-center justify-between mb-4">
<div className="flex-1">
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
</div>
<DocsBody>
<MDX components={{
...defaultMdxComponents as any,
a: createRelativeLink(source, page),
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
Tab, Tabs,
Callout,
}} />
</DocsBody>
{/* <FooterSection /> */}
</DocsPage>
</>
<EditButton filePath={filePath} version="v4" />
</div>
<DocsBody>
<MDX components={{
...defaultMdxComponents as any,
a: createRelativeLink(source, page),
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
Tab, Tabs,
Callout,
}} />
</DocsBody>
{/* <FooterSection /> */}
</DocsPage>
);
}

Expand Down
21 changes: 21 additions & 0 deletions app/docs/faq/faq-items.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Link from "fumadocs-core/link";
import type { FaqItem } from "@/components/faq-accordion"

export const items: FaqItem[] = [
{
title:
"Does Nativewind Nativewind",
content:
'Yes, Nativewind Nativewinds',
},
{
title:
"Is Nativewind v5 out yet",
content:
(
<>
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.
</>
),
},
];
34 changes: 34 additions & 0 deletions app/docs/faq/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
DocsPage,
DocsTitle,
DocsDescription,
} from "fumadocs-ui/page";
import type { Metadata } from "next";

import { items } from "./faq-items";
import { V5FAQLink } from "./v5-faq-link";
import { FaqAccordion } from "@/components/faq-accordion";

export const metadata: Metadata = {
title: "FAQ",
description: "Frequently answered questions about NativeWind",
};

export default async function FAQPage() {
return (
<DocsPage>
<div className="flex justify-between mb-4 md:max-xl:px-12">
<div className="flex-1">
<DocsTitle>FAQ</DocsTitle>
<DocsDescription className="!mb-0 text-balance">Frequently answered questions</DocsDescription>
</div>
<div className="flex items-start md:items-center gap-2">
<V5FAQLink />
</div>
</div>
<div className="md:max-xl:px-12">
<FaqAccordion items={items} />
</div>
</DocsPage>
);
}
11 changes: 11 additions & 0 deletions app/docs/faq/v5-faq-link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Link from "fumadocs-core/link";
import { FileQuestionMark } from "lucide-react";

export function V5FAQLink() {
return (
<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">
<FileQuestionMark className="size-4" />
v5
</Link>
);
}
6 changes: 6 additions & 0 deletions app/docs/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,12 @@ export default function Layout({ children }: { children: ReactNode }) {
),
}}
>
{/* background decoration */}
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
<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" />
<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" />
<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" />
</div>
{children}
</DocsLayout>
);
Expand Down
21 changes: 13 additions & 8 deletions app/global.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import "tw-animate-css";

@source '../node_modules/fumadocs-ui/dist/**/*.js';

Expand Down Expand Up @@ -125,7 +126,6 @@
linear-gradient(to bottom, #8884 1px, transparent 1px);
}


.bg-grid-lines-y-lg {
background-position: -20px -20px;
background-size: 40px 40px;
Expand All @@ -148,16 +148,16 @@
.cut-corners {
background:var(transparent, rgb(214, 233, 255));
mask:linear-gradient(
-45deg,
transparent 10.313708498984761px,
white 11.313708498984761px,
white calc(100% - 10.313708498984761px),
-45deg,
transparent 10.313708498984761px,
white 11.313708498984761px,
white calc(100% - 10.313708498984761px),
transparent calc(100% - 11.313708498984761px)
),
linear-gradient(
45deg,
transparent -1px,
white 0px,
45deg,
transparent -1px,
white 0px,
white calc(100% - -1px),
transparent calc(100% - 0px)
);-webkit-mask-composite:destination-in;mask-composite:intersect
Expand All @@ -183,6 +183,7 @@

/* smooth scroll */
html {
scrollbar-gutter: stable;
scroll-behavior: smooth;
scroll-padding-top: 3rem;
}
Expand Down Expand Up @@ -217,3 +218,7 @@ html {
.cursed {
mask-image:radial-gradient(transparent 1px, rgb(15, 17, 21), #ffffff 1px);mask-size:4px 4px;
}

.bevel {
corner-shape: bevel
}
78 changes: 35 additions & 43 deletions app/v5/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import {
} from 'fumadocs-ui/page';

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

import { Callout } from '@/components/callout';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { createRelativeLink } from 'fumadocs-ui/mdx';
import FooterSection from '@/app/(home)/FooterSection';
// import FooterSection from '@/app/(home)/FooterSection';
import { EditButton } from '@/components/edit-button';
import { CopyInstallationButton } from '@/components/copy-installation-button';

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

return (
<>
<div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
<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" />
<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" />
<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" />
</div>

<DocsPage toc={page.data.toc} full={page.data.full}
tableOfContent={{
style: 'clerk',
single: false,
}}
>
{/* TODO: install DocsPage FumaDocsv15 and reorder contents */}
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
{page.data.lastModified && (
<p className="text-sm text-fd-muted-foreground -mb-4">
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
</p>
)}
<div className="flex items-center justify-between mb-4">
<div className="flex-1">
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
</div>
<div className="flex items-center gap-2">
<EditButton filePath={filePath} version="v5" />
{isInstallationPage && <CopyInstallationButton />}
</div>
<DocsPage toc={page.data.toc} full={page.data.full}
tableOfContent={{
style: 'clerk',
single: false,
}}
>
{/* // TODO: install DocsPage FumaDocsv15 and reorder contents */}
{/* lastUpdate={page.data.lastModified && new Date(page.data.lastModified)} */}
{page.data.lastModified && (
<p className="text-sm text-fd-muted-foreground -mb-4">
Last updated on {Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(new Date(page.data.lastModified))}
</p>
)}
<div className="flex items-center justify-between mb-4">
<div className="flex-1">
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription>{page.data.description}</DocsDescription>
</div>
<div className="flex items-center gap-2">
<EditButton filePath={filePath} version="v5" />
{isInstallationPage && <CopyInstallationButton />}
</div>
<DocsBody>
<MDX components={{
...defaultMdxComponents as any,
a: createRelativeLink(source5, page),
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
Tab, Tabs,
Callout,
}} />
</DocsBody>
{/* <FooterSection /> */}
</DocsPage>
</>
</div>
<DocsBody>
<MDX components={{
...defaultMdxComponents as any,
a: createRelativeLink(source5, page),
blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
Tab, Tabs,
Callout,
}} />
</DocsBody>
{/* <FooterSection /> */}
</DocsPage>
);
}

Expand Down
34 changes: 34 additions & 0 deletions app/v5/faq/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {
DocsPage,
DocsTitle,
DocsDescription,
} from "fumadocs-ui/page";
import type { Metadata } from "next";

import { items } from "./v5-faq-items";
import { V4FAQLink } from "./v4-faq-link";
import { FaqAccordion } from "@/components/faq-accordion";

export const metadata: Metadata = {
title: "v5 FAQ",
description: "Frequently answered questions about NativeWind v5",
};

export default async function FAQPage() {
return (
<DocsPage>
<div className="flex justify-between mb-4 md:max-xl:px-12">
<div className="flex-1">
<DocsTitle>V5 FAQ</DocsTitle>
<DocsDescription className="!mb-0 text-balance">Frequently answered questions for v5</DocsDescription>
</div>
<div className="flex items-start md:items-center gap-2">
<V4FAQLink />
</div>
</div>
<div className="md:max-xl:px-12">
<FaqAccordion items={items} />
</div>
</DocsPage>
);
}
11 changes: 11 additions & 0 deletions app/v5/faq/v4-faq-link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Link from "fumadocs-core/link";
import { FileQuestionMark } from "lucide-react";

export function V4FAQLink() {
return (
<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">
<FileQuestionMark className="size-4" />
v4
</Link>
);
}
16 changes: 16 additions & 0 deletions app/v5/faq/v5-faq-items.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { FaqItem } from "@/components/faq-accordion";

export const items: FaqItem[] = [
{
title:
"Is v5 out yet?",
content:
'maybe',
},
{
title:
"Is v5 stable?",
content:
"almost",
},
];
Loading