Skip to content

Commit e99a985

Browse files
jason89521jason89521
committed
feat(website): complete the prototype
1 parent 7729426 commit e99a985

12 files changed

Lines changed: 180 additions & 191 deletions

File tree

‎website/contentlayer.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ export const Doc = defineDocumentType(() => ({
1010
description: 'The title of the document',
1111
required: true,
1212
},
13+
intro: {
14+
type: 'string',
15+
description: 'The brief introduction of the document',
16+
required: true,
17+
},
1318
},
1419
}));
1520

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: react-typist-component
3+
intro: A react component for creating typewritter effect by setting up its children directy.
34
---
45

56
# React Typist Component

‎website/modules/layout/components/Aside.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { Doc } from 'contentlayer/generated';
2+
import Link from 'next/link';
3+
4+
interface Props {
5+
docs?: Doc[];
6+
}
7+
8+
export default function Aside({ docs }: Props) {
9+
const titles = docs?.map(doc => doc.title) || [];
10+
11+
return (
12+
<aside
13+
style={{ height: 'calc(100vh - 5rem)' }}
14+
className='sticky top-20 flex-shrink-0 border-r border-r-black py-5 pr-5'>
15+
<ul>
16+
{titles.map(title => {
17+
return (
18+
<li key={title} className='text-lg text-primary hover:underline'>
19+
<Link href={`/${title}`}>{title}</Link>
20+
</li>
21+
);
22+
})}
23+
</ul>
24+
</aside>
25+
);
26+
}

‎website/modules/layout/components/Header.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
4+
export default function Header() {
5+
return (
6+
<header className='sticky bg-white top-0 z-10 flex h-20 items-center justify-between border-b border-b-black px-10'>
7+
<div>
8+
<Link href='/'>
9+
<a className='text-2xl text-primary hover:underline'>
10+
React Components
11+
</a>
12+
</Link>
13+
</div>
14+
<div>
15+
<div className='transition hover:scale-110'>
16+
<a
17+
target='_blank'
18+
rel='noreferrer'
19+
href='https://github.com/jason89521/react-components-monorepo'>
20+
<Image
21+
src='/github.svg'
22+
alt='GitHub repository of this library'
23+
height={24}
24+
width={24}
25+
/>
26+
</a>
27+
</div>
28+
</div>
29+
</header>
30+
);
31+
}

‎website/pages/[component].tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { allDocs, Doc } from 'contentlayer/generated';
2+
import type { GetStaticPaths, GetStaticProps } from 'next';
3+
import { useMDXComponent } from 'next-contentlayer/hooks';
4+
import { useRouter } from 'next/router';
5+
6+
interface Props {
7+
docs: Doc[];
8+
}
9+
10+
export default function Component({ docs }: Props) {
11+
const { query } = useRouter();
12+
const doc = docs.find(d => d.title === query.component);
13+
const MDXComponent = useMDXComponent(doc?.body.code || '');
14+
15+
if (!doc) return null;
16+
17+
return (
18+
<div className='p-10'>
19+
<article className='prose max-w-none'>
20+
<MDXComponent />
21+
</article>
22+
</div>
23+
);
24+
}
25+
26+
export const getStaticProps: GetStaticProps<
27+
Props,
28+
{ component: string }
29+
> = () => {
30+
const docs = allDocs;
31+
32+
return { props: { docs } };
33+
};
34+
35+
export const getStaticPaths: GetStaticPaths = () => {
36+
const paths = allDocs.map(doc => ({
37+
params: { component: doc.title },
38+
}));
39+
40+
return {
41+
paths,
42+
fallback: false,
43+
};
44+
};

‎website/pages/_app.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
1-
import '../styles/globals.css'
2-
import type { AppProps } from 'next/app'
1+
import type { Doc } from 'contentlayer/generated';
2+
import type { AppProps } from 'next/app';
33

