feat(website): add Typist example

Author: jason89521

website/contentlayer.config.js

@@ -6,6 +6,12 @@ export const Doc = defineDocumentType(() => ({
   filePathPattern: 'docs/**/*.mdx',
   contentType: 'mdx',
   fields: {
+    name: {
+      type: 'enum',
+      options: ['react-typist-component'],
+      description: `The package's name`,
+      required: true,
+    },
     title: {
       type: 'string',
       description: 'The title of the document',

website/contents/docs/react-typist-component.mdx

@@ -1,12 +1,9 @@
 ---
-title: react-typist-component
+name: react-typist-component
+title: React Typist Component
 intro: A react component for creating typewritter effect by setting up its children directy.
 ---
 
-# React Typist Component
-
-Create typewriter effect by setting up a component's children directly.
-
 ## Install
 
 ```bash
@@ -15,7 +12,17 @@ npm install react-typist-component
 yarn add react-typist-component
 ```
 
-## Example
+## Features
+
+### Support Looping
+
+<Loop />
+
+### Support Pausing
+
+<Pause />
+
+## Examples
 
 ```jsx
 import Typist from 'react-typist-component';

website/modules/common/components/NotProse.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function NotProse({ children }: Props) {
+  return <div className='not-prose'>{children}</div>;
+}

website/modules/docs/components/TypistExamples.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import Typist from 'react-typist-component';
+
+import NotProse from '~/modules/common/components/NotProse';
+
+export function Loop() {
+  return (
+    <NotProse>
+      <Typist loop={true} cursor='|'>
+        The typing animation can be looped infinitely.
+      </Typist>
+    </NotProse>
+  );
+}
+
+export function Pause() {
+  const [pause, setPause] = useState(false);
+
+  return (
+    <NotProse>
+      <div className='flex gap-2'>
+        <input
+          type='checkbox'
+          checked={pause}
+          onChange={e => setPause(e.target.checked)}
+        />
+        Pause
+      </div>
+      <Typist pause={pause} loop={true} cursor='_'>
+        You can pause the typing animation whenever you want.
+      </Typist>
+    </NotProse>
+  );
+}
+
+const TypistExamples = {
+  Loop,
+  Pause,
+};
+
+export default TypistExamples;

website/modules/docs/components/index.ts

@@ -0,0 +1,8 @@
+import type { ComponentName, ExamplesType } from '../types';
+import TypistExamples from './TypistExamples';
+
+const components: Record<ComponentName, ExamplesType> = {
+  'react-typist-component': TypistExamples,
+};
+
+export default components;

website/modules/docs/types.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+
+export type ComponentName = 'react-typist-component';
+export type ExamplesType = Record<string, () => ReactNode>;

website/modules/layout/components/Aside.tsx

@@ -6,17 +6,15 @@ interface Props {
 }
 
 export default function Aside({ docs }: Props) {
-  const titles = docs?.map(doc => doc.title) || [];
-
   return (
     <aside
       style={{ height: 'calc(100vh - 5rem)' }}
       className='sticky top-20 flex-shrink-0 border-r border-r-black py-5 pr-5'>
       <ul>
-        {titles.map(title => {
+        {docs?.map(doc => {
           return (
-            <li key={title} className='text-lg text-primary hover:underline'>
-              <Link href={`/${title}`}>{title}</Link>
+            <li key={doc._id} className='text-lg text-primary hover:underline'>
+              <Link href={`/${doc.name}`}>{doc.title}</Link>
             </li>
           );
         })}

website/pages/[component].tsx

@@ -3,21 +3,26 @@ import type { GetStaticPaths, GetStaticProps } from 'next';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import { useRouter } from 'next/router';
 
+import components from '~/modules/docs/components';
+
 interface Props {
   docs: Doc[];
 }
 
 export default function Component({ docs }: Props) {
   const { query } = useRouter();
-  const doc = docs.find(d => d.title === query.component);
+  const doc = docs.find(d => d.name === query.component);
+
   const MDXComponent = useMDXComponent(doc?.body.code || '');
 
   if (!doc) return null;
 
   return (
     <div className='p-10'>
       <article className='prose max-w-none'>
-        <MDXComponent />
+        <h1>{doc.title}</h1>
+        <p>{doc.intro}</p>
+        <MDXComponent components={components[doc.name]} />
       </article>
     </div>
   );
@@ -34,7 +39,7 @@ export const getStaticProps: GetStaticProps<
 
 export const getStaticPaths: GetStaticPaths = () => {
   const paths = allDocs.map(doc => ({
-    params: { component: doc.title },
+    params: { component: doc.name },
   }));
 
   return {

website/pages/index.tsx

@@ -1,7 +1,6 @@
 import { allDocs, Doc } from 'contentlayer/generated';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
-import Link from 'next/link';
 
 interface Props {
   docs: Doc[];
@@ -20,12 +19,10 @@ export default function Home({ docs }: Props) {
         <h1 className='text-4xl text-primary mb-10'>React Components</h1>
         {docs.map(doc => {
           return (
-            <Link key={doc._id} href={`/${doc.title}`}>
-              <div className='mb-6 last:mb-0'>
-                <h2 className='text-2xl mb-2'>{doc.title}</h2>
-                <p>{doc.intro}</p>
-              </div>
-            </Link>
+            <div key={doc._id} className='mb-6 last:mb-0'>
+              <h2 className='text-2xl mb-2'>{doc.title}</h2>
+              <p>{doc.intro}</p>
+            </div>
           );
         })}
       </main>