├── __mocks__
    ├── styleMock.js
    └── fileMock.js
├── .eslintrc.json
├── jest.setup.js
├── public
    ├── favicon.ico
    └── images
    │   └── huper-by-joshua-earle-lWYUA42UmL8-unsplash.jpg
├── content
    └── posts
    │   ├── hello.md
    │   ├── hello-again-2.md
    │   ├── hello-again.md
    │   ├── html.md
    │   ├── markdown.md
    │   ├── code-highlight.md
    │   └── with-image.md
├── pages
    ├── about.js
    ├── posts
    │   └── [slug].js
    ├── _document.js
    ├── index.js
    ├── _app.js
    └── archive
    │   └── [page].js
├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── test-n-build.yml
    │   └── update-packages.yml
├── lib
    ├── date.js
    ├── __tests__
    │   └── date.test.js
    ├── gtag.js
    └── content-loader.js
├── .gitignore
├── components
    ├── __tests__
    │   ├── Layout.test.js
    │   ├── Pager.test.js
    │   ├── Markdown.test.js
    │   └── __snapshots__
    │   │   ├── Pager.test.js.snap
    │   │   ├── Markdown.test.js.snap
    │   │   └── Layout.test.js.snap
    ├── Pager.js
    ├── Markdown.js
    └── Layout.js
├── __tests__
    ├── index.test.js
    ├── __snapshots__
    │   ├── index.test.js.snap
    │   └── posts_slug.test.js.snap
    └── posts_slug.test.js
├── LICENSE
├── package.json
├── jest.config.js
└── README.md


/__mocks__/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/__mocks__/fileMock.js:
--------------------------------------------------------------------------------
1 | (module.exports = "test-file-stub")
2 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect'
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gh640/nextjs-blog-example-ja/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/content/posts/hello.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ブログを始めます
3 | published: 2020-07-12
4 | ---
5 | 
6 | これからブログを始めます。
7 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
1 | const About = () => {
2 |   return <div>ブログを書いています。</div>
3 | }
4 | 
5 | export default About
6 | 


--------------------------------------------------------------------------------
/content/posts/hello-again-2.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: ブログをまた再開します
3 | published: 2028-03-21
4 | ---
5 | 
6 | バタバタしており久しぶりの投稿になってしまいました。
7 | 


--------------------------------------------------------------------------------
/content/posts/hello-again.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: ブログを再開します
 3 | published: 2024-05-27
 4 | ---
 5 | 
 6 | 開始したとたんに間が空いてしまいましたが、再開します。
 7 | 
 8 | - 閑さや
 9 | - 岩にしみ入る
10 | - 蝉の声
11 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   - package-ecosystem: github-actions
4 |     directory: /
5 |     schedule:
6 |       interval: weekly
7 |     target-branch: main
8 | 


--------------------------------------------------------------------------------
/public/images/huper-by-joshua-earle-lWYUA42UmL8-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gh640/nextjs-blog-example-ja/HEAD/public/images/huper-by-joshua-earle-lWYUA42UmL8-unsplash.jpg


--------------------------------------------------------------------------------
/lib/date.js:
--------------------------------------------------------------------------------
 1 | const formatDate = (date) => {
 2 |   if (!(date instanceof Date)) {
 3 |     return ''
 4 |   }
 5 | 
 6 |   let year = date.getFullYear()
 7 |   let month = (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1)
 8 |   let day = (date.getDate() < 10 ? '0' : '') + date.getDate()
 9 | 
10 |   return `${year}/${month}/${day}`
11 | }
12 | 
13 | export { formatDate }
14 | 


--------------------------------------------------------------------------------
/content/posts/html.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: HTML を試す投稿
 3 | published: 2020-07-23
 4 | ---
 5 | 
 6 | <ul>
 7 |     <li><a href="#最初の見出し">最初の見出し</a></li>
 8 |     <li><a href="#ふたつめの見出し">ふたつめの見出し</a></li>
 9 | </ul>
10 | 
11 | <h2 id="最初の見出し">最初の見出し</h2>
12 | 
13 | <h2 id="ふたつめの見出し">ふたつめの見出し</h2>
14 | 
15 | <details>
16 |     <summary>絶対に開けて見てはいけません</summary>
17 |     見ないでと言ったのに見てしまいましたね〜
18 | </details>
19 | 


--------------------------------------------------------------------------------
/content/posts/markdown.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Markdown を試す投稿
 3 | published: 2020-07-15
 4 | ---
 5 | 
 6 | 見出し:
 7 | 
 8 | # h1
 9 | 
10 | ## h2
11 | 
12 | ### h3
13 | 
14 | #### h4
15 | 
16 | ##### h5
17 | 
18 | ###### h6
19 | 
20 | テーブル:
21 | 
22 | | 西 | 東 |
23 | | --- | --- |
24 | | 西山 | 東山 |
25 | 
26 | 順序付きリスト:
27 | 
28 | 1. うんだもこら
29 | 2. いけなもんや
30 | 3. あたいがどんの
31 | 4. ちゃわんなんだ
32 | 5. ひにひにさんども
33 | 6. あろもんせば
34 | 7. きれいなもんごわんさ
35 | 


--------------------------------------------------------------------------------
/content/posts/code-highlight.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: コードをきれいに見えるようにしました
 3 | published: 2038-03-21
 4 | ---
 5 | 
 6 | サンプルです。
 7 | 
 8 | `[slug].js`:
 9 | 
10 | ```js
11 | /**
12 |  * ページコンポーネントで使用する値を用意する
13 |  */
14 | export async function getStaticProps({ params }) {
15 |   const content = await readContentFile({ fs, slug: params.slug })
16 | 
17 |   return {
18 |     props: {
19 |       ...content
20 |     }
21 |   }
22 | }
23 | ```
24 | 


--------------------------------------------------------------------------------
/content/posts/with-image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 画像付きの投稿
3 | published: 2020-07-13
4 | ---
5 | 
6 | ![サンプル画像](/images/huper-by-joshua-earle-lWYUA42UmL8-unsplash.jpg)
7 | 
8 | <span>Photo by <a href="https://unsplash.com/@huper?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Huper by Joshua Earle</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 


--------------------------------------------------------------------------------
/lib/__tests__/date.test.js:
--------------------------------------------------------------------------------
 1 | import { formatDate } from "../date.js"
 2 | 
 3 | describe("formatDate", () => {
 4 | 	it("returns empty string for data other than Date", () => {
 5 | 		expect(formatDate({})).toBe("")
 6 | 	}) 
 7 | 
 8 | 	it("returns collect format with single-digit month", () => {
 9 | 		expect(formatDate(new Date(2018, 4, 7))).toBe("2018/05/07")
10 | 	}) 
11 | 	
12 | 	it("returns collect format with double-digit-month", () => {
13 | 		expect(formatDate(new Date(2018, 11, 27))).toBe("2018/12/27")
14 | 	}) 
15 | })
16 | 


