yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-06-09 23:36:01 +09:00
Code Releases Activity

Add "Server Status" page

Browse Source
This commit is contained in:
yude 2021-02-13 14:06:05 +09:00
parent c539947854
commit 1feacae0f0
6 changed files with 132 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
i18n.json
View File

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

6
locales/en-US/status.json Normal file
View File

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

6
locales/ja-JP/status.json Normal file
View File

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

3
package.json
View File

@ -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",

105
pages/status.js Normal file
View File

@ -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>
)
}

12
tailwind.config.js
View File

@ -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"),
]
}