4-
function MyApp({ Component, pageProps }: AppProps) {
5-
return <Component {...pageProps} />
4+
import Aside from '~/modules/layout/components/Aside';
5+
import Header from '~/modules/layout/components/Header';
6+
7+
import '../styles/globals.css';
8+
import '../styles/variables.css';
9+
10+
interface PageProps {
11+
docs: Doc[];
12+
}
13+
14+
function MyApp({
15+
Component,
16+
pageProps: { docs, ...rest },
17+
}: AppProps<PageProps>) {
18+
return (
19+
<div>
20+
<Header />
21+
<section className='flex px-10'>
22+
<Aside docs={docs} />
23+
<Component docs={docs} {...rest} />
24+
</section>
25+
</div>
26+
);
627
}
728

8-
export default MyApp
29+
export default MyApp;

‎website/pages/index.tsx‎

Lines changed: 27 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,40 @@
1+
import { allDocs, Doc } from 'contentlayer/generated';
2+
import { GetStaticProps } from 'next';
13
import Head from 'next/head';
2-
import Image from 'next/image';
4+
import Link from 'next/link';
35

4-
import styles from '~/styles/Home.module.css';
6+
interface Props {
7+
docs: Doc[];
8+
}
59

6-
const Home = () => {
10+
export default function Home({ docs }: Props) {
711
return (
8-
<div className={styles.container}>
12+
<div>
913
<Head>
10-
<title>Create Next App</title>
14+
<title>React Components</title>
1115
<meta name='description' content='Generated by create next app' />
1216
<link rel='icon' href='/favicon.ico' />
1317
</Head>
1418

15-
<main className={styles.main}>
16-
<h1 className={styles.title}>
17-
Welcome to <a href='https://nextjs.org'>Next.js!</a>
18-
</h1>
19-
20-
<p className={styles.description}>
21-
Get started by editing{' '}
22-
<code className={styles.code}>pages/index.tsx</code>
23-
</p>
24-
25-
<div className={styles.grid}>
26-
<a href='https://nextjs.org/docs' className={styles.card}>
27-
<h2>Documentation &rarr;</h2>
28-
<p>Find in-depth information about Next.js features and API.</p>
29-
</a>
30-
31-
<a href='https://nextjs.org/learn' className={styles.card}>
32-
<h2>Learn &rarr;</h2>
33-
<p>Learn about Next.js in an interactive course with quizzes!</p>
34-
</a>
35-
36-
<a
37-
href='https://github.com/vercel/next.js/tree/canary/examples'
38-
className={styles.card}>
39-
<h2>Examples &rarr;</h2>
40-
<p>Discover and deploy boilerplate example Next.js projects.</p>
41-
</a>
42-
43-
<a
44-
href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
45-
className={styles.card}>
46-
<h2>Deploy &rarr;</h2>
47-
<p>
48-
Instantly deploy your Next.js site to a public URL with Vercel.
49-
</p>
50-
</a>
51-
</div>
19+
<main className='flex-grow px-10 py-5'>
20+
<h1 className='text-4xl text-primary mb-10'>React Components</h1>
21+
{docs.map(doc => {
22+
return (
23+
<Link key={doc._id} href={`/${doc.title}`}>
24+
<div className='mb-6 last:mb-0'>
25+
<h2 className='text-2xl mb-2'>{doc.title}</h2>
26+
<p>{doc.intro}</p>
27+
</div>
28+
</Link>
29+
);
30+
})}
5231
</main>
53-
54-
<footer className={styles.footer}>
55-
<a
56-
href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
57-
target='_blank'
58-
rel='noopener noreferrer'>
59-
Powered by{' '}
60-
<span className={styles.logo}>
61-
<Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
62-
</span>
63-
</a>
64-
</footer>
6532
</div>
6633
);
67-
};
34+
}
6835

69-
export default Home;
36+
export const getStaticProps: GetStaticProps<{ docs: Doc[] }> = () => {
37+
const docs = allDocs;
38+
39+
return { props: { docs } };
40+
};

‎website/public/github.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎website/styles/Home.module.css‎

Lines changed: 0 additions & 129 deletions
This file was deleted.

‎website/styles/variables.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--color-primary: #21a1ee;
3+
}

0 commit comments

Comments
 (0)