FallingNikochanのプロジェクトページを追加 (#176)

Author: na-trium-144

contents/projects/README.md

@@ -14,4 +14,7 @@
 | `description` | ✅   | 短い説明。                                                                     |
 | `tags`        | ✅   | 使用されている技術など。現状タグごとのフィルタリング機能等は提供していません。 |
 | `github`      |      | プロジェクトの GitHub 上での URL。                                             |
+| `youtube`      |      | プロジェクトの YouTube 上での URL。                                             |
 | `website`     |      | プロジェクトのウェブサイトの URL。                                             |
+
+* URL とアイコンを追加したい場合は、 [`project.tsx`](/src/templates/project.tsx) のアイコン表示部分と、末尾にある query を編集する必要があります

contents/projects/nikochan/image.jpg

@@ -0,0 +1,36 @@
+---
+title: Falling Nikochan
+slug: nikochan
+image: ./image.jpg
+date: 2024-09-24
+description: シンプルでかわいい音ゲーです。誰でも譜面を作ってシェアできます。
+tags: [JavaScript, TypeScript, React, Next.js]
+github: https://github.com/na-trium-144/falling-nikochan
+youtube: https://www.youtube.com/@nikochan144
+website: https://nikochan.natrium144.org/
+---
+
+## 概要
+
+ダウンロード不要でブラウザーからすぐに遊べる、シンプルでかわいいリズムゲーム (音ゲー) です。
+PC だけでなくタブレットやスマートフォンなどでも手軽に遊べます。
+
+さらに、 Falling Nikochan では遊ぶだけでなく、アカウント登録やログイン不要で誰でも譜面を作成することができます。
+作成した譜面はサーバーに保存され、SNS などで簡単に共有して他の人に遊んでもらうこともできます。
+
+## 遊び方
+
+ニコチャンが線に重なったときに音符を叩くだけの簡単なルールです。
+ニコチャンの位置や飛び方によらず、 PC なら (Esc 以外の) どれかのキーを押して、タブレット・スマホなら画面のどこかをタップすることで音符を叩くことができます。
+
+大きいニコチャンも通常のニコチャンと同じように叩けますが、2つのキーを同時押しまたは2本指でタップすると、通常より多くのスコアが入ります。
+ミスせず連続でニコチャンを叩くほど Chain ボーナス点が入り、より多くのスコアがもらえます。
+
+## 譜面を作ろう
+
+好きな楽曲を使って譜面を作ることができます。
+Falling Nikochan では音源をダウンロードする必要はなく、YouTube を埋め込んで音源を再生するので、YouTube にアップロードされている楽曲であればなんでも使用できます。
+音源を再配布しているわけではないので、 (違法アップロードされているものや YouTube 埋め込みでの利用を禁止されているものなどを除き) ほとんどの場合著作権などで問題になることはありません。
+
+譜面を作って Falling Nikochan のサーバーにアップロードすると、譜面ID (6桁の数字) が発行されます。
+その譜面IDまたは譜面のURL (nikochan.natrium144.org/share/〜) をSNSなどで共有することで、遊んでもらうことができます。

contents/projects/nikochan/index.mdx

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql, HeadProps, PageProps } from "gatsby";
 import { GatsbyImage } from "gatsby-plugin-image";
-import { FiGithub, FiGlobe, FiLayers } from "react-icons/fi";
+import { FiGithub, FiGlobe, FiLayers, FiYoutube } from "react-icons/fi";
 import nullthrows from "nullthrows";
 import GlobalHeader from "../components/GlobalHeader";
 import GlobalFooter from "../components/GlobalFooter";
@@ -47,7 +47,8 @@ export default function ProjectPage({
               </ul>
             )}
             {/* 表示する icon が無いときは、親要素の高さの分間隔が広くなりすぎるので、親要素ごと表示しないようにする。 */}
-            {data.mdx?.frontmatter?.github && (
+            {(data.mdx?.frontmatter?.github ||
+              data.mdx?.frontmatter?.youtube) && (
               <div className="flex gap-4 mt-6 text-4xl">
                 {data.mdx?.frontmatter?.github && (
                   <a
@@ -60,6 +61,17 @@ export default function ProjectPage({
                     <FiGithub />
                   </a>
                 )}
+                {data.mdx?.frontmatter?.youtube && (
+                  <a
+                    href={data.mdx.frontmatter.youtube}
+                    target="_blank"
+                    className="-m-1 p-1 rounded-xl hover:bg-gray-100"
+                    rel="noreferrer"
+                    aria-label="YouTubeを見る"
+                  >
+                    <FiYoutube />
+                  </a>
+                )}
               </div>
             )}
             {data.mdx?.frontmatter?.website && (
@@ -121,6 +133,7 @@ export const query = graphql`
         description
         tags
         github
+        youtube
         website
         image {
           publicURL