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

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,147 @@
+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 { compileMDX } 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 mdxSource = await compileMDX({
+    source: content,
+    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,
+    },
+    components,
+  });
+
+  const navList = getDocsOrderList('/docs');
+
+  return <SlugPage navList={navList} source={mdxSource.content} />;
+}
+
+export async function generateMetadata({ params }: Props) {
+  const slug = params.slug?.join('/') ?? 'index';
+  const { meta } = getDocsFromSlug(slug);
+
+  return {
+    ...meta,
+  };
+}
+
+export const dynamicParams = false;
+
+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,72 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Head from 'next/head';
+import { type DocsOrderList } from '@/utils/mdxUtils';
+import { Layout, Navigator } from '@/components';
+
+export default function DocsPage({ source, navList }: { source: React.ReactElement; navList: DocsOrderList }) {
+  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')));
+  }, [source]);
+
+  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 (
+    <Layout className="documentation_page">
+      <Head>
+        <title>Documentation · Yorkie</title>
+      </Head>
+      <div className="content">
+        <Navigator navList={navList} />
+        <section className="section">{source}</section>
+      </div>
+    </Layout>
+  );
+}

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 />;
+}

app/examples/page.tsx

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

app/examples/profile-stack/page.tsx

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

pages/examples/profile-stack.tsx → app/examples/profile-stack/profile-stack-page.tsx

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

app/examples/quill/page.tsx

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

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

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

app/examples/simultaneous-cursors/page.tsx

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

pages/examples/simultaneous-cursors.tsx → app/examples/simultaneous-cursors/simultaneous-cursors-page.tsx

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

app/examples/tldraw/page.tsx

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

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

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

app/examples/todomvc/page.tsx

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

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { ExampleLayout } from '@/components';
 import {
   BasicExampleView,

app/examples/webtoons/page.tsx

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

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

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

pages/index.tsx → app/home-page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import type { NextPage } from 'next';