Add comments, code organization

pages/minecraft.js

@@ -1,12 +1,25 @@
-import React, { useState, useEffect } from 'react';
+// Base layout
 import Layout from "./components/Layout"
-import useTranslation from 'next-translate/useTranslation'
+
+// React Router etc.
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router'
-import Minecraft from './components/Minecraft'
+
+// i18n
+import useTranslation from 'next-translate/useTranslation'
+
+// 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'
-import Link from 'next/link'
+
+// React Markdown
 import ReactMarkdown from "react-markdown"
 import gfm from 'remark-gfm';
 import ja from '../docs/minecraft/ja.md'
@@ -14,14 +27,19 @@ import en from '../docs/minecraft/en.md'
 
 export default function About(props) {
     const router = useRouter()
+    
+    // i18n
     const { locale, locales, defaultLocale, pathname } = router
     const { t, lang } = useTranslation("minecraft")
+    
+    // Copy server address to clipboard
     const copyText = () => {
       navigator.clipboard.writeText("yude.jp");
     };
 
     return (
             <Layout title={t('title')}>
+            
             <div>
                 <p className="my-2 text-3xl text-center">{t('title')}</p>
                 <div className="w-full">
@@ -33,6 +51,7 @@ export default function About(props) {
                     height      = {619}
                 />
                 </div>
+                
                 <div className="text-center">
                 <Minecraft />
                 <p>
@@ -45,19 +64,21 @@ export default function About(props) {
                     <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>
+                  <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]} children={ja} />
               ) : (