Fix i18n key locations

Bump next from 11.1.0 to 11.1.1

docs/minecraft/en.md

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

docs/minecraft/ja.md

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

docs/mutual/en.md

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

docs/mutual/ja.md

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

i18n.json

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

locales/en/404.json

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

locales/en/common.json

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

locales/en/profile.json

@@ -14,8 +14,6 @@
     "contact": "Get in touch",
     "belongs": "Organization",
     "grade": "B2",
-    "icon_1": "Icon: ",
-    "icon_2": "",
     "keys": "Public keys",
     "download": "Download",
     "fingerprint": "Digital fingerprint",

locales/ja/404.json

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

locales/ja/common.json

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

locales/ja/profile.json

@@ -14,8 +14,6 @@
     "contact": "連絡先 / SNS",
     "belongs": "所属",
     "grade": "2年",
-    "icon_1": "アイコン: ",
-    "icon_2": "さん",
     "keys": "公開鍵",
     "download": "ダウンロード",
     "fingerprint": "電子指紋",

next-seo.config.js

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

package.json

@@ -28,15 +28,16 @@
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",
-    "next": "^10.2.3",
+    "next": "^11.1.1",
+    "next-seo": "^4.26.0",
     "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": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-markdown": "^6.0.2",
     "react-switch": "^6.0.0",
     "remark-gfm": "^1.0.0",

pages/404.js

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

pages/_app.js

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

pages/components/Footer/BlueRibbon.js

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

pages/components/Footer/Footer.js

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

pages/components/Footer/HappyBusy.js

@@ -0,0 +1,19 @@
+// Next.js
+import Link from 'next/link'
+import Image from 'next/image'
+
+const HappyBusy = (props) => {
+  return (
+    <Link href="https://sites.google.com/site/happybusy/">
+        <a>
+          <Image
+            src="/images/busy_banner.png"
+            width={200}
+            height={42}
+          />
+        </a>
+    </Link>
+  )
+}
+
+export default HappyBusy

pages/components/Layout.js

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

pages/components/Menu/FontAwesomeMenu.js

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

pages/components/Menu/MinecraftMenu.js

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

pages/components/Profile/Button.js

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

pages/components/Profile/Contact.js

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

pages/components/Profile/NintendoSW.js

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

pages/components/Profile/PublicKeys.js

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

pages/index.js

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

pages/minecraft.js

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

pages/mutual.js

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

pages/profile.js

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

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

yarn.lock

@@ -9,7 +9,7 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/helper-plugin-utils@^7.0.0":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.14.5":
   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==
@@ -19,6 +19,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
   integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
 
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+
 "@babel/highlight@^7.10.4":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -33,20 +38,26 @@
   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":
+"@babel/plugin-syntax-jsx@7.14.5":
-  version "7.12.5"
+  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
-  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/[email protected]":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/types@7.8.3":
+"@babel/types@7.15.0":
-  version "7.8.3"
+  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
-  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
+  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
   dependencies:
-    esutils "^2.0.2"
+    "@babel/helper-validator-identifier" "^7.14.9"
-    lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
 "@fortawesome/fontawesome-common-types@^0.2.35":
@@ -117,20 +128,25 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
-"@next/[email protected].3":
+"@napi-rs/triples@^1.0.3":
-  version "10.2.3"
+  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.3.tgz#ede3bbe68cec9939c37168ea2077f9adbc68334e"
+  resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
-  integrity sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==
+  integrity sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==
 
-"@next/[email protected]":
+"@next/[email protected]":
-  version "10.2.3"
+  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.2.3.tgz#5a29f50c3ce3a56b8268d3b8331c691d8039467a"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-11.1.1.tgz#d403282accbe8795aa2341f0e02c2e8bfc92bfb0"
-  integrity sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==
+  integrity sha512-UEAzlfKofotLmj9LIgNixAfXpRck9rt/1CU9Q4ZtNDueGBJQP3HUzPHlrLChltWY2TA5MOzDQGL82H0a3+i5Ag==
 
