Delete link to blog.yude.jp

ページのリロード時に変更ボタンがずれる

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": [ "next/babel" ],
+    "plugins": [ "inline-react-svg" ]
+  }

.env.local.sample

@@ -0,0 +1,3 @@
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+SPOTIFY_REFRESH_TOKEN=

.github/workflows-disabled/cloudflare-workers.yml

@@ -1,46 +0,0 @@
-name: Cloudflare Workers
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build-and-deploy:
-    name: Build and Deploy
-    runs-on: ubuntu-18.04
-    steps:
-    - uses: actions/checkout@v2
-
-    - name: setup node
-      uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-
-    - name: Cache dependencies
-      uses: actions/cache@v1
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
-
-    - name: Install packages
-      run: yarn install --frozen-lockfile
-
-    - name: Build pages
-      run: yarn build
-
-    - name: Export
-      run: yarn export
-
-    - name: Add nojekyll
-      run: touch ./out/.nojekyll
-
-    - name: Publish to Cloudflare Workers
-      uses: cloudflare/wrangler-action@1.3.0
-      env:
-        USER: root
-      with:
-        apiToken: ${{ secrets.CF_API_TOKEN }}
-        workingDirectory: './'

.gitignore

@@ -8,3 +8,6 @@ debug.log
 dist
 .next
 yarn-error.log
+.vimrc~
+..vimrc.un~
+.env.local

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

README.md

@@ -1,2 +1,16 @@
 # yude.jp
