Delete link to blog.yude.jp

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

README.md

@@ -2,7 +2,7 @@
 ![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
@@ -13,4 +13,4 @@ Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss
 * Run `yarn dev`.
 
 ## License
-This repository is licensed under the MIT License.
+This repository is provided under the MIT License.

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)

i18n.json

@@ -5,7 +5,7 @@
       "*": ["common"],
       "/": ["index", "minecraft", "common"],
       "/profile": ["profile", "common"],
-      "/status": ["status", "common"],
+      "/server": ["server", "common"],
       "/house": ["house", "common"],
       "/tos": ["tos", "common"],
       "/hcunews": ["hcunews", "common"],

locales/en/common.json

@@ -1,8 +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}}",
     "listening": "Listening to {{listening}}",
-    "close": "Close"
+    "close": "Close",
+    "mutual": "Mutual links",
+    "status": "Service Status"
 }

locales/en/profile.json

@@ -13,7 +13,6 @@
     "date": "November the 19th, 2001",
     "contact": "Get in touch",
     "belongs": "Organization",
-    "more": "More...",
     "grade": "B2",
     "icon_1": "Icon: ",
     "icon_2": "",

locales/ja/common.json

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

locales/ja/profile.json

@@ -13,7 +13,6 @@
     "date": "2001年11月19日",
     "contact": "連絡先 / SNS",
     "belongs": "所属",
-    "more": "さらに見る...",
     "grade": "2年",
     "icon_1": "アイコン: ",
     "icon_2": "さん",

pages/components/DiscordStatus.js

@@ -12,21 +12,27 @@ const App = () => {
     };  
     fetchData();
   }, []);
-  const status = data.members && data.members[0].status;
+  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 if (status == "dnd"){
-        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
       } else {
-        return <div className="text-gray-700 rounded-full bg-red-500 flex w-6 h-6"></div>
-      }
+        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
+      } 
+    }
     })()
   }
   </div>

pages/components/Footer.js

@@ -7,23 +7,24 @@ 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="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>
-                    </p>
-                    <p className="text-sm font-bold mb-2">
-                        <Link href="/tos"><a className="hover:underline">{tos}</a></Link>
-                    </p>
-                </div>
-              </div>
+
+    return (
+      <>
+        <div className="container mx-auto px-6">
+        <div className="flex flex-col items-center">
+            <div className="sm:w-full text-center py-6">
+                <p className="text-sm font-bold mb-2">
+                    {t('footer')} / <Link href="https://github.com/yudejp/yude.jp"><a className="hover:underline">{t('source')}</a></Link>
+                </p>
+                <p className="text-sm font-bold mb-2">
+                    <Link href="/tos"><a className="hover:underline">{t('tos')}</a></Link>
+                </p>
+                <p className="text-sm font-bold mb-2">
+                    <Link href="https://status.yude.jp"><a className="hover:underline">{t('status')}</a></Link>
+                </p>
             </div>
-          </>
-            );
+          </div>
+        </div>
+      </>
+    );
 }

pages/components/LangSelector.js