-"@next/[email protected]":
+"@next/[email protected]":
-  version "10.2.3"
+  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz#95313d10a8848f6c7b9e31ae3bd2a3627d136841"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.1.1.tgz#89d5a70685a52a0fad79f05a1f97a6b15cc727aa"
-  integrity sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==
+  integrity sha512-9FyVSnz00WGdlLsgc2w1xL1Lm/Q25y6FYIyA+1WlJvT6LA2lbR78GKiHgedzUvrAatVGAcg/Og+d0d7B4tsJOg==
+
+"@next/[email protected]":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.1.1.tgz#3cd99202a85412bada8ba9c8e3f4cf7c19294b24"
+  integrity sha512-CXc/A0DbSk5VXYu4+zr0fHm52Zh/LhPlLyVPEctJOZL64ccxkls5xGoXvgolJCku9L0pLjJzvdfAmhNLOp5dyw==
   dependencies:
     "@babel/code-frame" "7.12.11"
     anser "1.4.9"
@@ -144,10 +160,37 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@10.2.3":
+"@next/react-refresh-utils@11.1.1":
-  version "10.2.3"
+  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz#2f3e42fe6680798f276e3621345c2886b231348b"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.1.1.tgz#8d1a5432a53c9f987503d5ab07d3241230afb33f"
-  integrity sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==
+  integrity sha512-j186y+lWc8BHAuysAWvlOqO9Bp7E3BLK/d/Ju3W2sP5BCH5ZLyLG/p308zSy/O0MGTag0B038ZA1dCy/msouRQ==
+
+"@next/[email protected]":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.1.tgz#ea9a76bcff00945df29a81bc43b3b22dd0a6cb53"
+  integrity sha512-KyB0aLpfQ+B2dsyGYpkM0ZwK3PV0t4C4b9yjgQc1VoTVnIjzXdDPnNOuVvmD849ZNOHfj3x8e2rlbxkj0lPm3A==
+
+"@next/[email protected]":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.1.tgz#95838e9116897ae734d02fdbbfa601b6f52adaf3"
+  integrity sha512-B3ZXgrGx0bQplbrk2oggPjKPPsmyg8Fl0PJLMTVQ+erQ8g1m5QzyS9P6tB3SiIZa180JgENuguTHlVK5qEj4UA==
+
+"@next/[email protected]":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.1.tgz#42c4973213a880977ebdfad01474217d7d71e8c2"
+  integrity sha512-qvZL7gSKF+E+GZ3L1XiTnE3cOh9rk0wkqimT/q+wwcZA4E720Lu4lrT79I3HPuj6i/JPgGvmNskcnYrDeaoFaw==
+
+"@next/[email protected]":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.1.tgz#1ffcbd01a0155fa8558f7aefffea1066e9bebe74"
+  integrity sha512-jhnCiA1De1L+kA0gmHG1AJijHoxOcrETWziDWy8fcqSrM1NlC4aJ5Mnu6k0QMcM9MnmXTA4TQZOEv3kF7vhJUQ==
+
+"@node-rs/[email protected]":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@node-rs/helper/-/helper-1.2.1.tgz#e079b05f21ff4329d82c4e1f71c0290e4ecdc70c"
+  integrity sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==
+  dependencies:
+    "@napi-rs/triples" "^1.0.3"
 
 "@nodelib/[email protected]":
   version "2.1.5"
@@ -170,18 +213,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@opentelemetry/[email protected]":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-0.14.0.tgz#4e17d8d2f1da72b19374efa7b6526aa001267cae"
-  integrity sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==
-  dependencies:
-    "@opentelemetry/context-base" "^0.14.0"
-
-"@opentelemetry/context-base@^0.14.0":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-base/-/context-base-0.14.0.tgz#c67fc20a4d891447ca1a855d7d70fa79a3533001"
-  integrity sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==
-
 "@tailwindcss/typography@^0.4.0":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.4.1.tgz#51ddbceea6a0ee9902c649dbe58871c81a831212"
@@ -559,11 +590,6 @@ babel-plugin-inline-react-svg@^2.0.1:
     resolve "^1.20.0"
     svgo "^2.0.3"
 