--------------------------------------------------------------------------------
/lib/gtag.js:
--------------------------------------------------------------------------------
 1 | // See: https://github.com/zeit/next.js/blob/v9.3.1/examples/with-google-analytics/lib/gtag.js
 2 | const GA_TRACKING_ID = process.env.GA_TRACKING_ID
 3 | 
 4 | // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 5 | const pageview = (url) => {
 6 |   window.gtag('config', GA_TRACKING_ID, {
 7 |     page_path: url,
 8 |   })
 9 | }
10 | 
11 | // https://developers.google.com/analytics/devguides/collection/gtagjs/events
12 | const event = ({ action, category, label, value }) => {
13 |   window.gtag('event', action, {
14 |     event_category: category,
15 |     event_label: label,
16 |     value: value,
17 |   })
18 | }
19 | 
20 | export { GA_TRACKING_ID, pageview, event }
21 | 


--------------------------------------------------------------------------------
/components/__tests__/Layout.test.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head"
 2 | // import Link from "next/link"
 3 | import renderer from "react-test-renderer"
 4 | 
 5 | import Layout from "../Layout.js"
 6 | 
 7 | jest.mock("next/head")
 8 | jest.mock("next/link", () => {
 9 | 	const MockedLink = ({ children, ...rest }) => <a {...rest}>{children}</a>
10 | 	return MockedLink
11 | })
12 | 
13 | describe("Layout", () => {
14 | 	Head.mockImplementation(({ children }) => children)
15 | 
16 | 	it("renders collectly with title", () => {
17 | 		const tree = renderer
18 | 			.create(<Layout title="ページタイトル"></Layout>)
19 | 			.toJSON()
20 | 		expect(tree).toMatchSnapshot()
21 | 	})
22 | 
23 | 	it("renders collectly with children", () => {
24 | 		const tree = renderer
25 | 			.create(<Layout>
26 | 				<div>
27 | 					<span>Hello World</span>
28 | 				</div>
29 | 			</Layout>)
30 | 			.toJSON()
31 | 		expect(tree).toMatchSnapshot()
32 | 	})
33 | })
34 | 


--------------------------------------------------------------------------------
/.github/workflows/test-n-build.yml:
--------------------------------------------------------------------------------
 1 | name: "テストとビルド"
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 | 
 9 | env:
10 |   NODE_VERSION: '18'
11 | 
12 | jobs:
13 |   jest:
14 |     name: Run tests with jest
15 |     runs-on: ubuntu-latest
16 |     steps:
17 |       - name: Checkout
18 |         uses: actions/checkout@v3
19 |       - name: Use Node.js
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: ${{ env.NODE_VERSION }}
23 |           cache: 'npm'
24 |       - name: Install packages
25 |         run: npm ci
26 |       - name: Run tests
27 |         run: npm test
28 |       - name: Run Linter
29 |         run: npm run lint
30 |       - name: Build
31 |         run: |
32 |           npm run build
33 |           npm run export
34 |       - name: Archive artifacts
35 |         uses: actions/upload-artifact@v3
36 |         with:
37 |           name: out
38 |           path: out
39 | 


--------------------------------------------------------------------------------
/components/Pager.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | 
 3 | const Pager = (props) => {
 4 |   const { total, page, perPage, hrefCallback } = props
 5 | 
 6 |   const prevPage = page > 1 ? page - 1 : null
 7 |   let nextPage = null
 8 |   if (page < Math.ceil(total / perPage)) {
 9 |     nextPage = page + 1
10 |   }
11 | 
12 |   return (
13 |     <div className="pager">
14 |       <span className="pager-item">
15 |         {prevPage ? (
16 |           <Link href={hrefCallback(prevPage)}>{prevPage}</Link>
17 |         ) : null}
18 |       </span>
19 |       <span className="pager-item">{page}</span>
20 |       <span className="pager-item">
21 |         {nextPage ? (
22 |           <Link href={hrefCallback(nextPage)}>{nextPage}</Link>
23 |         ) : null}
24 |       </span>
25 | 
26 |       <style jsx>{`
27 |         .pager {
28 |           display: flex;
29 |           flex-direction: row;
30 |           justify-content: center;
31 |           flew-wrap: nowrap;
32 |         }
33 | 
34 |         .pager-item {
35 |           margin: 0 1em;
36 |         }
37 |       `}</style>
38 |     </div>
39 |   )
40 | }
41 | 
42 | export default Pager
43 | 


--------------------------------------------------------------------------------
/__tests__/index.test.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | import renderer from "react-test-renderer"
 3 | 
 4 | import Layout from "../components/Layout"
 5 | import Home from "../pages/index.js"
 6 | 
 7 | jest.mock("next/link", () => {
 8 | 	return ({ children, ...attrs }) => {
 9 | 		return <a {...attrs}>{children}</a>
10 | 	}
11 | })
12 | jest.mock("../components/Layout")
13 | 
14 | describe("Home", () => {
15 | 	Layout.mockImplementation(({ children }) => children)
16 | 
17 | 	it("renders correctly without posts nor archive", () => {
18 | 		const tree = renderer
19 | 			.create(<Home posts={[]} hasArchive={false}/>)
20 | 			.toJSON()
21 | 		expect(tree).toMatchSnapshot()
22 | 	})
23 | 
24 | 	it("renders correctly with posts and archive", () => {
25 | 		const posts = [
26 | 			{
27 | 				title: "かきくけこ",
28 | 				slug: "kakikukeko",
29 | 				published: "2020/08/27",
30 | 			},
31 | 			{
32 | 				title: "あいうえお",
33 | 				slug: "aiueo",
34 | 				published: "2018/05/27",
35 | 			},
36 | 		]
37 | 		const tree = renderer
38 | 			.create(<Home posts={posts} hasArchive={true}/>)
39 | 			.toJSON()
40 | 		expect(tree).toMatchSnapshot()
41 | 	})
42 | })
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 GOTO Hayato
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pages/posts/[slug].js:
--------------------------------------------------------------------------------
 1 | import fs from "fs"
 2 | import path from "path"
 3 | 
 4 | import Layout from "../../components/Layout"
 5 | import Markdown from "../../components/Markdown"
 6 | import { listContentFiles, readContentFile } from "../../lib/content-loader"
 7 | 
 8 | export default function Post(params) {
 9 |   return (
10 |     <Layout title={params.title}>
11 |       <div className="post-meta">
12 |         <span>{params.published}</span>
13 |       </div>
14 |       <div className="post-body">
15 |         <Markdown>{params.content}</Markdown>
16 |       </div>
17 |     </Layout>
18 |   )
19 | }
20 | 
21 | /**
22 |  * ページコンポーネントで使用する値を用意する
23 |  */
24 | export async function getStaticProps({ params }) {
25 |   const content = await readContentFile({ fs, slug: params.slug })
26 | 
27 |   return {
28 |     props: {
29 |       ...content
30 |     }
31 |   }
32 | }
33 | 
34 | /**
35 |  * 有効な URL パラメータを全件返す
36 |  */
37 | export async function getStaticPaths() {
38 |   const paths = listContentFiles({ fs })
39 |     .map((filename) => ({
40 |       params: {
41 |         slug: path.parse(filename).name,
42 |       }
43 |     }))
44 | 
45 |   return { paths, fallback: false }
46 | }
47 | 


