{postData.title}
+
+
+
+ - Hello, I’m Shu. I write code at{' '} - ZEIT, the team behind{' '} - Next.js. You can contact me via{' '} - Twitter or{' '} - email. -
+[Your Self Introduction]
(This is a sample website - you’ll be building a site like this on{' '} our Next.js tutorial.) diff --git a/example/.gitignore b/example/.gitignore new file mode 100644 index 0000000..922d92a --- /dev/null +++ b/example/.gitignore @@ -0,0 +1,25 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +.env* + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..02695bc --- /dev/null +++ b/example/README.md @@ -0,0 +1 @@ +This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file diff --git a/example/components/Date.js b/example/components/Date.js new file mode 100644 index 0000000..0ec71d3 --- /dev/null +++ b/example/components/Date.js @@ -0,0 +1,6 @@ +import { parseISO, format } from 'date-fns' + +export default function Date({ dateString }) { + const date = parseISO(dateString) + return +} diff --git a/example/components/Layout.js b/example/components/Layout.js new file mode 100644 index 0000000..ab023c3 --- /dev/null +++ b/example/components/Layout.js @@ -0,0 +1,64 @@ +import Head from 'next/head' +import styles from './Layout.module.css' +import utilStyles from '../styles/utils.module.css' +import Link from 'next/link' + +const name = 'Shu Uesugi' +export const siteTitle = 'Next.js Sample Website' + +const Page = ({ children, home }) => ( +
+
+
+
+
+
+
+ {home ? (
+ <>
+ 
+
+
+
+
+ {children}
+ {!home && (
+
+)
+
+export default Page
diff --git a/example/components/Layout.module.css b/example/components/Layout.module.css
new file mode 100644
index 0000000..d0e3a8f
--- /dev/null
+++ b/example/components/Layout.module.css
@@ -0,0 +1,25 @@
+.container {
+ max-width: 36rem;
+ padding: 0 1rem;
+ margin: 3rem auto 6rem;
+}
+
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.headerImage {
+ width: 6rem;
+ height: 6rem;
+}
+
+.headerHomeImage {
+ width: 8rem;
+ height: 8rem;
+}
+
+.backToHome {
+ margin: 3rem 0 0;
+}
diff --git a/example/lib/posts.js b/example/lib/posts.js
new file mode 100644
index 0000000..db08438
--- /dev/null
+++ b/example/lib/posts.js
@@ -0,0 +1,69 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+import remark from 'remark'
+import html from 'remark-html'
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+
+export function getSortedPostsData() {
+ // Get file names under /posts
+ const fileNames = fs.readdirSync(postsDirectory)
+ const allPostsData = fileNames.map(fileName => {
+ // Remove ".md" from file name to get id
+ const id = fileName.replace(/\.md$/, '')
+
+ // Read markdown file as string
+ const fullPath = path.join(postsDirectory, fileName)
+ const fileContents = fs.readFileSync(fullPath, 'utf8')
+
+ // Use gray-matter to parse the post metadata section
+ const { data } = matter(fileContents)
+
+ // Combine the data with the id
+ return {
+ id,
+ ...data
+ }
+ })
+ // Sort posts by date
+ return allPostsData.sort((a, b) => {
+ if (a.date < b.date) {
+ return 1
+ } else {
+ return -1
+ }
+ })
+}
+
+export function getAllPostIds() {
+ const fileNames = fs.readdirSync(postsDirectory)
+ return fileNames.map(fileName => {
+ return {
+ params: {
+ id: fileName.replace(/\.md$/, '')
+ }
+ }
+ })
+}
+
+export async function getPostData(id) {
+ const fullPath = path.join(postsDirectory, `${id}.md`)
+ const fileContents = fs.readFileSync(fullPath, 'utf8')
+
+ // Use gray-matter to parse the post metadata section
+ const { data, content } = matter(fileContents)
+
+ // Use remark to convert markdown into HTML string
+ const processedContent = await remark()
+ .use(html)
+ .process(content)
+ const contentHtml = processedContent.toString()
+
+ // Combine the data with the id and contentHtml
+ return {
+ id,
+ contentHtml,
+ ...data
+ }
+}
diff --git a/example/package.json b/example/package.json
new file mode 100644
index 0000000..8cd5529
--- /dev/null
+++ b/example/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "my-app",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "date-fns": "^2.11.1",
+ "gray-matter": "^4.0.2",
+ "next": "9.3.1",
+ "react": "16.13.1",
+ "react-dom": "16.13.1",
+ "remark": "^12.0.0",
+ "remark-html": "^11.0.1"
+ }
+}
diff --git a/example/pages/_app.js b/example/pages/_app.js
new file mode 100644
index 0000000..4fd261f
--- /dev/null
+++ b/example/pages/_app.js
@@ -0,0 +1,5 @@
+import '../styles/global.css'
+
+const App = ({ Component, pageProps }) =>
+ {name}
+ + ) : ( + <> + + +
+
+
+ + + {name} + +
+ + )} +
+
+ ← Back to home
+
+
+ )}
+ + Hello, I’m Shu. I write code at{' '} + ZEIT, the team behind{' '} + Next.js. You can contact me via{' '} + Twitter or{' '} + email. +
++ (This is a sample website - you’ll be building a site like this on{' '} + our Next.js tutorial.) +
+Blog
+-
+ {allPostsData.map(({ id, date, title }) => (
+
-
+
+ {title}
+
+
+ ++ +
+ ))}
+