Merge branch 'main' into release

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_API_KEY=
+NEXT_PUBLIC_AUTH_DOMAIN=
+NEXT_PUBLIC_PROJECT_ID=
+NEXT_PUBLIC_STORAGE_BUCKET=
+NEXT_PUBLIC_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_APP_ID=
+NEXT_PUBLIC_MEASUREMENT_ID=

.github/workflows/deploy.yml

@@ -72,7 +72,6 @@ jobs:
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: 'convert: Resize all images and convert to webp.'
-
 
   # Build job
   build:

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true
+}

app/_component/Analytics.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { logEvent } from 'firebase/analytics';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import { analytics } from '../firebase';
+
+export default function Analytics() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!analytics) return;
+    logEvent(analytics, 'page_view', {
+      page_location: pathname,
+    });
+  }, [pathname]);
+
+  return <></>;
+}

app/_component/MultipleMenuButton.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import MenuButton from "./MenuButton";
-import { ArrowUpIcon } from "@/components/icons";
-import { css } from "@/styled-system/css";
-import { Page } from "@/types";
+import { useState } from 'react';
+import MenuButton from './MenuButton';
+import { ArrowUpIcon } from '@/components/icons';
+import { css } from '@/styled-system/css';
+import { Page } from '@/types';
 
 type Props = {
   pages: Page[];
@@ -17,45 +17,45 @@ export default function MultiMenuButton({ pages }: Props) {
   return (
     <div
       className={css({
-        position: "relative",
+        position: 'relative',
       })}
     >
       <button
         className={css({
-          padding: "2px 5px 0",
-          fontSize: "sm",
-          cursor: "pointer",
-          textAlign: "left",
-          display: "flex",
-          transition: "color 0.3s",
+          padding: '2px 5px 0',
+          fontSize: 'sm',
+          cursor: 'pointer',
+          textAlign: 'left',
+          display: 'flex',
+          transition: 'color 0.3s',
 
-          _hover: { color: "primary.300" },
+          _hover: { color: 'primary.300' },
         })}
         onClick={() => setOpened((prev) => !prev)}
       >
         <ArrowUpIcon
           className={css({
-            fontSize: "1.5rem",
-            transition: "transform 0.3s",
+            fontSize: '1.5rem',
+            transition: 'transform 0.3s',
           })}
           style={{
-            transform: opened ? "rotate(0deg)" : "rotate(180deg)",
+            transform: opened ? 'rotate(0deg)' : 'rotate(180deg)',
           }}
         />
         Other
       </button>
 
       <div
         className={css({
-          height: "30px",
-          backgroundColor: "primary.500",
-          position: "absolute",
-          bottom: "-100%",
-          top: "calc(100% + 5px)",
+          height: '30px',
+          backgroundColor: 'primary.500',
+          position: 'absolute',
+          bottom: '-100%',
+          top: 'calc(100% + 5px)',
           left: 0,
-          overflow: "hidden",
-          transition: "height 0.3s",
-          borderRadius: "0 0 5px 5px",
+          overflow: 'hidden',
+          transition: 'height 0.3s',
+          borderRadius: '0 0 5px 5px',
         })}
         style={{
           height: opened ? `${pages.length * 30 + 5}px` : 0,
@@ -65,10 +65,10 @@ export default function MultiMenuButton({ pages }: Props) {
           <div
             key={page.id}
             className={css({
-              lineHeight: "30px",
-              paddingInline: "10px",
-              textWrap: "nowrap",
-              textAlign: "center",
+              lineHeight: '30px',
+              paddingInline: '10px',
+              textWrap: 'nowrap',
+              textAlign: 'center',
             })}
             onClick={() => setOpened(false)}
           >

app/_component/header/base.tsx

@@ -1,38 +1,38 @@
-"use client";
+'use client';
 
-import MenuButton from "../MenuButton";
-import MultiMenuButton from "../MultipleMenuButton";
-import Battery from "./battery";
-import Clock from "./clock";
-import Logo from "./logo";
-import { css } from "@/styled-system/css";
-import { Page } from "@/types";
+import MenuButton from '../MenuButton';
+import MultiMenuButton from '../MultipleMenuButton';
+import Battery from './battery';
+import Clock from './clock';
+import Logo from './logo';
+import { css } from '@/styled-system/css';
+import { Page } from '@/types';
 
 type Props = {
   pages: Page[];
 };
 
 export default function HeaderBase({ pages }: Props) {
-  const singlePages = pages.filter((page) => !page.other && page.path !== "/");
+  const singlePages = pages.filter((page) => !page.other && page.path !== '/');
   const multiPages = pages.filter((page) => page.other);
 
   return (
     <header
       className={css({
-        height: "40px",
-        padding: "0 10px",
-        backgroundColor: "primary.500",
-        position: "fixed",
+        height: '40px',
+        padding: '0 10px',
+        backgroundColor: 'primary.500',
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         zIndex: 1000,
-        display: "none",
-        alignItems: "center",
-        gap: "10px",
+        display: 'none',
+        alignItems: 'center',
+        gap: '10px',
 
         sm: {
-          display: "flex",
+          display: 'flex',
         },
       })}
     >
@@ -50,7 +50,7 @@ export default function HeaderBase({ pages }: Props) {
 
       <span
         className={css({
-          marginInline: "auto",
+          marginInline: 'auto',
         })}
       />
 

app/_component/sections/notice/Announce.tsx

@@ -1,6 +1,6 @@
-import NoticeCard from "./Card";
-import { getNotices } from "@/components/loadFiles";
-import { css } from "@/styled-system/css";
+import NoticeCard from './Card';
+import { getNotices } from '@/components/loadFiles';
+import { css } from '@/styled-system/css';
 
 export default function Notice() {
   const notices = getNotices();
@@ -12,23 +12,23 @@ export default function Notice() {
   return (
     <section
       className={css({
-        padding: "50px 0",
-        textAlign: "center",
+        padding: '50px 0',
+        textAlign: 'center',
       })}
     >
       <h2
         className={css({
-          paddingBottom: "30px",
-          fontSize: "2rem",
+          paddingBottom: '30px',
+          fontSize: '2rem',
         })}
       >
         お知らせ
       </h2>
 
       <div
         className={css({
-          marginInline: "auto",
-          maxWidth: "800px",
+          marginInline: 'auto',
+          maxWidth: '800px',
         })}
       >
         {displayNotices.map((notice) => (

app/_component/sections/notice/Card.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import Md2Html from "@/components/md2html";
-import { formatdate } from "@/components/util";
-import { css } from "@/styled-system/css";
-import { mdStyle } from "@/styled-system/patterns";
-import { NoticePage } from "@/types";
+import Md2Html from '@/components/md2html';
+import { formatdate } from '@/components/util';
+import { css } from '@/styled-system/css';
+import { mdStyle } from '@/styled-system/patterns';
+import { NoticePage } from '@/types';
 
 type Props = {
   notice: NoticePage;
@@ -19,22 +19,22 @@ export default function NoticeCard(props: Props) {
     <div
       key={notice.id}
       className={css({
-        padding: "40px",
-        textAlign: "start",
-        borderBottom: "1px solid rgba(0, 0, 0, 0.2)",
+        padding: '40px',
+        textAlign: 'start',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
 
-        "&:nth-child(1)": {
-          borderTop: "1px solid rgba(0, 0, 0, 0.2)",
+        '&:nth-child(1)': {
+          borderTop: '1px solid rgba(0, 0, 0, 0.2)',
         },
       })}
       // 期限が過ぎたお知らせは非表示
-      style={{ display: now < notice.deadline.getTime() ? "block" : "none" }}
+      style={{ display: now < notice.deadline.getTime() ? 'block' : 'none' }}
     >
       <p>
         <span>{formatdate(notice.meta.created_at)}</span>
         <span
           className={css({
-            marginLeft: "10px",
+            marginLeft: '10px',
           })}
         >
           [{notice.category}]
@@ -43,16 +43,16 @@ export default function NoticeCard(props: Props) {
 
       <h3
         className={css({
-          fontSize: "1.5rem",
-          fontWeight: "bold",
+          fontSize: '1.5rem',
+          fontWeight: 'bold',
         })}
       >
         {notice.meta.title}
       </h3>
 
       <Md2Html
         className={mdStyle({
-          style: "a-only",
+          style: 'a-only',
         })}
         content={notice.content}
       />

app/firebase.ts

@@ -0,0 +1,20 @@
+// Import the functions you need from the SDKs you need
+import { getAnalytics } from 'firebase/analytics';
+import { initializeApp } from 'firebase/app';
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
+};
+
+const firebaseApp = initializeApp(firebaseConfig);
+const analytics = getAnalytics(firebaseApp);
+
+export { firebaseApp, analytics };

app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import React from 'react';
 import './globals.css';
 import 'swiper/css/bundle';
+import Analytics from './_component/Analytics';
 import Footer from './_component/footer';
 import Header from './_component/header/header';
 import { getPages } from '@/components/loadFiles';
@@ -57,6 +58,7 @@ export default function RootLayout({ children }: Props) {
         <Header pages={pages} />
         {children}
         <Footer />
+        <Analytics />
       </body>
     </html>
   );

app/page.tsx

@@ -1,19 +1,19 @@
-import AboutSection from "./_component/sections/About";
-import ImageSection from "./_component/sections/Image";
-import Notice from "./_component/sections/notice/Announce";
-import RecentPosts from "./_component/sections/recentpost/RecentPosts";
-import TopSection from "./_component/sections/top/Top";
-import { getPages, getPosts, getTopImages } from "@/components/loadFiles";
+import AboutSection from './_component/sections/About';
+import ImageSection from './_component/sections/Image';
+import Notice from './_component/sections/notice/Announce';
+import RecentPosts from './_component/sections/recentpost/RecentPosts';
+import TopSection from './_component/sections/top/Top';
+import { getPages, getPosts, getTopImages } from '@/components/loadFiles';
 
 export default function Home() {
   const pages = getPages();
   const posts = getPosts();
 
-  const topPage = pages.find((page) => page.path === "/");
-  const mdContents = topPage ? topPage.content.split("---") : [];
+  const topPage = pages.find((page) => page.path === '/');
+  const mdContents = topPage ? topPage.content.split('---') : [];
   const imagepathes = getTopImages();
   const hero =
-    imagepathes.find((image) => image.name.startsWith("hero")) ||
+    imagepathes.find((image) => image.name.startsWith('hero')) ||
     imagepathes.slice(-1)[0];
   const others = imagepathes.filter((image) => image.name !== hero.name);