--------------------------------------------------------------------------------
/components/__tests__/Pager.test.js:
--------------------------------------------------------------------------------
 1 | import renderer from "react-test-renderer"
 2 | 
 3 | import Pager from "../Pager.js"
 4 | 
 5 | jest.mock("next/link", () => {
 6 | 	const MockedLink = ({ children, ...rest }) => <a {...rest}>{children}</a>
 7 | 	return MockedLink
 8 | })
 9 | 
10 | describe("Pager", () => {
11 | 	it("renders collectly with first page", () => {
12 | 		const tree = renderer
13 | 			.create(<Pager 
14 | 				total={105}
15 | 				page={1}
16 | 				perPage={10}
17 | 				hrefCallback={(page) => `/archive/${page}`}
18 | 			/>)
19 | 			.toJSON()
20 | 		expect(tree).toMatchSnapshot()
21 | 	})
22 | 
23 | 	it("renders collectly with second page", () => {
24 | 		const tree = renderer
25 | 			.create(<Pager 
26 | 				total={105}
27 | 				page={2}
28 | 				perPage={10}
29 | 				hrefCallback={(page) => `/archive/${page}`}
30 | 			/>)
31 | 			.toJSON()
32 | 		expect(tree).toMatchSnapshot()
33 | 	})
34 | 
35 | 	it("renders collectly with last page", () => {
36 | 		const tree = renderer
37 | 			.create(<Pager 
38 | 				total={27}
39 | 				page={6}
40 | 				perPage={5}
41 | 				hrefCallback={(page) => `/archive/${page}`}
42 | 			/>)
43 | 			.toJSON()
44 | 		expect(tree).toMatchSnapshot()
45 | 	})
46 | })
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-blog-example-ja",
 3 |   "version": "13.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "export": "next export",
