Add posts/

.env.local.sample

@@ -1,3 +1,5 @@
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
-SPOTIFY_REFRESH_TOKEN=
+SPOTIFY_REFRESH_TOKEN=
+
+MICROCMS_API_KEY=

libs/client.js

@@ -0,0 +1,6 @@
+import { createClient } from 'microcms-js-sdk';
+
+export const client = createClient({
+  serviceDomain: 'yude',
+  apiKey: process.env.MICROCMS_API_KEY,
+});

locales/en/common.json

@@ -8,5 +8,6 @@
     "mutual": "Mutual links",
     "status": "Service Status",
     "icon_1": "Icon: ",
-    "icon_2": ""
+    "icon_2": "",
+    "post_list": "Posts listing"
 }

locales/ja/common.json

@@ -8,5 +8,6 @@
     "mutual": "相互リンク",
     "status": "サービスの状態",
     "icon_1": "アイコン: ",
-    "icon_2": "さん"
+    "icon_2": "さん",
+    "post_list": "記事一覧"
 }

package.json

@@ -28,6 +28,8 @@
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
     "axios": "^0.21.1",
+    "microcms-js-sdk": "^1.2.0",
+    "moment": "^2.29.1",
     "next": "^11.1.1",
     "next-seo": "^4.26.0",
     "next-themes": "^0.0.14",
@@ -39,6 +41,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^6.0.2",
+    "react-moment": "^1.1.1",
     "react-switch": "^6.0.0",
     "remark-gfm": "^1.0.0",
     "swr": "^0.5.6",

pages/index.js

@@ -43,7 +43,7 @@ export default function Index(props) {
           </div>
           
           {/* Index menu */}
-          <div className="grid grid-cols-4 gap-10">
+          <div className="grid grid-cols-3 gap-10">
             <FAMenu dest="/profile" icon={faUser} />
             <FAMenu dest="/server" icon={faServer} />
             <FAMenu dest="/house" icon={faHouseUser} />
@@ -51,7 +51,6 @@ export default function Index(props) {
             <FAMenu dest="https://discord.gg/X6srY7X" icon={faDiscord} />          
             <FAMenu dest="https://github.com/yudejp" icon={faGithub} />
             <FAMenu dest="https://git.yude.jp" icon={faGit} />
-            <FAMenu dest="https://mstdn.yude.jp" icon={faMastodon} />
             <MinecraftMenu />
             <FAMenu dest="/mutual" icon={faHeart} />
           </div>

pages/posts.js

@@ -0,0 +1,54 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// Next.js
+import Link from "next/link";
+
+// i18n
+import { useRouter } from 'next/router'
+import useTranslation from 'next-translate/useTranslation'
+
+// microCMS library
+import { client } from "../libs/client";
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+export default function Home({ blog }) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("common")
+    return (
+          <>
+          <NextSeo
+            title="記事一覧"
+            description="yude のブログの記事一覧 / yude's blog posts listing"
+          />
+          <Layout title={t('common:post_list')}>
+              <div>
+              <h1 className="text-center">{t('common:post_list')}</h1>
+                <ul>
+                  {blog.map((blog) => (
+                    <li key={blog.id}>
+                      <Link href={`/posts/${blog.id}`}>
+                        <a>{blog.title}</a>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+          </Layout>
+          </>
+    );
+}
+
+// Passing data to template
+export const getStaticProps = async () => {
+  const data = await client.get({ endpoint: "blog" });
+
+  return {
+    props: {
+      blog: data.contents,
+    },
+  };
+};

pages/posts/[id].js

@@ -0,0 +1,58 @@
+// Base layout
+import Layout from "../components/Layout"
+
+// microCMS library
+import { client } from "../../libs/client";
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+// React
+import * as React from "react";
+
+// React Moment
+import Moment from 'react-moment';
+
+export default function BlogId({ blog }) {
+  return (
+    <>
+    <Layout title={blog.title + " - yude.jp"}>
+    <NextSeo
+      title={blog.title + " - yude.jp"}
+      description={blog.publishedAt + "に更新された「" + blog.title + "」というタイトルの記事です。"}
+    />
+        <h1>{blog.title}</h1>
+        <p>
+          <Moment format="YYYY/MM/DD HH:mm">
+          {blog.updated}
+          </Moment>
+        </p>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: `${blog.content}`,
+          }}
+        />
+    </Layout>
+    </>
+  );
+}
+
+// Specify path for static generator
+export const getStaticPaths = async () => {
+  const data = await client.get({ endpoint: "blog" });
+
+  const paths = data.contents.map((content) => `/posts/${content.id}`);
+  return { paths, fallback: false };
+};
+
+// Passing data to template
+export const getStaticProps = async (context) => {
+  const id = context.params.id;
+  const data = await client.get({ endpoint: "blog", contentId: id });
+
+  return {
+    props: {
+      blog: data,
+    },
+  };
+};

yarn.lock

@@ -2096,6 +2096,14 @@ merge2@^1.3.0:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+microcms-js-sdk@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/microcms-js-sdk/-/microcms-js-sdk-1.2.0.tgz#ad61d35c849fb7dfdda47fc66df2a4069e2ced9e"
+  integrity sha512-ipjiRb4B2ASI2BoDhmusALn7UV7OXIQ38WSdRUDfekBIk34ZjLplPTYq3XDAqQBtoOgA6mKnY/67YIeO4C4jDw==
+  dependencies:
+    node-fetch "^2.6.1"
+    qs "^6.10.1"
+
 micromark-extension-gfm-autolink-literal@~0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz#53866c1f0c7ef940ae7ca1f72c6faef8fed9f204"
@@ -2204,6 +2212,11 @@ modern-normalize@^1.0.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
   integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2314,7 +2327,7 @@ node-emoji@^1.8.1:
   dependencies:
     lodash.toarray "^4.4.0"
 
-node-fetch@2.6.1:
+node-fetch@2.6.1, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -2402,6 +2415,11 @@ object-inspect@^1.10.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
   integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
 
+object-inspect@^1.9.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
+  integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
+
 object-is@^1.0.1:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
@@ -2748,6 +2766,13 @@ purgecss@^3.1.3:
     postcss "^8.2.1"
     postcss-selector-parser "^6.0.2"
 
+qs@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 querystring-es3@0.2.1, querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -2851,6 +2876,11 @@ react-markdown@^6.0.2:
     unist-util-visit "^2.0.0"
     vfile "^4.0.0"
 
+react-moment@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.1.1.tgz#5fe9fb257039590c804e2b3aedfc3ceb0a6ffb16"
+  integrity sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==
+
 react-refresh@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -3035,6 +3065,15 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"