migration hompage's next.js code to 13+ version

.github/workflows/ci.yml

@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Detect package manager
         id: detect-package-manager
         uses: ./.github/actions/detect-package-manager
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: '20'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v2
@@ -42,10 +42,8 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
       - name: Optimize all static images after the Next.js static export
-        run: ${{ steps.detect-package-manager.outputs.runner }} next-image-export-optimizer  
+        run: ${{ steps.detect-package-manager.outputs.runner }} next-image-export-optimizer
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.github/workflows/deploy.yml

@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -20,7 +20,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
@@ -29,14 +29,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Detect package manager
         id: detect-package-manager
         uses: ./.github/actions/detect-package-manager
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: '20'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v2
@@ -60,10 +60,8 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
       - name: Optimize all static images after the Next.js static export
-        run: ${{ steps.detect-package-manager.outputs.runner }} next-image-export-optimizer  
+        run: ${{ steps.detect-package-manager.outputs.runner }} next-image-export-optimizer
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

app/_components/ThemeInitializer.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { type ThemeOption, useTheme } from '@/hooks/useTheme';
+import { useEffect } from 'react';
+
+function ThemeInitializer() {
+  const { setTheme } = useTheme();
+  useEffect(() => {
+    const themeOption = (window.localStorage.getItem('theme') || 'system') as ThemeOption;
+    setTheme(themeOption);
+  }, [setTheme]);
+
+  return null;
+}
+
+export default ThemeInitializer;

pages/community.tsx → app/community/community-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { Button, Icon, Layout } from '@/components';

app/community/page.tsx

@@ -0,0 +1,5 @@
+import CommunityPage from './community-page';
+
+export default async function Page() {
+  return <CommunityPage />;
+}

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

@@ -0,0 +1,149 @@
+import { getSlugs, getDocsFromSlug, getDocsMetaFromSlug, getDocsOrderList } from '@/utils/mdxUtils';
+import type { MDXComponents } from 'mdx/types';
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeToc, { HtmlElementNode, ListItemNode } from '@jsdevtools/rehype-toc';
+import rehypeImageMeta from '@/utils/rehypeImageMeta';
+import rehypeWrapContents from '@/utils/rehypeWrapContents';
+import rehypeVariables from '@/utils/rehypeVariables';
+import { Button, Icon, CodeBlock, CodeBlockHeader, Image } from '@/components';
+import { CustomLink, CustomCodeBlock, Breadcrumb, Caption, ImageWrap, Alert, Blockquote } from '@/components/docs';
+import SlugPage from './slug-page';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+
+type Props = {
+  params: {
+    slug?: string[];
+  };
+};
+
+const components: MDXComponents = {
+  a: CustomLink,
+  h3: (props) => <h3 className="heading" {...props} />,
+  h4: (props) => <h4 className="heading" {...props} />,
+  h5: (props) => <h5 className="heading" {...props} />,
+  h6: (props) => <h6 className="heading" {...props} />,
+  Button,
+  Icon,
+  pre: (props) => <CustomCodeBlock {...props} />,
+  blockquote: (props) => <Blockquote {...props} />,
+  img: ({ src, alt, title, width, height }) => (
+    <Image src={src!} alt={alt || ''} title={title} width={width as number} height={height as number} />
+  ),
+  Image,
+  ImageWrap,
+  Breadcrumb,
+  Caption,
+  Alert,
+  CodeBlock,
+  CodeBlockHeader,
+};
+
+export default async function DocsPage({ params }: Props) {
+  const slug = params.slug?.join('/') ?? 'index';
+
+  const { content } = getDocsFromSlug(slug);
+
+  const navList = getDocsOrderList('/docs');
+
+  return (
+    <SlugPage navList={navList} content={content}>
+      {/* @ts-expect-error Async Server Component */}
+      <MDXRemote
+        source={content}
+        components={components}
+        options={{
+          mdxOptions: {
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [
+              rehypeImageMeta,
+              [
+                rehypeVariables,
+                {
+                  variables: [
+                    { pattern: 'YORKIE_VERSION', value: process.env.NEXT_PUBLIC_YORKIE_VERSION },
+                    { pattern: 'YORKIE_JS_VERSION', value: process.env.NEXT_PUBLIC_YORKIE_JS_VERSION },
+                    { pattern: 'YORKIE_IOS_VERSION', value: process.env.NEXT_PUBLIC_YORKIE_IOS_VERSION },
+                    { pattern: 'YORKIE_ANDROID_VERSION', value: process.env.NEXT_PUBLIC_YORKIE_ANDROID_VERSION },
+                    { pattern: 'DASHBOARD_PATH', value: process.env.NEXT_PUBLIC_DASHBOARD_PATH },
+                    { pattern: 'API_ADDR', value: process.env.NEXT_PUBLIC_API_ADDR },
+                    { pattern: 'API_HOST', value: process.env.NEXT_PUBLIC_API_HOST },
+                    { pattern: 'API_PORT', value: process.env.NEXT_PUBLIC_API_PORT },
+                  ],
+                },
+              ],
+              rehypeSlug,
+              [
+                rehypeAutolinkHeadings,
+                {
+                  test: ['h3', 'h4', 'h5', 'h6'],
+                  behavior: 'wrap',
+                },
+              ],
+              [
+                rehypeToc,
+                {
+                  position: 'afterend',
+                  headings: ['h3', 'h4', 'h5', 'h6'],
+                  customizeTOC: (toc: HtmlElementNode) => {
+                    const children = toc.children || [];
+                    const contents = (children[0] as any)?.children?.length;
+                    if (!contents) return false;
+
+                    toc.tagName = 'div';
+                    toc.properties.className = 'pagination';
+                    const wrapper = {
+                      type: 'element',
+                      tagName: 'div',
+                      properties: { className: 'pagination_inner' },
+                      children: [
+                        {
+                          type: 'element',
+                          tagName: 'strong',
+                          properties: { className: 'pagination_title' },
+                          children: [{ type: 'text', value: 'On this page' }],
+                        },
+                        ...children,
+                      ],
+                    };
+                    toc.children = [wrapper];
+                  },
+                  customizeTOCItem: (tocItem: ListItemNode, heading: HtmlElementNode) => {
+                    tocItem.properties['data-heading'] = heading.properties.id;
+                  },
+                },
+              ],
+              rehypeWrapContents,
+            ],
+          },
+          parseFrontmatter: true,
+        }}
+      />
+    </SlugPage>
+  );
+}
+
+export async function generateMetadata({ params }: Props) {
+  const slug = params.slug?.join('/') ?? 'index';
+  const { meta } = getDocsFromSlug(slug);
+
+  return {
+    ...meta,
+  };
+}
+
+export const generateStaticParams = () => {
+  const params = getSlugs()
+    .filter((slug) => {
+      if (process.env.NODE_ENV === 'development') return true;
+
+      const { phase } = getDocsMetaFromSlug(slug);
+      return phase !== 'development';
+    })
+    .map((slug) => ({
+      slug: slug === 'index' ? [''] : slug.split('/'),
+    }));
+
+  return params;
+};

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