11 |     "test": "jest"
12 |   },
13 |   "dependencies": {
14 |     "@next/font": "^13.1.6",
15 |     "gray-matter": "^4.0.2",
16 |     "next": "^13.1.6",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "react-markdown": "^8.0.5",
20 |     "react-syntax-highlighter": "^15.5.0",
21 |     "rehype-raw": "^6.1.0",
22 |     "remark-gfm": "^3.0.1"
23 |   },
24 |   "devDependencies": {
25 |     "@babel/core": "^7.14.5",
26 |     "@babel/preset-env": "^7.14.5",
27 |     "@babel/preset-react": "^7.14.5",
28 |     "@testing-library/jest-dom": "^5.14.1",
29 |     "@testing-library/react": "^13.4.0",
30 |     "babel-jest": "^28.1.3",
31 |     "eslint": "8.33.0",
32 |     "eslint-config-next": "13.1.6",
33 |     "identity-obj-proxy": "^3.0.0",
34 |     "jest": "^28.1.3",
35 |     "jest-environment-jsdom": "^28.1.3",
36 |     "react-test-renderer": "^18.2.0"
37 |   },
38 |   "engines": {
39 |     "node": ">=18.0.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/components/__tests__/Markdown.test.js:
--------------------------------------------------------------------------------
 1 | import renderer from "react-test-renderer"
 2 | 
 3 | import Markdown from "../Markdown.js"
 4 | 
 5 | jest.mock("next/link", () => {
 6 | 	const MockedLink = ({ children, ...rest }) => <a {...rest}>{children}</a>
 7 | 	return MockedLink
 8 | })
 9 | 
10 | describe("Markdown", () => {
11 | 	it("renders collectly with simple markdown", () => {
12 | 		const tree = renderer
13 | 			.create(<Markdown>{`
14 | # 見出し 1
15 | 
16 | # 見出し 2
17 | 
18 | - これは
19 | - リスト
20 | - です
21 | 
22 | テーブル:
23 | 
24 | | 西 | 東 |
25 | | --- | --- |
26 | | 西山 | 東山 |
27 | 
28 | 			`}</Markdown>)
29 | 			.toJSON()
30 | 		expect(tree).toMatchSnapshot()
31 | 	})
32 | 
33 | 	it("renders collectly with html", () => {
34 | 		const tree = renderer
35 | 			.create(<Markdown>{`
36 | <h3>テーブルサンプル</h3>
37 | <div>
38 | 	<table>
39 | 		<thead>
40 | 			<tr>
41 | 				<th>カラム 1</th>
42 | 				<th>カラム 2</th>
43 | 			</tr>
44 | 		</thead>
45 | 		<tbody>
46 | 			<tr>
47 | 				<td>1.1</td>
48 | 				<th>1.2</th>
49 | 			</tr>
50 | 			<tr>
51 | 				<td>2.1</td>
52 | 				<th>2.2</th>
53 | 			</tr>
54 | 		</tbody>
55 | 	</table>
56 | </div>
57 | 			`}</Markdown>)
58 | 			.toJSON()
59 | 		expect(tree).toMatchSnapshot()
60 | 	})
61 | 
62 | })
63 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | import { GA_TRACKING_ID } from '../lib/gtag'
 4 | 
 5 | class MyDocument extends Document {
 6 |   render() {
 7 |     return (
 8 |       <Html lang="ja">
 9 |         <Head>
10 |           { /* gtag / Google Analytics を利用する */}
11 |           {
12 |             GA_TRACKING_ID && <script
13 |               async
14 |               src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
15 |             />
16 |           }
17 |           {
18 |             GA_TRACKING_ID && <script
19 |               dangerouslySetInnerHTML={{
20 |                 __html: `
21 |                   window.dataLayer = window.dataLayer || [];
22 |                   function gtag(){dataLayer.push(arguments);}
23 |                   gtag('js', new Date());
24 | 
25 |                   gtag('config', '${GA_TRACKING_ID}', {
26 |                     page_path: window.location.pathname,
27 |                   });
28 |                 `,
29 |               }}
30 |             />
31 |           }
32 |         </Head>
33 |         <body>
34 |           <Main />
35 |           <NextScript />
36 |         </body>
37 |       </Html>
38 |     )
39 |   }
40 | }
41 | 
42 | export default MyDocument
43 | 


--------------------------------------------------------------------------------
/components/Markdown.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 共通のマークダウンレンダラー
 3 |  */
 4 | import * as React from "react"
 5 | import ReactMarkdown from "react-markdown"
 6 | import rehypeRaw from "rehype-raw"
 7 | import remarkGfm from "remark-gfm"
 8 | 
 9 | import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
10 | 
11 | const Markdown = ({ children }) => {
12 |   // Markdown 中の HTML を許容するために `rehypeRaw` を利用する
13 |   return (
14 |     <ReactMarkdown
15 |       rehypePlugins={[rehypeRaw]}
16 |       remarkPlugins={[remarkGfm]}
17 |       // See: https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
18 |       components={{
19 |         code({node, inline, className, children, ...props}) {
20 |           const match = /language-(\w+)/.exec(className || '')
21 |           return !inline && match ? (
22 |             <SyntaxHighlighter
23 |               language={match[1]}
24 |               {...props}
25 |             >
26 |               {String(children).replace(/\n$/, '')}
27 |             </SyntaxHighlighter>
28 |           ) : (
29 |             <code className={className} {...props}>
30 |               {children}
31 |             </code>
32 |           )
33 |         }
34 |       }}
35 |     >
36 |       {children}
37 |     </ReactMarkdown>
38 |   )
39 | }
40 | 
41 | export default Markdown
42 | 


--------------------------------------------------------------------------------
/__tests__/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Home renders correctly with posts and archive 1`] = `
 4 | Array [
 5 |   <div
 6 |     className="jsx-4006167202 post-teaser"
 7 |   >
 8 |     <h2
 9 |       className="jsx-4006167202"
10 |     >
11 |       <a
12 |         href="/posts/kakikukeko"
13 |       >
14 |         かきくけこ
15 |       </a>
16 |     </h2>
17 |     <div
18 |       className="jsx-4006167202"
19 |     >
20 |       <span
21 |         className="jsx-4006167202"
22 |       >
23 |         2020/08/27
24 |       </span>
25 |     </div>
26 |   </div>,
27 |   <div
28 |     className="jsx-4006167202 post-teaser"
29 |   >
30 |     <h2
31 |       className="jsx-4006167202"
32 |     >
33 |       <a
34 |         href="/posts/aiueo"
35 |       >
36 |         あいうえお
37 |       </a>
38 |     </h2>
39 |     <div
40 |       className="jsx-4006167202"
41 |     >
42 |       <span
43 |         className="jsx-4006167202"
44 |       >
45 |         2018/05/27
46 |       </span>
47 |     </div>
48 |   </div>,
49 |   <div
50 |     className="jsx-4006167202 home-archive"
51 |   >
52 |     <a
53 |       href="/archive/1"
54 |     >
55 |       アーカイブ
56 |     </a>
57 |   </div>,
58 | ]
59 | `;
60 | 
61 | exports[`Home renders correctly without posts nor archive 1`] = `null`;
62 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs"
 2 | 
 3 | import Link from "next/link"
 4 | 
 5 | import Layout from "../components/Layout"
 6 | import { readContentFiles } from "../lib/content-loader"
 7 | 
 8 | export default function Home(props) {
 9 |   const { posts, hasArchive } = props
10 |   return (
11 |     <Layout title="">
12 |       {posts.map((post) => <div
13 |         key={post.slug}
14 |         className="post-teaser"
15 |       >
16 |         <h2><Link href={`/posts/${post.slug}`}>{post.title}</Link></h2>
17 |         <div><span>{post.published}</span></div>
18 |       </div>)}
19 | 
20 |       {hasArchive ? (
21 |         <div className="home-archive">
22 |           <Link href="/archive/1">アーカイブ</Link>
23 |         </div>
24 |       ) : null}
25 | 
26 |       <style jsx>{`
27 |         .post-teaser {
28 |           margin-bottom: 2em;
29 |         }
30 | 
31 |         .post-teaser h2 a {
32 |           text-decoration: none;
33 |         }
34 | 
35 |         .home-archive {
36 |           margin: 3em;
37 |           display: flex;
38 |           flex-direction: row;
39 |           justify-content: center;
40 |         }
41 |       `}</style>
42 |     </Layout>
43 |   );
44 | }
45 | 
46 | /**
47 |  * ページコンポーネントで使用する値を用意する
48 |  */
49 | export async function getStaticProps({ params }) {
50 |   const MAX_COUNT = 5
51 |   const posts = await readContentFiles({ fs })
52 |   const hasArchive = posts.length > MAX_COUNT
53 | 
54 |   return {
55 |     props: {
56 |       posts: posts.slice(0, MAX_COUNT),
57 |       hasArchive,
58 |     }
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/components/__tests__/__snapshots__/Pager.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Pager renders collectly with first page 1`] = `
 4 | <div
 5 |   className="jsx-2002780001 pager"
 6 | >
 7 |   <span
 8 |     className="jsx-2002780001 pager-item"
 9 |   />
10 |   <span
11 |     className="jsx-2002780001 pager-item"
12 |   >
13 |     1
14 |   </span>
15 |   <span
16 |     className="jsx-2002780001 pager-item"
17 |   >
18 |     <a
19 |       href="/archive/2"
20 |     >
21 |       2
22 |     </a>
23 |   </span>
24 | </div>
25 | `;
26 | 
27 | exports[`Pager renders collectly with last page 1`] = `
28 | <div
29 |   className="jsx-2002780001 pager"
30 | >
31 |   <span
32 |     className="jsx-2002780001 pager-item"
33 |   >
34 |     <a
35 |       href="/archive/5"
36 |     >
37 |       5
38 |     </a>
39 |   </span>
40 |   <span
41 |     className="jsx-2002780001 pager-item"
42 |   >
43 |     6
44 |   </span>
45 |   <span
46 |     className="jsx-2002780001 pager-item"
47 |   />
48 | </div>
49 | `;
50 | 
51 | exports[`Pager renders collectly with second page 1`] = `
52 | <div
53 |   className="jsx-2002780001 pager"
54 | >
55 |   <span
56 |     className="jsx-2002780001 pager-item"
57 |   >
58 |     <a
59 |       href="/archive/1"
60 |     >
61 |       1
62 |     </a>
63 |   </span>
64 |   <span
65 |     className="jsx-2002780001 pager-item"
66 |   >
67 |     2
68 |   </span>
69 |   <span
70 |     className="jsx-2002780001 pager-item"
71 |   >
72 |     <a
73 |       href="/archive/3"
74 |     >
75 |       3
76 |     </a>
77 |   </span>
78 | </div>
79 | `;
80 | 


--------------------------------------------------------------------------------
/__tests__/__snapshots__/posts_slug.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Post renders correctly with markdown 1`] = `
 4 | <div>
 5 |   <span>
 6 |     はじめての投稿
 7 |   </span>
 8 |   <div
 9 |     className="post-meta"
