Prepare for SSG

This commit is contained in:
yude 2021-12-11 18:55:57 +09:00
parent 86844984d2
commit b446a2ebae
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
24 changed files with 133 additions and 77 deletions

View File

@ -1,5 +1,5 @@
var ja = require('./translations.en.json');
var en = require('./translations.ja.json')
var ja = require('./translations.ja.json');
var en = require('./translations.en.json')
const i18n = {
translations: {

View File

@ -1,7 +1,11 @@
// React
import React, { useState, useEffect } from 'react';
// Data fetching
import axios from 'axios';
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
// i18n
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
function App (){
const [data, setData] = useState({ hits: [] });

View File

@ -1,4 +1,7 @@
// React
import React, { useState, useEffect } from 'react';
// Data fetching
import axios from 'axios';
const App = () => {

View File

@ -1,10 +1,13 @@
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'
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const Dropdown = ({ color }) => {
// dropdown props
const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
@ -45,12 +48,12 @@ const Dropdown = ({ color }) => {
<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 dark:bg-gray-700"}>
<div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<Link href="#" locale="ja">
<LanguageSwitcher lang="ja">
<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">
</LanguageSwitcher>
<LanguageSwitcher lang="en">
<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>
</LanguageSwitcher>
</div>
</div>
</div>

View File

@ -5,11 +5,11 @@ import Link from 'next/link'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const FontAwesomeMenu = (props) => {
const { icon, dest } = props
const { icon, dest, query } = props
return (
<div>
<Link href={`${dest}`}>
<Link href={{ pathname: dest, query: query }}>
<a>
<FontAwesomeIcon icon={icon} className="w-10 h-10 fill-current inline transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110" />
</a>

View File

@ -1,10 +1,15 @@
// Next.js
import Link from 'next/link'
const MinecraftMenu = () => {
const MinecraftMenu = (props) => {
const { query } = props
if (!query) {
return <p>Loading...</p>
} else {
return (
<div>
<Link href="/minecraft">
<Link href={{ pathname: "/minecraft", query: query }}>
<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"/>
@ -14,5 +19,6 @@ const MinecraftMenu = () => {
</div>
)
}
}
export default MinecraftMenu

View File

@ -1,11 +1,16 @@
// React
import React, { useState, useEffect } from 'react';
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
// i18n
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
import axios from 'axios';
import Image from 'next/image'
import { list } from 'postcss';
export default function Minecraft(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
const [data, setData] = useState({ hits: [] });
useEffect(() => {
@ -21,7 +26,7 @@ export default function Minecraft(props) {
if (data === undefined){
console.log("[Minecraft Query] データの取得に失敗しました。 / Failed to retrieve data.")
return (
<p>{t('minecraft:fail')}</p>
<p>{t('fail')}</p>
)
}else{
const status = data.online
@ -32,13 +37,13 @@ export default function Minecraft(props) {
{(() => {
if (status == true) {
if (player == undefined || player == 0) {
return <span>{t('minecraft:no_one')}</span>
return <span>{t('no_one')}</span>
} else {
return <span>{t('minecraft:playing', {count: player})}</span>
return <span>{t('playing', {count: player})}</span>
}}else if (status == false) {
return <span>{t('minecraft:offline')}</span>
return <span>{t('offline')}</span>
}else {
return <span>{t('minecraft:loading')}</span>
return <span>{t('loading')}</span>
}
})()}

View File

@ -1,10 +1,18 @@
// React
import React, { useState, useEffect } from 'react';
// Data fetching
import axios from 'axios';
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
// i18n
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
// Components
import LastPlayed from './LastPlayed'
function App (props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
const uuid = props;
const [data, setData] = useState({ hits: [] });

View File

@ -1,4 +1,7 @@
// React
import React, { useState, useEffect } from 'react';
// Data fetching
import axios from 'axios';
function App (props) {

View File

@ -18,7 +18,7 @@ const Navbar = () => {
return (
<>
<nav className='flex items-center flex-wrap p-3'>
<Link href='/'>
<Link href={{ pathname: '/', query: query }}>
<a className='inline-flex items-center p-2'>
<span className='text-xl text-black font-bold tracking-wide dark:text-white font-mono animate-heartbeat'>
yude.jp
@ -27,8 +27,7 @@ const Navbar = () => {
</Link>
<div className="absolute right-0">
<ThemeSelector />
{/* <LangSelector /> */}
<LanguageSwitcher lang="ja" />
<LangSelector />
</div>
</nav>
</>

View File

@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const Button = (props) => {
const { icon, dest, caption } = props
return (
<Link href={`${dest}`}>
<Link href={{ pathname: dest, query: query}}>
<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"

View File

@ -8,7 +8,7 @@ const Contact = (props) => {
const { icon, dest, caption } = props
return (
<div className="hover:underline">
<Link href={`${dest}`}>
<Link href={{ pathname: dest, query: query }}>
<a>
<FontAwesomeIcon icon={icon} className="w-7 h-7 inline lg:w-10 lg:h-10 md:w-7 md:h-7"/>
<p className="font-mono text-xl">{caption}</p>

View File

@ -1,18 +1,20 @@
// React
import React, { useState, useEffect } from 'react';
import useTranslation from 'next-translate/useTranslation'
// i18n
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
// Font Awesome
import { faKey, faEye, faDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useRouter } from 'next/router'
// Next.js
import Link from 'next/link'
export default function Modal() {
const [showModal, setShowModal] = React.useState(false);
const router = useRouter()
const close = t('common:close')
const keys = t('profile:keys')
const view = t('profile:view')
const fingerprint = t('profile:fingerprint')
const download = t('profile:download')
const { t } = useTranslation();
const [query] = useLanguageQuery();
return (
<>
@ -21,7 +23,7 @@ export default function Modal() {
type="button"
onClick={() => setShowModal(true)}
>
<FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}
<FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {t('keys')}
</button>
{showModal ? (
<>
@ -34,17 +36,17 @@ export default function Modal() {
{/* Modal body */}
<div className="relative p-2 flex-auto text-black text-left">
<p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {keys}</p>
<p className="text-2xl"><FontAwesomeIcon icon={faKey} className="w-5 h-5 inline"/> {t('keys')}</p>
<ul className="list-disc my-2">
<li>
<span className="font-bold">PGP&nbsp;</span>
<Link href="/yudejp.gpg">
<a className="hover:underline">
<FontAwesomeIcon icon={faDownload} className="w-5 h-5 inline"/>&nbsp;
{download}
{t('download')}
</a>
</Link>
<p>{fingerprint}:</p>
<p>{t('fingerprint')}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
<code>3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968</code>
@ -56,10 +58,10 @@ export default function Modal() {
<Link href="https://github.com/yude.keys">
<a className="hover:underline">
<FontAwesomeIcon icon={faEye} className="w-5 h-5 inline"/>&nbsp;
{view}
{t('view')}
</a>
</Link>
<p>{fingerprint}:</p>
<p>{t('fingerprint')}:</p>
<div className="overflow-x-auto">
<div className="whitespace-nowrap">
<code>2048 SHA256:xwSL4DORWmroWdC6P0GU1m1yZl/cXqjo9rCCWqqO+Dc</code>
@ -76,7 +78,7 @@ export default function Modal() {
type="button"
onClick={() => setShowModal(false)}
>
{close}
{t('close')}
</button>
</div>
</div>

View File

@ -1,9 +1,16 @@
// React
import React, { useState, useEffect } from 'react';
// Data fetching
import axios from 'axios';
import useTranslation from 'next-translate/useTranslation'
import { useRouter } from 'next/router'
// i18n
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
function App () {
const { t } = useTranslation();
const [query] = useLanguageQuery();
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {

View File

@ -1,8 +1,9 @@
// React
import React, { useState, useEffect } from 'react';
import useTranslation from 'next-translate/useTranslation'
// Font Awesome
import { faUserClock } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useRouter } from 'next/router'
export default function Modal() {
const [showModal, setShowModal] = React.useState(false);

View File

@ -15,7 +15,7 @@ import en from '../docs/hcunews/en.md'
export default function HcuNews() {
const { t } = useTranslation();
const [query] = useLanguageQuery();
const [query] = useLanguageQuery();
return(
<Layout title={t('hcunews')}>

View File

@ -3,13 +3,14 @@ import Layout from "./components/Layout"
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
// Next.js router
import { useRouter } from 'next/router'
export default function About(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
return (
<Layout title={t('house')}>
<div>

View File

@ -27,6 +27,9 @@ export default function Index(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
if (!query) {
return <p>Loading...</p>
} else {
return (
<>
<Layout title={t('home')}>
@ -43,15 +46,15 @@ export default function Index(props) {
{/* Index menu */}
<div className="grid grid-cols-3 gap-10">
<FAMenu dest="/profile" icon={faUser} />
<FAMenu dest="/server" icon={faServer} />
<FAMenu dest="/house" icon={faHouseUser} />
<FAMenu dest="https://scrapbox.io/yude" icon={faBook} />
<FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />
<FAMenu dest="https://github.com/yudejp" icon={faGithub} />
<FAMenu dest="https://git.yude.jp" icon={faGit} />
<MinecraftMenu />
<FAMenu dest="/mutual" icon={faHeart} />
<FAMenu dest="/profile" query={query} icon={faUser} />
<FAMenu dest="/server" query={query} icon={faServer} />
<FAMenu dest="/house" query={query} icon={faHouseUser} />
<FAMenu dest="https://scrapbox.io/yude" query={query} icon={faBook} />
<FAMenu dest="https://discord.gg/X6srY7X" query={query} icon={faDiscord} />
<FAMenu dest="https://github.com/yudejp" query={query} icon={faGithub} />
<FAMenu dest="https://git.yude.jp" icon={faGit} query={query} />
<MinecraftMenu query={query} />
<FAMenu dest="/mutual" icon={faHeart} query={query} />
</div>
{/* Banner */}
@ -67,3 +70,4 @@ export default function Index(props) {
</>
)
}
}

View File

@ -7,8 +7,6 @@ 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'
@ -31,11 +29,17 @@ import en from '../docs/minecraft/en.md'
import { NextSeo } from 'next-seo';
export default function About(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
// Copy server address to clipboard
const copyText = () => {
navigator.clipboard.writeText("yude.jp");
};
if (!query) {
return <p>Loading...</p>
} else {
return (
<>
<NextSeo
@ -82,7 +86,7 @@ export default function About(props) {
</div>
{/* Load markdown contents */}
{lang === 'ja' ? (
{query["lang"] === 'ja' ? (
<ReactMarkdown plugins={[gfm]}>
{ja}
</ReactMarkdown>
@ -95,4 +99,5 @@ export default function About(props) {
</Layout>
</>
)
}
}

View File

@ -3,8 +3,6 @@ import Layout from "./components/Layout"
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
// React Router etc.
import { useRouter } from 'next/router'
@ -20,6 +18,12 @@ import en from '../docs/mutual/en.md'
import { NextSeo } from 'next-seo';
export default function Tos(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
if (!query) {
return <p>Loading...</p>
} else {
return(
<>
<NextSeo
@ -28,7 +32,7 @@ export default function Tos(props) {
/>
<Layout title={t('common:mutual')}>
<div>
{lang === 'ja' ? (
{query["lang"] === 'ja' ? (
<ReactMarkdown plugins={[gfm]}>
{ja}
</ReactMarkdown>
@ -41,4 +45,5 @@ export default function Tos(props) {
</Layout>
</>
)
}
}

View File

@ -9,8 +9,6 @@ import { useRouter } from 'next/router'
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
// microCMS library
import { client } from "../libs/client";
@ -19,6 +17,9 @@ import { client } from "../libs/client";
import { NextSeo } from 'next-seo';
export default function Home({ blog }) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
return (
<>
<NextSeo

View File

@ -2,9 +2,7 @@
import Layout from "./components/Layout"
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
import { useTranslation, useLanguageQuery } from 'next-export-i18n';
// Font Awesome
import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram, faMastodon, faSteam, faAmazon } from '@fortawesome/free-brands-svg-icons'
@ -32,6 +30,8 @@ import NintendoSW from "./components/Profile/NintendoSW"
import { NextSeo } from 'next-seo';
export default function Profile(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
return (
<>
@ -119,7 +119,7 @@ export default function Profile(props) {
</div>
</div>
<p className="mt-3 text-sm font-bold text-gray-900 dark:text-gray-400">{t('common:icon_1')}<Link href="https://twitter.com/xmnts"><a className="hover:underline">Minkasy {t('common: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>

View File

@ -3,16 +3,14 @@ import Layout from "./components/Layout"
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
// React Router
import { useRouter } from 'next/router'
// next-seo
import { NextSeo } from 'next-seo';
export default function Server(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
return (
<>
<NextSeo

View File

@ -3,8 +3,6 @@ import Layout from "./components/Layout"
// i18n
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n';
const { t } = useTranslation();
const [query] = useLanguageQuery();
// Next.js, React
import { useRouter } from 'next/router'
@ -17,6 +15,9 @@ import ja from '../docs/tos/ja.md'
import en from '../docs/tos/en.md'
export default function Tos(props) {
const { t } = useTranslation();
const [query] = useLanguageQuery();
return(
<Layout title={t('tos')}>
<div>