add file explorer

isp-site/src/routes/markdown.jsx

@@ -1,5 +1,6 @@
 // Modules
 import React, { useState, useEffect } from "react";
+import reactDOM from "react-dom";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkGemoji from "remark-gemoji";
@@ -28,6 +29,7 @@ import mdtoui from "components/mdtoui";
 import { useParams } from "react-router-dom";
 import strings from "strings/markdown";
 import { getStrings, getLang } from "utils/langs";
+import { Explorer } from "utils/explorer";
 
 // Page
 export default function Markdown({ readme }) {
@@ -50,6 +52,26 @@ export default function Markdown({ readme }) {
 			.catch((error) => console.error(error));
 	});
 
+	useEffect(() => {
+		const page = document.getElementsByTagName("body")[0].classList[0];
+		const branches = document.querySelectorAll(".markdown .contents");
+
+		for (const branch of branches) {
+			Explorer(page, branch, l).then((table) => {
+				reactDOM.render(
+					<ReactMarkdown
+						children={table}
+						remarkPlugins={[remarkGfm, remarkGemoji]}
+						rehypePlugins={[rehypeRaw]}
+						allowedElements={allowedElements}
+						components={mdtoui}
+					/>,
+					branch,
+				);
+			});
+		}
+	});
+
 	return (
 		<>
 			<RenderTopNavBar language={l} />

isp-site/src/strings/markdown.js

@@ -11,5 +11,17 @@ const strings = {
 		PT_BR: "Não buscou o texto corretamente.",
 		DE: "Text nicht korrekt abgerufen.",
 	},
+	download: {
+		EN: "Download",
+		ES_LA: "Descargar",
+		PT_BR: "Baixar",
+		DE: "Herunterladen",
+	},
+	explore: {
+		EN: "Explore",
+		ES_LA: "Explorar",
+		PT_BR: "Explorar",
+		DE: "Erkunden",
+	},
 };
 export default strings;

isp-site/src/utils/explorer.js

@@ -0,0 +1,58 @@
+import strings from "strings/markdown";
+import { getStrings, getLang } from "utils/langs";
+
+async function getGithubRepoContents(owner, repo, branch) {
+	const apiUrl = `https://api.github.com/repos/${owner}/${repo}/git/trees/${branch}?recursive=1`;
+
+	try {
+		const response = await fetch(apiUrl);
+		const data = await response.json();
+
+		return data.tree || [];
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+		return [];
+	}
+}
+
+function formatGithubContents(contents, name, language) {
+	const l = getLang(language);
+	const s = getStrings(strings, l);
+	const dlUrl = `https://raw.githubusercontent.com/thedannywahl/instructure-security-package/${name}/`;
+	const dirs = contents.filter((item) => item.type === "tree"); // TODO: Sort
+	const files = contents
+		.filter((item) => item.type === "blob")
+		.filter((item) => item.path !== ".gitignore");
+
+	let htmlTable = `<details>
+    <summary>🕵️ ${s.explore}</summary>\r\n\r\n`;
+
+	for (const [i, dir] of dirs.entries()) {
+		htmlTable += `| ${dir.path} | |\r\n| ---------------- | - |`;
+
+		for (const file of files) {
+			if (file.path.startsWith(dir.path)) {
+				htmlTable += `\r\n| [${file.path.replace(
+					`${dir.path}/`,
+					"",
+				)}](${encodeURI(dlUrl + file.path)}) | |`;
+			}
+		}
+		if (i < dirs.length - 1) htmlTable += "\r\n\r\n";
+	}
+
+	htmlTable += "</details>";
+
+	return htmlTable;
+}
+
+export async function Explorer(page, branch, language) {
+	const owner = "thedannywahl";
+	const repo = "instructure-security-package";
+	const name = [...branch.classList].filter((c) => ~c.indexOf(page)).toString();
+
+	const contents = await getGithubRepoContents(owner, repo, name);
+
+	const mdTable = formatGithubContents(contents, name, language);
+	return mdTable;
+}