10 |   >
11 |     <span>
12 |       2030/10/20
13 |     </span>
14 |   </div>
15 |   <div
16 |     className="post-body"
17 |   >
18 |     <h2>
19 |       見出し 2
20 |     </h2>
21 |     
22 | 
23 |     <p>
24 |       昔々あるところに。
25 |     </p>
26 |   </div>
27 | </div>
28 | `;
29 | 
30 | exports[`Post renders correctly with raw html 1`] = `
31 | <div>
32 |   <span>
33 |     はじめての投稿
34 |   </span>
35 |   <div
36 |     className="post-meta"
37 |   >
38 |     <span>
39 |       2030/10/20
40 |     </span>
41 |   </div>
42 |   <div
43 |     className="post-body"
44 |   >
45 |     <h3>
46 |       テーブルサンプル
47 |     </h3>
48 |     
49 | 
50 |     <div>
51 |       
52 | 	
53 |       <table>
54 |         <thead>
55 |           <tr>
56 |             <th>
57 |               カラム 1
58 |             </th>
59 |             <th>
60 |               カラム 2
61 |             </th>
62 |           </tr>
63 |         </thead>
64 |         <tbody>
65 |           <tr>
66 |             <td>
67 |               1.1
68 |             </td>
69 |             <th>
70 |               1.2
71 |             </th>
72 |           </tr>
73 |           <tr>
74 |             <td>
75 |               2.1
76 |             </td>
77 |             <th>
78 |               2.2
79 |             </th>
80 |           </tr>
81 |         </tbody>
82 |       </table>
83 |       
84 | 
85 |     </div>
86 |   </div>
87 | </div>
88 | `;
89 | 


--------------------------------------------------------------------------------
/__tests__/posts_slug.test.js:
--------------------------------------------------------------------------------
 1 | import { cloneElement } from "react"
 2 | import renderer from "react-test-renderer"
 3 | 
 4 | import Layout from "../components/Layout"
 5 | import Post from "../pages/posts/[slug].js"
 6 | 
 7 | jest.mock("next/link", () => {
 8 | 	return ({ children, ...attrs }) => {
 9 | 		return <a {...attrs}>{children}</a>
10 | 	}
11 | })
12 | jest.mock("../components/Layout")
13 | 
14 | describe("Post", () => {
15 | 	Layout.mockImplementation(({ title, children }) => (
16 | 		<div>
17 | 			<span>{title}</span>
18 | 			{children}
19 | 		</div>
20 | 	))
21 | 
22 | 	it("renders correctly with markdown", () => {
23 | 		const content = [
24 | 			"## 見出し 2",
25 | 			"",
26 | 			"昔々あるところに。",
27 | 		].join("\n")
28 | 		const tree = renderer
29 | 			.create(<Post 
30 | 				title="はじめての投稿" 
31 | 				published="2030/10/20" 
32 | 				content={content} 
33 | 			/>)
34 | 			.toJSON()
35 | 		expect(tree).toMatchSnapshot()
36 | 	})
37 | 
38 | 	it("renders correctly with raw html", () => {
39 | 		const content = [
40 | 			"<h3>テーブルサンプル</h3>",
41 | 			"<div>",
42 | 			"	<table>",
43 | 			"		<thead>",
44 | 			"			<tr>",
45 | 			"				<th>カラム 1</th>",
46 | 			"				<th>カラム 2</th>",
47 | 			"			</tr>",
48 | 			"		</thead>",
49 | 			"		<tbody>",
50 | 			"			<tr>",
51 | 			"				<td>1.1</td>",
52 | 			"				<th>1.2</th>",
53 | 			"			</tr>",
54 | 			"			<tr>",
55 | 			"				<td>2.1</td>",
56 | 			"				<th>2.2</th>",
57 | 			"			</tr>",
58 | 			"		</tbody>",
59 | 			"	</table>",
60 | 			"</div>",
61 | 		].join("\n")
62 | 		const tree = renderer
63 | 			.create(<Post
64 | 				title="はじめての投稿"
65 | 				published="2030/10/20"
66 | 				content={content}
67 | 			/>)
68 | 			.toJSON()
69 | 		expect(tree).toMatchSnapshot()
70 | 	})
71 | })
72 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head"
 2 | import Link from "next/link"
 3 | 
 4 | const Layout = (props) => {
 5 |   const { title, children } = props
 6 |   const siteTitle = "サンプルブログ"
 7 | 
 8 |   return (
 9 |     <div className="page">
10 |       <Head>
11 |         <title>{title ? `${title} | ${siteTitle}` : siteTitle}</title>
12 |         <link rel="icon" href="/favicon.ico" />
13 |       </Head>
14 | 
15 |       <header>
16 |         <h1 className="site-title">
17 |           <Link href="/" style={{
18 |             // `<style jsx>` ではスタイルをつけられないのでインラインで設定する
19 |             color: 'inherit',
20 |             textDecoration: 'none',
21 |           }}>
22 |             <span className="site-title-text">{siteTitle}</span>
23 |           </Link>
24 |         </h1>
25 |       </header>
26 | 
27 |       <main>
28 |         {title ? <h1 className="page-title">{title}</h1> : null}
29 |         <div className="page-main">
30 |           {children}
31 |         </div>
32 |       </main>
33 | 
34 |       <footer>
35 |         &copy; {siteTitle}
36 |       </footer>
37 | 
38 |       <style jsx>{`
39 |         .page {
40 |           padding: 2em 1em;
41 |           max-width: 800px;
42 |           margin-left: auto;
43 |           margin-right: auto;
44 |         }
45 | 
46 |         header {
47 |           display: flex;
48 |           justify-content: center;
49 |           align-items: center;
50 |           margin: 0 0 4em;
51 |         }
52 | 
53 |         footer {
54 |           margin-top: 4em;
55 |           padding-top: 2em;
56 |           padding-bottom: 2em;
57 |           display: flex;
58 |           justify-content: center;
59 |           align-items: center;
60 |         }
61 |       `}</style>
62 |     </div>
63 |   )
64 | }
65 | 
66 | export default Layout
67 | 


--------------------------------------------------------------------------------
/.github/workflows/update-packages.yml:
--------------------------------------------------------------------------------
 1 | name: "NPM パッケージの自動アップデート"
 2 | 
 3 | on:
 4 |   schedule:
 5 |     # 05:20 in UTC is 14:20 in JST.
 6 |     - cron: '20 5 5 * *'
 7 |   workflow_dispatch:
 8 | 
 9 | env:
10 |   NODE_VERSION: '18'
11 | 
12 | jobs:
13 |   update:
14 |     name: Create Pull Request to update packages
15 |     runs-on: ubuntu-latest
16 |     steps:
17 |       - name: Checkout
18 |         uses: actions/checkout@v3
19 |       - name: Use Node.js
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: ${{ env.NODE_VERSION }}
23 |           cache: 'npm'
24 |       - name: Install packages
25 |         run: npm ci
26 |       - name: Show outdated packages in summary
27 |         uses: actions/github-script@v6
28 |         with:
29 |           script: |
30 |             const { stdout } = await exec.getExecOutput(`npm outdated --json`, [], {
31 |               ignoreReturnCode: true,
32 |             })
33 |             let report
34 |             try {
35 |               report = JSON.parse(stdout)
36 |             } catch (err) {
37 |               console.error(err)
38 |               return
39 |             }
40 | 
41 |             const header = [
42 |               {data: "Name", header: true},
43 |               {data: "Current", header: true},
44 |               {data: "Latest", header: true},
45 |             ]
46 |             const rows = Object.entries(report).map(([name, data]) => {
47 |               return [name, data['current'], data['latest']]
48 |             })
49 |             core.summary
50 |               .addHeading('Outdated packages :broom:')
51 |               .addTable([header, ...rows])
52 |               .write()
53 |       - name: Update packages
54 |         run: npm update
55 |       - name: Create Pull Request
56 |         uses: peter-evans/create-pull-request@v4
57 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Router from 'next/router'
 2 | import { Montserrat, Noto_Sans_JP } from '@next/font/google'
 3 | import { GA_TRACKING_ID, pageview } from '../lib/gtag'
 4 | 
 5 | /*
 6 |  * Google Fonts を利用する
 7 |  *
 8 |  * - Montserrat
 9 |  * - Noto Sans JP
10 |  */
11 | const montserrat = Montserrat({ subsets: ['latin'] })
12 | const noto_sans_jp = Noto_Sans_JP({
13 |   weight: ['400', '700'],
14 |   subsets: ['latin'],
15 |   fallback: ['-apple-system', 'Segoe UI', 'Helvetica Neue'],
16 | })
17 | 
18 | if (GA_TRACKING_ID) {
19 |   Router.events.on('routeChangeComplete', url => pageview(url))
20 | }
21 | 
22 | // This default export is required in a new `pages/_app.js` file.
23 | export default function MyApp({ Component, pageProps }) {
24 |   return (
25 |     <>
26 |       <style jsx global>{`
27 |         * {
28 |           box-sizing: border-box;
29 |         }
30 | 
31 |         html {
32 |           padding: 0;
33 |           margin: 0;
34 |           font-family: ${noto_sans_jp.style.fontFamily};
35 |             "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
36 |           font-size: 16px;
37 |         }
38 | 
39 |         body {
40 |           padding: 0;
41 |           margin: 0;
42 |           color: #222;
43 |         }
44 | 
45 |         h1, h2, h3, h4, h5, h6 {
46 |           font-family: ${montserrat.style.fontFamily},
47 |             "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
48 |         }
49 | 
50 |         img,
51 |         iframe {
52 |           max-width: 100%;
53 |         }
54 | 
55 |         /* Prism のコードブロックに影響を与えず <code> にスタイルを追加 */
56 |         code:not([class]) {
57 |           font-family: monospace;
58 |           font-size: 1rem;
59 |           background-color: #eee;
60 |           display: inline-block;
61 |           padding: .2em .4em;
62 |         }
63 |       `}</style>
64 |       <Component {...pageProps} />
65 |     </>
66 |   )
67 | }
68 | 


--------------------------------------------------------------------------------
/components/__tests__/__snapshots__/Markdown.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Markdown renders collectly with html 1`] = `
  4 | Array [
  5 |   <h3>
  6 |     テーブルサンプル
  7 |   </h3>,
  8 |   "
  9 | ",
 10 |   <div>
 11 |     
 12 | 	
 13 |     <table>
 14 |       <thead>
 15 |         <tr>
 16 |           <th>
 17 |             カラム 1
 18 |           </th>
 19 |           <th>
 20 |             カラム 2
 21 |           </th>
 22 |         </tr>
 23 |       </thead>
 24 |       <tbody>
 25 |         <tr>
 26 |           <td>
 27 |             1.1
 28 |           </td>
 29 |           <th>
 30 |             1.2
 31 |           </th>
 32 |         </tr>
 33 |         <tr>
 34 |           <td>
 35 |             2.1
 36 |           </td>
 37 |           <th>
 38 |             2.2
 39 |           </th>
 40 |         </tr>
 41 |       </tbody>
 42 |     </table>
 43 |     
 44 | 
 45 |   </div>,
 46 | ]
 47 | `;
 48 | 
 49 | exports[`Markdown renders collectly with simple markdown 1`] = `
 50 | Array [
 51 |   <h1>
 52 |     見出し 1
 53 |   </h1>,
 54 |   "
 55 | ",
 56 |   <h1>
 57 |     見出し 2
 58 |   </h1>,
 59 |   "
 60 | ",
 61 |   <ul>
 62 |     
 63 | 
 64 |     <li>
 65 |       これは
 66 |     </li>
 67 |     
 68 | 
 69 |     <li>
 70 |       リスト
 71 |     </li>
 72 |     
 73 | 
 74 |     <li>
 75 |       です
 76 |     </li>
 77 |     
 78 | 
 79 |   </ul>,
 80 |   "
 81 | ",
 82 |   <p>
 83 |     テーブル:
 84 |   </p>,
 85 |   "
 86 | 
 87 | 
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | 
 99 | ",
100 |   <table>
101 |     <thead>
102 |       <tr>
103 |         <th>
104 |           西
105 |         </th>
106 |         <th>
107 |           東
108 |         </th>
109 |       </tr>
110 |     </thead>
111 |     <tbody>
112 |       <tr>
113 |         <td>
114 |           西山
115 |         </td>
116 |         <td>
117 |           東山
118 |         </td>
119 |       </tr>
120 |     </tbody>
121 |   </table>,
122 | ]
123 | `;
124 | 


