Add fetch post list

* add gray-matter
This commit is contained in:
Defectink
2022-03-22 17:03:35 +08:00
parent c651389aa3
commit 1179cc3c1f
9 changed files with 150 additions and 6 deletions

View File

@ -52,14 +52,14 @@ const HeadBar: FC = () => {
className={cn(
'text-lg md:block',
'bg-white rounded-md',
'dark:bg-rua-gray-800',
'absolute md:static',
'p-5 right-6 top-14',
'md:bg-transparent md:p-[unset]',
'md:right-[unset] md:top-[unset]',
'w-1/3 md:w-auto',
{
hidden: !showMenu,
}
'md:dark:bg-transparent',
showMenu || 'hidden'
)}
>
<ul className={cn('flex flex-col', 'md:flex-row')}>

4
lib/utils/constant.ts Normal file
View File

@ -0,0 +1,4 @@
export const server =
process.env.NODE_ENV === 'development'
? 'http://localhost:3000'
: 'https://rua.plus';

12
lib/utils/index.ts Normal file
View File

@ -0,0 +1,12 @@
export const sortByDate = (
{ date: a }: { date: string },
{ date: b }: { date: string }
) => {
if (a < b) {
return 1;
} else if (a > b) {
return -1;
} else {
return 0;
}
};

View File

@ -29,6 +29,7 @@
"autoprefixer": "^10.4.4",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0",
"gray-matter": "^4.0.3",
"jest": "^27.5.1",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23",

38
pages/api/posts.ts Normal file
View File

@ -0,0 +1,38 @@
import type { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { MyMatters, Post } from 'types';
import { sortByDate } from 'lib/utils';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Post[]>
) {
const getPosts = () => {
const files = fs.readdirSync(path.join('pages/p'));
const posts = files
.map((filename) => {
const markdownWithMeta = fs.readFileSync(
path.join('pages/p', filename),
'utf-8'
);
const slug = filename.replace(/\.mdx$/, '');
const { data: meta } = matter(markdownWithMeta);
return {
slug,
...({ ...meta } as MyMatters),
};
})
.sort(sortByDate);
res.status(200).json(posts);
};
switch (req.method) {
case 'GET':
return getPosts();
default:
return res.status(405).end(`Method ${req.method} Not Allowed`);
}
}

View File

@ -1,7 +1,40 @@
import { FC } from 'react';
import MainLayout from 'layouts/MainLayout';
import { Post } from 'types';
import { InferGetStaticPropsType } from 'next';
import { ReactElement } from 'react';
import { server } from 'lib/utils/constant';
const Blog: FC = () => {
return <></>;
const Blog = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<>
<main className="max-w-3xl mx-auto">
<h1 className="text-5xl font-semibold text-center font-Barlow">
Blog posts
</h1>
<div>
{posts.map((post) => (
<article key={post.slug}>{post.title}</article>
))}
</div>
</main>
</>
);
};
export const getStaticProps = async () => {
const response = await fetch(`${server}/api/posts`);
const posts = (await response.json()) as Post[];
return {
props: {
posts,
},
};
};
Blog.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;
};
export default Blog;

View File

@ -1,3 +1,9 @@
---
title: First post test
date: '2022-03-22'
tags: ['functions', 'javascript']
---
## Hello
This is my first post.

View File

@ -9,3 +9,13 @@ export type NextPageWithLayout = {
export type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
export interface MyMatters {
title: string;
date: string;
tags: string;
}
export interface Post extends MyMatters {
slug: string;
}

View File

@ -2083,6 +2083,13 @@ expect@^27.5.1:
jest-matcher-utils "^27.5.1"
jest-message-util "^27.5.1"
extend-shallow@^2.0.1:
version "2.0.1"
resolved "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
dependencies:
is-extendable "^0.1.0"
extend@^3.0.0:
version "3.0.2"
resolved "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@ -2308,6 +2315,16 @@ graceful-fs@^4.2.9:
resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
gray-matter@^4.0.3:
version "4.0.3"
resolved "https://registry.npmmirror.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
dependencies:
js-yaml "^3.13.1"
kind-of "^6.0.2"
section-matter "^1.0.0"
strip-bom-string "^1.0.0"
has-bigints@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@ -2535,6 +2552,11 @@ is-decimal@^2.0.0:
resolved "https://registry.npmmirror.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
is-extendable@^0.1.0:
version "0.1.1"
resolved "https://registry.npmmirror.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
is-extglob@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@ -3185,6 +3207,11 @@ json5@^2.1.2:
array-includes "^3.1.3"
object.assign "^4.1.2"
kind-of@^6.0.0, kind-of@^6.0.2:
version "6.0.3"
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
kleur@^3.0.3:
version "3.0.3"
resolved "https://registry.npmmirror.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@ -4383,6 +4410,14 @@ scheduler@^0.20.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
section-matter@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
dependencies:
extend-shallow "^2.0.1"
kind-of "^6.0.0"
semver@^6.0.0, semver@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@ -4546,6 +4581,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
dependencies:
ansi-regex "^5.0.1"
strip-bom-string@^1.0.0:
version "1.0.0"
resolved "https://registry.npmmirror.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
strip-bom@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"