docs(suspensive.org): nextra 3 (#1301)

# Overview  1. Nextra v2 -> v3 done! 2. Some framer-motion is added ![chrome-capture-2024-10-11](https://github.com/user-attachments/assets/aa7f1dd3-1ab7-4328-98fc-44014fd3f8b9) ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Gwansik Kim <[email protected]>
toss · Oct 11, 2024 · 51b2308 · 51b2308
1 parent 8f26227
commit 51b2308
Show file tree

Hide file tree

Showing 113 changed files with 2,044 additions and 1,383 deletions.
diff --git a/docs/suspensive.org/next.config.js b/docs/suspensive.org/next.config.js
diff --git a/docs/suspensive.org/next.config.mjs b/docs/suspensive.org/next.config.mjs
@@ -0,0 +1,34 @@
+import nextra from 'nextra'
+import { remarkSandpack } from 'remark-sandpack'
+
+const withNextra = nextra({
+  autoImportThemeStyle: true,
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+  defaultShowCopyCode: true,
+  latex: true,
+  mdxOptions: {
+    remarkPlugins: [remarkSandpack],
+    rehypePlugins: [],
+    rehypePrettyCodeOptions: {
+      theme: 'github-dark-default',
+      keepBackground: false,
+    },
+  },
+  search: {
+    codeblocks: true,
+  },
+  codeHighlight: true,
+  readingTime: true,
+})
+
+/**
+ * @type {import('next').NextConfig}
+ */
+export default withNextra({
+  reactStrictMode: true,
+  i18n: {
+    locales: ['en', 'ko'],
+    defaultLocale: 'en',
+  },
+})
diff --git a/docs/suspensive.org/package.json b/docs/suspensive.org/package.json
@@ -23,12 +23,12 @@
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "catalog:",
-    "@codesandbox/sandpack-themes": "catalog:",
     "@suspensive/react": "workspace:*",
     "@suspensive/react-query-4": "workspace:*",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "d3": "^7.9.0",
+    "framer-motion": "^11.11.7",
     "next": "catalog:",
     "nextra": "catalog:",
     "nextra-theme-docs": "catalog:",

diff --git a/docs/suspensive.org/src/_app.tsx b/docs/suspensive.org/src/_app.tsx
@@ -0,0 +1,30 @@
+import Script from 'next/script'
+
+import './styles/globals.css'
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <Script src="https://www.googletagmanager.com/gtag/js?id=G-NYQZGKRL0Y" />
+      <Script id="google-analytics">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'G-NYQZGKRL0Y');
+        `}
+      </Script>
+      <Script id="microsoft-clarity" type="text/javascript">
+        {`
+          (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "jnyd3uxeuz");
+        `}
+      </Script>
+    </>
+  )
+}
diff --git a/docs/suspensive.org/src/pages/_document.tsx → docs/suspensive.org/src/_document.tsx b/docs/suspensive.org/src/pages/_document.tsx → docs/suspensive.org/src/_document.tsx
diff --git a/docs/suspensive.org/src/_meta.tsx b/docs/suspensive.org/src/_meta.tsx
@@ -0,0 +1,37 @@
+export default {
+  index: {
+    type: 'page',
+    display: 'hidden',
+    theme: {
+      layout: 'full',
+    },
+  },
+  docs: {
+    type: 'page',
+    title: '문서보기',
+  },
+  visualization: {
+    type: 'page',
+    title: '시각화 자료',
+    href: 'https://visualization.suspensive.org',
+    newWindow: true,
+  },
+  versions: {
+    type: 'menu',
+    title: 'latest',
+    items: {
+      latest: {
+        title: 'latest',
+        href: 'https://suspensive.org/ko',
+      },
+      v2: {
+        title: 'v2',
+        href: 'https://v2.suspensive.org/ko',
+      },
+      v1: {
+        title: 'v1',
+        href: 'https://v1.suspensive.org/ko',
+      },
+    },
+  },
+}
diff --git a/docs/suspensive.org/src/components/BubbleChart.tsx b/docs/suspensive.org/src/components/BubbleChart.tsx
@@ -1,8 +1,11 @@
 import { Suspense } from '@suspensive/react'
 import { QueryErrorBoundary, SuspenseQuery, queryOptions } from '@suspensive/react-query-4'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import * as d3 from 'd3'
 import Link from 'next/link'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import '../styles/globals.css'
 
 const contributorsQueryOptions = () =>
   queryOptions({
@@ -47,69 +50,85 @@ const contributorsQueryOptions = () =>
       }),
   })
 
-export const BubbleChart = () => (
-  <QueryErrorBoundary
-    fallback={
-      <Link href="https://github.com/toss/suspensive/graphs/contributors">
-        <br />
-        <img
-          src="https://contrib.rocks/image?repo=toss/suspensive"
-          alt="contributors"
-          data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
-          style={{ maxWidth: '100%' }}
-        />
-      </Link>
-    }
-  >
-    <Suspense clientOnly fallback={<></>}>
-      <SuspenseQuery {...contributorsQueryOptions()}>
-        {({ data }) => {
-          const chartData = data
-            ?.filter(
-              ({ author }) => !['github-actions[bot]', 'dependabot[bot]', 'renovate[bot]'].includes(author.login)
-            )
-            .map(({ author, total }) => ({
-              name: author.login,
-              value: total,
-              avatar: author.avatar_url,
-              htmlUrl: author.html_url,
-            }))
+export const BubbleChart = () => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: 0,
+          },
+        },
+      })
+  )
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <QueryErrorBoundary
+        fallback={
+          <Link href="https://github.com/toss/suspensive/graphs/contributors">
+            <br />
+            <img
+              src="https://contrib.rocks/image?repo=toss/suspensive"
+              alt="contributors"
+              data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
+              style={{ maxWidth: '100%' }}
+            />
+          </Link>
+        }
+      >
+        <Suspense clientOnly fallback={<></>}>
+          <SuspenseQuery {...contributorsQueryOptions()}>
+            {({ data }) => {
+              const chartData = data
+                ?.filter(
+                  ({ author }) => !['github-actions[bot]', 'dependabot[bot]', 'renovate[bot]'].includes(author.login)
+                )
+                .map(({ author, total }) => ({
+                  name: author.login,
+                  value: total,
+                  avatar: author.avatar_url,
+                  htmlUrl: author.html_url,
+                }))
 
-          if (chartData) {
-            return (
-              <>
-                <div className="flex w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:hidden">
-                  <BubbleChartSize chartData={chartData} height={400} width={400} padding={2} />
-                </div>
-                <div className="hidden w-[100%] items-center justify-center overflow-visible sm:flex md:hidden lg:hidden">
-                  <BubbleChartSize chartData={chartData} height={630} width={630} padding={6} />
-                </div>
-                <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:flex lg:hidden">
-                  <BubbleChartSize chartData={chartData} height={560} width={560} padding={4} />
-                </div>
-                <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:flex">
-                  <BubbleChartSize chartData={chartData} height={760} width={760} padding={8} />
-                </div>
-              </>
-            )
-          }
+              if (chartData) {
+                return (
+                  <>
+                    <div className="flex w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:hidden">
+                      <BubbleChartSize chartData={chartData} height={400} width={400} padding={2} />
+                    </div>
+                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:flex md:hidden lg:hidden">
+                      <BubbleChartSize chartData={chartData} height={630} width={630} padding={6} />
+                    </div>
+                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:flex lg:hidden">
+                      <BubbleChartSize chartData={chartData} height={560} width={560} padding={4} />
+                    </div>
+                    <div className="hidden w-[100%] items-center justify-center overflow-visible sm:hidden md:hidden lg:flex">
+                      <BubbleChartSize chartData={chartData} height={760} width={760} padding={8} />
+                    </div>
+                  </>
+                )
+              }
 
-          return (
-            <Link href="https://github.com/toss/suspensive/graphs/contributors">
-              <br />
-              <img
-                src="https://contrib.rocks/image?repo=toss/suspensive"
-                alt="contributors"
-                data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
-                style={{ maxWidth: '100%' }}
-              />
-            </Link>
-          )
-        }}
-      </SuspenseQuery>
-    </Suspense>
-  </QueryErrorBoundary>
-)
+              return (
+                <Link href="https://github.com/toss/suspensive/graphs/contributors">
+                  <br />
+                  <img
+                    src="https://contrib.rocks/image?repo=toss/suspensive"
+                    alt="contributors"
+                    data-canonical-src="https://contrib.rocks/image?repo=toss/suspensive"
+                    style={{ maxWidth: '100%' }}
+                  />
+                </Link>
+              )
+            }}
+          </SuspenseQuery>
+        </Suspense>
+      </QueryErrorBoundary>
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  )
+}
 
 type Node = {
   name: string

diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx
@@ -1,6 +1,8 @@
+import { motion } from 'framer-motion'
 import Image from 'next/image'
+import { useRouter } from 'nextra/hooks'
 import { Link } from 'nextra-theme-docs'
-import React from 'react'
+import '../styles/globals.css'
 
 export const HomePage = ({
   title,
@@ -15,6 +17,8 @@ export const HomePage = ({
   items: { title: string; desc: string }[]
   version: number
 }) => {
+  const router = useRouter()
+
   return (
     <div className="pb-20">
       <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
@@ -25,8 +29,15 @@ export const HomePage = ({
           </div>
           <p className="text-3xl">{description}</p>
         </div>
-        <Link href="/docs/react/motivation">
-          <button className="rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold">{buttonText}</button>
+        <Link href={`/${router.locale}/docs/react/motivation`}>
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            type="button"
+            className="animate-pulse rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold"
+          >
+            {buttonText}
+          </motion.button>
         </Link>
       </div>
 

diff --git a/docs/suspensive.org/src/components/Sandpack/index.tsx b/docs/suspensive.org/src/components/Sandpack/index.tsx
@@ -5,7 +5,6 @@ import {
   SandpackProvider,
   type SandpackProviderProps,
 } from '@codesandbox/sandpack-react'
-import { atomDark } from '@codesandbox/sandpack-themes'
 import { baseTemplate } from './baseTemplate'
 import { CustomPreset } from './CustomPreset'
 
@@ -26,7 +25,17 @@ export const Sandpack = (props: SandpackProps) => {
   return (
     <SandpackProvider
       template="react-ts"
-      theme={atomDark}
+      theme={{
+        colors: { surface1: '#000000', surface2: '#404040' },
+        syntax: {
+          keyword: '#ff7a70',
+          definition: '#8dff97',
+          tag: '#7BE183',
+          string: '#a4d6fe',
+          static: '#a4d6fe',
+          property: '#78BEFD',
+        },
+      }}
       {...props}
       files={{
         ...baseTemplate.files,
@@ -50,7 +59,7 @@ export const Sandpack = (props: SandpackProps) => {
     >
       <CustomPreset
         layoutOptions={props.layoutOptions}
-        editorOptions={props.editorOptions}
+        editorOptions={{ ...props.editorOptions, showLineNumbers: false }}
         previewOptions={props.previewOptions}
       />
     </SandpackProvider>