Delete link to blog.yude.jp

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

.env.local.sample

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

.gitignore

@@ -10,3 +10,4 @@ dist
 yarn-error.log
 .vimrc~
 ..vimrc.un~
+.env.local

.vscode/settings.json

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

README.md

@@ -2,12 +2,15 @@
 ![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"/>\
-Front page of [yude.jp](https://yude.jp).\
+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
-* To setup your repository, please run `yarn`.
-* To view this website in your computer, please run `yarn dev`.
+### Setup
+1. Run `yarn`.
+1. Rename `.env.local.sample` as `.env.local` and set value. 
+### Preview
+* Run `yarn dev`.
 
 ## License
-This repository is licensed under the MIT 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

@@ -16,23 +16,3 @@ yude が実験的に運用しており、完全に無保証で提供されるも
 
 ## その他
 この利用規約は管理者が利用者に対して了承を得ず更新することができますが、その際には必ず通知を Mastodon インスタンス内、または Twitter 上 ([@yudejp](https://twitter.com/yudejp) または [@yude_jp](https://twitter.com/yude_jp)) において行うものとします。
-
-# 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)).

i18n.json

@@ -3,10 +3,12 @@
     "defaultLocale": "ja",
     "pages": {
       "*": ["common"],
-      "/": ["index", "common"],
+      "/": ["index", "minecraft", "common"],
       "/profile": ["profile", "common"],
-      "/status": ["status", "common"],
+      "/server": ["server", "common"],
       "/house": ["house", "common"],
-      "/tos": ["tos", "common"]
+      "/tos": ["tos", "common"],
+      "/hcunews": ["hcunews", "common"],
+      "/minecraft": ["minecraft", "common"]
     }
   }

locales/en/common.json

@@ -1,6 +1,10 @@
 {
-    "footer": "This page is licensed under the MIT License.",
+    "footer": "This page is provided under the MIT License.",
     "source": "Source code",
     "tos": "yude.jp Terms of Service",
-    "yes_playing": "Playing {{playing}}"
+    "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/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,12 +13,13 @@
     "date": "November the 19th, 2001",
     "contact": "Get in touch",
     "belongs": "Organization",
-    "more": "More...",
     "grade": "B2",
     "icon_1": "Icon: ",
     "icon_2": "",
     "keys": "Public keys",
     "download": "Download",
     "fingerprint": "Digital fingerprint",
-    "view": "View"
+    "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

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

locales/ja/common.json

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

locales/ja/hcunews.json

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

locales/ja/minecraft.json

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

locales/ja/profile.json

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

locales/ja/server.json

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

locales/ja/tos.json

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

next.config.js

@@ -6,7 +6,7 @@ module.exports = nextTranslate({
       defaultLocale: 'ja',
     },
     images: {
-      domains: ['mackerel.io'],
+      domains: ['mackerel.io', 'mc-heads.net'],
     },
     webpack: function (config) {
       config.module.rules.push({

package.json

@@ -4,7 +4,7 @@
   "description": "Front page of yude.jp",
   "main": "index.js",
   "scripts": {
-    "dev": "next -p 30221",
+    "dev": "next",
     "build": "next build",
     "start": "next start",
     "export": "next export"
@@ -27,18 +27,21 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
-    "next": "^10.2.2",
+    "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.3.0",
+    "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-markdown": "^6.0.2",
     "react-switch": "^6.0.0",
     "remark-gfm": "^1.0.0",
-    "tailwindcss": "^2.1.2",
+    "swr": "^0.5.6",
+    "tailwindcss": "^2.1.4",
     "tailwindcss-filters": "^3.0.0",
     "tailwindcss-responsive-embed": "^1.0.0",
     "webpack": "^5.37.1"

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

@@ -1,27 +1,44 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 
-const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
-const App = () => {
+function App (){
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
-  
-  const [playing, setPlaying] = React.useState(0);
-  React.useEffect(() => {
-    fetch(url)
-      .then((r) => r.json())
-      .then((j) => setPlaying(j.members[0].game.name))
+  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)
   
-  const yes_playing = t('yes_playing', {playing: playing})
-  const no_playing = t('no_playing')
-  if (playing){
+  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>&#32;</p>
+  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

@@ -1,27 +1,43 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
-const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
 const App = () => {
-  const [status, setStatus] = React.useState(0);
-  React.useEffect(() => {
-    fetch(url)
-      .then((r) => r.json())
-      .then((j) => setStatus(j.members[0].status))
-  }, []);
-    
-  if (status === "online") {
-    return <div className="font-bold text-gray-700 rounded-full bg-green-500 flex w-5 h-5 items-center justify-center"></div>
-  }else{
-    if (status === "idle") {
-      return <div className="font-bold text-gray-700 rounded-full bg-yellow-500 flex w-5 h-5 items-center justify-center"></div>
-    }else{
-      if (status === "dnd") {
-        return <div className="font-bold text-gray-700 rounded-full bg-red-500 flex w-5 h-5 items-center justify-center"></div>
-      }else{
-        return <div className="font-bold text-gray-700 rounded-full bg-gray-500 flex w-5 h-5 items-center justify-center"></div>
-      }
-    }
-  }
+  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

@@ -7,19 +7,20 @@ export default function Footer(props) {
     const router = useRouter()
     const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("common")
-    const footer = t('footer')
-    const source = t('source')
-    const tos = t('tos')
+
     return (
       <>
         <div className="container mx-auto px-6">
-            <div className="mt-16 flex flex-col items-center">
+        <div className="flex flex-col items-center">
             <div className="sm:w-full text-center py-6">
                 <p className="text-sm font-bold mb-2">
-                        {footer} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{source}</a></Link>
+                    {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">{tos}</a></Link>
+                    <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>

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="text-left mr-2 my-3 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,19 +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>  
   <div ref={popoverDropdownRef} className={
-              (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"}>
+              (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">
-      <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">日本語</a>
+      <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">
-      <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>
+      <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

@@ -24,9 +24,11 @@ const Layout = (props) => {
       </Head>
       <main>
       <Navbar />
-        <div className="page-main">
+        <div className="max-w-2xl mx-auto">
+        <div className="mx-2">
           {children}
           </div>
+        </div>
       <Footer />
       </main>
     </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

@@ -8,13 +8,13 @@ const Navbar = () => {
       <>
         <nav className='flex items-center flex-wrap p-3'>
         <Link href='/'>
-          <a className='inline-flex items-center p-2 mr-4'>
+          <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>

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

@@ -1,14 +1,12 @@
-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 { useTheme } from "next-themes";
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-const Layout = (props) => {
+const ThemeSelector = (props) => {
   const { title, children } = props
-  const siteTitle = "yude.jp"
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   
@@ -23,13 +21,13 @@ const Layout = (props) => {
     }
   };
   return (
-      <button className="my-4 mx-3 text-2xl" onClick={switchTheme}>
-        {theme === 'light' ? (
-          <span>🌙</span>
+      <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" />
         ) : (
-          <span>🌄</span>
-        )}
+          <FontAwesomeIcon icon={faSun} className="w-10 h-7" />
+        ))}
       </button>
   )
 }
-export default Layout
+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

@@ -6,12 +6,11 @@ export default function About(props) {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("house")
-  const house = t('house')
 
   return (
-    <Layout title={house}>
-      <div className="mx-9">
-      <p className="my-2 text-3xl text-center">{house}</p>
+    <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,29 +1,19 @@
 import Layout from "./components/Layout"
 import Link from 'next/link'
 import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { faBlog, faBook, faUser, faServer, faHouseUser } from '@fortawesome/free-solid-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')
-  const profile = t('profile')
-  const blog = t('blog')
-  const status = t('status')
-  const house = t('house')
-  const discord = t('discord')
-  const mastodon = t('mastodon')
 
   return (
-
-    <Layout title={home}>
+    <Layout title={t('home')}>
       <div className="my-9 text-center">
         <div className="m-10">
         <Image
@@ -34,14 +24,13 @@ export default function Index(props) {
             unoptimized = {true}
         />
         </div>
-        <div className="grid grid-cols-5 gap-10 max-w-xl mx-auto">
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-10">{profile}</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-9">{blog}</span><Link href="https://blog.yude.jp"><a><FontAwesomeIcon icon={faBlog} 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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{status}</span><Link href="/status"><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-5">{house}</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-4">Scrapbox</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-16">{discord}</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-10">Spaces on Matrix</span><Link href="https://matrix.to/#/!oriLSKSTauvVrpdzZX:matrix.org?via=matrix.org"><a>
+        <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"/>
@@ -50,9 +39,35 @@ export default function Index(props) {
          </g>
         </svg>
         </a></Link></div>
-        <div className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-16">GitHub Organization</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10">Gitea</span><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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{mastodon}</span><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="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,86 +1,72 @@
 import Layout from "./components/Layout"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye } from '@fortawesome/free-solid-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 location = t('location')
-  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')
-  const keys = t('keys')
-  const download = t('download')
-  const fingerprint = t('fingerprint')
-  const view = t('view')
 
   return (
 
-    <Layout title={about}>
-      <div className="my-9 mx-8 text-center">
+    <Layout title={t('about')}>
+      <div className="text-center">
 
         {
          // Heading
         }
-        <div className="mb-5 flex justify-center">
         <div>
-          <div className="z-50 transform translate-x-40 translate-y-48">
-          <DiscordStatus />
-          </div>
+          <div className="flex mb-10 justify-center">
           <Image
-            className   = "object-contain rounded-full hover:animate-rumble z-0"
+            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="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>
 
@@ -88,7 +74,7 @@ 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">
@@ -153,55 +139,68 @@ export default function About(props) {
             </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>
         
         {
-         // Keys
+         // Buttons
         }
-        <div className="text-left my-6">
-            <p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
-          <ul className="list-disc mx-5 my-2">
-          <li>
-            <span className="font-bold">GPG&nbsp;</span>
-            <Link href="/static/yudejp.gpg">
-              <a className="hover:underline">
-                <FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
-                {download}
+        <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>
-            <p>{fingerprint}:</p>
-            <div className="w-full overflow-x-auto ...">
-              <div className="whitespace-nowrap ...">
-                3745 F270 DB4E 8975 6B07  62BE EB0F E5D9 25C4 A968
-                </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}
+        
+        <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>
-            <p>{fingerprint}:</p>
-            <div className="w-full overflow-x-auto ...">
-              <div className="whitespace-nowrap ...">
-                2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc
-              </div>
-            </div>
-          </li>
-            </ul>
-        </div>
-        
         
+        </div>
         <div>
         </div>
       </div>
-        <Link href="https://scrapbox.io/yude/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88">
-            <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-900 dark: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,54 +0,0 @@
-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("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}>
-        <div className="my-9 mx-9 text-center">
-        {
-         // Heading
-        }
-        <div className="mb-5">
-          <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
-        </div>
-        {
-            // cherry Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">cherry</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">{location} </p>{hiroshima}</div>
-        </div>
-        <iframe  className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" className="w-2/3" frameBorder="0" scrolling="no"></iframe>
-        
-        {
-            // raspberry Mackerel
-        }
-        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">raspberry</h2>
-        <div className="flex xl:w-2/3 text-center">
-        <div className="flex-1"><p className="font-bold">{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">{location} </p>{tottori}</div>
-        </div>
-        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" className="w-2/3" frameBorder="0" scrolling="no"></iframe>
-        
-        </div>
-
-    </Layout>
-  )
-}

pages/tos.js

@@ -4,17 +4,21 @@ import { useRouter } from 'next/router'
 import React from "react"
 import ReactMarkdown from "react-markdown"
 import gfm from 'remark-gfm';
-import input from '../docs/tos.md'
+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")
-    const tos = t('tos')
     return(
-        <Layout title={tos}>
-        <div className="mx-9">
-            <ReactMarkdown plugins={[gfm]} children={input} />
+        <Layout title={t('tos')}>
+        <div>
+        {lang === 'ja' ? (
+          <ReactMarkdown plugins={[gfm]} children={ja} />
+        ) : (
+          <ReactMarkdown plugins={[gfm]} children={en} />
+        )}
         </div>
         </Layout>
         )

styles/globals.css

@@ -13,7 +13,6 @@
       @apply list-disc mx-10
     }
    }
-   
    .tooltip {
     @apply invisible absolute;
   }

tailwind.config.js

@@ -9,6 +9,13 @@ module.exports = {
       "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)',
@@ -43,6 +50,14 @@ 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%',
+       },
     },
     }
   },

yarn.lock

@@ -10,28 +10,28 @@
     "@babel/highlight" "^7.10.4"
 
 "@babel/helper-plugin-utils@^7.0.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
-  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
-"@babel/helper-validator-identifier@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
-  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
 
 "@babel/highlight@^7.10.4":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
-  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.14.0"
+    "@babel/helper-validator-identifier" "^7.14.5"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
 "@babel/parser@^7.0.0":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
-  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.5.tgz#4cd2f346261061b2518873ffecdf1612cb032829"
+  integrity sha512-TM8C+xtH/9n1qzX+JNHi7AN2zHMTiPUtspO0ZdHflW8KaskkALhMmuMHb4bCmNdv9VAPzJX3/bXqkVLnAvsPfg==
 
 "@babel/runtime@7.12.5":
   version "7.12.5"
@@ -117,20 +117,20 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
-"@next/env@10.2.2":
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.2.tgz#cb61f6c29f349815108184c2f1926ada65458e28"
-  integrity sha512-m0xOpl4F9z7R7Yt2OtJoo6ZUsFPdx+kuvZeoctH7T6lO66DmZL3W6MQDxso/ArkH8VOlDPZgeQVVBPf+I7wflA==
+"@next/env@10.2.3":
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.3.tgz#ede3bbe68cec9939c37168ea2077f9adbc68334e"
+  integrity sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==
 
-"@next/polyfill-module@10.2.2":
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.2.2.tgz#48d108dd562ed021dd23510c0ffe96badf5f9c04"
-  integrity sha512-0t5Hw1Dr18TWP65qAnakRa8+jza6SAFOz0b2v67s5AVquAwXXlclR4SfUy3ahrRtjCqlbLEE/oFIzCGbyMYfVA==
+"@next/polyfill-module@10.2.3":
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.2.3.tgz#5a29f50c3ce3a56b8268d3b8331c691d8039467a"
+  integrity sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==
 
-"@next/react-dev-overlay@10.2.2":
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.2.2.tgz#88fb5013d3df70bd37b854234c41d884e108a149"
-  integrity sha512-uPslFPWvvZ8AdadGdK2/834UnJy6F+7071/ere6QpN88Ngzqx9lDIhjslEeFLRtpyBst4s1YUdbm69btVPdE5w==
+"@next/react-dev-overlay@10.2.3":
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz#95313d10a8848f6c7b9e31ae3bd2a3627d136841"
+  integrity sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==
   dependencies:
     "@babel/code-frame" "7.12.11"
     anser "1.4.9"
@@ -144,30 +144,30 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@10.2.2":
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.2.2.tgz#69dd150e3656aebe63fc828916105f1472810488"
-  integrity sha512-OL7r0iz+SiE9SMWcxZocUtEAHv0/TlBWxIE3KjjO1vWSU1r0gMrE2l2RxHfMLIPsl6CjAkcPxoaXlosFsJ2S5w==
+"@next/react-refresh-utils@10.2.3":
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz#2f3e42fe6680798f276e3621345c2886b231348b"
+  integrity sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==
 
-"@nodelib/fs.scandir@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
-  integrity sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
-    "@nodelib/fs.stat" "2.0.4"
+    "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.4", "@nodelib/fs.stat@^2.0.2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz#a3f2dd61bab43b8db8fa108a121cfffe4c676655"
-  integrity sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz#cce9396b30aa5afe9e3756608f5831adcb53d063"
-  integrity sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz#94c23db18ee4653e129abd26fb06f870ac9e1ee2"
+  integrity sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==
   dependencies:
-    "@nodelib/fs.scandir" "2.1.4"
+    "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
 "@opentelemetry/api@0.14.0":
@@ -183,9 +183,9 @@
   integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==
 
 "@tailwindcss/typography@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.0.tgz#b80974ad6af93df7b06e1981cb4d79698b6ad5c7"
-  integrity sha512-3BfOYT5MYNEq81Ism3L2qu/HRP2Q5vWqZtZRQqQrthHuaTK9qpuPfbMT5WATjAM5J1OePKBaI5pLoX4S1JGNMQ==
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.1.tgz#51ddbceea6a0ee9902c649dbe58871c81a831212"
+  integrity sha512-ovPPLUhs7zAIJfr0y1dbGlyCuPhpuv/jpBoFgqAc658DWGGrOBWBMpAWLw2KlzbNeVk4YBJMzue1ekvIbdw6XA==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
@@ -206,14 +206,19 @@
     "@types/estree" "*"
 
 "@types/eslint@*":
-  version "7.2.11"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.11.tgz#180b58f5bb7d7376e39d22496e2b08901aa52fd2"
-  integrity sha512-WYhv//5K8kQtsSc9F1Kn2vHzhYor6KpwPbARH7hwYe3C3ETD0EVx/3P5qQybUoaBEuUa9f/02JjBiXFWalYUmw==
+  version "7.2.13"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.13.tgz#e0ca7219ba5ded402062ad6f926d491ebb29dd53"
+  integrity sha512-LKmQCWAlnVHvvXq4oasNUMTJJb2GwSyTY8+1C7OH5ILR8mPLaljv1jxL1bXW3xB3jFbQxTKxJAvI8PyjB09aBg==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^0.0.47":
+"@types/estree@*":
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
+  integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==
+
+"@types/estree@^0.0.47":
   version "0.0.47"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
   integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
@@ -238,9 +243,9 @@
     "@types/unist" "*"
 
 "@types/node@*", "@types/node@^15.6.0":
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.6.0.tgz#f0ddca5a61e52627c9dcb771a6039d44694597bc"
-  integrity sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A==
+  version "15.12.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d"
+  integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==
 
 "@types/prop-types@*":
   version "15.7.3"
@@ -248,9 +253,9 @@
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
 "@types/react@^17.0.6":
-  version "17.0.6"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.6.tgz#0ec564566302c562bf497d73219797a5e0297013"
-  integrity sha512-u/TtPoF/hrvb63LdukET6ncaplYsvCvmkceasx8oG84/ZCsoLxz9Z/raPBP4lTAiWW1Jb889Y9svHmv8R26dWw==
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -417,9 +422,9 @@ acorn@^7.0.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.2.1:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
-  integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.3.0.tgz#1193f9b96c4e8232f00b11a9edff81b2c8b98b88"
+  integrity sha512-tqPKHZ5CaBJw0Xmy0ZZvLs1qTV+BNFSyvn77ASXkpBNfIRk8ev26fKrD9iLGwGA9zedPao52GSHzq8lyZG0NUw==
 
 ajv-keywords@^3.5.2:
   version "3.5.2"
@@ -468,17 +473,6 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-array.prototype.filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.0.tgz#24d63e38983cdc6bf023a3c574b2f2a3f384c301"
-  integrity sha512-TfO1gz+tLm+Bswq0FBOXPqAchtCr2Rn48T8dLJoRFl8NoEosjZmzptmuo1X8aZBzZcqsR1W8U761tjACJtngTQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0"
-    es-array-method-boxes-properly "^1.0.0"
-    is-string "^1.0.5"
-
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -518,14 +512,14 @@ at-least-node@^1.0.0:
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
 autoprefixer@^10.2.5:
-  version "10.2.5"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d"
-  integrity sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==
+  version "10.2.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.6.tgz#aadd9ec34e1c98d403e01950038049f0eb252949"
+  integrity sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==
   dependencies:
-    browserslist "^4.16.3"
-    caniuse-lite "^1.0.30001196"
+    browserslist "^4.16.6"
+    caniuse-lite "^1.0.30001230"
     colorette "^1.2.2"
-    fraction.js "^4.0.13"
+    fraction.js "^4.1.1"
     normalize-range "^0.1.2"
     postcss-value-parser "^4.1.0"
 
@@ -543,11 +537,16 @@ autoprefixer@^9.4.5:
     postcss-value-parser "^4.1.0"
 
 available-typed-arrays@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.3.tgz#fb7d02445bfedefad79fad1fe47931163a227198"
-  integrity sha512-CuPhFULixV/d89POo1UG4GqGbR7dmrefY2ZdmsYakeR4gOSJXoF7tfeaiqMHGOMrlTiJoeEs87fpLsBYmE2BMw==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9"
+  integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==
+
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
   dependencies:
-    array.prototype.filter "^1.0.0"
+    follow-redirects "^1.10.0"
 
 babel-plugin-inline-react-svg@^2.0.1:
   version "2.0.1"
@@ -686,7 +685,7 @@ browserify-zlib@0.2.0, browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@4.16.6, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3:
+browserslist@4.16.6, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.6:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
   integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
@@ -747,10 +746,10 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001196, caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228:
-  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
-  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001230:
+  version "1.0.30001236"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001236.tgz#0a80de4cdf62e1770bb46a30d884fc8d633e3958"
+  integrity sha512-o0PRQSrSCGJKCPZcgMzl5fUaj5xHe8qA2m4QRvnyY4e1lITqoNkr7q/Oh1NcpGSy0Th97UZ35yoKcINPoq7YOQ==
 
 ccount@^1.0.0:
   version "1.1.0"
@@ -1081,6 +1080,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -1149,18 +1153,18 @@ domhandler@^4.0.0, domhandler@^4.2.0:
     domelementtype "^2.2.0"
 
 domutils@^2.4.3:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.6.0.tgz#2e15c04185d43fb16ae7057cb76433c6edb938b7"
-  integrity sha512-y0BezHuy4MDYxh6OvolXYsH+1EMGmFbwv5FKW7ovwMG6zTPWqNPq3WF9ayZssFq+UlKdffGLbOEaghNdaOm1WA==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
+  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
   dependencies:
     dom-serializer "^1.0.1"
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
 electron-to-chromium@^1.3.723:
-  version "1.3.735"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.735.tgz#fa1a8660f2790662291cb2136f0e446a444cdfdc"
-  integrity sha512-cp7MWzC3NseUJV2FJFgaiesdrS+A8ZUjX5fLAxdRlcaPDkaPGFplX930S5vf84yqDp4LjuLdKouWuVOTwUfqHQ==
+  version "1.3.752"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
+  integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -1205,10 +1209,10 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-es-abstract@^1.18.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
-  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
+es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
+  integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
@@ -1218,19 +1222,14 @@ es-abstract@^1.18.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
     has-symbols "^1.0.2"
     is-callable "^1.2.3"
     is-negative-zero "^2.0.1"
-    is-regex "^1.1.2"
-    is-string "^1.0.5"
-    object-inspect "^1.9.0"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
     object-keys "^1.1.1"
     object.assign "^4.1.2"
     string.prototype.trimend "^1.0.4"
     string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.0"
-
-es-array-method-boxes-properly@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
-  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+    unbox-primitive "^1.0.1"
 
 es-module-lexer@^0.4.0:
   version "0.4.1"
@@ -1266,7 +1265,7 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-scope@^5.1.1:
+eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -1372,15 +1371,20 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
-fraction.js@^4.0.13:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.0.tgz#229ec1cedc8c3c7e5d2d20688ba64f0a43af5830"
-  integrity sha512-o9lSKpK0TDqDwTL24Hxqi6I99s942l6TYkfl6WvGWgLOIFz/YonSGKfiSeMadoiNvTfqnfOa9mjb5SGVbBK9/w==
+fraction.js@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
+  integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
 
 fs-extra@^8.0.0:
   version "8.1.0"
@@ -1563,9 +1567,9 @@ iconv-lite@0.4.24:
     safer-buffer ">= 2.1.2 < 3"
 
 iconv-lite@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
-  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
@@ -1740,7 +1744,7 @@ is-plain-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
   integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
 
-is-regex@^1.1.2:
+is-regex@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
   integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
@@ -1748,7 +1752,7 @@ is-regex@^1.1.2:
     call-bind "^1.0.2"
     has-symbols "^1.0.2"
 
-is-string@^1.0.5:
+is-string@^1.0.5, is-string@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
   integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
@@ -1785,14 +1789,14 @@ jest-worker@27.0.0-next.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
-  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+jest-worker@^27.0.2:
+  version "27.0.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.2.tgz#4ebeb56cef48b3e7514552f80d0d80c0129f0b05"
+  integrity sha512-EoBdilOTTyOgmHXtw/cPc+ZrCA0KJMrkXzkrPGNwLmnvvlN1nj7MPrxpT7m+otSv2e1TLaVffzDnE/LB14zJMg==
   dependencies:
     "@types/node" "*"
     merge-stream "^2.0.0"
-    supports-color "^7.0.0"
+    supports-color "^8.0.0"
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -2133,17 +2137,17 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.47.0:
-  version "1.47.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
-  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
+mime-db@1.48.0:
+  version "1.48.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
+  integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
 
 mime-types@^2.1.27:
-  version "2.1.30"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
-  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
+  version "2.1.31"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b"
+  integrity sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==
   dependencies:
-    mime-db "1.47.0"
+    mime-db "1.48.0"
 
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
@@ -2209,17 +2213,17 @@ next-translate@^1.0.7:
   resolved "https://registry.yarnpkg.com/next-translate/-/next-translate-1.0.7.tgz#53fab15ae856eee62d41ac96aa3e6e4c874e715f"
   integrity sha512-21FgG5ZVYVoB6of2ySrjfDu/qaojRW/DMPWQQfWDec1jltRGk4Oeb+12Y1DoNWh0Yd+FJvv8WpUeUeU+pfNX6Q==
 
-next@^10.2.2:
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/next/-/next-10.2.2.tgz#aadcc526e420282b4a735b0595041195d748a91d"
-  integrity sha512-HPGSLrflWPvf3zEZSIk/uj0CZ+YYrpZwZS0PFAgXbEwb894iRuAPzglagqlzcCh7lg12RBEaKNIxhrVa5xgjtQ==
+next@^10.2.3:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-10.2.3.tgz#5aa058a63626338cea91c198fda8f2715c058394"
+  integrity sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==
   dependencies:
     "@babel/runtime" "7.12.5"
     "@hapi/accept" "5.0.2"
-    "@next/env" "10.2.2"
-    "@next/polyfill-module" "10.2.2"
-    "@next/react-dev-overlay" "10.2.2"
-    "@next/react-refresh-utils" "10.2.2"
+    "@next/env" "10.2.3"
+    "@next/polyfill-module" "10.2.3"
+    "@next/react-dev-overlay" "10.2.3"
+    "@next/react-refresh-utils" "10.2.3"
     "@opentelemetry/api" "0.14.0"
     assert "2.0.0"
     ast-types "0.13.2"
@@ -2314,9 +2318,9 @@ node-libs-browser@^2.2.1:
     vm-browserify "^1.0.1"
 
 node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -2351,11 +2355,11 @@ object-assign@^4.1.1:
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 object-hash@^2.0.3, object-hash@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09"
-  integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
-object-inspect@^1.9.0:
+object-inspect@^1.10.3:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
   integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
@@ -2480,9 +2484,9 @@ path-is-absolute@^1.0.0:
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 pbkdf2@^3.0.3:
   version "3.1.2"
@@ -2611,18 +2615,18 @@ postcss@^6.0.9:
     supports-color "^5.4.0"
 
 postcss@^7.0.11, postcss@^7.0.18, postcss@^7.0.32:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  version "7.0.36"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
+  integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
 postcss@^8.1.6, postcss@^8.2.1, postcss@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f"
-  integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.2.tgz#ed3ec489f5428af5740cd6effcc216b4d455ee64"
+  integrity sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg==
   dependencies:
     colorette "^1.2.2"
     nanoid "^3.1.23"
@@ -2716,7 +2720,7 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-querystring@^0.2.0:
+querystring@^0.2.0, querystring@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
   integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
@@ -3181,7 +3185,7 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0, supports-color@^7.1.0:
+supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -3208,6 +3212,13 @@ svgo@^2.0.3:
     csso "^4.2.0"
     stable "^0.1.8"
 
+swr@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.6.tgz#70bfe9bc9d7ac49a064be4a0f4acf57982e55a31"
+  integrity sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==
+  dependencies:
+    dequal "2.0.2"
+
 tailwindcss-aspect-ratio@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/tailwindcss-aspect-ratio/-/tailwindcss-aspect-ratio-3.0.0.tgz#4f9fc7ca0f3468373290faaa8b92652157bee6a4"
@@ -3258,10 +3269,10 @@ tailwindcss@^1.2.0:
     reduce-css-calc "^2.1.6"
     resolve "^1.14.2"
 
-tailwindcss@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.1.2.tgz#29402bf73a445faedd03df6d3b177e7b52b7c4a1"
-  integrity sha512-T5t+wwd+/hsOyRw2HJuFuv0LTUm3MUdHm2DJ94GPVgzqwPPFa9XxX0KlwLWupUuiOUj6uiKURCzYPHFcuPch/w==
+tailwindcss@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.1.4.tgz#ee8a1b8ccc140db61960b6738f968a8a1c4cd1f8"
+  integrity sha512-fh1KImDLg6se/Suaelju/5oFbqq1b0ntagmGLu0aG9LlnNPGHgO1n/4E57CbKcCtyz/VYnvVXUiWmfyfBBZQ6g==
   dependencies:
     "@fullhuman/postcss-purgecss" "^3.1.3"
     bytes "^3.0.0"
@@ -3297,11 +3308,11 @@ tapable@^2.1.1, tapable@^2.2.0:
   integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
 
 terser-webpack-plugin@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.2.tgz#51d295eb7cc56785a67a372575fdc46e42d5c20c"
-  integrity sha512-6QhDaAiVHIQr5Ab3XUWZyDmrIPCHMiqJVljMF91YKyqwKkL5QHnYMkrMBy96v9Z7ev1hGhSEw1HQZc2p/s5Z8Q==
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.3.tgz#30033e955ca28b55664f1e4b30a1347e61aa23af"
+  integrity sha512-cxGbMqr6+A2hrIB5ehFIF+F/iST5ZOxvOmy9zih9ySbP1C2oEWQSOUS+2SNBTjzx5xLKO4xnod9eywdfq1Nb9A==
   dependencies:
-    jest-worker "^26.6.2"
+    jest-worker "^27.0.2"
     p-limit "^3.1.0"
     schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
@@ -3379,11 +3390,11 @@ type-fest@^0.7.1:
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
 typescript@^4.2.4:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
-  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
 
-unbox-primitive@^1.0.0:
+unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
   integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
@@ -3498,7 +3509,7 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
-util@0.12.3, util@^0.12.0:
+util@0.12.3:
   version "0.12.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.3.tgz#971bb0292d2cc0c892dab7c6a5d37c2bec707888"
   integrity sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==
@@ -3517,6 +3528,18 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
+util@^0.12.0:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
 vfile-message@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
@@ -3548,7 +3571,7 @@ watchpack@2.1.1:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-watchpack@^2.0.0:
+watchpack@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"
   integrity sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==
@@ -3561,18 +3584,18 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webpack-sources@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.2.0.tgz#058926f39e3d443193b6c31547229806ffd02bac"
-  integrity sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==
+webpack-sources@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.0.tgz#9ed2de69b25143a4c18847586ad9eccb19278cfa"
+  integrity sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==
   dependencies:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
 webpack@^5.37.1:
-  version "5.37.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.37.1.tgz#2deb5acd350583c1ab9338471f323381b0b0c14b"
-  integrity sha512-btZjGy/hSjCAAVHw+cKG+L0M+rstlyxbO2C+BOTaQ5/XAnxkDrP5sVbqWhXgo4pL3X2dcOib6rqCP20Zr9PLow==
+  version "5.38.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.38.1.tgz#5224c7f24c18e729268d3e3bc97240d6e880258e"
+  integrity sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.47"
@@ -3584,7 +3607,7 @@ webpack@^5.37.1:
     chrome-trace-event "^1.0.2"
     enhanced-resolve "^5.8.0"
     es-module-lexer "^0.4.0"
-    eslint-scope "^5.1.1"
+    eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.2.4"
@@ -3595,8 +3618,8 @@ webpack@^5.37.1:
     schema-utils "^3.0.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.1"
-    watchpack "^2.0.0"
-    webpack-sources "^2.1.1"
+    watchpack "^2.2.0"
+    webpack-sources "^2.3.0"
 
 whatwg-url@^7.0.0:
   version "7.1.0"