diff --git a/docs/suspensive.org/public/img/homepage_background.svg b/docs/suspensive.org/public/img/homepage_background.svg new file mode 100644 index 000000000..2fa51713f --- /dev/null +++ b/docs/suspensive.org/public/img/homepage_background.svg @@ -0,0 +1,439 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/suspensive.org/public/img/homepage_logo.png b/docs/suspensive.org/public/img/homepage_logo.png new file mode 100644 index 000000000..299c84684 Binary files /dev/null and b/docs/suspensive.org/public/img/homepage_logo.png differ diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx index 5db04e8ed..2b55b452e 100644 --- a/docs/suspensive.org/src/components/HomePage.tsx +++ b/docs/suspensive.org/src/components/HomePage.tsx @@ -1,7 +1,7 @@ import { motion } from 'motion/react' import Image from 'next/image' +import Link from 'next/link' import { useRouter } from 'nextra/hooks' -import { Link } from 'nextra-theme-docs' const CodeBlockClassName = 'nextra-code' @@ -14,63 +14,95 @@ const backtickToCodeBlock = (text: string) => const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc)) export const HomePage = ({ - title, description, buttonText, items, - version, + children, }: { title: string description: string buttonText: string items: { title: string; desc: string }[] version: number + children?: React.ReactNode }) => { const router = useRouter() return ( -
-
- Suspensive with star -
-
- {title}{' '} - v{version} + <> + +
+
+ Suspensive with star +
+
+ {description} +
+ + npm i @suspensive/react + +
-

{description}

+ + + {buttonText} + +
- - - {buttonText} - - -
-
-
- {items.map(({ title, desc }) => ( -
-
{title}
-

-
- ))} -
-
+
+
+ {items.map(({ title, desc }, index) => ( + +
{title}
+

+ + ))} +

+ + + {children} + + ) } diff --git a/docs/suspensive.org/src/components/Scrollycoding.tsx b/docs/suspensive.org/src/components/Scrollycoding.tsx index 61edf5557..7a82d0091 100644 --- a/docs/suspensive.org/src/components/Scrollycoding.tsx +++ b/docs/suspensive.org/src/components/Scrollycoding.tsx @@ -83,7 +83,7 @@ export function Scrollycoding(props: unknown) { className="mb-56 cursor-pointer px-5 py-2 opacity-30 blur-lg transition data-[selected=true]:opacity-100 data-[selected=true]:blur-none" >

{step.title}

-
{step.children}
+
{step.children}
))}
diff --git a/docs/suspensive.org/src/components/SectionText.tsx b/docs/suspensive.org/src/components/SectionText.tsx new file mode 100644 index 000000000..0827530f0 --- /dev/null +++ b/docs/suspensive.org/src/components/SectionText.tsx @@ -0,0 +1,10 @@ +import type { ReactNode } from 'react' + +export const SectionTitle = ({ children }: { children: ReactNode }) => ( +

+ {children} +

+) +export const SectionDescription = ({ children }: { children: ReactNode }) => ( +

{children}

+) diff --git a/docs/suspensive.org/src/components/index.ts b/docs/suspensive.org/src/components/index.ts index 0e7eee0cc..5de8f8f3c 100644 --- a/docs/suspensive.org/src/components/index.ts +++ b/docs/suspensive.org/src/components/index.ts @@ -3,3 +3,4 @@ export { HomePage } from './HomePage' export { Sandpack } from './Sandpack' export { BubbleChart } from './BubbleChart' export { Scrollycoding } from './Scrollycoding' +export { SectionTitle, SectionDescription } from './SectionText' diff --git a/docs/suspensive.org/src/pages/en/index.mdx b/docs/suspensive.org/src/pages/en/index.mdx index bf32e55aa..5d45df6fe 100644 --- a/docs/suspensive.org/src/pages/en/index.mdx +++ b/docs/suspensive.org/src/pages/en/index.mdx @@ -1,8 +1,11 @@ -import { HomePage, Scrollycoding } from '@/components' +import { + HomePage, + Scrollycoding, + SectionDescription, + SectionTitle, +} from '@/components' +> # !!steps If you write code without Suspense with TanStack Query, a representative library, you would write it like this. @@ -181,9 +184,10 @@ const Page = () => ( -## This is why we make Suspensive. - -### Suspense, ClientOnly, DefaultProps +This is why we make Suspensive +
+Suspense, ClientOnly, DefaultProps +
# !!steps When using frameworks like Next.js, it can be difficult to use Suspense on the server. @@ -299,7 +303,8 @@ const Page = () => ( -### ErrorBoundaryGroup, ErrorBoundary +ErrorBoundaryGroup, ErrorBoundary +
@@ -422,3 +427,5 @@ const DeepComponent = () => ( ``` + + diff --git a/docs/suspensive.org/src/pages/ko/index.mdx b/docs/suspensive.org/src/pages/ko/index.mdx index 898ed9019..91483e2b6 100644 --- a/docs/suspensive.org/src/pages/ko/index.mdx +++ b/docs/suspensive.org/src/pages/ko/index.mdx @@ -1,8 +1,11 @@ -import { HomePage, Scrollycoding } from '@/components' +import { + HomePage, + Scrollycoding, + SectionDescription, + SectionTitle, +} from '@/components' ( -## 이것이 우리가 Suspensive를 만드는 이유입니다. - -### Suspense, ClientOnly, DefaultProps +이것이 우리가 Suspensive를 만드는 이유입니다 +
+Suspense, ClientOnly, DefaultProps +
@@ -300,7 +304,8 @@ const Page = () => ( -### ErrorBoundaryGroup, ErrorBoundary +ErrorBoundaryGroup, ErrorBoundary +
diff --git a/docs/suspensive.org/src/styles/globals.css b/docs/suspensive.org/src/styles/globals.css index 321d0d642..0e4cd2378 100644 --- a/docs/suspensive.org/src/styles/globals.css +++ b/docs/suspensive.org/src/styles/globals.css @@ -9,3 +9,7 @@ .scrollbar-none::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } + +body { + background-color: #0c0c0c; +}