Merge pull request #9 from shunkakinoki/feat/ini-credits-button

feat/ini credits button

package.json

@@ -70,12 +70,12 @@
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
-    "@types/react": "^17.0.1",
+    "@types/react": "^17.0.2",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "commitizen": "^4.2.3",
     "depcheck": "^1.3.1",
-    "eslint": "^7.19.0",
+    "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-import-resolver-typescript": "^2.3.0",
     "eslint-plugin-import": "^2.22.1",
@@ -88,10 +88,10 @@
     "git-cz": "^4.7.6",
     "husky": "^5.0.9",
     "json-sort-cli": "^1.18.4",
-    "npm-check-updates": "^11.1.1",
+    "npm-check-updates": "^11.1.3",
     "pinst": "^2.1.4",
     "prettier": "^2.2.1",
-    "semantic-release": "^17.3.8",
+    "semantic-release": "^17.3.9",
     "sort-package-json": "^1.48.1",
     "stylelint": "^13.10.0",
     "stylelint-config-standard": "^20.0.0",

src/components/Credits/Credits.module.css

@@ -0,0 +1,15 @@
+.markdown {
+  @apply leading-relaxed text-black dark:text-white;
+}
+
+.markdown h1 {
+  @apply my-8 text-6xl font-semibold leading-none tracking-tight dark:text-gray-100;
+}
+
+.markdown h2 {
+  @apply my-6 text-3xl font-semibold leading-tight text-gray-800 underline;
+}
+
+.markdown ul {
+  @apply mx-4 my-3 text-lg text-gray-700 list-disc;
+}

src/components/Credits/Credits.tsx

@@ -0,0 +1,14 @@
+import hydrate from "next-mdx-remote/hydrate";
+import { MdxRemote } from "next-mdx-remote/types";
+
+import s from "./Credits.module.css";
+
+export interface Props {
+  source: MdxRemote.Source;
+}
+
+export default function Credits({ source }: Props): JSX.Element {
+  const content = hydrate(source);
+
+  return <section className={s.markdown}>{content}</section>;
+}

src/components/Credits/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Credits";
+export type { Props } from "./Credits";

src/components/Footer/CreditsButton/CreditsButton.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default function CreditsButton(): JSX.Element {
+  return (
+    <Link href="/credits">
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a className="flex items-center justify-center p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-600 dark:focus:ring-pink-400">
+        <svg
+          className="w-6 h-6 text-pink-700 fill-current dark:text-pink-300 hover:text-pink-900 dark:hover:text-pink-100"
+          stroke="currentColor"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            fillRule="evenodd"
+            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </a>
+    </Link>
+  );
+}

src/components/Footer/CreditsButton/index.ts

@@ -0,0 +1 @@
+export { default } from "./CreditsButton";

src/components/Footer/Footer.tsx

@@ -2,11 +2,11 @@ import Link, { LinkProps } from "next/link";
 
 import { ReactNode } from "react";
 
+import CreditsButton from "@/components/Footer/CreditsButton";
 import LocaleSelect from "@/components/Footer/LocaleSelect";
 
 import { SocialLinks } from "@/const";
 import { Facebook, Github, Instagram, Linkedin, Twitter } from "@/icons";
-
 interface FooterLinkProps extends LinkProps {
   children: string;
 }
@@ -78,10 +78,11 @@ export default function Footer(): JSX.Element {
           <Twitter />
         </FooterIconLink>
       </div>
-      <div className="flex flex-col items-center justify-center max-w-3xl py-8 mx-auto space-x-6 space-y-6 sm:flex-row sm:space-y-0">
+      <div className="flex flex-col items-center justify-center max-w-3xl pt-8 mx-auto space-x-6 space-y-6 sm:flex-row sm:space-y-0">
         <p className="flex-shrink-0 text-base text-center text-gray-400">
           &copy; Shun Kakinoki. All rights reserved.
         </p>
+        <CreditsButton />
         <div className="sm:flex-grow-0">
           <LocaleSelect />
         </div>

src/lib/github.ts

@@ -2,6 +2,9 @@ import matter from "gray-matter";
 import renderToString from "next-mdx-remote/render-to-string";
 import { MdxRemote } from "next-mdx-remote/types";
 
+const githubLink =
+  "https://raw.githubusercontent.com/shunkakinoki/shunkakinoki/main";
+
 export const getGithubContent = async (
   dir: string,
   pageId: string,
@@ -18,9 +21,9 @@ export const getGithubContent = async (
 > => {
   try {
     const response = await fetch(
-      `https://raw.githubusercontent.com/shunkakinoki/shunkakinoki/main/${dir}/${
-        locale ?? "en"
-      }/${pageId}.md`,
+      dir !== "credits" && pageId !== "CREDITS"
+        ? `${githubLink}/${dir}/${locale ?? "en"}/${pageId}.md`
+        : `${githubLink}/CREDITS.md`,
       {
         headers: {
           Accept: "application/json",

src/pages/credits.tsx

@@ -1,9 +1,49 @@
-import { NextPage } from "next";
+import {
+  GetStaticProps,
+  InferGetStaticPropsType,
+  GetStaticPaths,
+  GetStaticPropsContext,
+} from "next";
 
+import { MdxRemote } from "next-mdx-remote/types";
+
+import { getGithubContent } from "@/lib/github";
 import CreditsScreen from "@/screens/CreditsScreen";
 
-const Credits: NextPage = () => {
-  return <CreditsScreen />;
+export interface Props {
+  content: string;
+}
+
+export const getStaticProps: GetStaticProps<Props> = async ({
+  locale,
+}: // eslint-disable-next-line @typescript-eslint/require-await
+GetStaticPropsContext) => {
+  try {
+    const result = await getGithubContent("credits", "CREDITS", locale);
+    if (result) {
+      const { source } = result;
+      return {
+        props: {
+          content: JSON.stringify(source),
+        },
+        revalidate: 30,
+      };
+    } else {
+      return {
+        notFound: true,
+      };
+    }
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+};
+
+const Credits = ({
+  content,
+}: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
+  return <CreditsScreen source={JSON.parse(content) as MdxRemote.Source} />;
 };
 
 export default Credits;

src/screens/CreditsScreen/CreditsScreen.tsx

@@ -1,13 +1,15 @@
+import Credits, { Props as CreditsProps } from "@/components/Credits";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
-import Life from "@/components/Life";
 
-export default function CreditsScreen(): JSX.Element {
+export type Props = CreditsProps;
+
+export default function CreditsScreen({ source }: Props): JSX.Element {
   return (
     <>
       <Header />
       <div className="flex flex-col items-start justify-center max-w-2xl mx-auto">
-        <Life />
+        <Credits source={source} />
       </div>
       <Footer />
     </>