--------------------------------------------------------------------------------
/lib/content-loader.js:
--------------------------------------------------------------------------------
 1 | import path from "path"
 2 | 
 3 | import matter from "gray-matter"
 4 | 
 5 | import { formatDate } from "./date"
 6 | 
 7 | const DIR = path.join(process.cwd(), "content/posts")
 8 | const EXTENSION = ".md"
 9 | 
10 | /**
11 |  * Markdown のファイル一覧を取得する
12 |  */
13 | const listContentFiles = ({ fs }) => {
14 |   const filenames = fs.readdirSync(DIR)
15 |   return filenames
16 |     .filter((filename) => path.parse(filename).ext === EXTENSION)
17 | }
18 | 
19 | /**
20 |  * Markdown のファイルの中身を全件パースして取得する
21 |  */
22 | const readContentFiles = async ({ fs }) => {
23 |   const promisses = listContentFiles({ fs })
24 |     .map((filename) => readContentFile({ fs, filename }))
25 | 
26 |   const contents = await Promise.all(promisses)
27 | 
28 |   return contents.sort(sortWithProp('published', true))
29 | }
30 | 
31 | /**
32 |  * Markdown のファイルの中身をパースして取得する
33 |  */
34 | const readContentFile = async ({ fs, slug, filename }) => {
35 |   if (slug === undefined) {
36 |     slug = path.parse(filename).name
37 |   }
38 |   const raw = fs.readFileSync(path.join(DIR, `${slug}${EXTENSION}`), 'utf8')
39 |   const matterResult = matter(raw)
40 | 
41 |   const { title, published: rawPublished } = matterResult.data
42 | 
43 |   return {
44 |     title,
45 |     published: formatDate(rawPublished),
46 |     content: matterResult.content,
47 |     slug,
48 |   }
49 | }
50 | 
51 | /**
52 |  * Markdown の投稿をソートするためのヘルパー
53 |  */
54 | const sortWithProp = (name, reversed) => (a, b) => {
55 |   if (reversed) {
56 |     return a[name] < b[name] ? 1 : -1
57 |   } else {
58 |     return a[name] < b[name] ? -1 : 1
59 |   }
60 | }
61 | 
62 | /**
63 |  * 指定された node attributes を追加する remark プロセッサ
64 |  */
65 | const genAttrsAdder = (type, attrs) => {
66 |   return transformer
67 | 
68 |   function transformer(node) {
69 |     if (node.type === type) {
70 |       node.data = node.data || {}
71 |       node.data.hProperties = Object.assign({}, node.data.hProperties, attrs)
72 |     }
73 | 
74 |     if (node.children) {
75 |       node.children.map((child) => transformer(child))
76 |     }
77 |   }
78 | }
79 | 
80 | export { listContentFiles, readContentFiles, readContentFile }
81 | 


