Merge pull request #8 from shunkakinoki/feat/ini-github-fetcher

feat/ini github fetcher

.husky/pre-commit

@@ -3,4 +3,4 @@
 
 [ -n "$CI" ] && exit 0
 
-exec </dev/tty && yarn git-cz --hook
+exit 0

next.config.js

@@ -24,27 +24,22 @@ module.exports = nextTranslate({
       },
       {
         source: "/what",
-        destination: "/credits",
+        destination: "/values",
         permanent: true,
       },
       {
         source: "/when",
         destination: "/history",
         permanent: true,
       },
-      {
-        source: "/where",
-        destination: "https://zen.ly/shunkakinoki",
-        permanent: true,
-      },
       {
         source: "/who",
         destination: "/about",
         permanent: true,
       },
       {
         source: "/why",
-        destination: "/value",
+        destination: "/cause",
         permanent: true,
       },
       {

src/components/Core/Core.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+
+import { SwitchButton } from "@/common/Button";
+import { SectionText } from "@/common/Text";
+import CoreCard from "@/components/Core/CoreCard";
+import { Airplane, Scale, Variable } from "@/icons";
+
+interface Props {
+  isPartial?: boolean;
+}
+
+export default function Core({ isPartial = false }: Props): JSX.Element {
+  return (
+    <section key="Core" className={clsx("w-full mb-2", isPartial && "mt-6")}>
+      <div className="px-3 md:px-0">
+        <SectionText isPartial={isPartial}>Core</SectionText>
+      </div>
+      <dl className="overflow-hidden bg-gray-200 lg:grid sm:gap-0.5 lg:grid-cols-3">
+        <CoreCard color="blue" name="Cause" href="/cause">
+          <Variable />
+        </CoreCard>
+        <CoreCard color="indigo" name="Mission" href="/mission">
+          <Airplane />
+        </CoreCard>
+        <CoreCard color="purple" name="Values" href="/values">
+          <Scale />
+        </CoreCard>
+      </dl>
+      <div className="w-full pt-3 my-3 text-center leading-5">
+        <div className="flex justify-center w-full">
+          <SwitchButton
+            href={isPartial ? "/about" : "/#core"}
+            type={isPartial ? "right" : "left"}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Core/CoreCard/CoreCard.tsx

@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import Link from "next/link";
+
+interface Props {
+  children: JSX.Element;
+  color:
+    | "blue"
+    | "gray"
+    | "green"
+    | "indigo"
+    | "pink"
+    | "purple"
+    | "red"
+    | "yellow";
+  name: string;
+  hidden?: boolean;
+  href: string;
+}
+
+export default function CoreCard({
+  children,
+  color,
+  name,
+  hidden = false,
+  href,
+}: Props): JSX.Element {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col group relative p-6 bg-white hover:bg-gray-50 dark:bg-black dark:hover:bg-gray-900 sm:rounded-tr-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500",
+        hidden && "block sm:hidden md:block"
+      )}
+    >
+      <div className="flex justify-center w-full">
+        <div className="flex items-center justify-center w-12 h-12 text-white rounded-md">
+          <span
+            className={clsx(
+              "inline-flex p-3 rounded-lg ring-4 ring-white dark:ring-black",
+              color === "blue" &&
+                "text-blue-50 bg-blue-500 dark:text-blue-900 dark:bg-blue-300",
+              color === "indigo" &&
+                "text-indigo-50 bg-indigo-500 dark:text-indigo-900 dark:bg-indigo-300",
+              color === "purple" &&
+                "text-purple-50 bg-purple-500 dark:text-purple-900 dark:bg-purple-3000"
+            )}
+          >
+            {children}
+          </span>
+        </div>
+      </div>
+      <div className="mt-5">
+        <div className="text-lg font-medium text-center text-black dark:text-gray-300">
+          <Link href={href}>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <a className="focus:outline-none">
+              <span className="absolute inset-0" aria-hidden="true" />
+              {name}
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Core/CoreCard/index.ts

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

src/components/Core/index.ts

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

src/components/Product/Product.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
 
+import { SwitchButton } from "@/common/Button";
 import { SectionText } from "@/common/Text";
 import ProductCard from "@/components/Product/ProductCard";
 import { ProductLinks } from "@/const";
@@ -39,6 +40,14 @@ export default function Product({ isPartial = false }: Props): JSX.Element {
           </ProductCard>
         </ul>
       </div>
+      <div className="w-full pt-3 my-3 text-center leading-5">
+        <div className="flex justify-center w-full">
+          <SwitchButton
+            href={isPartial ? "/products" : "/#products"}
+            type={isPartial ? "right" : "left"}
+          />
+        </div>
+      </div>
     </section>
   );
 }

src/components/Product/ProductCard/ProductCard.tsx

@@ -14,7 +14,7 @@ export default function ProductCard({
   href,
 }: Props): JSX.Element {
   return (
-    <li className="border rounded-lg shadow-lg col-span-1 transparent border- group hover:bg-gray-50 dark:bg-black dark:border-gray-300 dark:hover:bg-gray-900">
+    <li className="border rounded-lg shadow-lg col-span-1 transparent group hover:bg-gray-50 dark:bg-black dark:border-gray-300 dark:hover:bg-gray-900">
       <a
         href={href}
         target="_blank"

src/icons/Hero/Airplane.tsx

@@ -0,0 +1,12 @@
+export default function Airplane(): JSX.Element {
+  return (
+    <svg
+      className="w-6 h-6"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+    </svg>
+  );
+}

src/icons/Hero/Scale.tsx

@@ -0,0 +1,16 @@
+export default function Scale(): JSX.Element {
+  return (
+    <svg
+      className="w-6 h-6"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/icons/Hero/Variable.tsx

@@ -0,0 +1,16 @@
+export default function Variable(): JSX.Element {
+  return (
+    <svg
+      className="w-6 h-6"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M4.649 3.084A1 1 0 015.163 4.4 13.95 13.95 0 004 10c0 1.993.416 3.886 1.164 5.6a1 1 0 01-1.832.8A15.95 15.95 0 012 10c0-2.274.475-4.44 1.332-6.4a1 1 0 011.317-.516zM12.96 7a3 3 0 00-2.342 1.126l-.328.41-.111-.279A2 2 0 008.323 7H8a1 1 0 000 2h.323l.532 1.33-1.035 1.295a1 1 0 01-.781.375H7a1 1 0 100 2h.039a3 3 0 002.342-1.126l.328-.41.111.279A2 2 0 0011.677 14H12a1 1 0 100-2h-.323l-.532-1.33 1.035-1.295A1 1 0 0112.961 9H13a1 1 0 100-2h-.039zm1.874-2.6a1 1 0 011.833-.8A15.95 15.95 0 0118 10c0 2.274-.475 4.44-1.332 6.4a1 1 0 11-1.832-.8A13.949 13.949 0 0016 10c0-1.993-.416-3.886-1.165-5.6z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/icons/Hero/index.ts

@@ -1,4 +1,5 @@
 export { default as Action } from "./Action";
+export { default as Airplane } from "./Airplane";
 export { default as Badge } from "./Badge";
 export { default as Bible } from "./Bible";
 export { default as Cake } from "./Cake";
@@ -21,8 +22,10 @@ export { default as Notebook } from "./Notebook";
 export { default as Resource } from "./Resource";
 export { default as Perseverance } from "./Perseverance";
 export { default as Right } from "./Right";
+export { default as Scale } from "./Scale";
 export { default as School } from "./School";
 export { default as Switch } from "./Switch";
 export { default as Tag } from "./Tag";
 export { default as User } from "./User";
+export { default as Variable } from "./Variable";
 export { default as Work } from "./Work";

src/lib/github.ts

@@ -36,7 +36,7 @@ export const getGithubContent = async (
     let source = await response.text();
 
     if (range) {
-      source = source.split("\n").slice(range[0], range[1]).join();
+      source = source.split("\n").slice(range[0], range[1]).join("\n\n");
     }
 
     const { content, data } = matter(source);

src/screens/AboutScreen/AboutScreen.tsx

@@ -1,4 +1,5 @@
 import About, { Props as AboutProps } from "@/components/About";
+import Core from "@/components/Core";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import Life from "@/components/Life";
@@ -11,6 +12,7 @@ export default function AboutScreen({ source }: Props): JSX.Element {
       <Header />
       <div className="flex flex-col items-start justify-center max-w-2xl mx-auto">
         <About source={source} />
+        <Core />
         <Life />
       </div>
       <Footer />

src/screens/LandingScreen/LandingScreen.tsx

@@ -2,7 +2,6 @@ import About, { Props as AboutProps } from "@/components/About";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import History from "@/components/History";
-import Life from "@/components/Life";
 import Newsletter from "@/components/Newsletter";
 import Product from "@/components/Product";
 import Social from "@/components/Social";
@@ -16,7 +15,6 @@ export default function LandingScreen({ source }: Props): JSX.Element {
       <div className="flex flex-col items-start justify-center max-w-2xl mx-auto">
         <About isPartial source={source} />
         <Product isPartial />
-        <Life isPartial />
         <History isPartial />
         <Social isPartial />
         <Newsletter />