Update yarn.lock

# Conflicts:
#	package-lock.json
#	package.json
#	yarn.lock

docs/tos.md

@@ -0,0 +1,38 @@
+# yude.jp サービス利用規約
+yude.jp ドメイン以下に設置されているサービスについて、以下の利用規約が適用されます。
+
+## サービス運用について
+yude が実験的に運用しており、完全に無保証で提供されるものです。
+事前の予告なくサーバーのメンテナンスを行う場合など、予告なくサービスの提供が一時停止、または永久に停止されることがあります。
+
+## 禁止行為
+以下の行為を、yude.jp で提供されるサービス、特に Mastodon インスタンス上において行うことを禁止します。 違反が見受けられた場合、管理者またはモデレーターによってアカウントに対し何らかの処分が下される可能性があります。
+* 成人向け、またはグロテスクな画像・動画の投稿
+* 常識を逸脱した暴言
+* スパム行為
+* サーバーへのクラック行為
+* 管理者が不適切であると判断した行為
+その他、サーバーの設置拠点である日本国の法律が適用されます。
+
+## その他
+この利用規約は管理者が利用者に対して了承を得ず更新することができますが、その際には必ず通知を Mastodon インスタンス内、または Twitter 上 ([@yudejp](https://twitter.com/yudejp) または [@yude_jp](https://twitter.com/yude_jp)) において行うものとします。
+
+# yude.jp Terms of Service
+The following ToS apply to services running under the yude.jp domain.
+
+## About service operation
+Our services are run by yude for experimental purposes and there's no guarantee on them.\
+Those may be suspended temporarily or permanently (e.g. for server maintenance) without any announcement.
+
+## Prohibited actions
+The actions listed below are prohibited on the service running under the yude.jp domain (especially on Mastodon instance).\
+Our administrator or moderator may take some action against the violating user's account.
+* Post images or movies for adults, or grotesque
+* Violent language that deviates from common sense
+* Chat spamming
+* Cracking our server(s)
+* Actions that the administrator or moderator deems inappropriate 
+In addition, the laws of Japan, where the server is running, apply.
+
+## Misc
+These ToS may be updated by the administrator without any announcement, but we will always notify you with in the Mastodon instance ([mstdn.yude.jp](https://mstdn.yude.jp)) or on our Twitter account ([@yudejp](https://twitter.com/yudejp) or [@yude_jp](https://twitter.com/yude_jp)).

i18n.json

@@ -2,9 +2,11 @@
     "locales": ["en", "ja"],
     "defaultLocale": "ja",
     "pages": {
+      "*": ["common"],
       "/": ["index", "common"],
       "/profile": ["profile", "common"],
       "/status": ["status", "common"],
-      "/house": ["house", "common"]
+      "/house": ["house", "common"],
+      "/tos": ["tos", "common"]
     }
   }

locales/en/tos.json

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

locales/ja/tos.json

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

next-env.d.ts

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

next.config.js

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

package.json

@@ -21,29 +21,31 @@
   },
   "homepage": "https://github.com/yudemoe/yude.jp#readme",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@zeit/next-css": "^1.0.1",
+    "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.5",
-    "next": "^10.0.6",
+    "next": "^10.2.2",
     "next-themes": "^0.0.14",
-    "next-translate": "^1.0.2",
+    "next-translate": "^1.0.7",
-    "nightwind": "^1.1.6",
     "popper.js": "^1.16.1",
-    "postcss": "^8.2.4",
+    "postcss": "^8.3.0",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-markdown": "^6.0.2",
     "react-switch": "^6.0.0",
-    "tailwindcss": "^2.0.2",
+    "remark-gfm": "^1.0.0",
+    "tailwindcss": "^2.1.2",
     "tailwindcss-filters": "^3.0.0",
     "tailwindcss-responsive-embed": "^1.0.0",
-    "use-dark-mode": "^2.3.1"
+    "webpack": "^5.37.1"
   },
   "devDependencies": {
-    "@types/node": "^14.14.25",
+    "@types/node": "^15.6.0",
-    "@types/react": "^17.0.1",
+    "@types/react": "^17.0.6",
-    "typescript": "^4.1.3"
+    "typescript": "^4.2.4"
   }
 }

pages/_app.js

@@ -1,5 +1,6 @@
 import 'tailwindcss/tailwind.css';
 import { ThemeProvider } from "next-themes";
