mirror of https://github.com/yude-jp/yude.jp
98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
// Base layout
|
|
import Layout from "./components/Layout"
|
|
|
|
// React Router etc.
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/router'
|
|
|
|
// i18n
|
|
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
|
|
const { t } = useTranslation();
|
|
const [query] = useLanguageQuery();
|
|
|
|
// 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'
|
|
|
|
// 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) {
|
|
// 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 = "/images/dynmap.png"
|
|
alt = "Minecraft brief world map generated by Dynmap"
|
|
width = {1354}
|
|
height = {619}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<Minecraft />
|
|
<p>
|
|
<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"
|
|
onClick={() => copyText()}
|
|
>
|
|
<FontAwesomeIcon icon={faCopy} className="w-5 h-5 inline"/>
|
|
</button>
|
|
</p>
|
|
|
|
<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"/> BlueMap
|
|
</button>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Load markdown contents */}
|
|
{lang === 'ja' ? (
|
|
<ReactMarkdown plugins={[gfm]}>
|
|
{ja}
|
|
</ReactMarkdown>
|
|
) : (
|
|
<ReactMarkdown plugins={[gfm]}>
|
|
{en}
|
|
</ReactMarkdown>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
)
|
|
} |