環境変数を siteConfig 経由で渡す

Author: chelproc

.github/workflows/deploy.yml

@@ -14,8 +14,6 @@ jobs:
         with:
           fetch-depth: 0
       - run: npm ci && npm run build
-        env:
-          COMMIT_REF: ${{ github.sha }}
       - uses: actions/upload-pages-artifact@v2
         with:
           path: build

docusaurus.config.js

@@ -1,3 +1,4 @@
+const { execSync } = require("node:child_process");
 const math = require("remark-math");
 const katex = require("rehype-katex");
 
@@ -18,6 +19,9 @@ module.exports = {
   markdown: {
     mermaid: true,
   },
+  customFields: {
+    commitRef: execSync("git rev-parse HEAD").toString().trim(),
+  },
   themes: ["@docusaurus/theme-mermaid"],
   presets: [
     [

src/components/ViewSource/index.jsx

@@ -2,29 +2,36 @@ import React from "react";
 import clsx from "clsx";
 import { BiLinkExternal } from "react-icons/bi";
 import { SiGithub } from "react-icons/si";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./styles.module.css";
-import { COMMIT_REF } from "../../env";
+
+const repositoryRootPathLength =
+  import.meta.url.split("/").slice(0, -4).join("/").length + 1;
 
 /**
  * @param {Object} props
+ * @param {string} props.url
  * @param {boolean} props.path
  * @param {boolean} props.noCodeSandbox
  */
 export default function ViewSource({ url, path, noCodeSandbox }) {
-  const fullPathSplit = url.split("/");
-  const docsIndex = fullPathSplit.indexOf("docs");
-  const srcIndex = fullPathSplit.indexOf("src");
-  const baseIndex = docsIndex !== -1 ? docsIndex : srcIndex;
-  const pathFromBase = fullPathSplit.slice(baseIndex);
-  const dirPath = pathFromBase.slice(0, pathFromBase.length - 1);
-  const relativePath = `${dirPath.join("/")}/${path}`;
+  const basePath = url.slice(repositoryRootPathLength);
+  const commitRef = useDocusaurusContext()?.siteConfig.customFields.commitRef;
+  const gitHubUrl = new URL(
+    path,
+    `https://github.com/ut-code/utcode-learn/tree/${commitRef}/${basePath}`
+  );
+  const codeSandboxUrl = new URL(
+    path,
+    `https://githubbox.com/ut-code/utcode-learn/tree/${commitRef}/${basePath}`
+  );
   return (
     <div className={styles.root}>
       <a
         className={clsx("button button--secondary", styles.button)}
         target="_blank"
         rel="noopener"
-        href={`https://github.com/ut-code/utcode-learn/tree/${COMMIT_REF}/${relativePath}`}
+        href={gitHubUrl.toString()}
       >
         <SiGithub className={styles.icon} />
         GitHub で表示
@@ -34,7 +41,7 @@ export default function ViewSource({ url, path, noCodeSandbox }) {
           className={clsx("button button--primary", styles.button)}
           target="_blank"
           rel="noopener"
-          href={`https://githubbox.com/ut-code/utcode-learn/tree/${COMMIT_REF}/${relativePath}`}
+          href={codeSandboxUrl.toString()}
         >
           このプログラムを実行する
           <BiLinkExternal className={styles.icon} />