create ViewSource2 component

docs/01python/07pip/index.mdx

@@ -3,6 +3,7 @@ sidebar_position: 7
 ---
 
 import ViewSource from "@site/src/components/ViewSource/ViewSource";
+import ViewSource2 from "@site/src/components/ViewSource2";
 import Answer from "@site/src/components/Answer";
 
 # パッケージのインストール
@@ -21,7 +22,7 @@ Google Colaboratory で pip を使ってパッケージをインストールす
 
 次のようにすると、確かに `pandas` パッケージを使うことができたことが確認できます。`import pandas as pd` というのは、`pandas` パッケージを `pd` という名前でインポートするという意味です。
 
-<ViewSource path="_samples/pandas.ipynb" />
+<ViewSource2 path="_samples/pandas.ipynb" />
 
 :::info
 Google Colaboratory などの Jupyter Notebook を使った方法ではなく、直接 `.py` ファイルを使った方法の場合は、pip の使い方が異なります。

src/components/ViewSource2.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from "react";
+import usePathname from "./usePathname";
+import JupyterViewer from "react-jupyter-notebook";
+import OpenInColab from "./OpenInColab/OpenInColab";
+
+/**
+ * ipynbファイルからソースコードと出力、OpenInColabへのリンクを生成
+ * @param param0 現在ファイルからのipynbへの相対パス
+ * @param param1 Pythonの出力を表示するか
+ * @returns ソースコードと出力、OpenInColabへのリンク
+ */
+
+export default function ViewSource({
+  path,
+  noOutput = false,
+}: {
+  path: string;
+  noOutput?: boolean;
+}) {
+  const pathname = usePathname();
+  const [content, setContent] = useState();
+  useEffect(() => {
+    async function tmp() {
+      // 該当のipynbファイルをjson形式でとってくる
+      const json = await import(
+        `/docs/${pathname.slice(6)}${path.slice(0, -6)}.json`
+      );
+      setContent(json);
+    }
+    tmp();
+  }, []);
+  return (
+    <>
+      {content !== undefined && (
+        <JupyterViewer
+          rawIpynb={content}
+          language="python"
+          displayOutput={noOutput ? "hide" : "show"}
+        />
+      )}
+      <OpenInColab path={path} />
+    </>
+  );
+}