v1.0.4 (#30)

* 編集ページの下のおかしいところを修正

* ヘルプページ作成

app/(app)/app/_components/edit/EditMenu.tsx

@@ -19,7 +19,7 @@ export default function EditMenu({
 }) {
   const [isShowImportBox, setIsShowImportBox] = useState(false);
   return (
-    <div className="flex flex-col h-full p-4 gap-4">
+    <div className="flex flex-col p-4 gap-4">
       <div className="flex-none flex gap-4 bg-gray-200 p-2 rounded">
         <input
           type="text"

app/(app)/app/howToUse.tsx

@@ -1,8 +1,15 @@
-import MdxContent from "./howToUse.mdx";
+import MdxContent from "@/app/(home)/(mdx_documents)/help/edit/page.mdx";
+import Link from "next/link";
 export default function HowToUse() {
   return (
     <div className="p-8 mx-auto max-w-6xl w-full">
       <MdxContent />
+      <h2 className="mt-4">
+        詳しい使い方は
+        <Link href="/help" className="!text-heading-M" target="_target">
+          こちら
+        </Link>
+      </h2>
     </div>
   );
 }

app/(app)/app/howToUse.mdx → app/(home)/(mdx_documents)/help/edit/page.mdx

@@ -1,12 +1,21 @@
-## 使い方
+export const metadata = {
+  title: "ファイル編集ページの使い方",
+  description:
+    "英文、英単語専用の単語帳アプリvocabPhraseファイル編集ページの使い方",
+  alternates: {
+    canonical: "/help/edit",
+  },
+};
 
-### 1. ファイルを作成するには新規作成ボタンを押す
+# ファイル編集ページの使い方
+
+## 1. ファイルを作成するには新規作成ボタンを押す
 
 (**連打しないようにしてください。ファイルが大量に作成されます**)
 
 ![新規作成ボタン](/img/create-button.webp)
 
-### 2. ファイルを編集する
+## 2. ファイルを編集する
 
 ![空ファイルの編集画面](/img/newfile-edit.webp)
 

app/(home)/(mdx_documents)/help/keyboard/page.mdx

@@ -0,0 +1,29 @@
+export const metadata = {
+  title: "キーボードショートカットに付いて",
+  description:
+    "英文、英単語専用の単語帳アプリvocabPhraseのキーボードショートカットについて",
+  alternates: {
+    canonical: "/help/keyboard",
+  },
+};
+
+# キーボードショートカットについて
+
+## 編集ページ
+
+| キー     | 機能 |
+| -------- | ---- |
+| Ctrl + S | 保存 |
+
+## フラッシュカード
+
+### フラッシュカードで暗記中
+
+| キー       | 機能                                     |
+| ---------- | ---------------------------------------- |
+| space      | 解答を表示(キーボード解答モードオフ時)   |
+| ctrl+enter | 解答する(キーボード解答時)               |
+| c          | チェックを付ける、はずす(解答表示時のみ) |
+| r,s        | 読み上げ                                 |
+| →          | 次へ                                     |
+| ←          | 前へ                                     |

app/(home)/(mdx_documents)/help/layout.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export default function HelpPageLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <section>
+        <Link href="/help">ヘルプページトップへ</Link>
+      </section>
+      {children}
+    </>
+  );
+}

app/(home)/help/getFileMetadata.ts

@@ -0,0 +1,20 @@
+import { promises as fsPromises } from "fs";
+import path from "path";
+export async function getFileMetadata(): Promise<
+  { fileName: string; title: string; description: string }[]
+> {
+  const files = (
+    await fsPromises.readdir(
+      path.join(process.cwd(), "app", "(home)", "(mdx_documents)", "help")
+    )
+  ).filter((file) => !file.includes("."));
+  files.sort(); //文字列のみなので比較関数は不要
+  return await Promise.all(
+    files.map(async (file) => {
+      const { metadata } = await import(
+        `@/app/(home)/(mdx_documents)/help/${file}/page.mdx`
+      );
+      return { fileName: file, ...metadata };
+    })
+  );
+}

app/(home)/help/page.tsx

@@ -0,0 +1,32 @@
+import { promises as fsPromises } from "fs";
+import { Metadata } from "next";
+import Link from "next/link";
+import path from "path";
+import { getFileMetadata } from "./getFileMetadata";
+export default async function HelpTop() {
+  const metadatas = await getFileMetadata();
+  return (
+    <section>
+      <h2> ヘルプ記事一覧 </h2>
+      <ul>
+        {metadatas.map((metadata) => (
+          <li key={metadata.fileName}>
+            <Link href={`/help/${metadata.fileName}`}>{metadata.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+export const metadata: Metadata = {
+  title: "ヘルプページトップ",
+  description:
+    "英文、英単語専用の単語帳アプリVocabPhraseのヘルプページトップです。",
+  alternates: {
+    canonical: "/help",
+  },
+  robots: {
+    index: false,
+    follow: true,
+  },
+};

app/(top)/page.tsx

@@ -89,6 +89,12 @@ export default function Home() {
                 </div>
               ))}
             </div>
+            <h2>
+              詳しい機能などは
+              <Link href="/help" className="text-heading-M" target="_blank">
+                こちら
+              </Link>
+            </h2>
           </section>
           <section className="text-center sticky bottom-4 my-4">
             <Link

app/_components/helpKeyShortCut.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { useHotkeys } from "react-hotkeys-hook";
+
+export default function HelpKeyShortCut() {
+  useHotkeys(
+    "f1,?,shift+/",
+    () => {
+      window.open("/help", "_blank");
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: ["INPUT", "TEXTAREA", "SELECT"],
+    }
+  );
+  useHotkeys(
+    "ctrl+/",
+    () => {
+      window.open("/help/keyboard", "_blank");
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: ["INPUT", "TEXTAREA", "SELECT"],
+    }
+  );
+  return <></>;
+}

app/layout.tsx

@@ -11,6 +11,7 @@ import {
   AUTHOR_NAME,
   THEME_COLOR,
 } from "./meta";
+import HelpKeyShortCut from "./_components/helpKeyShortCut";
 
 export const metadata: Metadata = {
   metadataBase: new URL(APP_URL),
@@ -68,6 +69,7 @@ export default function RootLayout({
       )}
       <NextAuthProvider>
         <RecoilProvider>
+          <HelpKeyShortCut />
           <body className="min-h-screen">{children}</body>
         </RecoilProvider>
       </NextAuthProvider>

app/sitemap.ts

@@ -1,11 +1,20 @@
 import { MetadataRoute } from "next";
+import { getFileMetadata } from "./(home)/help/getFileMetadata";
 
-export default function sitemap(): MetadataRoute.Sitemap {
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const helpPages = (await getFileMetadata())
+    .map((page) => page.fileName)
+    .flat();
   return [
     {
       url: "https://vocab-phrase.vercel.app/",
       priority: 1,
       lastModified: new Date(),
     },
-  ];
+    helpPages.map((page) => ({
+      url: `https://vocab-phrase.vercel.app/help/${page}`,
+      priority: 0.5,
+      lastModified: new Date(),
+    })),
+  ].flat();
 }

package.json

@@ -29,7 +29,7 @@
     "react-swipeable": "^7.0.1",
     "recoil": "^0.7.7",
     "recoil-persist": "^5.1.0",
-    "remark-gfm": "v3",
+    "remark-gfm": "^4.0.0",
     "uuidv7": "^0.6.3"
   },
   "devDependencies": {