0
0
mirror of https://github.com/yude-jp/yude.jp synced 2024-06-09 23:36:01 +09:00

Add posts/

This commit is contained in:
yude 2021-09-06 10:39:12 +09:00
parent 7099eac000
commit 39457ec092
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
3 changed files with 118 additions and 0 deletions

6
libs/client.js Normal file
View File

@ -0,0 +1,6 @@
import { createClient } from 'microcms-js-sdk';
export const client = createClient({
serviceDomain: 'yude',
apiKey: process.env.MICROCMS_API_KEY,
});

54
pages/posts.js Normal file
View File

@ -0,0 +1,54 @@
// Base layout
import Layout from "./components/Layout"
// Next.js
import Link from "next/link";
// i18n
import { useRouter } from 'next/router'
import useTranslation from 'next-translate/useTranslation'
// microCMS library
import { client } from "../libs/client";
// next-seo
import { NextSeo } from 'next-seo';
export default function Home({ blog }) {
const router = useRouter()
const { locale, locales, defaultLocale, pathname } = router
const { t, lang } = useTranslation("common")
return (
<>
<NextSeo
title="記事一覧"
description="yude のブログの記事一覧 / yude's blog posts listing"
/>
<Layout title={t('common:post_list')}>
<div>
<h1 className="text-center">{t('common:post_list')}</h1>
<ul>
{blog.map((blog) => (
<li key={blog.id}>
<Link href={`/posts/${blog.id}`}>
<a>{blog.title}</a>
</Link>
</li>
))}
</ul>
</div>
</Layout>
</>
);
}
// Passing data to template
export const getStaticProps = async () => {
const data = await client.get({ endpoint: "blog" });
return {
props: {
blog: data.contents,
},
};
};

58
pages/posts/[id].js Normal file
View File

@ -0,0 +1,58 @@
// Base layout
import Layout from "../components/Layout"
// microCMS library
import { client } from "../../libs/client";
// next-seo
import { NextSeo } from 'next-seo';
// React
import * as React from "react";
// React Moment
import Moment from 'react-moment';
export default function BlogId({ blog }) {
return (
<>
<Layout title={blog.title + " - yude.jp"}>
<NextSeo
title={blog.title + " - yude.jp"}
description={blog.publishedAt + "に更新された「" + blog.title + "」というタイトルの記事です。"}
/>
<h1>{blog.title}</h1>
<p>
<Moment format="YYYY/MM/DD HH:mm">
{blog.updated}
</Moment>
</p>
<div
dangerouslySetInnerHTML={{
__html: `${blog.content}`,
}}
/>
</Layout>
</>
);
}
// Specify path for static generator
export const getStaticPaths = async () => {
const data = await client.get({ endpoint: "blog" });
const paths = data.contents.map((content) => `/posts/${content.id}`);
return { paths, fallback: false };
};
// Passing data to template
export const getStaticProps = async (context) => {
const id = context.params.id;
const data = await client.get({ endpoint: "blog", contentId: id });
return {
props: {
blog: data,
},
};
};