@@ -0,0 +1,27 @@
+import Head from 'next/head';
+import { type DocsOrderList } from '@/utils/mdxUtils';
+import { Layout, Navigator } from '@/components';
+import ScrollPositionIndicator from '../_components/ScrollPositionIndicator';
+
+export default function DocsPage({
+  content,
+  navList,
+  children,
+}: {
+  content: string;
+  navList: DocsOrderList;
+  children: React.ReactNode;
+}) {
+  return (
+    <Layout className="documentation_page">
+      <Head>
+        <title>Documentation · Yorkie</title>
+      </Head>
+      <ScrollPositionIndicator content={content} />
+      <div className="content">
+        <Navigator navList={navList} />
+        <section className="section">{children}</section>
+      </div>
+    </Layout>
+  );
+}

app/docs/_components/ScrollPositionIndicator.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+export default function ScrollPositionIndicator({ content }: { content: string }) {
+  const [activeId, setActiveId] = useState<string>('');
+  const [headings, setHeadings] = useState<Array<Element>>([]);
+  const [headingTops, setHeadingTops] = useState<Array<{ id: string; top: number }>>([]);
+
+  const updateHeadingPositions = useCallback(() => {
+    const scrollTop = document.documentElement.scrollTop;
+    const headingTops = [...headings].map((heading) => {
+      const top = heading.getBoundingClientRect().top + scrollTop;
+      return {
+        id: heading.id,
+        top,
+      };
+    });
+    setHeadingTops(headingTops);
+  }, [headings]);
+
+  useEffect(() => {
+    setHeadings(Array.from(document.querySelectorAll('.documentation_page .heading')));
+  }, [content]);
+
+  useEffect(() => {
+    if (headings.length === 0) return;
+
+    const setActiveTOCLink = () => {
+      const scrollTop = document.documentElement.scrollTop;
+      const yOffset = 150;
+
+      const currentHeading =
+        scrollTop < 10
+          ? headingTops.find((headingTop) => {
+              return scrollTop >= headingTop.top - yOffset;
+            })
+          : [...headingTops].reverse().find((headingTop) => {
+              return scrollTop >= headingTop.top - yOffset;
+            });
+
+      setActiveId(currentHeading?.id || '');
+    };
+
+    window.addEventListener('scroll', setActiveTOCLink);
+    setActiveTOCLink();
+    return () => {
+      window.removeEventListener('scroll', setActiveTOCLink);
+    };
+  }, [headings, headingTops]);
+
+  useEffect(() => {
+    updateHeadingPositions();
+    document.querySelector(`.toc-item.is_active`)?.classList.remove('is_active');
+    document.querySelector(`[data-heading="${activeId}"]`)?.classList.add('is_active');
+  }, [activeId, updateHeadingPositions]);
+
+  return null;
+}

pages/examples/calendar.tsx → app/examples/calendar/calendar-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { ExampleLayout } from '@/components';

app/examples/calendar/page.tsx

@@ -0,0 +1,5 @@
+import CalendarPage from './calendar-page';
+
+export default async function Page() {
+  return <CalendarPage />;
+}

pages/examples/codemirror.tsx → app/examples/codemirror/codemirror-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { ExampleLayout } from '@/components';

app/examples/codemirror/page.tsx

@@ -0,0 +1,5 @@
+import CodeMirrorPage from './codemirror-page';
+
+export default async function Page() {
+  return <CodeMirrorPage />;
+}

pages/examples/index.tsx → app/examples/example-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Button, Icon, Layout } from '@/components';
 import { ExampleThumbnailImage } from '@/components/exampleView';
 import ExampleBannerSVG from '@/public/assets/images/banner/img_example_banner.svg';

pages/examples/kanban.tsx → app/examples/kanban/kanban-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { ExampleLayout, CodeBlock } from '@/components';

app/examples/kanban/page.tsx

@@ -0,0 +1,5 @@
+import KanbanPage from './kanban-page';
+
+export default async function Page() {
+  return <KanbanPage />;
+}

pages/examples/multi-cursor.tsx → app/examples/multi-cursor/multi-cursor-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';

app/examples/multi-cursor/page.tsx

@@ -0,0 +1,5 @@
+import MultiCursorPage from './multi-cursor-page';
+
+export default async function Page() {
+  return <MultiCursorPage />;
+}