OSSに関する案内をソングページに追加

src/components/layout.scss

@@ -869,10 +869,6 @@ $dropdown-item-active-background-color: $primary;
       }
     }
   }
-
-  .explain-humming {
-    @extend .is-max-widescreen;
-  }
 }
 
 .markdown {

src/components/ossGuidance.tsx

@@ -0,0 +1,77 @@
+import { faGithub } from "@fortawesome/free-brands-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Link } from "gatsby"
+import React, { CSSProperties } from "react"
+
+export const OssGuidance: React.FC<{
+  className?: string
+  isDark: boolean // Nemoのページかどうか
+}> = ({ className, isDark }) => {
+  return (
+    <section className="section">
+      <div
+        className={`${className} container is-max-desktop is-flex is-flex-direction-column`}
+      >
+        <h2 id="oss" className="jump-anchor-header-padding title">
+          <Link
+            to={`#oss`}
+            className={!isDark ? "has-text-black" : "has-text-white"}
+          >
+            オープンソース
+          </Link>
+        </h2>
+        <p className="is-size-5">
+          VOICEVOX は OSS（オープンソース・ソフトウェア）版 VOICEVOX
+          をもとに構築されています。
+        </p>
+        <p className="is-size-5">
+          製品版と OSS 版の違いやモジュール構成は&nbsp;
+          <a
+            href="https://github.com/VOICEVOX/voicevox/blob/main/docs/%E5%85%A8%E4%BD%93%E6%A7%8B%E6%88%90.md"
+            target="_blank"
+            rel="noreferrer"
+            className="has-text-weight-bold is-underlined"
+          >
+            VOICEVOX の全体構成
+          </a>
+          &nbsp;をご参照ください。
+        </p>
+        <p className="is-size-5">
+          ソフトウェア部分は Electron + Vue 、音声合成エンジン部分は Python +
+          FastAPI です。
+        </p>
+        <p className="is-size-5">
+          追加したい・改善したい機能があれば、ぜひ開発にご参加ください。
+        </p>
+        <div className="buttons mt-3">
+          <a
+            className={`button ${!isDark ? "is-outlined" : "is-dark"}`}
+            href="https://github.com/VOICEVOX/voicevox"
+            target="_blank"
+            rel="noreferrer"
+            type="button"
+            role={"button"}
+          >
+            <span className="icon">
+              <FontAwesomeIcon icon={faGithub} />
+            </span>
+            <span>VOICEVOX エディター</span>
+          </a>
+          <a
+            className={`button ${!isDark ? "is-outlined" : "is-dark"}`}
+            href="https://github.com/VOICEVOX/voicevox_engine"
+            target="_blank"
+            rel="noreferrer"
+            type="button"
+            role={"button"}
+          >
+            <span className="icon">
+              <FontAwesomeIcon icon={faGithub} />
+            </span>
+            <span>VOICEVOX エンジン</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/index.tsx

@@ -1,5 +1,3 @@
-import { faGithub } from "@fortawesome/free-brands-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Link } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 import React, { useContext, useEffect, useRef, useState } from "react"
@@ -17,6 +15,7 @@ import Logo from "../images/logo.svg"
 import landingMovie from "../movies/landing.mp4"
 import { CharacterInfo, CharacterKey } from "../types/dormitoryCharacter"
 import { getProductPageUrl } from "../urls"
+import { OssGuidance } from "../components/ossGuidance"
 
 // キャラクター表示
 const CharacterCard = React.memo(
@@ -203,66 +202,7 @@ const Main = React.memo(
               </div>
             </section>
 
-            <section className="section">
-              <div className="container is-max-desktop is-flex is-flex-direction-column">
-                <h2 id="oss" className="jump-anchor-header-padding title">
-                  <Link to={`#oss`} className="has-text-black">
-                    オープンソース
-                  </Link>
-                </h2>
-                <p className="is-size-5">
-                  VOICEVOX は OSS（オープンソース・ソフトウェア）版 VOICEVOX
-                  をもとに構築されています。
-                </p>
-                <p className="is-size-5">
-                  製品版と OSS 版の違いやモジュール構成は&nbsp;
-                  <a
-                    href="https://github.com/VOICEVOX/voicevox/blob/main/docs/%E5%85%A8%E4%BD%93%E6%A7%8B%E6%88%90.md"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="has-text-weight-bold is-underlined"
-                  >
-                    VOICEVOX の全体構成
-                  </a>
-                  &nbsp;をご参照ください。
-                </p>
-                <p className="is-size-5">
-                  ソフトウェア部分は Electron + Vue 、音声合成エンジン部分は
-                  Python + FastAPI です。
-                </p>
-                <p className="is-size-5">
-                  追加したい・改善したい機能があれば、ぜひ開発にご参加ください。
-                </p>
-                <div className="buttons mt-3">
-                  <a
-                    className="button is-outlined"
-                    href="https://github.com/VOICEVOX/voicevox"
-                    target="_blank"
-                    rel="noreferrer"
-                    type="button"
-                    role={"button"}
-                  >
-                    <span className="icon">
-                      <FontAwesomeIcon icon={faGithub} />
-                    </span>
-                    <span>VOICEVOX エディター</span>
-                  </a>
-                  <a
-                    className="button is-outlined"
-                    href="https://github.com/VOICEVOX/voicevox_engine"
-                    target="_blank"
-                    rel="noreferrer"
-                    type="button"
-                    role={"button"}
-                  >
-                    <span className="icon">
-                      <FontAwesomeIcon icon={faGithub} />
-                    </span>
-                    <span>VOICEVOX エンジン</span>
-                  </a>
-                </div>
-              </div>
-            </section>
+            <OssGuidance isDark={false} />
 
             <section className="section">
               <div className="container is-max-desktop is-flex is-flex-direction-column">

src/pages/song/index.tsx

@@ -17,6 +17,7 @@ import { useDetailedCharacterInfo } from "../../hooks/useDetailedCharacterInfo"
 import shareThumb from "../../images/song/share-thumb.png"
 import { CharacterInfo, CharacterKey } from "../../types/dormitoryCharacter"
 import { getProductPageUrl } from "../../urls"
+import { OssGuidance } from "../../components/ossGuidance"
 
 // キャラクターごとのカード表示
 const CharacterCard = React.memo(
@@ -298,7 +299,7 @@ export default () => {
             </div>
           </div>
 
-          <div className="container explain-humming">
+          <div className="container is-max-desktop">
             <h2 className="title">ハミングとは？</h2>
             <p>
               喋り声のデータを用いて音声ライブラリを作成し、
@@ -309,7 +310,7 @@ export default () => {
           </div>
         </section>
 
-        {/* TODO: トーク側にあるOSSとかの案内を追加 */}
+        <OssGuidance isDark={true} />
       </main>
     </Page>
   )