-Front page of [yude.jp](https://yude.jp).
+![Vercel](https://vercelbadge.vercel.app/api/yudejp/yude.jp?style=for-the-badge)
+<img alt="Next JS" src="https://img.shields.io/badge/nextjs-%23000000.svg?style=for-the-badge&logo=next.js&logoColor=white"/>
+<img alt="TailwindCSS" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white"/>\
+Source code of [yude.jp](https://yude.jp).\
+Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/) and deployed on [Vercel](https://vercel.com).
+
+## Development
+### Setup
+1. Run `yarn`.
+1. Rename `.env.local.sample` as `.env.local` and set value. 
+### Preview
+* Run `yarn dev`.
+
+## License
+This repository is provided under the MIT License.

docs/hcunews/en.md

@@ -0,0 +1,17 @@
+This is **unofficial** account and there's no guarantee of accuracy.
+
+# Administrator
+Run by [yude](https://yude.jp/profile), a student of Faculty of Information Science, Hiroshima City University, 2nd grade.
+## Contact
+* E-mail: [admin@yude.jp](mailto:admin@yude.jp)
+* Twitter: [@yude_jp](https://twitter.com/yude_jp)
+
+# How it works
+Microsoft Power Automate get the RSS feed from Hiroshima City University Website and tweet when a new article is available. \
+We are monitoring the following URLs:
+* [お知らせ｜広島市立大学](https://www.hiroshima-cu.ac.jp/news/)
+* [お知らせ（在学生・保護者の方へ）｜広島市立大学](https://www.hiroshima-cu.ac.jp/news_student/)
+* [在学生・保護者の方へ｜広島市立大学](https://www.hiroshima-cu.ac.jp/student/)
+
+# Related links
+* [広島市立大学](https://www.hiroshima-cu.ac.jp/)

docs/hcunews/ja.md

@@ -0,0 +1,17 @@
+このアカウントは**非公式**アカウントです。また、内容を保証するものではありません。
+
+# 管理者
+広島市立大学 情報科学部 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フィードを取得し、新しい記事が投稿されている場合にツイートします。\
+次の URL を監視しています。
+* [お知らせ｜広島市立大学](https://www.hiroshima-cu.ac.jp/news/)
+* [お知らせ（在学生・保護者の方へ）｜広島市立大学](https://www.hiroshima-cu.ac.jp/news_student/)
+* [在学生・保護者の方へ｜広島市立大学](https://www.hiroshima-cu.ac.jp/student/)
+
+# 関連リンク
+* [広島市立大学](https://www.hiroshima-cu.ac.jp/)

docs/minecraft/en.md

@@ -0,0 +1,29 @@
+# Rules
+The following applies in addition to [yude.jp Terms of Service](https://yude.jp/tos):
+* You can build your house / facility / etc. anywhere in the world.
+* Don't troll.
+* Don't cheat.
+
+# List of available commands
+* `/ll`: Switch the visibility of spawn checker.
+* `/mvspawn`: Teleport to spawn point of the world you're in.
+
+# Convenient functionalities
+## Bulk destruction
+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)
+## Skills
+You can use skills powered by mcMMO.
+
+# Facility introduction
+## Shrine (by shirachan_1204)
+![Shrine](/static/images/minecraft/shrine.png)
+## Iron Golem Trap (by yude & kuwazi_)
+![Iron Golem Trap](/static/images/minecraft/golem_trap.png)
+## Huge field (by yude & kuwazi_)
+![Huge field](/static/images/minecraft/large_field.png)
+## Giant sugar cane field  (by yude)
+![Giant sugar cane field ](/static/images/minecraft/sugarcane.png)

docs/minecraft/ja.md

@@ -0,0 +1,28 @@
+# ルール
+[yude.jp サービス利用規約](https://yude.jp/tos) に加えて、以下が適用されます。
+* ワールドのどこであっても自由に建築することができます。
+* トロール (荒らし) を行わないでください。
+* チートを行わないでください。
+# 使用可能なコマンドの一覧
+* `/ll`: スポーンチェッカーの表示を切り替えます。
+* `/mvspawn`: ワールドのスポーン地点へ転移します。
+
+# 便利機能
+## 一括破壊
+木や鉱石ブロックをスニーク (しゃがむ) しながら破壊すると一括破壊できます。
+## ブロックの保護
+看板を画像のように貼り付けることで、チェストやドア、かまどなどを保護できます。\
+複数行に渡ってプレイヤー ID を書くことで、共有ブロックを作ることもできます。\
+![Chest Protection](/static/images/minecraft/lockette/chest.png)
+## スキル
+mcMMO を導入しているので、プラグインによるスキルを利用できます。  
+
+# 施設紹介
+## 神社 (by shirachan_1204)
+![神社](/static/images/minecraft/shrine.png)
+## アイアンゴーレムトラップ (by yude & kuwazi_)
+![アイアンゴーレムトラップ](/static/images/minecraft/golem_trap.png)
+## 巨大畑 (by yude & kuwazi_)
+![巨大畑](/static/images/minecraft/large_field.png)
+## 巨大サトウキビ畑 (by yude)
+![巨大サトウキビ畑](/static/images/minecraft/sugarcane.png)

docs/mutual/en.md

@@ -0,0 +1,14 @@
+# Mutual links
+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/)
+
+### こーげんやさい `https://nona-takahara.github.io/`
+[![こーげんやさい](/static/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)

docs/mutual/ja.md

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

docs/tos/en.md

@@ -0,0 +1,19 @@
+# yude.jp Terms of Service
+The following ToS apply to services running under the yude.jp domain.
+
+## About service operation
+Our services are run by yude for experimental purposes and there's no guarantee on them.\
+Those may be suspended temporarily or permanently (e.g. for server maintenance) without any announcement.
+
+## Prohibited actions
+The actions listed below are prohibited on the service running under the yude.jp domain (especially on Mastodon instance).\
+Our administrator or moderator may take some action against the violating user's account.
+* Post images or movies for adults, or grotesque
+* Violent language that deviates from common sense
+* Chat spamming
+* Cracking our server(s)
+* Actions that the administrator or moderator deems inappropriate 
+In addition, the laws of Japan, where the server is running, apply.
+
+## Misc
+These ToS may be updated by the administrator without any announcement, but we will always notify you with in the Mastodon instance ([mstdn.yude.jp](https://mstdn.yude.jp)) or on our Twitter account ([@yudejp](https://twitter.com/yudejp) or [@yude_jp](https://twitter.com/yude_jp)).

docs/tos/ja.md

@@ -0,0 +1,18 @@
+# yude.jp サービス利用規約
+yude.jp ドメイン以下に設置されているサービスについて、以下の利用規約が適用されます。
+
+## サービス運用について
+yude が実験的に運用しており、完全に無保証で提供されるものです。
+事前の予告なくサーバーのメンテナンスを行う場合など、予告なくサービスの提供が一時停止、または永久に停止されることがあります。
+
+## 禁止行為
+以下の行為を、yude.jp で提供されるサービス、特に Mastodon インスタンス上において行うことを禁止します。 違反が見受けられた場合、管理者またはモデレーターによってアカウントに対し何らかの処分が下される可能性があります。
+* 成人向け、またはグロテスクな画像・動画の投稿
+* 常識を逸脱した暴言
+* スパム行為
+* サーバーへのクラック行為
+* 管理者が不適切であると判断した行為
+その他、サーバーの設置拠点である日本国の法律が適用されます。
+
+## その他
+この利用規約は管理者が利用者に対して了承を得ず更新することができますが、その際には必ず通知を Mastodon インスタンス内、または Twitter 上 ([@yudejp](https://twitter.com/yudejp) または [@yude_jp](https://twitter.com/yude_jp)) において行うものとします。

i18n.json

@@ -1,9 +1,14 @@
 {
-    "locales": ["en-US", "ja-JP"],
-    "defaultLocale": "ja-JP",
+    "locales": ["en", "ja"],
+    "defaultLocale": "ja",
     "pages": {
-      "/": ["index", "common"],
+      "*": ["common"],
+      "/": ["index", "minecraft", "common"],
       "/profile": ["profile", "common"],
-      "/status": ["status", "common"]
+      "/server": ["server", "common"],
+      "/house": ["house", "common"],
+      "/tos": ["tos", "common"],
+      "/hcunews": ["hcunews", "common"],
+      "/minecraft": ["minecraft", "common"]
     }
   }

locales/en-US/common.json

@@ -1,5 +0,0 @@
-{
-    "footer": "This page is licensed under the MIT License.",
-    "source": "Source code",
-    "tos": "yude.jp Terms of Service"
-}

locales/en-US/index.json

@@ -1,3 +0,0 @@
-{
-    "home": "Home"
-}

locales/en/common.json

@@ -0,0 +1,10 @@
+{
+    "footer": "This page is provided under the MIT License.",
+    "source": "Source code",
+    "tos": "yude.jp Terms of Service",
+    "yes_playing": "Playing {{playing}}",
+    "listening": "Listening to {{listening}}",
+    "close": "Close",
+    "mutual": "Mutual links",
+    "status": "Service Status"
+}

locales/en/hcunews.json

@@ -0,0 +1,3 @@
+{
+    "hcunews": "About @hcunews"
+}

locales/en/house.json

@@ -0,0 +1,3 @@
+{
+    "house": "yude's house"
+}

locales/en/index.json

@@ -0,0 +1,9 @@
+{
+    "home": "Home",
+    "profile": "yude's profile",
+    "blog": "yude's blog",
+    "status": "yude.jp Server Status",
+    "house": "yude's house",
+    "discord": "yude.jp Discord Server",
+    "mastodon": "Mastodon instance"
+}

locales/en/minecraft.json

@@ -0,0 +1,10 @@
+{
+    "title": "Minecraft Multiplayer",
+    "playing": "{{count}} player(s) online.",
+    "no_one": "No one is playing.",
+    "offline": "Server is down.",
+    "address": "Server address",
+    "fail": "Failed to retrieve server status.",
+    "loading": "Retrieving server status...",
+    "version": "Version"
+}

locales/en/profile.json

@@ -13,8 +13,13 @@
     "date": "November the 19th, 2001",
     "contact": "Get in touch",
     "belongs": "Organization",
-    "more": "More...",
-    "grade": "(1st grade)",
+    "grade": "B2",
     "icon_1": "Icon: ",
-    "icon_2": ""
+    "icon_2": "",
+    "keys": "Public keys",
+    "download": "Download",
+    "fingerprint": "Digital fingerprint",
+    "view": "View",
+    "device": "Devices",
+    "account": "Accounts"
 }

locales/en/server.json

@@ -3,5 +3,8 @@
     "location": "Location",
     "tottori": "Tottori, Japan",
     "hiroshima": "Hiroshima, Japan",
-    "model": "Model"
+    "model": "Model",
+    "region": "Region",
+    "service": "Service",
+    "shape": "Shape"
 }

locales/en/tos.json

@@ -0,0 +1,4 @@
+{
+    "tos": "yude.jp Terms of Service",
+    "input": "en"
+}

locales/ja-JP/common.json

@@ -1,5 +0,0 @@
-{
-    "footer": "このページは MIT License の下でライセンスされています。",
-    "source": "ソースコード",
-    "tos": "yude.jp サービス利用規約"
-}

locales/ja-JP/index.json

@@ -1,3 +0,0 @@
-{
-    "home": "ホーム"
-}

locales/ja/common.json

@@ -0,0 +1,10 @@
+{
+    "footer": "このページは MIT License のもと提供されています。",
+    "source": "ソースコード",
+    "tos": "yude.jp サービス利用規約",
+    "yes_playing": "{{playing}} をプレイ中",
+    "listening": "{{listening}} を再生中",
+    "close": "閉じる",
+    "mutual": "相互リンク",
+    "status": "サービスの状態"
+}

locales/ja/hcunews.json

@@ -0,0 +1,3 @@
+{
+    "hcunews": "@hcunews について"
+}

locales/ja/house.json

@@ -0,0 +1,3 @@
+{
+    "house": "ゆでハウス"
+}

locales/ja/index.json

@@ -0,0 +1,9 @@
+{
+    "home": "ホーム",
+    "profile": "yude のプロフィール",
+    "blog": "yude のブログ",
+    "status": "yude.jp サーバー情報",
+    "house": "ゆでハウス",
+    "discord": "yude.jp Discord サーバー",
+    "mastodon": "Mastodon インスタンス"
+}

locales/ja/minecraft.json

@@ -0,0 +1,10 @@
+{
+    "title": "Minecraft マルチプレイ",
+    "playing": "{{count}} 人がプレイしています。",
+    "no_one": "現在、誰もログインしていません。",
+    "offline": "サーバーがオフラインのようです。",
+    "address": "サーバー アドレス",
+    "fail": "サーバーの状態を取得できませんでした。",
+    "loading": "サーバーの状態を取得しています...",
+    "version": "バージョン"
+}

locales/ja/profile.json

@@ -13,8 +13,13 @@
     "date": "2001年11月19日",
     "contact": "連絡先 / SNS",
     "belongs": "所属",
-    "more": "さらに見る...",
-    "grade": "1年",
+    "grade": "2年",
     "icon_1": "アイコン: ",
-    "icon_2": "さん"
+    "icon_2": "さん",
+    "keys": "公開鍵",
+    "download": "ダウンロード",
+    "fingerprint": "電子指紋",
+    "view": "閲覧",
+    "device": "デバイス",
+    "account": "アカウント"
 }

locales/ja/server.json

@@ -3,5 +3,8 @@
     "location": "場所",
     "tottori": "日本, 鳥取県",
     "hiroshima": "日本, 広島県",
-    "model": "モデル"
+    "model": "モデル",
+    "region": "リージョン",
+    "service": "サービス",
+    "shape": "シェイプ"
 }

locales/ja/tos.json

@@ -0,0 +1,4 @@
+{
+    "tos": "yude.jp サービス利用規約",
+    "input": "ja"
+}

next-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/types/global" />

next.config.js

@@ -1,15 +1,18 @@
 const nextTranslate = require('next-translate')
 
 module.exports = nextTranslate({
-  experimental: {
-    darkModeVariant: true
-  },
     i18n: {
-      // These are all the locales you want to support in
-      // your application
-      locales: ['ja-JP', 'en-US'],
-      // This is the default locale you want to be used when visiting
-      // a non-locale prefixed path e.g. `/hello`
-      defaultLocale: 'ja-JP',
-    }
+      locales: ['ja', 'en'],
+      defaultLocale: 'ja',
+    },
+    images: {
+      domains: ['mackerel.io', 'mc-heads.net'],
+    },
+    webpack: function (config) {
+      config.module.rules.push({
+        test: /\.md$/,
+        use: 'raw-loader',
+      })
+      return config
+    },
   })

package.json

@@ -4,7 +4,7 @@
   "description": "Front page of yude.jp",
   "main": "index.js",
   "scripts": {
-    "dev": "next -p 3000",
+    "dev": "next",
     "build": "next build",
     "start": "next start",
     "export": "next export"
@@ -21,26 +21,35 @@
   },
   "homepage": "https://github.com/yudemoe/yude.jp#readme",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@zeit/next-css": "^1.0.1",
-    "autoprefixer": "^10.2.4",
-    "next": "^10.0.6",
-    "next-themes": "^0.0.10",
-    "next-translate": "^1.0.2",
+    "@tailwindcss/typography": "^0.4.0",
+    "autoprefixer": "^10.2.5",
+    "axios": "^0.21.1",
+    "next": "^10.2.3",
+    "next-themes": "^0.0.14",
+    "next-translate": "^1.0.7",
     "popper.js": "^1.16.1",
-    "postcss": "^8.2.4",
+    "postcss": "^8.3.0",
+    "querystring": "^0.2.1",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "tailwindcss": "^2.0.2",
+    "react-markdown": "^6.0.2",
+    "react-switch": "^6.0.0",
+    "remark-gfm": "^1.0.0",
+    "swr": "^0.5.6",
+    "tailwindcss": "^2.1.4",
     "tailwindcss-filters": "^3.0.0",
-    "tailwindcss-responsive-embed": "^1.0.0"
+    "tailwindcss-responsive-embed": "^1.0.0",
+    "webpack": "^5.37.1"
   },
   "devDependencies": {
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "typescript": "^4.1.3"
+    "@types/node": "^15.6.0",
+    "@types/react": "^17.0.6",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "typescript": "^4.2.4"
   }
 }

pages/_app.js

@@ -0,0 +1,13 @@
+import 'tailwindcss/tailwind.css';
+import { ThemeProvider } from "next-themes";
+import "../styles/globals.css"
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider attribute="class">
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+
+export default MyApp;

pages/_document.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

pages/api/Spotify.js

@@ -0,0 +1,58 @@
+import querystring from 'querystring';
+
+const {
+  SPOTIFY_CLIENT_ID: client_id,
+  SPOTIFY_CLIENT_SECRET: client_secret,
+  SPOTIFY_REFRESH_TOKEN: refresh_token,
+} = process.env;
+
+const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');
+const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
+const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;
+
+const getAccessToken = async () => {
+  const response = await fetch(TOKEN_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      Authorization: `Basic ${basic}`,
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: querystring.stringify({
+      grant_type: 'refresh_token',
+      refresh_token,
+    }),
+  });
+
+  return response.json();
+};
+
+export const getNowPlaying = async () => {
+  const { access_token } = await getAccessToken();
+
+  return fetch(NOW_PLAYING_ENDPOINT, {
+    headers: {
+      Authorization: `Bearer ${access_token}`,
+    },
+  });
+};
+
+export default async (_, res) => {
+  const response = await getNowPlaying();
+
+  if (response.status === 204 || response.status > 400) {
+    return res.status(200).json({ isPlaying: false });
+  }
+
+  const song = await response.json();
+  const isPlaying = song.is_playing;
+  const title = song.item.name;
+  const artist = song.item.artists.map((_artist) => _artist.name).join(', ');
+  const album = song.item.album.name;
+
+  return res.status(200).json({
+    album,
+    artist,
+    isPlaying,
+    title,
+  });
+};

pages/components/DiscordPlaying.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+function App (){
+  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://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  const str = JSON.stringify(data)
+  
+  if (str.indexOf("game") !== -1){
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  return <p>{yes_playing}</p>
+  }else{
+  return <p></p>
+  }
+}
+};
+
+export async function getServerSideProps() {
+  // Fetch data from external API
+  const res = await fetch(url)
+  const data = await res.json()
+
+  // Pass data to the page via props
+  return { props: { data } }
+}
+
+export default App;

pages/components/DiscordStatus.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const App = () => {
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  const str = JSON.stringify(data)
+  let status = 0
+  if (str.indexOf("status") !== -1){
+    status = data.members && data.members[0].status;
+  }
+  return (
+  <>
+  <div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
+  {
+    (() => {
+      if (status == 0) {
+        return <div className="text-gray-700 rounded-full bg-gray-500 flex w-6 h-6"></div>
+      }else{
+      if (status == "online"){
+        return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else if (status == "idle"){
+        return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else {
+        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
+      } 
+    }
+    })()
+  }
+  </div>
+  </>
+  )
+}
+
+export default App;

pages/components/Footer.js

@@ -0,0 +1,30 @@
+import "tailwindcss/tailwind.css";
+import Link from 'next/link';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+export default function Footer(props) {
+    
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("common")
+
+    return (
+      <>
+        <div className="container mx-auto px-6">
+        <div className="flex flex-col items-center">
+            <div className="sm:w-full text-center py-6">
+                <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/LangSelector.js

@@ -2,6 +2,8 @@ import React from "react";
 import Popper from "popper.js";
 import { useRouter } from 'next/router'
 import Link from 'next/link';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const Dropdown = ({ color }) => {
   const router = useRouter()
@@ -28,8 +30,8 @@ const Dropdown = ({ color }) => {
   return (
     <>
 
-<div className="relative inline-block text-left mr-2 float-right">
-    <button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true"
+<div className="text-left mr-2 ml-2 my-3 float-right">
+    <button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-800 shadow-sm px-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:text-white focus:outline-none" id="options-menu" aria-haspopup="true" aria-expanded="true"
     style={{ transition: "all .15s ease" }}
     ref={btnDropdownRef}
     onClick={() => {
@@ -38,21 +40,19 @@ const Dropdown = ({ color }) => {
         : openDropdownPopover();
     }}
     >
-      言語 / Languages
-      <svg className="-mr-1 ml-2 h-5 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <FontAwesomeIcon icon={faLanguage} className="w-12 h-9" />
+      <svg className="-mr-1 ml-2 h-9 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
         <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
       </svg>
-    </button>
-
-  
+    </button>  
   <div ref={popoverDropdownRef} className={
-              (dropdownPopoverShow ? "block " : "hidden ") + "origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"}>
+              (dropdownPopoverShow ? "block " : "hidden ") + "z-10 origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700"}>
     <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-    <Link href="#" locale="ja-JP">
-      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">日本語</a>
+    <Link href="#" locale="ja">
+      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">日本語</a>
     </Link>
-    <Link href="#" locale="en-US">
-      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">English</a>
+    <Link href="#" locale="en">
+      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-white dark:hover:bg-gray-800" role="menuitem">English</a>
     </Link>
     </div>
   </div>

pages/components/Layout.js

@@ -1,9 +1,10 @@
 import Head from "next/head"
-import Link from "next/link"
 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 Navbar from "./Navbar"
 
 const Layout = (props) => {
   const { title, children } = props
@@ -21,32 +22,15 @@ const Layout = (props) => {
         <title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
         <link rel="icon" href="/static/images/favicon.ico" />
       </Head>
-      <body className="min-h-screen bg-gray-900 text-white subpixel-antialiased">
       <main>
-        <div className="page-main">
+      <Navbar />
+        <div className="max-w-2xl mx-auto">
+        <div className="mx-2">
           {children}
-        </div>
-      
-      <style jsx global>{`
-        body {
-            text-align: center;
-        }
-        
-      `}</style>
-      <div className="container mx-auto px-6">
-        <div className="mt-16 flex flex-col items-center">
-            <div className="sm:w-full text-center py-6">
-                <p className="text-sm font-bold mb-2 text-gray-400">
-                    {footer} / <Link href="https://github.com/yudemoe/yude.jp"><a className="hover:underline">{source}</a></Link>
-                </p>
-                <p className="text-sm font-bold mb-2 text-gray-400">
-                    <Link href="https://wiki.yude.jp/terms"><a className="hover:underline">{tos}</a></Link>
-                </p>
-            </div>
           </div>
         </div>
+      <Footer />
       </main>
-      </body>
     </div>
   )
 }

pages/components/Minecraft.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import axios from 'axios';
+import Image from 'next/image'
+import { list } from 'postcss';
+
+export default function Minecraft(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("minecraft")
+
+  const [data, setData] = useState({ hits: [] });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://api.mcsrvstat.us/2/yude.jp',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+
+    if (data === undefined){
+        console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
+        return (
+        <p>{t('minecraft:fail')}</p>
+        )
+      }else{
+        const status = data.online
+        const player = data.players && data.players.online
+
+        return (
+          <div className="text-center">
+            {(() => {
+            if (status == true) {
+            if (player == undefined || player == 0) {
+              return <span>{t('minecraft:no_one')}</span>
+            } else {
+              return <span>{t('minecraft:playing', {count: player})}</span>
+            }}else if (status == false) {
+              return <span>{t('minecraft:offline')}</span>
+            }else {
+              return <span>{t('minecraft:loading')}</span>
+            }
+          })()}
+
+          {(() => {
+            if (data.players && data.players.list){
+              var list = [];
+              var url = [];
+              for (var i in data.players.list){
+                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" />)
+              }
+              return <div>{list}</div>
+            }
+          })()}
+          </div>
+        )
+      }
+}

pages/components/Navbar.js

@@ -1,20 +1,21 @@
 import "tailwindcss/tailwind.css";
-import Popper from "popper.js";
 import Link from 'next/link';
 import LangSelector from "./LangSelector"
+import ThemeSelector from "./ThemeSelector"
 
 const Navbar = () => {
     return (
       <>
         <nav className='flex items-center flex-wrap p-3'>
         <Link href='/'>
-          <a className='inline-flex items-center p-2 mr-4'>
-            <span className='text-xl text-white font-bold tracking-wide dark:text-white font-mono animate-heartbeat'>
+          <a className='inline-flex items-center p-2'>
+            <span className='text-xl text-black font-bold tracking-wide dark:text-white font-mono animate-heartbeat'>
               yude.jp
             </span>
           </a>
         </Link>
-            <div className="origin-top-right absolute right-0">
+            <div className="absolute right-0">
+                <ThemeSelector />
                 <LangSelector />
             </div>
       </nav>

pages/components/PublicKeys.js

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+export default function Modal() {
+  const [showModal, setShowModal] = React.useState(false);
+  const router = useRouter()
+  const { t, lang } = useTranslation("common")
+  const { locale, locales, defaultLocale, pathname } = router
+  const close = t('common:close')
+  const keys = t('profile:keys')
+  const view = t('profile:view')
+  const fingerprint = t('profile:fingerprint')
+  const download = t('profile:download')
+
+  return (
+    <>
+      <button
+        className="bg-pink-600 text-white active:bg-pink-600 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"
+        onClick={() => setShowModal(true)}
+      >
+        <FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
+      </button>
+      {showModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
+              {/* Modal content */}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/* Modal body */}
+                <div className="relative p-2 flex-auto text-black text-left">
+                
+                <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
+          <ul className="list-disc my-2">
+          <li>
+            <span className="font-bold">PGP&nbsp;</span>
+            <Link href="/static/yudejp.gpg">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
+                {download}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+                <code>3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968</code>
+              </div>
+            </div>
+          </li>
+          <li>
+            <span className="font-bold">SSH&nbsp;</span>
+            <Link href="https://github.com/yude.keys">
+              <a className="hover:underline">
+                <FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
+                {view}
+              </a>
+            </Link>
+            <p>{fingerprint}:</p>
+            <div className="overflow-x-auto">
+              <div className="whitespace-nowrap">
+              <code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
+              </div>
+            </div>
+          </li>
+            </ul>
+                
+                </div>
+                {/* Modal footer for close button */}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+                  <button
+                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    {close}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}

pages/components/Spotify.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+function App () {
+  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(
+        '/api/Spotify',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Spotify Web API] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  if (data.isPlaying){
+   const status = data.artist + ' / ' + data.title
+   return <p>{t('listening', {listening: status})}</p>
+  }else{
+   return <p></p>
+  }
+};
+}
+
+export default App;

pages/components/ThemeSelector.js

@@ -0,0 +1,33 @@
+import "tailwindcss/tailwind.css";
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import { useTheme } from "next-themes";
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const ThemeSelector = (props) => {
+  const { title, children } = props
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  
+  const [isMounted, setIsMounted] = useState(false);
+  const { theme, setTheme, getTheme } = useTheme();
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const switchTheme = () => {
+    if (isMounted) {
+      setTheme(theme === "light" ? "dark" : "light");
+    }
+  };
+  return (
+      <button className="inline-flex rounded-md border border-gray-300 dark:border-gray-800 shadow-sm px-2 bg-white font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:text-white my-3 py-1 text-2xl focus:outline-none" onClick={switchTheme}>
+        {theme !== undefined && (theme === "light" ? (
+          <FontAwesomeIcon icon={faMoon} className="w-10 h-7" />
+        ) : (
+          <FontAwesomeIcon icon={faSun} className="w-10 h-7" />
+        ))}
+      </button>
+  )
+}
+export default ThemeSelector

pages/components/WakaTime.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import useTranslation from 'next-translate/useTranslation'
+import { faUserClock } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useRouter } from 'next/router'
+
+export default function Modal() {
+  const [showModal, setShowModal] = React.useState(false);
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")
+  const close = t('common:close')
+  return (
+    <>
+      <button
+        className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-6 py-3 rounded hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+        type="button"
+        onClick={() => setShowModal(true)}
+      >
+        <FontAwesomeIcon icon={faUserClock} className="w-5 h-5 inline"/> WakaTime
+      </button>
+      {showModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative mx-auto w-4/5 max-h-1/2 -mt-96 max-w-3xl">
+              {/* Modal content */}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/* Modal body */}
+                <div className="relative p-2 flex-auto">
+                <figure><embed src="https://wakatime.com/share/@yude/6f15075a-b9d5-464a-8b4f-545d31933dfb.svg"></embed></figure>
+                </div>
+                {/* Modal footer for close button */}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
+                  <button
+                    className="text-red-500 font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => setShowModal(false)}
+                  >
+                    {close}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}

pages/hcunews.js

@@ -0,0 +1,27 @@
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import React from "react"
+import ReactMarkdown from "react-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) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("hcunews")
+
+    return(
+        <Layout title={t('hcunews')}>
+        <div>
+            <h1>{t('hcunews')}</h1>
+            {lang === 'ja' ? (
+            <ReactMarkdown plugins={[gfm]} children={ja} />
+            ) : (
+            <ReactMarkdown plugins={[gfm]} children={en} />
+            )}
+        </div>
+        </Layout>
+    )
+    }

pages/house.js

@@ -0,0 +1,18 @@
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+export default function About(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("house")
+
+  return (
+    <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>
+      </div>
+    </Layout>
+  )
+}

pages/index.js

@@ -1,27 +1,20 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import Link from 'next/link'
-import { ReactElement } from 'react'
-import { faDiscord, faGit, faMastodon } from '@fortawesome/free-brands-svg-icons'
-import { faBlog, faBook, faUser, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faBlog, faBook, faUser, faServer, faHouseUser, faHeart } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 
 export default function Index(props) {
-  
-  // Translation
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("index")
-  const home = t('home')
 
   return (
-
-    <Layout title={home}>
-      <Navbar />
-      <div className="my-9">
+    <Layout title={t('home')}>
+      <div className="my-9 text-center">
         <div className="m-10">
         <Image
             src         = "/static/images/avatar.png"
@@ -31,16 +24,52 @@ export default function Index(props) {
             unoptimized = {true}
         />
         </div>
-        <span><Link href="/profile"><a><FontAwesomeIcon icon={faUser} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="https://wiki.yude.jp"><a><FontAwesomeIcon icon={faBook} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="https://discord.gg/X6srY7X"><a><FontAwesomeIcon icon={faDiscord} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="https://git.yude.jp"><a><FontAwesomeIcon icon={faGit} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="/status"><a><FontAwesomeIcon icon={faServer} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <span className="ml-4"><Link href="https://don.yude.jp"><a><FontAwesomeIcon icon={faMastodon} className="w-10 h-10 inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" /></a></Link></span>
-        <p></p>
+        <div className="grid grid-cols-4 gap-10">
+        <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

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import Minecraft from './components/Minecraft'
+import Image from 'next/image'
+import { faMap, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/minecraft/ja.md'
+import en from '../docs/minecraft/en.md'
+
+export default function About(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("minecraft")
+    const copyText = () => {
+      navigator.clipboard.writeText("yude.jp");
+    };
+
+    return (
+            <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"
+                    alt         = "Dynmap Header"
+                    unoptimized = {true}
+                    width       = {1354}
+                    height      = {619}
+                />
+                </div>
+                <div className="text-center">
+                <Minecraft />
+                <p>
+                  <span>{t('address')}: <code>yude.jp</code></span>
+                  <button
+                    className="bg-pink-600 text-white active:bg-pink-600 font-bold text-sm px-2 py-2 ml-2 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1       ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => copyText()}
+                  >
+                    <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
+                  </button>
+                </p>
+                <p>{t('version')}: 1.17</p>
+                <Link href="https://bluemap.yude.jp">
+                <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={faMap} className="w-5 h-5 inline"/> BlueMap
+              </button>
+              </a>
+              </Link>
+              </div>
+              
+              {lang === 'ja' ? (
+                <ReactMarkdown plugins={[gfm]} children={ja} />
+              ) : (
+                <ReactMarkdown plugins={[gfm]} children={en} />
+              )}
+
+            </div>
+            </Layout>
+        )
+}

pages/mutual.js

@@ -0,0 +1,25 @@
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/mutual/ja.md'
+import en from '../docs/mutual/en.md'
+
+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>
+        {lang === 'ja' ? (
+          <ReactMarkdown plugins={[gfm]} children={ja} />
+        ) : (
+          <ReactMarkdown plugins={[gfm]} children={en} />
+        )}
+        </div>
+        </Layout>
+        )
+    }

pages/profile.js

@@ -1,83 +1,72 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo } from '@fortawesome/free-solid-svg-icons'
+import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } 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'
 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) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("profile")
-  const about = t('about')
-  const desc = t('desc')
-  const school = t('school')
-  const contact = t('contact')
-  const link_all = t('link_all')
-  const link_all_late = t('link_all_late')
-  const location = t('location')
-  const here = t('here')
-  const mail = t('mail')
-  const belongs = t('belongs')
-  const hiroshima = t('hiroshima')
-  const birth = t('birth')
-  const date = t('date')
-  const more = t('more')
-  const grade = t('grade')
-  const icon_1 = t('icon_1')
-  const icon_2 = t('icon_2')
-  
+
   return (
 
-    <Layout title={about}>
-      <Navbar />
-      <div className="my-9 mx-8">
+    <Layout title={t('about')}>
+      <div className="text-center">
 
         {
          // Heading
         }
-        <div className="mb-5 flex justify-center">
-          <div>
+        <div>
+          <div className="flex mb-10 justify-center">
           <Image
-            className   = "object-contain rounded-full animate-pulse hover:animate-rumble"
+            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}
-        />
-          <p className="text-center text-4xl subpixel-antialiased">yude</p>
+          />
+          <DiscordStatus />
+          </div>
+          <p className="text-4xl transform -translate-y-4">yude</p>
+          <div>
+          <DiscordPlaying />
+          <Spotify />
           </div>
         </div>
         
         {
          // Description 
         }
-        {/* <div className="2xl:mx-96 xl:mx-40 lg:mx-32 md:mx-8 sm:mx-8"> */}
-        <div className="container mx-auto max-w-3xl">
+        <div>
         <div className="text-left">
-            <p className="text-2xl"><FontAwesomeIcon icon={faInfo} className="w-5 h-5 inline"/> {desc}</p>
+            <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"/>
-            <p className="inline ml-4">{belongs}</p>
-            <p className="ml-9">{school}</p>
-            <p className="ml-9">{grade}</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">{birth}</p>
-            <p className="ml-9">{date}</p>
+            <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">{location}</p>
-            <p className="ml-9">{hiroshima}</p>
+            <p className="inline ml-4">{t('location')}</p>
+            <p className="ml-9">{t('hiroshima')}</p>
           </div>
         </div>
 
@@ -85,9 +74,17 @@ export default function About(props) {
          // Contact 
         }
         <div className="text-left my-6">
-            <p className="text-2xl"><FontAwesomeIcon icon={faPhone} className="w-5 h-5 inline"/> {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">
             <a>
             <FontAwesomeIcon icon={faDiscord} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
@@ -103,10 +100,18 @@ export default function About(props) {
             </Link>
           </div>
           <div className="hover:underline">
-            <Link href="https://github.com/yudejp">
+            <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">yudejp</p>
+            <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>
@@ -126,15 +131,76 @@ export default function About(props) {
             </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
+        }
+        <div className="text-center my-6 space-x-5">
+        <WakaTime />
+        <PublicKeys />
+        
+        <Link href="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88">
+                <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={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>
         </div>
       </div>
-        <Link href="https://wiki.yude.jp/links">
-            <button className="border border-transparent rounded-md shadow-sm text-sm font-medium mt-3 text-white bg-indigo-800 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 p-3 w-60">{more}</button>
-        </Link>
-        <p className="mt-3 text-sm font-bold mb-2 text-gray-400">{icon_1}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {icon_2}</a></Link></p>
+        <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>
       </div>
     </Layout>
   )

pages/server.js

@@ -0,0 +1,75 @@
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+
+import { useRouter } from 'next/router'
+
+export default function Server(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("server")
+
+  return (
+
+    <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>
+        {
+            // 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/status.js

@@ -1,106 +0,0 @@
-import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
-import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-import Image from 'next/image'
-
-import { useRouter } from 'next/router'
-
-export default function About(props) {
-  const router = useRouter()
-  const { locale, locales, defaultLocale, pathname } = router
-  const { t, lang } = useTranslation("status")
-  const status = t('status')
-  const location = t('location')
-  const tottori = t('tottori')
-  const hiroshima = t('hiroshima')
-  const model = t('model')
-
-  return (
-
-    <Layout title={status}>
-      <Navbar />
-        <div className="my-9 mx-9">
-        {
-         // Heading
-        }
-        <div className="mb-5">
-          <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Datadog.</p></p>
-        </div>
-        {
-            // cherry Datadog
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">cherry</h2>
-        <div className="flex xl:w-2/3">
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">CPU </p>i7-2600</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">RAM </p>DDR3 16GB</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">OS </p>Ubuntu Server 20.04.2 LTS</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">{location} </p>{hiroshima}</div>
-        </div>
-        <div className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-1 my-2">
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=7a00f4dcae63a970d317bd719e4b79d7c63c9892dc15f51ed96fb91509d6f960&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=79a40b2e369373f28c2ba4a04cdf6dc6bbf773275baaa033dae5ee38f698c410&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=dcded34f258bb355e0cdb3286b87a1552dc3c3db13d6b1b510dc1a611dea6cd6&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=89bf832a795aa61af12a403d9fb1827cad3a9f661f8dc0ab3752a70034685684&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=27defe77f9612b4ce14e620eeeb1c95576ef457be88a8432b7ab7378f30fa8d5&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=e24e16fe6cfb3fc0f73273cfc7330c7e1911ce3fa8041342a527cb744c12bed0&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=7cacb18efe30d0d98f56be3d44f4d53548ddb95e35563fda90bceda965ea790b&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-        </div>
-        {
-            // raspberry Datadog
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">raspberry</h2>
-        <div className="flex xl:w-2/3">
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">{model} </p>Raspberry Pi 4 Model B Rev 1.2</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">RAM </p>4GB</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
-        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">{location} </p>{tottori}</div>
-        
-        </div>
-        <div className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-1 my-2">
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=de18008333aa661dec2e2dda4109cdad982bee24eded93b15a57e73f55e8fa6d&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=5dc17d342bfc7ce83e09d790037fe8c41c2e0904bf4ba2dbfef704e068dc2862&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=a3a7ba07fab53dc6db37c7de60af791d1c4938a55de7f50ea1ab3bdb8924c0c4&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=89bf832a795aa61af12a403d9fb1827cad3a9f661f8dc0ab3752a70034685684&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=48a62405818c27c2bd3be2daf4398494f444e33ea1f5784f8f42d20ffe8782b8&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=c83f40c0b1c81b82d3bf4b9cbf2f0f98894ed3128604af511c27989fe5aef6a1&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-            <div>
-                <iframe src="https://app.datadoghq.com/graph/embed?token=e111dbe6960f3c9427d4738ff23a7e55b89633978b539f1db3d0d69a9334e801&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
-            </div>
-        </div>
-
-    </div>
-        
-
-    </Layout>
-  )
-}

pages/tos.js

@@ -0,0 +1,25 @@
+import Layout from "./components/Layout"
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm';
+import ja from '../docs/tos/ja.md'
+import en from '../docs/tos/en.md'
+
+export default function Tos(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("tos")
+    return(
+        <Layout title={t('tos')}>
+        <div>
+        {lang === 'ja' ? (
+          <ReactMarkdown plugins={[gfm]} children={ja} />
+        ) : (
+          <ReactMarkdown plugins={[gfm]} children={en} />
+        )}
+        </div>
+        </Layout>
+        )
+    }

styles/globals.css

@@ -1,4 +1,22 @@
-/* Start purging... */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* Stop purging. */
+
+@layer base {
+    h1 {
+      @apply text-3xl my-3;
+    }
+    h2 {
+      @apply text-xl;
+    }
+    ul {
+      @apply list-disc mx-10
+    }
+   }
+   .tooltip {
+    @apply invisible absolute;
+  }
+  
+  .has-tooltip:hover .tooltip {
+    @apply visible z-50;
+  }

tailwind.config.js

@@ -1,9 +1,6 @@
 module.exports = {
-  future: {
-    purgeLayersByDefault: true,
-  },
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: "class", // or 'media' or 'class'
+  darkMode: "class",
   theme: {
     aspectRatio: {
       none: 0,
@@ -11,7 +8,14 @@ module.exports = {
       "16/9": [16, 9],
       "4/3": [4, 3],
       "21/9": [21, 9]
-  },
+    },
+    maxHeight: {
+      '0': '0',
+      '1/4': '25%',
+      '1/2': '50%',
+      '3/4': '75%',
+      'full': '100%',
+    },
     filter: { // defaults to {}
       'none': 'none',
       'grayscale': 'grayscale(1)',
@@ -46,18 +50,28 @@ module.exports = {
           '0%, 100%': {filter: 'drop-shadow(0px 0px 1px  rgb(255, 255, 255))'},
           '50%': {filter: 'drop-shadow(0px 0px 8px  rgb(255, 255, 255))'}
         },
+        translate: {
+          '1/7': '14.2857143%',
+          '2/7': '28.5714286%',
+          '3/7': '42.8571429%',
+          '4/7': '57.1428571%',
+          '5/7': '71.4285714%',
+          '6/7': '85.7142857%',
+       },
     },
     }
   },
   variants: {
-    animation: ['hover', 'focus'], // allow animate-* to use hover: and focus:
-    filter: ['responsive'], // defaults to ['responsive']
-    backdropFilter: ['responsive'], // defaults to ['responsive']
+    animation: ['hover', 'focus'],
+    filter: ['responsive'],
+    backdropFilter: ['responsive'],
     aspectRatio: ['responsive'],
+    nightwind: ['group-hover', 'active', 'focus'],
   },
   plugins: [
     require('tailwindcss-filters'),
     require("tailwindcss-responsive-embed"),
     require("tailwindcss-aspect-ratio"),
+    require('@tailwindcss/typography'),
   ]
 }

tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

wrangler.toml

@@ -1,10 +0,0 @@
-name = "jp"
-type = "webpack"
-account_id = "996274e995fd60596f330964c55997cc"
-workers_dev = true
-route = "yude.jp"
-zone_id = ""
-
-[site]
-bucket = "out"
-entry-point = "workers-site"