Add public keys

Bump nth-check from 2.0.0 to 2.0.1

.env.local.sample

@@ -1,3 +1,5 @@
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
 SPOTIFY_REFRESH_TOKEN=
+
+MICROCMS_API_KEY=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -11,3 +11,5 @@ yarn-error.log
 .vimrc~
 ..vimrc.un~
 .env.local
+
+.vercel

docs/hcunews/ja.md

@@ -1,13 +1,12 @@
 このアカウントは**非公式**アカウントです。また、内容を保証するものではありません。
 
-# 管理者
+# 連絡先
 広島市立大学 情報科学部 2年の [yude](https://yude.jp/profile) が管理しています。このアカウントについての連絡は下記までお願いします。
-## 連絡先
 * 電子メール: [admin@yude.jp](mailto:admin@yude.jp)
 * Twitter: [@yude_jp](https://twitter.com/yude_jp)
 
-# 稼働方法
+# 仕組み
-Microsoft Power Automate によって広島市立大学WebページのRSSフィードを取得し、新しい記事が投稿されている場合にツイートします。\
+Microsoft Power Automate によって広島市立大学 Web ページの RSS フィードを取得し、新しい記事が投稿されている場合にツイートします。\
 次の URL を監視しています。
 * [お知らせ｜広島市立大学](https://www.hiroshima-cu.ac.jp/news/)
 * [お知らせ（在学生・保護者の方へ）｜広島市立大学](https://www.hiroshima-cu.ac.jp/news_student/)

docs/minecraft/en.md

@@ -14,16 +14,16 @@ You can destroy wood logs and ore blocks at once by destroying with sneaking.\
 ## Block protection
 You can protect your chests, doors, furnaces, etc. by pasting sign like the image below.\
 You can also create a shared block by writing the player ID across multiple lines. \
-![Chest Protection](/static/images/minecraft/lockette/chest.png)
+![Chest Protection](/images/minecraft/lockette/chest.png)
 ## Skills
 You can use skills powered by mcMMO.
 
 # Facility introduction
 ## Shrine (by shirachan_1204)
-![Shrine](/static/images/minecraft/shrine.png)
+![Shrine](/images/minecraft/shrine.png)
 ## Iron Golem Trap (by yude & kuwazi_)
-![Iron Golem Trap](/static/images/minecraft/golem_trap.png)
+![Iron Golem Trap](/images/minecraft/golem_trap.png)
 ## Huge field (by yude & kuwazi_)
-![Huge field](/static/images/minecraft/large_field.png)
+![Huge field](/images/minecraft/large_field.png)
 ## Giant sugar cane field  (by yude)
-![Giant sugar cane field ](/static/images/minecraft/sugarcane.png)
+![Giant sugar cane field ](/images/minecraft/sugarcane.png)

docs/minecraft/ja.md

@@ -13,16 +13,16 @@
 ## ブロックの保護
 看板を画像のように貼り付けることで、チェストやドア、かまどなどを保護できます。\
 複数行に渡ってプレイヤー ID を書くことで、共有ブロックを作ることもできます。\
-![Chest Protection](/static/images/minecraft/lockette/chest.png)
+![Chest Protection](/images/minecraft/lockette/chest.png)
 ## スキル
 mcMMO を導入しているので、プラグインによるスキルを利用できます。  
 
 # 施設紹介
 ## 神社 (by shirachan_1204)
-![神社](/static/images/minecraft/shrine.png)
+![神社](/images/minecraft/shrine.png)
 ## アイアンゴーレムトラップ (by yude & kuwazi_)
-![アイアンゴーレムトラップ](/static/images/minecraft/golem_trap.png)
+![アイアンゴーレムトラップ](/images/minecraft/golem_trap.png)
 ## 巨大畑 (by yude & kuwazi_)
-![巨大畑](/static/images/minecraft/large_field.png)
+![巨大畑](/images/minecraft/large_field.png)
 ## 巨大サトウキビ畑 (by yude)
-![巨大サトウキビ畑](/static/images/minecraft/sugarcane.png)
+![巨大サトウキビ畑](/images/minecraft/sugarcane.png)

docs/mutual/en.md

@@ -3,12 +3,12 @@ Publishing the website whose links to yude.jp.
 
 ## Link listing
 ### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
-[![kirby3ds](/static/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
 
 ### こーげんやさい `https://nona-takahara.github.io/`
-[![こーげんやさい](/static/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
 
 
 ## To those who want to link yude.jp
 Thank you! You can use the banner below to link this website.
-[![yude.jp](/static/images/banner_new.png)](https://yude.jp)
+[![yude.jp](/images/banner_new.png)](https://yude.jp)

docs/mutual/ja.md

@@ -3,12 +3,12 @@
 
 ## リンク一覧
 ### カービィ★KIRBYの家 `https://exout.net/~kirby3ds/`
-[![kirby3ds](/static/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
+[![kirby3ds](/images/mutual/kirby3ds.png)](https://exout.net/~kirby3ds/)
 
 ### こーげんやさい `https://nona-takahara.github.io/`
-[![こーげんやさい](/static/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
+[![こーげんやさい](/images/mutual/nona-takahara.png)](https://nona-takahara.github.io/)
 
 
 ## このサイトをリンクしてくださる方へ
 ありがとうございます！以下のバナーを使用して、この Web サイトをリンクすることができます。
-[![yude.jp](/static/images/banner_new.png)](https://yude.jp)
+[![yude.jp](/images/banner_new.png)](https://yude.jp)

i18n.json

@@ -9,6 +9,7 @@
       "/house": ["house", "common"],
       "/tos": ["tos", "common"],
       "/hcunews": ["hcunews", "common"],
-      "/minecraft": ["minecraft", "common"]
+      "/minecraft": ["minecraft", "common"],
+      "/404": ["404", "common"]
     }
   }

libs/client.js

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

locales/en/404.json

@@ -0,0 +1,4 @@
+{
+    "caption": "The requested page does not exist on this website.",
+    "return": "Return to top"
+}

locales/en/common.json

@@ -6,5 +6,8 @@
     "listening": "Listening to {{listening}}",
     "close": "Close",
     "mutual": "Mutual links",
-    "status": "Service Status"
+    "status": "Service Status",
+    "icon_1": "Icon: ",
+    "icon_2": "",
+    "post_list": "Posts listing"
 }

locales/en/profile.json

@@ -14,12 +14,11 @@
     "contact": "Get in touch",
     "belongs": "Organization",
     "grade": "B2",
-    "icon_1": "Icon: ",
-    "icon_2": "",
     "keys": "Public keys",
     "download": "Download",
     "fingerprint": "Digital fingerprint",
     "view": "View",
     "device": "Devices",
-    "account": "Accounts"
+    "account": "Accounts",
+    "wishlist": "Amazon Wishlist"
 }

locales/ja/404.json

@@ -0,0 +1,4 @@
+{
+    "caption": "要求されたページはこのウェブサイト上に存在しません。",
+    "return": "トップページへ戻る"
+}

locales/ja/common.json

@@ -6,5 +6,8 @@
     "listening": "{{listening}} を再生中",
     "close": "閉じる",
     "mutual": "相互リンク",
-    "status": "サービスの状態"
+    "status": "サービスの状態",
+    "icon_1": "アイコン: ",
+    "icon_2": "さん",
+    "post_list": "記事一覧"
 }

locales/ja/profile.json

@@ -14,12 +14,11 @@
     "contact": "連絡先 / SNS",
     "belongs": "所属",
     "grade": "2年",
-    "icon_1": "アイコン: ",
-    "icon_2": "さん",
     "keys": "公開鍵",
     "download": "ダウンロード",
     "fingerprint": "電子指紋",
     "view": "閲覧",
     "device": "デバイス",
-    "account": "アカウント"
+    "account": "アカウント",
+    "wishlist": "Amazon ほしいものリスト"
 }

next-seo.config.js

@@ -0,0 +1,13 @@
+export default {
+    openGraph: {
+      type: 'website',
+      locale: 'ja_JP',
+      url: 'https://yude.jp/',
+      site_name: 'yude.jp',
+    },
+    twitter: {
+      handle: '@yudejp',
+      site: '@yudejp',
+      cardType: 'summary_large_image',
+    },
+  };

next.config.js

@@ -1,12 +1,25 @@
 const nextTranslate = require('next-translate')
 
+const rewrites = async () => {
+  return [
+    {
+      source: '/minecraft/players/:uuid(\[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})',
+      destination: '/minecraft/players/:uuid'
+    },
+    {
+      source: '/minecraft/players/:uuid',
+      destination: '/404'
+    }
+  ]
+}
+
 module.exports = nextTranslate({
     i18n: {
       locales: ['ja', 'en'],
       defaultLocale: 'ja',
     },
     images: {
-      domains: ['mackerel.io', 'mc-heads.net'],
+      domains: ['mackerel.io', 'mc-heads.net', 'crafatar.com'],
     },
     webpack: function (config) {
       config.module.rules.push({
@@ -15,4 +28,19 @@ module.exports = nextTranslate({
       })
       return config
     },
+    async redirects() {
+      return [
+        {
+          source: '/wishlist',
+          destination: 'https://www.amazon.jp/hz/wishlist/ls/8WTKCPWKOJ2N?ref_=wl_share',
+          permanent: true,
+        },
+        {
+          source: '/scrapbox',
+          destination: 'https://scrapbox.io/yude',
+          permanent: true,
+        }
+      ]
+    },
+    rewrites,
   })

package.json

@@ -7,7 +7,8 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "export": "next export"
+    "export": "next export",
+    "lint": "next lint"
   },
   "repository": {
     "type": "git",
@@ -21,35 +22,43 @@
   },
   "homepage": "https://github.com/yudemoe/yude.jp#readme",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@babel/core": "^7.15.5",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.3.4",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
-    "next": "^10.2.3",
+    "microcms-js-sdk": "^1.2.0",
-    "next-themes": "^0.0.14",
+    "moment": "^2.29.1",
-    "next-translate": "^1.0.7",
+    "next": "^11.1.2",
+    "next-seo": "^4.28.1",
+    "next-themes": "^0.0.15",
+    "next-translate": "^1.1.0",
     "popper.js": "^1.16.1",
-    "postcss": "^8.3.0",
+    "postcss": "^8.3.6",
+    "prop-types": "^15.7.2",
     "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^7.0.1",
+    "react-moment": "^1.1.1",
     "react-switch": "^6.0.0",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^2.0.0",
-    "swr": "^0.5.6",
+    "swr": "^1.0.1",
-    "tailwindcss": "^2.1.4",
+    "tailwindcss": "^2.2.15",
     "tailwindcss-filters": "^3.0.0",
     "tailwindcss-responsive-embed": "^1.0.0",
-    "webpack": "^5.37.1"
+    "webpack": "^5.53.0"
   },
   "devDependencies": {
-    "@types/node": "^15.6.0",
+    "@types/node": "^16.9.6",
-    "@types/react": "^17.0.6",
+    "@types/react": "^17.0.24",
     "babel-plugin-inline-react-svg": "^2.0.1",
-    "typescript": "^4.2.4"
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
+    "typescript": "^4.4.3"
   }
 }

pages/404.js

@@ -0,0 +1,29 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// React Router
+import { useRouter } from 'next/router'
+
+// Next.js
+import Link from 'next/link'
+import useTranslation from 'next-translate/useTranslation'
+
+export default function Custom404(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("404")
+
+  return (
+    <Layout title="404">
+      <div className="text-center mb-10 mt-10">
+      <p className="text-3xl">404</p>
+      <p className="text-xl">{t('caption')}</p>
+      <Link href="/">
+        <a>
+            <p className="mt-5">{t('return')}</p>
+        </a>
+      </Link>
+      </div>
+    </Layout>
+  )
+}

pages/_app.js

@@ -1,10 +1,18 @@
+// Tailwind CSS
 import 'tailwindcss/tailwind.css';
-import { ThemeProvider } from "next-themes";
 import "../styles/globals.css"
 
+// Dark-mode related
+import { ThemeProvider } from "next-themes";
+
+// next-seo
+import { DefaultSeo } from 'next-seo';
+import SEO from '../next-seo.config';
+
 function MyApp({ Component, pageProps }) {
   return (
     <ThemeProvider attribute="class">
+      <DefaultSeo {...SEO} />
       <Component {...pageProps} />
     </ThemeProvider>
   );

pages/api/PlayerName/[uuid].js

@@ -0,0 +1,23 @@
+// React
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const getName = async (props) => {
+  const uuid = props;
+  return fetch('https://api.ashcon.app/mojang/v2/user/' + uuid);
+};
+
+const RawPlayerName = async (req, res) => {
+    const { uuid } = req.query
+    const response = await getName(uuid);
+    const data = await response.json();
+    if (response.status === 204 || response.status > 400) {
+      return res.status(200).send("404");
+    }
+    const username = data.username;
+    return res.status(200).json({
+      username,
+    });
+};
+
+export default RawPlayerName

pages/api/Spotify.js

@@ -36,7 +36,7 @@ export const getNowPlaying = async () => {
   });
 };
 
-export default async (_, res) => {
+const Spotify = async (_, res) => {
   const response = await getNowPlaying();
 
   if (response.status === 204 || response.status > 400) {
@@ -56,3 +56,5 @@ export default async (_, res) => {
     title,
   });
 };
+
+export default Spotify

pages/components/Discord/DiscordPlaying.js

@@ -27,7 +27,7 @@ function App (){
   const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
   return <p>{yes_playing}</p>
   }else{
-  return <p></p>
+  return <></>
   }
 }
 };

pages/components/Footer/BlueRibbon.js

@@ -0,0 +1,20 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const happybusy = (props) => {
+  return (
+    <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
+      <a>
+        <Image
+          src="/images/brstrip.gif"
+          width={150}
+          height={41}
+          alt="EFF Blue Ribbon Campaign"
+        />
+      </a>
+    </Link>
+  )
+}
+
+export default happybusy

pages/components/Footer/Footer.js

@@ -16,12 +16,6 @@ export default function Footer(props) {
                 <p className="text-sm font-bold mb-2">
                     {t('footer')} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{t('source')}</a></Link>
                 </p>
-                <p className="text-sm font-bold mb-2">
-                    <Link href="/tos"><a className="hover:underline">{t('tos')}</a></Link>
-                </p>
-                <p className="text-sm font-bold mb-2">
-                    <Link href="https://status.yude.jp"><a className="hover:underline">{t('status')}</a></Link>
-                </p>
             </div>
           </div>
         </div>

pages/components/Footer/HappyBusy.js

@@ -0,0 +1,20 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const HappyBusy = (props) => {
+  return (
+    <Link href="https://sites.google.com/site/happybusy/">
+        <a>
+          <Image
+            src="/images/busy_banner.png"
+            width={200}
+            height={42}
+            alt="時間のないサイト運営者リング"
+          />
+        </a>
+    </Link>
+  )
+}
+
+export default HappyBusy

pages/components/Layout.js

@@ -3,7 +3,7 @@ import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import Footer from "./Footer"
+import Footer from "./Footer/Footer"
 import Navbar from "./Navbar"
 
 const Layout = (props) => {
@@ -20,7 +20,7 @@ const Layout = (props) => {
     <div className="page">
       <Head>
         <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
-        <link rel="icon" href="/static/images/favicon.ico" />
+        <link rel="icon" href="/images/favicon.ico" />
       </Head>
       <main>
       <Navbar />

pages/components/Menu/FontAwesomeMenu.js

@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const FontAwesomeMenu = (props) => {
+  const { icon, dest } = props
+
+  return (
+    <div>
+        <Link href={`${dest}`}>
+            <a>
+                <FontAwesomeIcon icon={icon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
+            </a>
+        </Link>
+    </div>
+  )
+}
+
+export default FontAwesomeMenu

pages/components/Menu/MinecraftMenu.js

@@ -0,0 +1,18 @@
+// Next.js
+import Link from 'next/link'
+
+const MinecraftMenu = () => {
+  return (
+    <div>
+        <Link href="/minecraft">
+            <a>
+                <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
+                    <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
+                </svg>
+            </a>
+        </Link>
+    </div>
+  )
+}
+
+export default MinecraftMenu

pages/components/Minecraft.js

@@ -54,7 +54,7 @@ export default function Minecraft(props) {
                 url.push('https://mc-heads.net/avatar/' + data.players.list[i])
               }
               for (var i in url){
-                list.push(<Image src={url[i]} key={i} className="inline" height="50" width="50" />)
+                list.push(<Image src={url[i]} key={i} className="inline" height="50" width="50" alt={i}/>)
               }
               return <div>{list}</div>
             }

pages/components/Minecraft/Biography.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://playersbio.yude.jp/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: PlayersBio] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+      if (data.toString() == "[object Object]"){
+        return <p>読み込み中...</p>
+      } else {
+        if (data.toString() == "") {
+            return <p>ひとことは設定されていません...</p>
+        } else {
+            return <p>ひとこと: <span className="italic">{data.toString()}</span></p>
+        }
+      }
+    };
+}
+
+export default App;

pages/components/Minecraft/Group.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useRouter } from 'next/router'
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/group/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  
+  if (data === undefined || data === null){
+    return <p></p>
+  }else {
+        if (data.toString() == "staff") {
+            return <span className="inline-flex items-center justify-center px-3 py-2 text-base font-bold leading-none text-indigo-100 bg-indigo-700 rounded ml-3">Staff</span>
+        } else {
+            return <></>
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/Head.js

@@ -0,0 +1,16 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image'
+
+function App (props) {
+  const uuid = props;
+
+  return (
+    <Image
+        src={"https://crafatar.com/renders/body/" + uuid.uuid}
+        width={110}
+        height={250}
+    />
+  )
+}
+
+export default App;

pages/components/Minecraft/LastPlayed.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+  
+  const timeAgo = (prevDate) => {
+    const diff = Number(new Date()) - prevDate;
+    const minute = 60 * 1000;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const month = day * 30;
+    const year = day * 365;
+    switch (true) {
+        case diff < minute:
+            const seconds = Math.round(diff / 1000);
+             return `${seconds} 秒前`
+        case diff < hour:
+            return Math.round(diff / minute) + ' 分前';
+        case diff < day:
+            return Math.round(diff / hour) + ' 時間前';
+        case diff < month:
+            return Math.round(diff / day) + ' 日前';
+        case diff < year:
+            return Math.round(diff / month) + ' ヶ月前';
+        case diff > year:
+            return Math.round(diff / year) + ' 年前';
+        default:
+            return "";
+    }
+};
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/last/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: 最終プレイ日時] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+        if (data.toString() == "[object Object]") {
+            return <p>取得中です...</p>
+        } else {
+            if (data.toString() == "not_found") {
+                return <></>
+            } else {
+            let dateTime = new Date(parseInt(data.toString()) * 1000);
+            return (
+                <div className='has-tooltip'>
+                    <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8'>{dateTime.toLocaleDateString() + " " + dateTime.toLocaleTimeString()}</span>
+                    最終ログイン: {timeAgo(dateTime)}
+                </div>
+            )
+        }
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/Online.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import LastPlayed from './LastPlayed'
+
+function App (props) {
+  const uuid = props;
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")  
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://minecraft.yude.jp/online/' + uuid.uuid,
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Minecraft: オンライン状況] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else {
+        if (data.toString() == "false") {
+            return <LastPlayed uuid={uuid.uuid} />
+        } else {
+            if (data.toString() == "true") {
+            return <p>オンライン</p>
+            } else {
+                return <p>取得中...</p>
+            }
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/PlayerName.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function App (props) {
+  const uuid = props;
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let result = null;
+      try {
+        result = await axios('https://api.ashcon.app/mojang/v2/user/' + uuid.uuid);
+        setData(result.data);
+      } catch (err) {
+        result = 404;
+        setData(result);
+      }
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+        console.log("[Minecraft: UUID to player's name] データの取得に失敗しました。 / Failed to retrieve data.")
+        return <>取得中...</>
+  }else {
+        if (data === 404) {
+          return <>404</>
+        } else {
+        return (
+          <>{data.username}</>
+        )
+        }
+    };
+}
+
+export default App;

pages/components/Minecraft/PlayerNameHolder.js

@@ -0,0 +1,39 @@
+// Component
+import Group from './Group';
+
+// Data fetching
+import useSwr from 'swr'
+
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+function App (props) {
+  const uuid = props;
+  const { data, error } = useSwr(
+    uuid.uuid ? `/api/PlayerName/${uuid.uuid}` : null,
+    fetcher
+  )
+  
+  if (error) {
+    return (
+      <>エラーが発生しました。</>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>読み込み中...</>
+      )
+    } else {
+        return (
+          <>
+            <div className='has-tooltip'>
+              <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8 font-mono text-sm'>UUID: {uuid.uuid}</span>
+              <p className="text-2xl inline">{data.username}</p>
+              <Group uuid={uuid.uuid} />
+            </div>
+          </>
+        )
+    }
+  }
+}
+
+export default App;

pages/components/Minecraft/Players.js

@@ -0,0 +1,25 @@
+// Components
+import Online from './Online'
+import Head from './Head'
+import PlayerNameHolder from './PlayerNameHolder'
+import Biography from './Biography'
+
+function App (props) {
+  const uuid = props;
+  
+  return (
+    <div className="w-full flex flex-wrap">
+        <div>
+            <Head uuid={uuid.uuid} />
+        </div>
+        <div className="w-5"></div>
+        <div>
+          <p className="text-2xl text-mono"><PlayerNameHolder uuid={uuid.uuid} /></p>
+          <p><Online uuid={uuid.uuid} /></p>
+          <p><Biography uuid={uuid.uuid} /></p>
+        </div>
+    </div>
+  )
+}
+
+export default App;

pages/components/Minecraft/WrongUUID.js

@@ -0,0 +1,9 @@
+function App (props) {
+    return (
+        <div className="text-center">
+            <h2>入力された UUID に該当するプレイヤーが見つかりませんでした。</h2>
+        </div>
+    )
+  }
+  
+export default App;

pages/components/Profile/Button.js

@@ -0,0 +1,23 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Button = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <Link href={`${dest}`}>
+            <a>
+                <button
+                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                type="button"
+                >
+                <FontAwesomeIcon icon={icon} className="w-5 h-5 inline"/> {caption}
+                </button>
+            </a>
+        </Link>
+    )
+}
+
+export default Button

pages/components/Profile/Contact.js

@@ -0,0 +1,21 @@
+// Next.js
+import Link from 'next/link'
+
+// Font Awesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const Contact = (props) => {
+    const { icon, dest, caption } = props
+    return (
+        <div className="hover:underline">
+            <Link href={`${dest}`}>
+                <a>
+                    <FontAwesomeIcon icon={icon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
+                    <p className="font-mono text-xl">{caption}</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default Contact

pages/components/Profile/NintendoSW.js

@@ -0,0 +1,35 @@
+// Next.js
+import Link from 'next/link'
+
+const NintendoSW = () => {
+    return (
+        <div className="hover:underline">
+            <Link href="#">
+                <a>
+                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
+                        <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
+                        <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
+                        -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
+                        691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
+                        -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
+                        c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
+                        60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
+                        <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
+                        -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
+                        -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
+                        <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
+                        -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
+                        61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
+                        -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
+                        -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
+                        -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
+                        </g>
+                    </svg>
+                    <p className="font-mono text-xl">SW-5543-5143-8814</p>
+                </a>
+            </Link>
+        </div>
+    )
+}
+
+export default NintendoSW

pages/components/Profile/PublicKeys.js

@@ -40,7 +40,7 @@ export default function Modal() {
           <ul className="list-disc my-2">
           <li>
             <span className="font-bold">PGP&nbsp;</span>
-            <Link href="/static/yudejp.gpg">
+            <Link href="/yudejp.gpg">
               <a className="hover:underline">
                 <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
                 {download}

pages/components/Profile/Spotify.js

@@ -25,7 +25,7 @@ function App () {
    const status = data.artist + ' / ' + data.title
    return <p>{t('listening', {listening: status})}</p>
   }else{
-   return <p></p>
+   return <></>
   }
 };
 }

pages/hcunews.js

@@ -1,15 +1,17 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// React, i18n
 import useTranslation from 'next-translate/useTranslation'
-import { useRouter } from 'next/router'
 import React from "react"
 import ReactMarkdown from "react-markdown"
+
+// Markdown
 import gfm from 'remark-gfm';
 import ja from '../docs/hcunews/ja.md'
 import en from '../docs/hcunews/en.md'
 
-export default function Tos(props) {
+export default function HcuNews() {
-    const router = useRouter()
-    const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("hcunews")
 
     return(
@@ -17,9 +19,13 @@ export default function Tos(props) {
         <div>
             <h1>{t('hcunews')}</h1>
             {lang === 'ja' ? (
-            <ReactMarkdown plugins={[gfm]} children={ja} />
+                <ReactMarkdown plugins={[gfm]}>
+                    {ja}
+                </ReactMarkdown>
             ) : (
-            <ReactMarkdown plugins={[gfm]} children={en} />
+                <ReactMarkdown plugins={[gfm]}>
+                    {en}
+                </ReactMarkdown>
             )}
         </div>
         </Layout>

pages/house.js

@@ -11,7 +11,7 @@ export default function About(props) {
     <Layout title={t('house')}>
       <div>
       <p className="my-2 text-3xl text-center">{t('house')}</p>
-      <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/4mVIU29WCRVZgHUxQPzWsfXo953uxiAegbjDb83hTQ7szesCunwdpVkBIzhnLc9i?period=1d" frameborder="0" scrolling="no"></iframe>
+      <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/4mVIU29WCRVZgHUxQPzWsfXo953uxiAegbjDb83hTQ7szesCunwdpVkBIzhnLc9i?period=1d" frameBorder="0" scrolling="no"></iframe>
       </div>
     </Layout>
   )

pages/index.js

@@ -1,11 +1,27 @@
+// Base layout
 import Layout from "./components/Layout"
-import Link from 'next/link'
+
-import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
+// Menu
-import { faBlog, faBook, faUser, faServer, faHouseUser, faHeart } from '@fortawesome/free-solid-svg-icons'
+import FAMenu from "./components/Menu/FontAwesomeMenu"
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Banner
+import BlueRibbon from "./components/Footer/BlueRibbon"
+import HappyBusy from "./components/Footer/HappyBusy"
+
+// Next.js
 import Image from 'next/image'
+import Link from 'next/link'
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
+
+// React Router
 import { useRouter } from 'next/router'
+import MinecraftMenu from "./components/Menu/MinecraftMenu"
+
+// Font Awesome
+import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faBook, faUser, faServer, faHouseUser, faHeart } from '@fortawesome/free-solid-svg-icons'
 
 export default function Index(props) {
   const router = useRouter()
@@ -13,63 +29,42 @@ export default function Index(props) {
   const { t, lang } = useTranslation("index")
 
   return (
-    <Layout title={t('home')}>
+    <>
-      <div className="my-9 text-center">
+      <Layout title={t('home')}>
-        <div className="m-10">
+        <div className="my-9 text-center">
-        <Image
+          <div className="m-10">
-            src         = "/static/images/avatar.png"
+          <Image
-            alt         = "yude's avatar"
+              src         = "/images/avatar_riru.png"
-            width       = {200}
+              alt         = "yude's avatar"
-            height      = {200}
+              width       = {200}
-            unoptimized = {true}
+              height      = {200}
-        />
+              unoptimized = {true}
+          />
+          </div>
+          
+          {/* Index menu */}
+          <div className="grid grid-cols-3 gap-10">
+            <FAMenu dest="/profile" icon={faUser} />
+            <FAMenu dest="/server" icon={faServer} />
+            <FAMenu dest="/house" icon={faHouseUser} />
+            <FAMenu dest="https://scrapbox.io/yude" icon={faBook} />
+            <FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />          
+            <FAMenu dest="https://github.com/yudejp" icon={faGithub} />
+            <FAMenu dest="https://git.yude.jp" icon={faGit} />
+            <MinecraftMenu />
+            <FAMenu dest="/mutual" icon={faHeart} />
+          </div>
+          
+          {/* Banner */}
+          <div className="mx-auto mt-10">
+            <BlueRibbon />
+            <HappyBusy />
+          </div>
+          
+          {/* Avatar by */}
+          <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('common:icon_1')}<Link href="https://twitter.com/R_I_R_U_"><a className="hover:underline">梨留りる {t('common:icon_2')}</a></Link></p>
         </div>
-        <div className="grid grid-cols-4 gap-10">
+      </Layout>
-        <div><Link href="/profile"><a><FontAwesomeIcon icon={faUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
+    </>
-        <div><Link href="/server"><a><FontAwesomeIcon icon={faServer} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="/house"><a><FontAwesomeIcon icon={faHouseUser} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://scrapbox.io/yude"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://matrix.to/#/!oriLSKSTauvVrpdzZX:matrix.org?via=matrix.org"><a>
-        <svg version="1.1" viewBox="0 0 27.9 32" className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110">
-         <g transform="translate(-.095 .005)">
-          <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
-          <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
-          <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
-         </g>
-        </svg>
-        </a></Link></div>
-        <div><Link href="https://github.com/yudejp"><a><FontAwesomeIcon icon={faGithub} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="https://mstdn.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        <div><Link href="/minecraft"><a>
-        <svg className="fill-current text-black dark:text-white w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304.8 304.8">
-          <path d="M 39.10262 126.138 L 39.16748 12.39574 L 152.7982 12.33506 L 266.4289 12.27438 L 266.4289 126.0773 L 266.4289 239.8803 L 152.7333 239.8803 L 39.03775 239.8803 L 39.10262 126.138 Z M 260.4857 126.0776 L 260.4857 18.55703 L 152.8628 18.55703 L 45.23985 18.55703 L 45.23985 126.0776 L 45.23985 233.5982 L 152.8628 233.5982 L 260.4857 233.5982 L 260.4857 126.0776 Z M 103.8963 162.9245 L 103.8963 126.0776 L 116.1702 126.0776 L 128.4441 126.0776 L 128.4441 113.8758 L 128.4441 101.674 L 152.8628 101.674 L 177.2814 101.674 L 177.2814 113.8758 L 177.2814 126.0776 L 189.3835 126.0776 L 201.4856 126.0776 L 201.6573 150.5415 C 201.7517 163.9967 201.829 180.5779 201.8291 187.3885 L 201.8293 199.7715 L 189.6869 199.7715 L 177.5446 199.7715 L 177.4776 187.5093 L 177.4106 175.2471 L 152.7982 175.1855 L 128.1857 175.1239 L 128.1857 187.4477 L 128.1857 199.7715 L 116.041 199.7715 L 103.8963 199.7715 L 103.8963 162.9245 Z M 79.34843 77.02888 L 79.34843 52.62534 L 103.7671 52.62534 L 128.1857 52.62534 L 128.1857 77.02888 L 128.1857 101.4324 L 103.7671 101.4324 L 79.34843 101.4324 L 79.34843 77.02888 Z M 177.5398 77.02888 L 177.5398 52.62534 L 201.9585 52.62534 L 226.3771 52.62534 L 226.3771 77.02888 L 226.3771 101.4324 L 201.9585 101.4324 L 177.5398 101.4324 L 177.5398 77.02888 Z"/>
-        </svg>
-        </a></Link></div>
-        <div><Link href="/mutual"><a><FontAwesomeIcon icon={faHeart} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></div>
-        </div>
-        <div className="mx-auto mt-10">
-          <Link href="https://www.eff.org/pages/blue-ribbon-campaign">
-            <a>
-              <Image
-                src="/static/images/brstrip.gif"
-                width={150}
-                height={41}
-              />
-            </a>
-          </Link>
-          <Link href="https://sites.google.com/site/happybusy/">
-            <a>
-              <Image
-                src="/static/images/busy_banner.png"
-                width={200}
-                height={42}
-              />
-            </a>
-          </Link>
-        </div>
-      </div>
-    </Layout>
   )
 }

pages/minecraft.js

@@ -1,38 +1,64 @@
-import React, { useState, useEffect } from 'react';
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
+
+// React Router etc.
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router'
-import Minecraft from './components/Minecraft'
+
+// i18n
+import useTranslation from 'next-translate/useTranslation'
+
+// Next.js
 import Image from 'next/image'
+import Link from 'next/link'
+
+// Custom pages
+import Minecraft from './components/Minecraft'
+
+// Font Awesome
 import { faMap, faCopy } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
+
+// React Markdown
 import ReactMarkdown from "react-markdown"
 import gfm from 'remark-gfm';
 import ja from '../docs/minecraft/ja.md'
 import en from '../docs/minecraft/en.md'
 
+// next-seo
+import { NextSeo } from 'next-seo';
+
 export default function About(props) {
     const router = useRouter()
+    
+    // i18n
     const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("minecraft")
+    
+    // Copy server address to clipboard
     const copyText = () => {
       navigator.clipboard.writeText("yude.jp");
     };
 
     return (
+          <>
+            <NextSeo
+              title="yude.jp Minecraft マルチプレイ"
+              description="yude.jp 上に設置されている Minecraft: Java Edition のマルチプレイサーバーについて"
+            />
             <Layout title={t('title')}>
+            
             <div>
                 <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
                 <Image
-                    src         = "/static/images/dynmap.png"
+                    src         = "/images/dynmap.png"
-                    alt         = "Dynmap Header"
+                    alt         = "Minecraft brief world map generated by Dynmap"
-                    unoptimized = {true}
                     width       = {1354}
                     height      = {619}
                 />
                 </div>
+                
                 <div className="text-center">
                 <Minecraft />
                 <p>
@@ -45,26 +71,32 @@ export default function About(props) {
                     <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
                   </button>
                 </p>
+                
                 <p>{t('version')}: 1.17</p>
+                
                 <Link href="https://bluemap.yude.jp">
-                <a>
+                  <a>
-                <button
+                    <button
-                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                    className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6  py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1        ease-linear transition-all duration-150"
-                type="button"
+                    type="button">
-              >
+                      <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> BlueMap
-                <FontAwesomeIcon icon={faMap} className="w-5 h-5 inline"/> BlueMap
+                    </button>
-              </button>
+                  </a>
-              </a>
+                 </Link>
-              </Link>
               </div>
               
-              {lang === 'ja' ? (
+              {/* Load markdown contents */}
-                <ReactMarkdown plugins={[gfm]} children={ja} />
+                {lang === 'ja' ? (
-              ) : (
+                  <ReactMarkdown plugins={[gfm]}>
-                <ReactMarkdown plugins={[gfm]} children={en} />
+                      {ja}
-              )}
+                  </ReactMarkdown>
-
+                ) : (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {en}
+                  </ReactMarkdown>
+                )}
             </div>
             </Layout>
+          </>
         )
 }

pages/minecraft/players/[uuid].js

@@ -0,0 +1,59 @@
+ // Base layout
+import Layout from "../../components/Layout"
+
+// React
+import { useRouter } from 'next/router'
+
+// Data fetching
+import Players from '../../components/Minecraft/Players'
+import useSwr from 'swr'
+const fetcher = (url) => fetch(url).then((res) => res.json())
+
+// Components
+import WrongUUID from '../../components/Minecraft/WrongUUID'
+
+export default function UUID() {
+  const router = useRouter()
+  const { uuid } = router.query
+  const { data, error } = useSwr(
+    uuid ? `/api/PlayerName/${uuid}` : null,
+    fetcher
+  )
+  if (error) {
+    return (
+      <>
+        <Layout title="エラー - プレイヤー情報">
+        <p className="text-2xl">エラーが発生しました。</p>
+        </Layout>
+      </>
+    )
+  } else {
+    if (!data) {
+      return (
+        <>
+          <Layout title="読み込み中... - プレイヤー情報">
+          <Players uuid={uuid} />
+          </Layout>
+        </>
+      )
+    } else {
+      if (!data.username) {
+        return (
+          <>
+            <Layout title="404 - プレイヤー情報">
+              <WrongUUID />
+            </Layout>
+          </>
+        )
+      } else {
+        return (
+          <>
+            <Layout title={data.username + " - " + "プレイヤー情報"}>
+              <Players uuid={uuid} />
+            </Layout>
+          </>
+        )
+      }
+    }
+  }
+}

pages/mutual.js

@@ -1,25 +1,45 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
+
+// React Router etc.
 import { useRouter } from 'next/router'
 import React from "react"
+
+// React Markdown
 import ReactMarkdown from "react-markdown"
 import gfm from 'remark-gfm';
 import ja from '../docs/mutual/ja.md'
 import en from '../docs/mutual/en.md'
 
+// next-seo
+import { NextSeo } from 'next-seo';
+
 export default function Tos(props) {
     const router = useRouter()
     const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("common")
     return(
-        <Layout title={t('common:mutual')}>
+          <>
-        <div>
+            <NextSeo
-        {lang === 'ja' ? (
+              title="相互リンク"
-          <ReactMarkdown plugins={[gfm]} children={ja} />
+              description="yude.jp と相互にリンクを貼っている Web サイトの一覧"
-        ) : (
+            />
-          <ReactMarkdown plugins={[gfm]} children={en} />
+            <Layout title={t('common:mutual')}>
-        )}
+              <div>
-        </div>
+                {lang === 'ja' ? (
-        </Layout>
+                  <ReactMarkdown plugins={[gfm]}>
+                      {ja}
+                  </ReactMarkdown>
+                ) : (
+                  <ReactMarkdown plugins={[gfm]}>
+                      {en}
+                  </ReactMarkdown>
+                )}
+              </div>
+            </Layout>
+          </>
         )
     }

pages/posts.js

@@ -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,
+    },
+  };
+};

pages/posts/[id].js

@@ -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,
+    },
+  };
+};

pages/profile.js

@@ -1,207 +1,129 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
+
+// Font Awesome
+import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam, faAmazon } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faLink, faMobile } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+// Next.js, React
 import Link from 'next/link'
 import Image from 'next/image'
-import DiscordStatus from './components/DiscordStatus'
 import { useRouter } from 'next/router'
-import DiscordPlaying from './components/DiscordPlaying'
-import Spotify from './components/Spotify'
-import WakaTime from './components/WakaTime'
-import PublicKeys from './components/PublicKeys'
 
-export default function About(props) {
+// Discord
+import DiscordStatus from './components/Discord/DiscordStatus'
+import DiscordPlaying from './components/Discord/DiscordPlaying'
+
+// Custom component
+import Spotify from './components/Profile/Spotify'
+import WakaTime from './components/Profile/WakaTime'
+import PublicKeys from './components/Profile/PublicKeys'
+import Button from './components/Profile/Button'
+import Contact from './components/Profile/Contact'
+import NintendoSW from "./components/Profile/NintendoSW"
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+export default function Profile(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("profile")
 
   return (
+    <>
+      <NextSeo
+              title="yude のプロフィール"
+      />
+      <Layout title={t('about')}>
+        <div className="text-center">
   
-    <Layout title={t('about')}>
+          {
-      <div className="text-center">
+           // Heading
-
+          }
-        {
-         // Heading
-        }
-        <div>
-          <div className="flex mb-10 justify-center">
-          <Image
-            className   = "rounded-full hover:animate-rumble z-0 p-15"
-            src         = "/static/images/avatar.png"
-            alt         = "yude's avatar"
-            width       = {200}
-            height      = {200}
-            unoptimized = {true}
-          />
-          <DiscordStatus />
-          </div>
-          <p className="text-4xl transform -translate-y-4">yude</p>
           <div>
-          <DiscordPlaying />
+            <div className="flex mb-10 justify-center">
-          <Spotify />
+            <Image
+              className   = "rounded-full hover:animate-rumble z-0 p-15"
+              src         = "/images/avatar_mel.png"
+              alt         = "yude's avatar"
+              width       = {200}
+              height      = {200}
+              unoptimized = {true}
+            />
+            <DiscordStatus />
+            </div>
+            <p className="text-4xl transform -translate-y-4">yude</p>
+            <div>
+            <DiscordPlaying />
+            <Spotify />
+            </div>
           </div>
-        </div>
           
-        {
+          {
-         // Description 
+           // Description 
-        }
+          }
-        <div>
-        <div className="text-left">
-            <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {t('desc')}</p>
-        </div>
-        <div className="my-2 text-left grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 break-words">
           <div>
-            <FontAwesomeIcon icon={faSchool} className="w-5 h-5 inline"/>
+          <div className="text-left">
-            <p className="inline ml-4">{t('belongs')}</p>
+              <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {t('desc')}</p>
-            <p className="ml-9">{t('school')}</p>
-            <p className="ml-9">{t('grade')}</p>
           </div>
-          <div>
+          <div className="my-2 text-left grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 break-words">
-            <FontAwesomeIcon icon={faBirthdayCake} className="w-5 h-5 inline"/>
+            <div>
-            <p className="inline ml-4">{t('birth')}</p>
+              <FontAwesomeIcon icon={faSchool} className="w-5 h-5 inline"/>
-            <p className="ml-9">{t('date')}</p>
+              <p className="inline ml-4">{t('belongs')}</p>
+              <p className="ml-9">{t('school')}</p>
+              <p className="ml-9">{t('grade')}</p>
+            </div>
+            <div>
+              <FontAwesomeIcon icon={faBirthdayCake} className="w-5 h-5 inline"/>
+              <p className="inline ml-4">{t('birth')}</p>
+              <p className="ml-9">{t('date')}</p>
+            </div>
+            <div>
+              <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 inline"/>
+              <p className="inline ml-4">{t('location')}</p>
+              <p className="ml-9">{t('hiroshima')}</p>
+            </div>
           </div>
-          <div>
-            <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 inline"/>
-            <p className="inline ml-4">{t('location')}</p>
-            <p className="ml-9">{t('hiroshima')}</p>
-          </div>
-        </div>
   
-        {
+          {
-         // Contact 
+           // Contact 
-        }
+          }
-        <div className="text-left my-6">
+          <div className="text-left my-6">
-            <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {t('contact')}</p>
+              <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {t('contact')}</p>
-        </div>
-        <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 justify-items-center gap-y-6">
-          <div className="hover:underline">
-            <Link href="https://twitter.com/yude_jp">
-            <a>
-            <FontAwesomeIcon icon={faTwitter} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude_jp</p>
-            </a>
-            </Link>
           </div>
-          <div className="hover:underline">
+          <div className="my-2 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2justify-items-center gap-y-6">
-            <a>
+            <Contact dest="https://twitter.com/yude_jp" icon={faTwitter} caption="@yude_jp" />
-            <FontAwesomeIcon icon={faDiscord} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
+            <Contact dest="#" icon={faDiscord} caption="yude#3205" />
-            <p className="font-mono text-xl">yude#3205</p>
+            <Contact dest="mailto:i@yude.jp" icon={faEnvelope} caption="i@yude.jp" />
-            </a>
+            <Contact dest="https://github.com/yude" icon={faGithub} caption="yude" />
+            <Contact dest="https://mstdn.yude.jp/@yude" icon={faMastodon} caption="@yude@mstdn.yude.jp" />
+            <Contact dest="https://keybase.io/yude" icon={faKeybase} caption="yude" />
+            <Contact dest="https://instagram.com/yude.jp" icon={faInstagram} caption="yude.jp" />
+            <Contact dest="https://steamcommunity.com/id/yudejp" icon={faSteam} caption="id/yudejp" />
+            <NintendoSW />
           </div>
-          <div className="hover:underline">
-            <Link href="mailto:i@yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faEnvelope} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">i@yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://github.com/yude">
-            <a>
-            <FontAwesomeIcon icon={faGithub} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://mstdn.yude.jp/@yude">
-            <a>
-            <FontAwesomeIcon icon={faMastodon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">@yude@mstdn.yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://keybase.io/yude">
-            <a>
-            <FontAwesomeIcon icon={faKeybase} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://instagram.com/yude.jp">
-            <a>
-            <FontAwesomeIcon icon={faInstagram} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">yude.jp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="https://steamcommunity.com/id/yudejp">
-            <a>
-            <FontAwesomeIcon icon={faSteam} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
-            <p className="font-mono text-xl">id/yudejp</p>
-            </a>
-            </Link>
-          </div>
-          <div className="hover:underline">
-            <Link href="#">
-            <a>
-            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 inline lg:w-12 lg:h-12 md:w-12 md:h-12 fill-current text-black dark:text-white" viewBox="0 0 700 700">
-            <g transform="translate(-100.000000,900.000000) scale(0.100000,-0.100000)" fill="#FFFFF">
-            <path d="M2965 8314 c-481 -86 -868 -442 -990 -910 -44 -169 -47 -268 -42
-            -1579 3 -1204 4 -1232 24 -1325 111 -501 467 -858 973 -976 66 -15 150 -18
-            691 -21 560 -4 618 -3 633 12 15 15 16 208 16 2396 0 1622 -3 2386 -10 2400
-            -10 18 -27 19 -613 18 -476 -1 -619 -4 -682 -15z m905 -2400 l0 -2026 -407 5
-            c-375 4 -415 6 -490 25 -322 83 -561 331 -628 654 -22 101 -22 2589 -1 2688
-            60 281 255 514 518 619 132 53 193 59 621 60 l387 1 0 -2026z"/>
-            <path d="M3051 7329 c-63 -12 -159 -60 -210 -105 -105 -91 -157 -220 -149
-            -372 4 -79 9 -100 41 -164 47 -97 118 -168 215 -216 67 -33 84 -37 171 -40 79
-            -3 107 0 160 18 217 73 348 284 311 500 -43 257 -287 429 -539 379z"/>
-            <path d="M4757 8323 c-4 -3 -7 -1087 -7 -2409 0 -2181 1 -2402 16 -2408 27
-            -10 803 -6 899 4 406 46 764 293 959 660 25 47 58 126 75 175 63 188 61 138
-            61 1575 0 1147 -2 1318 -16 1391 -99 521 -496 914 -1018 1004 -70 12 -178 15
-            -526 15 -240 0 -440 -3 -443 -7z m1068 -2178 c156 -41 284 -160 336 -312 33
-            -94 32 -232 -1 -318 -61 -158 -181 -269 -335 -310 -250 -65 -516 86 -589 334
-            -22 76 -21 204 4 282 75 245 335 389 585 324z"/>
-            </g>
-            </svg>
-            <p className="font-mono text-xl">SW-5543-5143-8814</p>
-            </a>
-            </Link>
-          </div>
-        </div>
           
-        {
+          {
-         // Buttons
+           // Buttons
-        }
+          }
-        <div className="text-center my-6 space-x-5">
+          <div className="text-center my-6 space-x-5">
-        <WakaTime />
+          <WakaTime />
-        <PublicKeys />
+          <PublicKeys />
-        
+          <Button dest="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88" icon={faLink} caption={t('account')}/>
-        <Link href="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88">
+          <Button dest="https://scrapbox.io/yude/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9" icon={faMobile} caption={t('device')}/>
-                <a>
+          <Button dest="https://www.amazon.jp/hz/wishlist/ls/8WTKCPWKOJ2N?ref_=wl_share" icon={faAmazon} caption={t('wishlist')}/>
-                <button
+          </div>
-                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
-                type="button"
-              >
-                <FontAwesomeIcon icon={faLink} className="w-5 h-5 inline"/> {t('account')}
-              </button>
-              </a>
-        </Link>
-        
-        <Link href="https://scrapbox.io/yude/%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9">
-                <a>
-                <button
-                className="bg-pink-600 text-white active:bg-pink-600 mt-3 font-bold text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
-                type="button"
-              >
-                <FontAwesomeIcon icon={faMobile} className="w-5 h-5 inline"/> {t('device')}
-              </button>
-              </a>
-        </Link>
           
         </div>
-        <div>
+          <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('common:icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('common:icon_2')}</a></Link></p>
         </div>
-      </div>
+        
-        <p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('icon_2')}</a></Link></p>
+      </Layout>
-      </div>
+    </>
-    </Layout>
   )
 }

pages/server.js

@@ -1,75 +1,101 @@
+// Base layout
 import Layout from "./components/Layout"
+
+// i18n
 import useTranslation from 'next-translate/useTranslation'
 
+// React Router
 import { useRouter } from 'next/router'
 
+// next-seo
+import { NextSeo } from 'next-seo';
+
 export default function Server(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("server")
 
   return (
+    <>
+      <NextSeo
+        title="yude.jp サーバー上"
+        description="yude.jp 上に設置されているサーバーの一覧、情報"
+      />
+      <Layout title={t('status')}>
+          <div className="my-9 text-center">
+          
+          {
+           // Header
+          }
+          <div className="mb-5">
+            <p className="text-left text-4xl">{t('status')} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
+          </div>
+          
+          {
+              // yui
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yui</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">CPU </p>i7-2600</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>DDR3 24GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
+          <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('hiroshima')}</div>
+          </div>
+          <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
+          
+          {
+              // saika
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">saika</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">CPU </p>i5-6500</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>DDR4 8GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu Server 20.04.3 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('hiroshima')}</div>
+          </div>
+          <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/QCRK3wZxG7ufgunJ5iuIs9cIEJ490swAmlYMF50nNLmJw6gASXyVlzhrybiE2A1G?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
+          
+          {
+              // yukino
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yukino</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('model')} </p>Raspberry Pi 4 Model B Rev 1.2</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>4GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
+          <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('tottori')}</div>
+          </div>
+          <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
+          
+          {
+              // iroha
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">iroha</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
+          <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
+          </div>
+          <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/wgmTz7aTgvwfyU6qVHrJJmQlpOHCUJK6qw0W9sJTX68WOI8TFtc27YvJ7dwkQEGv?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
+          
+          
+          {
+              // komachi
+          }
+          <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">komachi</h2>
+          <div className="flex xl:w-2/3 text-center">
+          <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
+          <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
+          <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
+          <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
+          <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
+          </div>
+          <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/vcn6LE4P2hh6GzvtMbIAWxsXpDh6eSoNyAXdhfYaj9yDN6FJwOHIiz9ktqToj1HG?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
   
-    <Layout title={t('status')}>
-        <div className="my-9 text-center">
-        {
-         // Heading
-        }
-        <div className="mb-5">
-          <p className="text-left text-4xl">{t('status')} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
         </div>
-        {
+      </Layout>
-            // yui Mackerel
+    </>
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yui</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">CPU </p>i7-2600</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>DDR3 24GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
-        <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('hiroshima')}</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-        
-        {
-            // yukino Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">yukino</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">{t('model')} </p>Raspberry Pi 4 Model B Rev 1.2</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>4GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
-        <div className="flex-1"><p className="font-bold">{t('location')} </p>{t('tottori')}</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-        
-        {
-            // iroha Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">iroha</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
-        <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
-        <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/wgmTz7aTgvwfyU6qVHrJJmQlpOHCUJK6qw0W9sJTX68WOI8TFtc27YvJ7dwkQEGv?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-        
-        
-        {
-            // iroha Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">komachi</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">{t('service')} </p>Oracle Cloud</div>
-        <div className="flex-1"><p className="font-bold">{t('shape')} </p>VM.Standard.E2.1.Micro</div>
-        <div className="flex-1"><p className="font-bold">RAM </p>1GB</div>
-        <div className="flex-1"><p className="font-bold">OS </p>Ubuntu 20.04 LTS</div>
-        <div className="flex-1"><p className="font-bold">{t('region')} </p>Japan Central (Osaka)</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/vcn6LE4P2hh6GzvtMbIAWxsXpDh6eSoNyAXdhfYaj9yDN6FJwOHIiz9ktqToj1HG?period=24h" height="400" frameBorder="0" scrolling="no"></iframe>
-
-      </div>
-    </Layout>
   )
 }

pages/tos.js

@@ -14,11 +14,15 @@ export default function Tos(props) {
     return(
         <Layout title={t('tos')}>
         <div>
-        {lang === 'ja' ? (
+          {lang === 'ja' ? (
-          <ReactMarkdown plugins={[gfm]} children={ja} />
+            <ReactMarkdown plugins={[gfm]}>
-        ) : (
+                {ja}
-          <ReactMarkdown plugins={[gfm]} children={en} />
+            </ReactMarkdown>
-        )}
+          ) : (
+            <ReactMarkdown plugins={[gfm]}>
+                {en}
+            </ReactMarkdown>
+          )}
         </div>
         </Layout>
         )

public/yude.asc

@@ -0,0 +1,67 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQINBGBFtIIBEADvtdeDZreuQ/iktUbhSqAOwbmAVNqbuKYvIbxp1AKPlEVD3oxR
+s+pnfLwMswobAT98VjQMHYnQM8hp4ngBgiZUqfh5RWO750TvlNIRRlG4vMoR06gP
+maDVz6t0D+UPW0lnuPk7TnHOROPEQCJzjn+J8xd+a1wXHP9ExAOpGLjnjUDPZK2v
+U7ls3j4/7YWa1/lpbccWbbnZ/siqbz1VE3F+RwXWtxzTIOyreriAAKY5se8Z/fE1
+FYQlsDlAfFZa5K8+4LiTLongzBJpjwRsWiTYNQxpEUv47jWJuO2DgD5/8+bG4P/F
+n4OC6GP4odwWZZnga/rIrbYM0rl6pCHzKxg9nrwba0ZsbO6H0++Inii3TIHT9Nm1
+vBCHUMvoW3DEWD6SB/fut8nNCamQKJwAHp8wl/OCJ8vUbwM0tTiaC7ymRdQXehSG
+5kWf4tSNAz9QJGQPyn3qFehuD59/B7yMdlIAExKH/fHtUknpb/KNJx8aIRfxC58X
+e9syXLvNO1XBpI3dl7QWGVLSErVNtWTO3RSywjhDL73rZVxY4fJvz63eo0T/bIHp
+YdL7ThdTr+PbwcRvmJrJmYqzSzg6kDT+jIyV3vNvUCb/m3nSm41Z4cSGMCU/9/Nm
+7eUJRnWdFOeEfOrn3TRrbNXDMerXRe/+ITO4K5Xc1AD9I8ILXM/K4QV9iQARAQAB
+tBJ5dWRlanAgPGlAeXVkZS5qcD6JBUwEEwEIAzYCGwMFCQWjmoAFCwkIBwIGFQoJ
+CAsCBBYCAwECHgECF4AWIQQ3RfJw206JdWsHYr7rD+XZJcSpaAUCYRmCYjsUgAAA
+AAASACBwcm9vZkBtZXRhY29kZS5iaXpodHRwczovL2Rldi50by95dWRlL29wZW5w
+Z3AtMzkyZIMUgAAAAAASAGhwcm9vZkBtZXRhY29kZS5iaXpodHRwczovL3d3dy5y
+ZWRkaXQuY29tL3VzZXIveXVkZTExMTkvY29tbWVudHMvb253eHI2L29wZW5wZ3A0
+ZnByMzc0NWYyNzBkYjRlODk3NTZiMDc2MmJlZWIwZmU1ZDkyNWM0YTk2Ly8UgAAA
+AAASABRwcm9vZkBtZXRhY29kZS5iaXpkbnM6eXVkZS5qcD90eXBlPVRYVFMUgAAA
+AAASADhwcm9vZkBtZXRhY29kZS5iaXpodHRwczovL3R3aXR0ZXIuY29tL3l1ZGVf
+dW5pdi9zdGF0dXMvMTQxNzI5ODQ4ODY5NDUwOTU4N1EUgAAAAAASADZwcm9vZkBt
+ZXRhY29kZS5iaXpodHRwczovL3R3aXR0ZXIuY29tL3l1ZGVfanAvc3RhdHVzLzE0
+MTcyOTc1MDYxNjIwMTIxNjBYFIAAAAAAEgA9cHJvb2ZAbWV0YWNvZGUuYml6aHR0
+cHM6Ly9naXN0LmdpdGh1Yi5jb20veXVkZS80NmNkNDE3MWNjM2M3ZjZlNTQ1N2Vk
+YWU2YzczMjJjMjYUgAAAAAASABtwcm9vZkBtZXRhY29kZS5iaXpodHRwczovL21z
+dGRuLnl1ZGUuanAvQHl1ZGVRFIAAAAAAEgA2cHJvb2ZAbWV0YWNvZGUuYml6aHR0
+cHM6Ly90d2l0dGVyLmNvbS95dWRlX1JUL3N0YXR1cy8xNDE3Mjk4NTAxOTQwMTE3
+NTA2PxSAAAAAABIAJHByb29mQG1ldGFjb2RlLmJpemh0dHBzOi8vZ2l0bGFiLmNv
+bS95dWRlL2dpdGxhYl9wcm9vZj8UgAAAAAASACRwcm9vZkBtZXRhY29kZS5iaXpo
+dHRwczovL2dpdC55dWRlLmpwL3l1ZGUvZ2l0ZWFfcHJvb2YACgkQ6w/l2SXEqWjY
+BxAAtMXaDLJCq9qzP6jPs22R+LXM99Pmtf3QiJ/a9qa8L+qJBT2g7mXqlQGXBBy2
+N0VY+IeTvNHc9hvuKrUVBLxOy7YWnf3D7jPlfttDQrQWVcvtn0//DwCf84Bzl+VC
+NzB5Fc9FYP+qUv5d4+lsNaRcrO+L1Fr6HWcFDMeb6uKWEoFtKLLVVhrkGAbLOR2H
+CAmJyspU4Zuw2vo/Cx5TE3IotGXidjYQXt50q0WxbggWYdRsS1E+gS7dMTaS/8+O
+wcWb0/6QGR1U45gF6BVpF+IwGXGZRHvWykZ9e3xZx5OdjbsC0QRk2b0nxp/c1qN8
+Ua1L3HurIqqr+yWuLae2DB6hgrpJEi2HwM6uj0LAVgkNG2EMv3cky1+nOsa5xzGy
+t7OjUKAXX+XHnT2HRSlhET/e3Gqw4VFnTD876CbEPfbJ5aR5jB1lWKcMujiDsg35
+E/pNkkeLpEy4D6+pZLt8+k+KDNwCazjzNil6aFm4ogSKRH5vmfaJyObLGqChD1bb
+TfkJXzfIacYzf1L1KjNCLCPyxxUrjzyxHZZRAPm+bg7h494EM4hDoRevWJNdnm2C
+GQlcZGI7pF4StQR+YkisgaLYBUyAjuerWaMrXp8NWYPdeJEeqDjTxmJyFZRRCVKR
+CPq0IgEOOkdl1lgQxYEroFlvSgwWoJBNTTFu+LDg6ZuBwMa5Ag0EYEW0ggEQAN0h
+PmgU7XV0dRqJ1/Mb1WpnnXsshVr3SGZoqUn4XVMRWEhLc3xzp3tLMPqCytLMddAF
+rBaBItuOA+yE9w5Yqpt9Z1axrqA6TqzHbCBUPhacynPmS5VcnsZDOF/P67s1y0/L
+RX6idF94ElEYgc1KAzj1wD5Q1bW2yIQUzjhgkDFhZOY4nqbSfg6NDbGQo3coquMs
+YcLdnEBwPq95WSns62hr4naohMRalbFZDt+BydWvv8XoT2RkoQnWN35+332rUlu6
+HECBtI+RBVtVwKWGymY8GFcSau20j+4JseSla6iA2XeXi9rN4Kj03n0Nx2L4NOAP
+W0XfzlpFBBzhcthgJ8ahspIf9z+fvQbBQ9v9xq15/nj5sqLSBN6SZP1Q9ykXM63/
+HzxSFTDUVyC3OFvS+FsVU08oG/QzfjHp4MWr1zVhAaLBZxDZt7nw5osec+/OgiAm
+Tt9HU5UiUfbfa5nQEHMapOD/r0HJu5RFA3EHMmmr9Es63OKcNrCfrZzy3b/4mv0h
+J3sDulsvgu1GSinI0oubU1OJ+l+hEPEvbV3B2xMm/m7anJUEa31GHuu5ZiZJSZZS
+Hxa4m43X1mRfRnI8h4LNpXgGhm6wh+zO8xx4PztNPNq9zA+CYRlMTMI15xr78Ui6
+eKzLE5/cliuPaP0CyHEEQNSxxsgk57mdO9xldoShABEBAAGJAjwEGAEIACYWIQQ3
+RfJw206JdWsHYr7rD+XZJcSpaAUCYEW0ggIbDAUJBaOagAAKCRDrD+XZJcSpaGhO
+D/0e8q1DCKQUud/BwfT6ELR488ojdIu9Jag0aGKul3qemnLnk3jSSoz5rNKHAemY
+D6PUNeARU9Unksy88EJMB3GMlbnfrWwTEfMfE1eZSqntCo/xoL1mr013CZKMYlLT
+K8J0oC5Y3ENi24R5BZIpsAnnqL3L6iPtuTRVkHMYpFgHgWnxRNqpdqbtXHu/1Z5l
+XLhea7o6NF/Chrl73zTyI6qlrRftERVmyTB/TxbUFTAAXGoUO/Ag/rGt+uoLIjE3
+usfeoc4KR4uqEKuVN/aLMNSrCYHPTZRltKK6w1XpdASIGFblnFzeT0xHHgI7xtmT
+hyQPnHhyup9GHYqjj9J1A9BcvZh13gh5efnzEWfvSITpD3XALSRba5NhI3ex9Ene
+UlKjlGYjxrgpSBtmk/pm6rYo+/YXZY62JhjMt+juBvhgQZQ9cpg003AMNnKY80/f
+thpA+hR4xLPhAId7grWaAf5zdyqeKPBp+uAaJuf9Ii4VrR6rl0M+nHNLZR2mgN90
+2z2nvKiGpMuMwLtelW86OAH3CZimx+kxbIO3yj0+mH8PvAKqTI1n5vT82124bLp6
+avwOcnA246pF6S2k/VnfT8mhQwbUxwkKpvxoyvQDuqo5FcO2O19I6o8EakE8Iruo
+6hJACt4WXbzR3gPBmptL32eJlo99ZV1gvY4Sy69EAtw2kg==
+=dc5x
+-----END PGP PUBLIC KEY BLOCK-----

public/yude.keys

@@ -0,0 +1 @@
+ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDfEH46roc6pn97+Bi0UxWaeogvN38U5/7W+s2TWAQfpE8gv7ibFwZ5FVvHguT8BbCkK8YuXW7Oug1n8S6o3ABhUQD/zGIuEBLVKO6BTUYNDpYNxmmXKZ+dbB1nz++bvson8pYv/MdkeeeRrmqVgmrZzDifgBqYicGep+LKobhXvgCX6Qb9cHC9MCx+3mUzT0RhwwxEL/AsBm6f5oPJZdnF3agnOi61KA+wrK7RPU5v88HY5jHb87irFjNbc2xvyoLJmx+ILyKIcdsaADiTdy2JX5fqsO4S3WFELK+utw1MgBnGt0ENaev2Tce9r2QuUZQYNpa1+vAcdsc0qcR2W9wV

vercel.json

@@ -0,0 +1,6 @@
+{
+    "redirects": [
+        { "source": "/wishlist", "destination": "https://www.amazon.jp/hz/wishlist/ls/8WTKCPWKOJ2N?ref_=wl_share" },
+        { "source": "/scrapbox", "destination": "https://scrapbox.io/yude" }
+    ]
+}