--------------------------------------------------------------------------------
/pages/archive/[page].js:
--------------------------------------------------------------------------------
 1 | import fs from "fs"
 2 | 
 3 | import Link from "next/link"
 4 | 
 5 | import Layout from "../../components/Layout"
 6 | import Pager from "../../components/Pager"
 7 | import { listContentFiles, readContentFiles } from "../../lib/content-loader"
 8 | 
 9 | const COUNT_PER_PAGE = 10
10 | 
11 | export default function Archive(props) {
12 |   const { posts, page, total, perPage } = props
13 |   return (
14 |     <Layout title="アーカイブ">
15 |       {posts.map((post) => <div
16 |         key={post.slug}
17 |         className="post-teaser"
18 |       >
19 |         <h2><Link href="/posts/[id]" as={`/posts/${post.slug}`}>{post.title}</Link></h2>
20 |         <div><span>{post.published}</span></div>
21 |       </div>)}
22 | 
23 |       <Pager
24 |         page={page} total={total} perPage={perPage}
25 |         hrefCallback={(page) => `/archive/${page}`}
26 |       />
27 | 
28 |       <style jsx>{`
29 |         .post-teaser {
30 |           margin-bottom: 2em;
31 |         }
32 | 
33 |         .post-teaser h2 a {
34 |           text-decoration: none;
35 |         }
36 |       `}</style>
37 |     </Layout>
38 |   );
39 | }
40 | 
41 | /**
42 |  * ページコンポーネントで使用する値を用意する
43 |  */
44 | export async function getStaticProps({ params }) {
45 |   const page = parseInt(params.page, 10)
46 |   const end = COUNT_PER_PAGE * page
47 |   const start = end - COUNT_PER_PAGE
48 |   const posts = await readContentFiles({ fs })
49 | 
50 |   return {
51 |     props: {
52 |       posts: posts.slice(start, end),
53 |       page,
54 |       total: posts.length,
55 |       perPage: COUNT_PER_PAGE,
56 |     }
57 |   }
58 | }
59 | 
60 | /**
61 |  * 有効な URL パラメータを全件返す
62 |  */
63 | export async function getStaticPaths() {
64 |   const posts = await listContentFiles({ fs })
65 |   const pages = range(Math.ceil(posts.length / COUNT_PER_PAGE))
66 |   const paths = pages.map((page) => ({
67 |     params: { page: `${page}` }
68 |   }))
69 | 
70 |   return { paths: paths, fallback: false }
71 | }
72 | 
73 | /**
74 |  * ユーティリティ: 1 から指定された整数までを格納した Array を返す
75 |  */
76 | function range(stop) {
77 |   if (typeof stop !== 'number') {
78 |     throw `Invalid type: ${stop}.`
79 |   }
80 | 
81 |   if (stop < 1) {
82 |     throw `Invalid value: ${stop}.`
83 |   }
84 | 
85 |   return Array.from({ length: stop }, (_, i) => i + 1)
86 | }
87 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * For a detailed explanation regarding each configuration property, visit:
 3 |  * https://jestjs.io/docs/configuration
 4 |  */
 5 | 
 6 | module.exports = {
 7 |   // Automatically clear mock calls and instances between every test
 8 |   clearMocks: true,
 9 |   // Indicates whether the coverage information should be collected while executing the test
10 |   collectCoverage: true,
11 |   // An array of glob patterns indicating a set of files for which coverage information should be collected
12 |   collectCoverageFrom: [
13 |     '**/*.{js,jsx,ts,tsx}',
14 |     '!**/*.d.ts',
15 |     '!**/node_modules/**',
16 |     '!<rootDir>/out/**',
17 |     '!<rootDir>/.next/**',
18 |     '!<rootDir>/*.config.js',
19 |     '!<rootDir>/coverage/**',
20 |   ],
21 |   // The directory where Jest should output its coverage files
22 |   coverageDirectory: "coverage",
23 |   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
24 |   moduleNameMapper: {
25 |     // Handle CSS imports (with CSS modules)
26 |     // https://jestjs.io/docs/webpack#mocking-css-modules
27 |     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
28 | 
29 |     // Handle CSS imports (without CSS modules)
30 |     '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
31 | 
32 |     // Handle image imports
33 |     // https://jestjs.io/docs/webpack#handling-static-assets
34 |     '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': `<rootDir>/__mocks__/fileMock.js`,
35 |   },
36 | 
37 |   // A list of paths to modules that run some code to configure or set up the testing framework before each test
38 |   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
39 |   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
40 |   // The test environment that will be used for testing
41 |   testEnvironment: "jsdom",
42 |   // A map from regular expressions to paths to transformers
43 |   transform: {
44 |     // // Use babel-jest to transpile tests with the next/babel preset
45 |     // // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
46 |     '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
47 |   },
48 |   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
49 |   transformIgnorePatterns: [
50 |     // `export` がシンタックスエラーになるので `node_modules` を一時的に除外する
51 |     // "/node_modules/",
52 |     '^.+\\.module\\.(css|sass|scss)$',
53 |   ],
54 | };
55 | 


--------------------------------------------------------------------------------
/components/__tests__/__snapshots__/Layout.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Layout renders collectly with children 1`] = `
  4 | <div
  5 |   className="jsx-4096959289 page"
  6 | >
  7 |   <title
  8 |     className="jsx-4096959289"
  9 |   >
 10 |     サンプルブログ
 11 |   </title>
 12 |   <link
 13 |     className="jsx-4096959289"
 14 |     href="/favicon.ico"
 15 |     rel="icon"
 16 |   />
 17 |   <header
 18 |     className="jsx-4096959289"
 19 |   >
 20 |     <h1
 21 |       className="jsx-4096959289 site-title"
 22 |     >
 23 |       <a
 24 |         href="/"
 25 |         style={
 26 |           Object {
 27 |             "color": "inherit",
 28 |             "textDecoration": "none",
 29 |           }
 30 |         }
 31 |       >
 32 |         <span
 33 |           className="jsx-4096959289 site-title-text"
 34 |         >
 35 |           サンプルブログ
 36 |         </span>
 37 |       </a>
 38 |     </h1>
 39 |   </header>
 40 |   <main
 41 |     className="jsx-4096959289"
 42 |   >
 43 |     <div
 44 |       className="jsx-4096959289 page-main"
 45 |     >
 46 |       <div>
 47 |         <span>
 48 |           Hello World
 49 |         </span>
 50 |       </div>
 51 |     </div>
 52 |   </main>
 53 |   <footer
 54 |     className="jsx-4096959289"
 55 |   >
 56 |     © 
 57 |     サンプルブログ
 58 |   </footer>
 59 | </div>
 60 | `;
 61 | 
 62 | exports[`Layout renders collectly with title 1`] = `
 63 | <div
 64 |   className="jsx-4096959289 page"
 65 | >
 66 |   <title
 67 |     className="jsx-4096959289"
 68 |   >
 69 |     ページタイトル | サンプルブログ
 70 |   </title>
 71 |   <link
 72 |     className="jsx-4096959289"
 73 |     href="/favicon.ico"
 74 |     rel="icon"
 75 |   />
 76 |   <header
 77 |     className="jsx-4096959289"
 78 |   >
 79 |     <h1
 80 |       className="jsx-4096959289 site-title"
 81 |     >
 82 |       <a
 83 |         href="/"
 84 |         style={
 85 |           Object {
 86 |             "color": "inherit",
 87 |             "textDecoration": "none",
 88 |           }
 89 |         }
 90 |       >
 91 |         <span
 92 |           className="jsx-4096959289 site-title-text"
 93 |         >
 94 |           サンプルブログ
 95 |         </span>
 96 |       </a>
 97 |     </h1>
 98 |   </header>
 99 |   <main
