Add "Server Status" page

i18n.json

@@ -3,6 +3,7 @@
     "defaultLocale": "ja-JP",
     "pages": {
       "/": ["index", "common"],
-      "/profile": ["profile", "common"]
+      "/profile": ["profile", "common"],
+      "/status": ["status", "common"]
     }
   }

locales/en-US/status.json

@@ -0,0 +1,6 @@
+{
+    "status": "Server Status",
+    "location": "Location",
+    "tottori": "Tottori, Japan",
+    "hiroshima": "Hiroshima, Japan"
+}

locales/ja-JP/status.json

@@ -0,0 +1,6 @@
+{
+    "status": "サーバー情報",
+    "location": "場所",
+    "tottori": "日本, 鳥取県",
+    "hiroshima": "日本, 広島県"
+}

package.json

@@ -35,7 +35,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "tailwindcss": "^2.0.2",
-    "tailwindcss-filters": "^3.0.0"
+    "tailwindcss-filters": "^3.0.0",
+    "tailwindcss-responsive-embed": "^1.0.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.25",

pages/status.js

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

tailwind.config.js

@@ -5,6 +5,13 @@ module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: "class", // or 'media' or 'class'
   theme: {
+    aspectRatio: {
+      none: 0,
+      square: [1, 1],
+      "16/9": [16, 9],
+      "4/3": [4, 3],
+      "21/9": [21, 9]
+  },
     filter: { // defaults to {}
       'none': 'none',
       'grayscale': 'grayscale(1)',
@@ -35,8 +42,11 @@ module.exports = {
   variants: {
     filter: ['responsive'], // defaults to ['responsive']
     backdropFilter: ['responsive'], // defaults to ['responsive']
+    aspectRatio: ['responsive'],
   },
   plugins: [
     require('tailwindcss-filters'),
-  ],
+    require("tailwindcss-responsive-embed"),
+    require("tailwindcss-aspect-ratio"),
+  ]
 }