+import "../styles/globals.css"
 
 function MyApp({ Component, pageProps }) {
   return (

pages/components/Footer.js

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

pages/components/Layout.js

@@ -1,10 +1,10 @@
 import Head from "next/head"
-import Link from "next/link"
 import "tailwindcss/tailwind.css";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { useTheme } from "next-themes";
+import Footer from "./Footer"
+import Navbar from "./Navbar"
 
 const Layout = (props) => {
   const { title, children } = props
@@ -23,28 +23,11 @@ const Layout = (props) => {
         <link rel="icon" href="/static/images/favicon.ico" />
       </Head>
       <main>
+      <Navbar />
         <div className="page-main">
           {children}
         </div>
-      
+      <Footer />
-      <style jsx global>{`
-        body {
-            text-align: center;
-        }
-        
-      `}</style>
-      <div className="container mx-auto px-6">
-        <div className="mt-16 flex flex-col items-center">
-            <div className="sm:w-full text-center py-6">
-                <p className="text-sm font-bold mb-2">
-                    {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="https://scrapbox.io/yude/yude.jp_%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84"><a className="hover:underline">{tos}</a></Link>
-                </p>
-            </div>
-          </div>
-        </div>
       </main>
     </div>
   )

pages/components/Navbar.js

@@ -1,8 +1,7 @@
 import "tailwindcss/tailwind.css";
-import Popper from "popper.js";
 import Link from 'next/link';
 import LangSelector from "./LangSelector"
-import DarkmodeSwitcher from "./DarkmodeSwitcher"
+import ThemeSelector from "./ThemeSelector"
 
 const Navbar = () => {
     return (
@@ -16,7 +15,7 @@ const Navbar = () => {
           </a>
         </Link>
             <div className="origin-top-right absolute right-0">
-                <DarkmodeSwitcher />
+                <ThemeSelector />
                 <LangSelector />
             </div>
       </nav>

pages/house.js

@@ -1,12 +1,5 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-import Image from 'next/image'
-
 import { useRouter } from 'next/router'
 
 export default function About(props) {
@@ -16,11 +9,9 @@ export default function About(props) {
   const house = t('house')
 
   return (
-
     <Layout title={house}>
-      <Navbar />
-      <p className="my-2 text-3xl">{house}</p>
       <div className="mx-9">
+      <p className="my-2 text-3xl text-center">{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,7 +1,5 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import Link from 'next/link'
-import { ReactElement } from 'react'
 import { faDiscord, faGit, faMastodon, faGithub } from '@fortawesome/free-brands-svg-icons'
 import { faBlog, faBook, faUser, faServer, faHouseUser } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -20,8 +18,7 @@ export default function Index(props) {
   return (
 
     <Layout title={home}>
-      <Navbar />
+      <div className="my-9 text-center">
-      <div className="my-9">
         <div className="m-10">
         <Image
             src         = "/static/images/avatar.png"

pages/profile.js

@@ -1,5 +1,4 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
 import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey, faDownload, faEye } from '@fortawesome/free-solid-svg-icons'
@@ -17,11 +16,7 @@ export default function About(props) {
   const desc = t('desc')
   const school = t('school')
   const contact = t('contact')
-  const link_all = t('link_all')
-  const link_all_late = t('link_all_late')
   const location = t('location')
-  const here = t('here')
-  const mail = t('mail')
   const belongs = t('belongs')
   const hiroshima = t('hiroshima')
   const birth = t('birth')
@@ -38,8 +33,7 @@ export default function About(props) {
   return (
 
     <Layout title={about}>
-      <Navbar />
+      <div className="my-9 mx-8 text-center">
-      <div className="my-9 mx-8">
 
         {
          // Heading

pages/status.js

@@ -1,11 +1,5 @@
 import Layout from "./components/Layout"
-import Navbar from "./components/Navbar"
 import useTranslation from 'next-translate/useTranslation'
-import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope, faBirthdayCake, faMapPin, faSchool } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-import Image from 'next/image'
 
 import { useRouter } from 'next/router'
 
@@ -22,8 +16,7 @@ export default function About(props) {
   return (
 
     <Layout title={status}>
-      <Navbar />
+        <div className="my-9 mx-9 text-center">
-        <div className="my-9 mx-9">
         {
          // Heading
         }
@@ -31,7 +24,7 @@ export default function About(props) {
           <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Mackerel.</p></p>
         </div>
         {
-            // cherry Datadog
+            // cherry Mackerel
         }
         <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">cherry</h2>
         <div className="flex xl:w-2/3 text-center">
@@ -40,10 +33,10 @@ export default function About(props) {
         <div className="flex-1"><p className="font-bold">OS </p>Arch Linux</div>
         <div className="flex-1"><p className="font-bold">{location} </p>{hiroshima}</div>
         </div>
-        <iframe src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" className="w-2/3" frameBorder="0"></iframe>
+        <iframe  className="w-full h-96" src="https://mackerel.io/embed/public/embed/heHnGhDanoIDlf7jjxUe9yPVrsG3deeH5ptD8suErrq5w46crWEIYdLfzLoukzfF?period=24h" height="400" className="w-2/3" frameBorder="0" scrolling="no"></iframe>
         
         {
-            // raspberry Datadog
+            // raspberry Mackerel
         }
         <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">raspberry</h2>
         <div className="flex xl:w-2/3 text-center">
@@ -52,7 +45,7 @@ export default function About(props) {
         <div className="flex-1"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
         <div className="flex-1"><p className="font-bold">{location} </p>{tottori}</div>
         </div>
-        <iframe src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" className="w-2/3" frameBorder="0"></iframe>
+        <iframe className="w-full h-96" src="https://mackerel.io/embed/public/embed/5HVbQiwuxrMithyrGjmmQCCOVgJ6Ptf94SDA2qWSTsh2rtz7pjePihYzaW5QEml4?period=24h" height="400" className="w-2/3" frameBorder="0" scrolling="no"></iframe>
         
         </div>
 

pages/tos.js

@@ -0,0 +1,21 @@
+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 input from '../docs/tos.md'
+
+export default function Tos(props) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("tos")
+    const tos = t('tos')
+    return(
+        <Layout title={tos}>
+        <div className="mx-9">
+            <ReactMarkdown plugins={[gfm]} children={input} />
+        </div>
+        </Layout>
+        )
+    }

styles/globals.css

@@ -1,4 +1,15 @@
-/* Start purging... */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* Stop purging. */
+
+@layer base {
+    h1 {
+      @apply text-3xl my-3;
+    }
+    h2 {
+      @apply text-xl;
+    }
+    ul {
+      @apply list-disc mx-10
+    }
+   }

tailwind.config.js

@@ -56,6 +56,7 @@ module.exports = {
   plugins: [
     require('tailwindcss-filters'),
     require("tailwindcss-responsive-embed"),
-    require("tailwindcss-aspect-ratio")
+    require("tailwindcss-aspect-ratio"),
+    require('@tailwindcss/typography'),
   ]
 }

tsconfig.json

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