-[email protected]:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -1018,19 +1044,19 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-simple@^2.0.0:
+cssnano-preset-simple@^3.0.0:
-  version "2.0.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-2.0.0.tgz#b55e72cb970713f425560a0e141b0335249e2f96"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe"
-  integrity sha512-HkufSLkaBJbKBFx/7aj5HmCK9Ni/JedRQm0mT2qBzMG/dEuJOLnMt2lK6K1rwOOyV4j9aSY+knbW9WoS7BYpzg==
+  integrity sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==
   dependencies:
     caniuse-lite "^1.0.30001202"
 
-cssnano-simple@2.0.0:
+cssnano-simple@3.0.0:
-  version "2.0.0"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-2.0.0.tgz#930d9dcd8ba105c5a62ce719cb00854da58b5c05"
+  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-3.0.0.tgz#a4b8ccdef4c7084af97e19bc5b93b4ecf211e90f"
-  integrity sha512-0G3TXaFxlh/szPEG/o3VcmCwl0N3E60XNb9YZZijew5eIs6fLjJuOPxQd9yEBaX2p/YfJtt49i4vYi38iH6/6w==
+  integrity sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==
   dependencies:
-    cssnano-preset-simple "^2.0.0"
+    cssnano-preset-simple "^3.0.0"
 
 csso@^4.2.0:
   version "4.2.0"
@@ -1290,11 +1316,6 @@ estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
-esutils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
-  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-
 [email protected]:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
@@ -1578,6 +1599,13 @@ ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-1.0.0.tgz#58b31fe4743b1cec0a0ac26f5c914d3c5b2f0750"
+  integrity sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==
+  dependencies:
+    queue "6.0.2"
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -1908,7 +1936,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2186,7 +2214,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-nanoid@^3.1.22, nanoid@^3.1.23:
+nanoid@^3.1.23:
   version "3.1.23"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
@@ -2203,6 +2231,11 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-seo@^4.26.0:
+  version "4.26.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.26.0.tgz#4218cfae5651fdc2e330dcdf1cc1b34ce199d41c"
+  integrity sha512-5TqywQ3XAwqdmEU1AyNZjR7WdDKFTkDD8aBtgQelPvzBUEy8i0mTjtiw+09jhiHFNik6FqS8uPKCaYcY6jRgSQ==
+
 next-themes@^0.0.14:
   version "0.0.14"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.14.tgz#2b9861990bc453149e23d8e6ef1a25a119e36675"
@@ -2213,18 +2246,18 @@ 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.3:
+next@^11.1.1:
-  version "10.2.3"
+  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/next/-/next-10.2.3.tgz#5aa058a63626338cea91c198fda8f2715c058394"
+  resolved "https://registry.yarnpkg.com/next/-/next-11.1.1.tgz#ca15c6d6b4b4bf8c3e859f7fc4f9657ce59bcb63"
-  integrity sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==
+  integrity sha512-vfLJDkwAHsZUho5R1K4w49nfYhftUMWNmeNSjCtulOvnRBuEFb7ROyRZOQk7f29rMz02eLQrPZ9yiAmPsexL2g==
   dependencies:
-    "@babel/runtime" "7.12.5"
+    "@babel/runtime" "7.15.3"
     "@hapi/accept" "5.0.2"
-    "@next/env" "10.2.3"
+    "@next/env" "11.1.1"
-    "@next/polyfill-module" "10.2.3"
+    "@next/polyfill-module" "11.1.1"
-    "@next/react-dev-overlay" "10.2.3"
+    "@next/react-dev-overlay" "11.1.1"
-    "@next/react-refresh-utils" "10.2.3"
+    "@next/react-refresh-utils" "11.1.1"
-    "@opentelemetry/api" "0.14.0"
+    "@node-rs/helper" "1.2.1"
     assert "2.0.0"
     ast-types "0.13.2"
     browserify-zlib "0.2.0"
@@ -2235,13 +2268,14 @@ next@^10.2.3:
     chokidar "3.5.1"
     constants-browserify "1.0.0"
     crypto-browserify "3.12.0"
-    cssnano-simple "2.0.0"
+    cssnano-simple "3.0.0"
     domain-browser "4.19.0"
     encoding "0.1.13"
     etag "1.8.1"
     find-cache-dir "3.3.1"
     get-orientation "1.1.2"
     https-browserify "1.0.0"
