Next.js でポートフォリオサイトを作成した

// src/components/Layout.jsx

import React from 'react'
import Link from 'next/link'

import { makeStyles, useTheme } from '@material-ui/core/styles'
import Hidden from '@material-ui/core/Hidden'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import Drawer from '@material-ui/core/Drawer'
import DoubleArrowIcon from '@material-ui/icons/DoubleArrow'
import { List, ListItem, ListItemIcon, ListItemText, Divider } from '@material-ui/core'
import HomeIcon from '@material-ui/icons/Home'
import { MyDrawerList } from '../components/MyDrawerList'

const drawerWidth = 250
const useStyles = makeStyles((theme) => ({
  // ...
}))

export function Layout({ children }) {
  // ...
  const [state, setState] = React.useState({
    left: false,
  })

  // swipeable-drawerの開閉を制御するボタン
  const toggleDrawer = (anchor, open) => (event) => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return
}
    setState({ ...state, [anchor]: open })
  }

  const HomeDrawerList = () => {
    return (
      <MyDrawerList>
        <List>
          <Link href='/'>
            <ListItem button>
              <ListItemIcon><HomeIcon /></ListItemIcon>
              <ListItemText primary='Home' />
            </ListItem>
          </Link>
          // ...
        </List>
      </MyDrawerList>
    )
  }

  return (
    <React.Fragment key='left'>
      <Hidden lgUp>
        // モバイル端末用
        // if display-width > 1280px, display: none
        <SwipeableDrawer anchor='left' open={state['left']}
          onClose={toggleDrawer('left', false)} onOpen={toggleDrawer('left', true)}
        >
          <div className='swipeableList' role='presentation'
            onClick={toggleDrawer('left', false)} onKeyDown={toggleDrawer('left', false)}
          >
            <HomeDrawerList />
          </div>
        </SwipeableDrawer>
        <footer>
          <button onClick={toggleDrawer('left', true)}>
            <DoubleArrowIcon color='secondary' style={{ fontSize: 34 }} />
          </button>
        </footer>
      </Hidden>
      <Hidden mdDown>
        // 非モバイルディスプレイ用
        // if device-width < 1280px, display:none
        <aside>
          <Drawer className='permanentDrawer' variant='permanent' anchor='left'>
            <HomeDrawerList />
          </Drawer>
        </aside>
      </Hidden>
      <main className={classes.contents}>
        {children}
      </main>
      <style jsx>{`
        // ...
      `}</style>
    </React.Fragment>
  )
}

// src/components/HomeContetnts.jsx

import React from 'react'
import Link from 'next/link'
import Grid from '@material-ui/core/Grid'

export function Top() {
  return ( <section id='top' className='topContainer' />  )
}

export function About() {
  return (
    <section id='about' className='content'>
      <h2>About</h2>
      <Grid container spacing={4}>
        <Grid item md={12} lg={5}>
          <picture>
            ...
          </picture>
        </Grid>
        <Grid item md={12} lg={7}>
          <p>My name is Kawano Yudai.</p>
          <p>I graduated from Miyazaki Universiy as Bachelor of Agriculture.</p>
          <p>I belonged to agricultural engineering lablatory and studied crop row detecting tech by image processing with C++ and OpenCV.</p>
          <p style={{ color: '#F48FB1' }}><em>Now, I'm seeking job as developer. Please contact me from left drawer.</em></p>
        </Grid>
      </Grid>
    </section>
  );
}

export function Works() {
  return ( <section id='works' className='content' /> )
}

export function History() {
  return ( <section id='history' className='content' /> )
}

// /src/lib/posts.jsx
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'
export async function getPostData(id) {  
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const matterResult = matter(fileContents)
  const LowerCaseTags = matterResult.data.tags.map((tag) => (tag.toLowerCase()))
  const highlight = require('remark-highlight.js')
  
  const processedContent = await remark()
    .use(highlight)
    .use(html)
    .process(matterResult.content)
  
  const contentHtml = processedContent.toString()
  
  return {
    id,
    contentHtml,
    LowerCaseTags,
    ...matterResult.data,
  }
}

// script/genPagesMap.mjs
import path from 'path'
import fs from 'fs'
import matter from 'gray-matter'

const postsDirectory = path.join(process.cwd(), 'src/docs')
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map((fileName) => {
  const id = fileName.replace(/\.md$/, '')
  const fullPath = path.join(postsDirectory, fileName)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const matterResult = matter(fileContents)
  const LowerCaseTags = matterResult.data.tags.map((tag) => (tag.toLowerCase()))
  
  const title = matterResult.data.title
  const create = matterResult.data.create
  const update = matterResult.data.update || ''
  const tags = LowerCaseTags || ''
  return {
    id,
    title,
    create,
    update,
    tags
  }
})