100 |     className="jsx-4096959289"
101 |   >
102 |     <h1
103 |       className="jsx-4096959289 page-title"
104 |     >
105 |       ページタイトル
106 |     </h1>
107 |     <div
108 |       className="jsx-4096959289 page-main"
109 |     />
110 |   </main>
111 |   <footer
112 |     className="jsx-4096959289"
113 |   >
114 |     © 
115 |     サンプルブログ
116 |   </footer>
117 | </div>
118 | `;
119 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 2023/04/10 積極的にメンテナンスできなくなったためアーカイブしました。 Next.js は引き続き人気ですが、「 Next.js でブログを作る」という使い方をする人はもう少なくなったのではないかという気がします。
  2 | 
  3 | [![テストとビルド](https://github.com/gh640/nextjs-blog-example-ja/actions/workflows/test-n-build.yml/badge.svg)](https://github.com/gh640/nextjs-blog-example-ja/actions/workflows/test-n-build.yml)
  4 | 
  5 | # `nextjs-blog-example-ja`
  6 | 
  7 | React ベースのフレームワーク [Next.js](https://nextjs.org/) でシンプルなブログを作るサンプルです。
  8 | 
  9 | 次のページにこのリポジトリのコードを使ったチュートリアルがあります:
 10 | 
 11 | - [Next.js を使った JAMstack なブログの始め方 | gotohayato.com](https://gotohayato.com/content/517/)
 12 | 
 13 | ## 動作環境
 14 | 
 15 | - Node v18
 16 | 
 17 | ## ブランチ構成
 18 | 
 19 | - `main`: そのときどきの最新版
 20 | 
 21 | ## 使用ライブラリ
 22 | 
 23 | 以下の NPM パッケージを使用しています。
 24 | 
 25 | - `next`
 26 | - `react`
 27 | - `react-dom`
 28 | - `react-markdown`
 29 | - `react-syntax-highlighter`
 30 | - `rehype-raw`
 31 | - `remark-gfm`
 32 | - `gray-matter`
 33 | 
 34 | Next.js を利用するために必要な `next` `react` `react-dom` の 3 つと、 frontmatter 付きの Markdown の HTML への変換に有用な `react-markdown` `rehype-raw` `remark-gfm` `gray-matter` を使っています。
 35 | 追加で、シンタックスハイライトに Prism.js を利用するための `react-syntax-highlighter` を使っています。
 36 | 
 37 | 自動テストには以下のパッケージを使用しています。
 38 | 
 39 | - `@babel/core`
 40 | - `@babel/preset-env`
 41 | - `@babel/preset-react`
 42 | - `babel-jest`
 43 | - `identity-obj-proxy`
 44 | - `jest`
 45 | - `react-test-renderer`
 46 | 
 47 | ## 使い方
 48 | 
 49 | ### GitHub Codespaces でとりあえず動かしてみる
 50 | 
 51 | Codespaces でこのリポジトリを開きます。
 52 | 
 53 | Codespaces の Visual Studio Code が開いたら「 Terminal 」のところから NPM パッケージをインストールします（ Codespaces が自動的にインストールすることもあります）。
 54 | 
 55 | ```bash
 56 | npm install
 57 | ```
 58 | 
 59 | 開発用プレビューを起動します。
 60 | 
 61 | ```bash
 62 | npm run dev
 63 | ```
 64 | 
 65 | ポート `3000` が開いてポートフォワーディングが行われるのでその URL を開きます。
 66 | 
 67 | 試し終わったら Codespaces のスペースを破棄します。
 68 | 
 69 | ### 開発環境で動かす
 70 | 
 71 | ```bash
 72 | # リポジトリをチェックアウト
 73 | git checkout https://github.com/gh640/nextjs-blog-example-ja.git
 74 | 
 75 | # プロジェクトルートに移動
 76 | cd nextjs-blog-example-ja/
 77 | 
 78 | # npm の依存パッケージをインストール
 79 | npm install
 80 | 
 81 | # 開発サーバーを走らせる
 82 | # 開発サーバーを止めたい場合は ctrl + c 等で
 83 | npm run dev
 84 | ```
 85 | 
 86 | ### 公開用に静的サイトを生成する
 87 | 
 88 | ```bash
 89 | # ビルド
 90 | npm run build
 91 | 
 92 | # 静的サイトを生成して　`out/` ディレクトリに出力する
 93 | npm run export
 94 | ```
 95 | 
 96 | ### Google Analytics のトラッキングコードを入れる
 97 | 
 98 | 環境変数 `GA_TRACKING_ID` でトラッキング ID をセットすれば、 Google Analytics のトラッキングコードをページに埋め込むことができます。
 99 | 
100 | 環境変数はターミナルでセットする方法と `.env.local` ファイルを使用する方法が用意されているので、どちらでもやりやすい方を選んでください。
101 | 
102 | ターミナル:
103 | 
104 | ```bash
105 | export GA_TRACKING_ID=UA-XXX-XX
106 | ```
107 | 
108 | `.env.local` ファイル:
109 | 
110 | ```text
111 | GA_TRACKING_ID=UA-XXX-XX
112 | ```
113 | 
114 | 具体的にどのような形でトラッキングコードが埋め込まれているか知りたい場合は、プロジェクト内の `GA_TRACKING_ID` の使用箇所を探してみてください。
115 | 
116 | ```bash
117 | rg GA_TRACKING_ID
118 | ```
119 | 
120 | 参考:
121 | 
122 | - [Basic Features: Environment Variables | Next.js](https://nextjs.org/docs/basic-features/environment-variables)
123 | 
124 | ## 自動テストを走らせる
125 | 
126 | ```bash
127 | npm test
128 | # または
129 | npm run test
130 | ```
131 | 


--------------------------------------------------------------------------------