@@ -2,6 +2,8 @@ import React from "react";
 import Popper from "popper.js";
 import { useRouter } from 'next/router'
 import Link from 'next/link';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const Dropdown = ({ color }) => {
   const router = useRouter()
@@ -29,7 +31,7 @@ const Dropdown = ({ color }) => {
     <>
 
 <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 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"
+    <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/Minecraft.js

@@ -11,7 +11,7 @@ export default function Minecraft(props) {
   const { t, lang } = useTranslation("minecraft")
 
   const [data, setData] = useState({ hits: [] });
-  const fail = t('minecraft:fail')
+
   useEffect(() => {
     const fetchData = async () => {
       const result = await axios(
@@ -25,27 +25,24 @@ export default function Minecraft(props) {
     if (data === undefined){
         console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
         return (
-        <p>{fail}</p>
+        <p>{t('minecraft:fail')}</p>
         )
       }else{
         const status = data.online
         const player = data.players && data.players.online
-        const playing = t('minecraft:playing', {count: player})
-        const no_one = t('minecraft:no_one')
-        const offline = t('minecraft:offline')
-        const loading = t('minecraft:loading')
+
         return (
           <div className="text-center">
             {(() => {
             if (status == true) {
             if (player == undefined || player == 0) {
-              return <span>{no_one}</span>
+              return <span>{t('minecraft:no_one')}</span>
             } else {
-              return <span>{playing}</span>
+              return <span>{t('minecraft:playing', {count: player})}</span>
             }}else if (status == false) {
-              return <span>{offline}</span>
+              return <span>{t('minecraft:offline')}</span>
             }else {
-              return <span>{loading}</span>
+              return <span>{t('minecraft:loading')}</span>
             }
           })()}
 

pages/components/Spotify.js

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

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 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/hcunews.js

@@ -11,11 +11,11 @@ export default function Tos(props) {
     const router = useRouter()
     const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("hcunews")
-    const hcunews = t('hcunews')
+
     return(
-        <Layout title={hcunews}>
+        <Layout title={t('hcunews')}>
         <div>
-            <h1>{hcunews}</h1>
+            <h1>{t('hcunews')}</h1>
             {lang === 'ja' ? (
             <ReactMarkdown plugins={[gfm]} children={ja} />
             ) : (
@@ -23,5 +23,5 @@ export default function Tos(props) {
             )}
         </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}>
+    <Layout title={t('house')}>
       <div>
-      <p className="my-2 text-3xl text-center">{house}</p>
+      <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,30 +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')
-  const minecraft = t('minecraft:title')
 
   return (
-
-    <Layout title={home}>
+    <Layout title={t('home')}>
       <div className="my-9 text-center">
         <div className="m-10">
         <Image
@@ -35,14 +24,13 @@ export default function Index(props) {
             unoptimized = {true}
         />
         </div>
-        <div className="grid grid-cols-5 gap-10">
-        <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"/>
@@ -51,16 +39,37 @@ 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 className="has-tooltip"><span className="tooltip rounded shadow-lg p-1 bg-yellow-600 transform translate-y-10 -translate-x-12">{minecraft}</span><Link href="/minecraft"><a>
+        <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

@@ -7,22 +7,23 @@ 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 title = t('title')
-    const address = t('address')
-    const version = t('version')
     const copyText = () => {
       navigator.clipboard.writeText("yude.jp");
     };
 
     return (
-            <Layout title={title}>
+            <Layout title={t('title')}>
             <div>
-                <p className="my-2 text-3xl text-center">{title}</p>
+                <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
                 <Image
                     src         = "/static/images/dynmap.png"
@@ -35,7 +36,7 @@ export default function About(props) {
                 <div className="text-center">
                 <Minecraft />
                 <p>
-                  <span>{address}: <code>yude.jp</code></span>
+                  <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"
@@ -44,18 +45,25 @@ export default function About(props) {
                     <FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
                   </button>
                 </p>
-                <p>{version}: 1.17</p>
-                <Link href="https://dynmap.yude.jp">
+                <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"/> Dynmap
+                <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

@@ -16,25 +16,10 @@ 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 account = t('account')
-  const device = t('device')
 
   return (
 
-    <Layout title={about}>
+    <Layout title={t('about')}>
       <div className="text-center">
 
         {
@@ -43,7 +28,7 @@ export default function About(props) {
         <div>
           <div className="flex mb-10 justify-center">
           <Image
-            className   = "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}
@@ -64,24 +49,24 @@ export default function About(props) {
         }
         <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>
 
@@ -89,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">
@@ -154,6 +139,32 @@ 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>
         
         {
@@ -169,7 +180,7 @@ export default function About(props) {
                 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"/> {account}
+                <FontAwesomeIcon icon={faLink} className="w-5 h-5 inline"/> {t('account')}
               </button>
               </a>
         </Link>
@@ -180,7 +191,7 @@ export default function About(props) {
                 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"/> {device}
+                <FontAwesomeIcon icon={faMobile} className="w-5 h-5 inline"/> {t('device')}
               </button>
               </a>
         </Link>
@@ -189,7 +200,7 @@ export default function About(props) {
         <div>
         </div>
       </div>
-        <p className="mt-3 text-sm font-bold 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

@@ -3,50 +3,42 @@ import useTranslation from 'next-translate/useTranslation'
 
 import { useRouter } from 'next/router'
 
-export default function About(props) {
+export default function Server(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')
-  const service = t('service')
-  const region = t('region')
-  const shape = t('shape')
+  const { t, lang } = useTranslation("server")
 
   return (
 
-    <Layout title={status}>
+    <Layout title={t('status')}>
         <div className="my-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>
+          <p className="text-left text-4xl">{t('status')} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
         </div>
         {
-            // cherry Mackerel
+            // 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">{location} </p>{hiroshima}</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>
         
         {
-            // raspberry Mackerel
+            // 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">{model} </p>Raspberry Pi 4 Model B Rev 1.2</div>
+        <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">{location} </p>{tottori}</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>
         
@@ -55,11 +47,11 @@ export default function About(props) {
         }
         <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">{service} </p>Oracle Cloud</div>
-        <div className="flex-1"><p className="font-bold">{shape} </p>VM.Standard.E2.1.Micro</div>
+        <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">{region} </p>Japan Central (Osaka)</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>
         
@@ -69,11 +61,11 @@ export default function About(props) {
         }
         <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">{service} </p>Oracle Cloud</div>
-        <div className="flex-1"><p className="font-bold">{shape} </p>VM.Standard.E2.1.Micro</div>
+        <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">{region} </p>Japan Central (Osaka)</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>
 

pages/tos.js

@@ -11,9 +11,8 @@ 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}>
+        <Layout title={t('tos')}>
         <div>
         {lang === 'ja' ? (
           <ReactMarkdown plugins={[gfm]} children={ja} />

styles/globals.css

@@ -13,9 +13,6 @@
       @apply list-disc mx-10
     }
    }
-   a {
-      @apply hover:underline
-   }
    .tooltip {
     @apply invisible absolute;
   }