const sortedPostsData = allPostsData.sort((a, b) => {
    if (a.create < b.create) {
      return 1
    } else {
      return -1
    }
})

fs.writeFileSync(
  path.join(process.cwd(), 'gen/postPages.json'),
  JSON.stringify(sortedPostsData, undefined, 2),
  'utf-8'
)

// script/genSiteMap.mjs
import path from 'path'
import fs from 'fs'

const base = 'https://oriverk.dev'
const fixed = [
  { url: base, update: '2020-06-26' },
  { url: '/posts', update: '2020-06-30' },
  { url: '/tags', update: '2020-06-26' }
]

const posts = JSON.parse(fs.readFileSync(
  path.join(process.cwd(), 'gen/postPages.json'), 'utf8'
))

const sitemap = `<?xml version="1.0"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
${fixed.map((f) => {
  return `<url>
    <loc>${base === f.url ? base : base + f.url}</loc>
    <lastmod>${f.update}</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  `}).join("")}
${posts.map((post) => { return `<url>
    <loc>${base}/posts/${post.id}</loc>
    <lastmod>${post.update || post.create}</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  `}).join("")}
</urlset>`

fs.writeFileSync(path.join(process.cwd(), "public/sitemap.xml"), sitemap)

<?xml version='1.0' encoding='UTF-8'?>
<rss version='2.0'>
	<channel>
		<title>hogehoge foobar</title>
		<link>http://example.com/</link>
		<description>aaaaaaaaaaaaaaaa</description>
		<item>
			<title>tegetege mikan</title>
			<link>http://example.com/post3.html</link>
			<description> this is description</description>
			<pubDate>Wed, 11 Jun 2008 15:30:59 +0900</pubDate>
		</item>
	</channel>
</rss>

<?xml version='1.0' encoding='UTF-8'?>
<feed xmlns='http://www.w3.org/2005/Atom' xml:lang='ja'>
	<id>tag:example.comfeed/</id>
	<title>example.com update info</title>
	<updated>2020-06-11T15:30:59Z</updated>
	<link rel='alternate' type='text/html' href='http://example.com/feed/' />
	<link rel='self' type='application/atom+xml' href='http://example.com/feed/atom10.xml' />
	<entry>
		<id>http://example.com/post1.html#20080609205030</id>
		<title>foobar</title>
		<link rel='alternate' type='text/html' href='http://example.com/post1.html' />
		<updated>2020-06-09T20:50:30Z</updated>
		<summary>foofoooofooo</summary>
	</entry>
</feed>

// script/genRss.mjs
import path from 'path'
import fs from 'fs'

const base = {
  url: 'https://oriverk.dev',
  title: "Kawano Yudai's site",
  desc: "This site is for my portfolio and made with React, Next.js"
}
const posts = JSON.parse(fs.readFileSync(
  path.join(process.cwd(), 'gen/postPages.json'), 'utf8'
))

const rss = `<?xml version='1.0'?>
<rss version='2.0'>
  <channel>
    <title>${base.title}</title>
    <link>${base.url}</link>
    <description>${base.desc}</description>
    <language>ja</language>
    <lastBuildDate>${new Date()}</lastBuildDate>/
${posts.map((post) => {
  return `<item>
      <title>${post.title}</title>
      <link>${base.url}/posts/${post.id}</link>
      <description>${post.tags.join(', ')}</description>
      <pubDate>${post.create}</pubDate>
    </item>
  `}).join('')}
  </channel>
</rss>`
fs.writeFileSync(path.join(process.cwd(),'public/rss.xml'), rss)

Atom の ユニークid をどうしようかと考えましたが、適当に。

// script/genRss.mjs
import path from 'path'
import fs from 'fs-extra'

const base = {
  url: 'https://oriverk.dev',
  title: "Kawano Yudai's site",
  desc: "This site is for my portfolio and made with React, Next.js"
}
const posts = JSON.parse(fs.readFileSync(
  path.join(process.cwd(), 'gen/postPages.json'), 'utf8'
))

const atom = `<?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom' xml:lang='ja'>
  <id>${base.url}</id>
  <title>${base.title}</title>
  <updated>${new Date()}</updated>
  <link rel='alternate' type='text/html' href='${base.url}' />
  <link rel='self' type='application/atom+xml' href='${base.url + '/atom.xml'}' />
  ${posts.map((post) => {
    return `<entry>
      <id>${post.id}</id>
      <title>${post.title}</title>
      <link rel='alternate' type='text/html' href='${base.url + '/posts/' + post.id}' />
      <updated>${post.update || post.create}</updated>
      <summary>${post.tags.join(', ')}</summary>
    </entry>`}).join('')}
</feed>`
fs.writeFileSync(path.join(process.cwd(), 'public/atom.xml'), atom)