Merge pull request #17 from jason89521/add-example

Author: jason89521

package.json

@@ -13,8 +13,8 @@
     "preinstall": "npx only-allow pnpm",
     "commit": "cz",
     "test": "pnpm -r --filter ./packages/* run test",
-    "dev:website": "pnpm --filter ./website dev",
-    "build:website": "pnpm --filter ./website run build",
+    "dev:website": "pnpm build:packages && pnpm --filter ./website dev",
+    "build:website": "pnpm build:packages && pnpm --filter ./website run build",
     "build:packages": "pnpm -r --filter ./packages/* run build:package",
     "prepublishOnly": "pnpm build:lib"
   },
@@ -47,5 +47,8 @@
       "@vitejs/plugin-react": "^2.1.0",
       "typescript": "^4.8.3"
     }
+  },
+  "dependencies": {
+    "next": "12.3.1"
   }
 }

pnpm-lock.yaml

@@ -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/contentlayer.config.js

@@ -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/contents/docs/react-typist-component.mdx

@@ -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/common/components/NotProse.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/TypistExamples.tsx

@@ -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/components/index.ts

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

website/modules/docs/types.ts

@@ -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/modules/layout/components/Aside.tsx

@@ -1,23 +1,33 @@
 import { allDocs, Doc } from 'contentlayer/generated';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import { useMDXComponent } from 'next-contentlayer/hooks';
+import Head from 'next/head';
 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'>
+      <Head>
+        <title>{doc.title}</title>
+        <meta name='description' content={doc.intro} />
+      </Head>
       <article className='prose max-w-none'>
-        <MDXComponent />
+        <h1>{doc.title}</h1>
+        <p>{doc.intro}</p>
+        <MDXComponent components={components[doc.name]} />
       </article>
     </div>
   );
@@ -34,7 +44,7 @@ export const getStaticProps: GetStaticProps<
 
 export const getStaticPaths: GetStaticPaths = () => {
   const paths = allDocs.map(doc => ({
-    params: { component: doc.title },
+    params: { component: doc.name },
   }));
 
   return {