+    image-size "1.0.0"
     jest-worker "27.0.0-next.5"
     native-url "0.3.4"
     node-fetch "2.6.1"
@@ -2251,23 +2285,27 @@ next@^10.2.3:
     p-limit "3.1.0"
     path-browserify "1.0.1"
     pnp-webpack-plugin "1.6.4"
-    postcss "8.2.13"
+    postcss "8.2.15"
     process "0.11.10"
-    prop-types "15.7.2"
     querystring-es3 "0.2.1"
     raw-body "2.4.1"
-    react-is "16.13.1"
+    react-is "17.0.2"
     react-refresh "0.8.3"
     stream-browserify "3.0.0"
     stream-http "3.1.1"
     string_decoder "1.3.0"
-    styled-jsx "3.3.2"
+    styled-jsx "4.0.0"
     timers-browserify "2.0.12"
     tty-browserify "0.0.1"
     use-subscription "1.5.1"
-    util "0.12.3"
+    util "0.12.4"
     vm-browserify "1.1.2"
     watchpack "2.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "11.1.1"
+    "@next/swc-darwin-x64" "11.1.1"
+    "@next/swc-linux-x64-gnu" "11.1.1"
+    "@next/swc-win32-x64-msvc" "11.1.1"
 
 node-emoji@^1.8.1:
   version "1.10.0"
@@ -2596,13 +2634,13 @@ [email protected]:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-[email protected]3:
+[email protected]5:
-  version "8.2.13"
+  version "8.2.15"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.13.tgz#dbe043e26e3c068e45113b1ed6375d2d37e2129f"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
-  integrity sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==
+  integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
   dependencies:
     colorette "^1.2.2"
-    nanoid "^3.1.22"
+    nanoid "^3.1.23"
     source-map "^0.6.1"
 
 postcss@^6.0.9:
@@ -2647,7 +2685,7 @@ [email protected], process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-[email protected], prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -2730,6 +2768,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+[email protected]:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
+  dependencies:
+    inherits "~2.0.3"
+
 quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
@@ -2768,7 +2813,7 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-react-dom@^17.0.1:
+react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -2777,16 +2822,16 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-is@16.13.1, react-is@^16.8.1:
+react-is@17.0.2, react-is@^17.0.0:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^17.0.0:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-markdown@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.2.tgz#d89be45c278b1e5f0196f851fffb11e30c69f027"
@@ -2818,7 +2863,7 @@ react-switch@^6.0.0:
   dependencies:
     prop-types "^15.7.2"
 
-react@^17.0.1:
+react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -3147,13 +3192,13 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-jsx@3.3.2:
+styled-jsx@4.0.0:
-  version "3.3.2"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.0.tgz#f7b90e7889d0a4f4635f8d1ae9ac32f3acaedc57"
-  integrity sha512-daAkGd5mqhbBhLd6jYAjYBa9LpxYCzsgo/f6qzPdFxVB8yoGbhxvzQgkC0pfmCVvW3JuAEBn0UzFLBfkHVZG1g==
+  integrity sha512-2USeoWMoJ/Lx5s2y1PxuvLy/cz2Yrr8cTySV3ILHU1Vmaw1bnV7suKdblLPjnyhMD+qzN7B1SWyh4UZTARn/WA==
   dependencies:
-    "@babel/types" "7.8.3"
+    "@babel/plugin-syntax-jsx" "7.14.5"
-    babel-plugin-syntax-jsx "6.18.0"
+    "@babel/types" "7.15.0"
     convert-source-map "1.7.0"
     loader-utils "1.2.3"
     source-map "0.7.3"
@@ -3509,10 +3554,10 @@ [email protected]:
   dependencies:
     inherits "2.0.1"
 
-[email protected].3:
+[email protected].4, util@^0.12.0:
-  version "0.12.3"
+  version "0.12.4"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.12.3.tgz#971bb0292d2cc0c892dab7c6a5d37c2bec707888"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
-  integrity sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
   dependencies:
     inherits "^2.0.3"
     is-arguments "^1.0.4"
@@ -3528,18 +3573,6 @@ 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"