Add primitive registry support (#5)

Try loading http://localhost:3000/std/README.md

netlify.toml

@@ -0,0 +1,8 @@
+# https://www.netlify.com/docs/netlify-toml-reference/
+
+# The following redirect is intended for use with most SPAs that handle
+# routing internally.
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

src/App.js

@@ -11,16 +11,12 @@ function App() {
     <Router>
       <Container maxWidth="sm">
         <Switch>
-          <Route path="/manual">
-            <Manual />
-          </Route>
+          <Route path="/manual" component={Manual} />
           <Route path="/std/:stdPath" component={Registry} />
           <Route path="/std@:stdVersion/:stdPath" component={Registry} />
           <Route path="/x/:mod@:modVersion/:modPath" component={Registry} />
           <Route path="/x/:mod/:modPath" component={Registry} />
-          <Route exact path="/">
-            <Home />
-          </Route>
+          <Route exact path="/" component={Home} />
         </Switch>
       </Container>
     </Router>

src/Manual.js

@@ -1,12 +1,11 @@
 import React from "react";
-import ReactMarkdown from "react-markdown";
-import CodeBlock from "./CodeBlock";
+import Markdown from "./Markdown";
 import d from "./manual.md";
 
 // TODO showdown_toc
 
 function Manual() {
-  const [state, setState] = React.useState({ markdown: null });
+  const [state, setState] = React.useState({ markdown: "loading" });
 
   React.useEffect(() => {
     fetch(d).then(async response => {
@@ -19,11 +18,12 @@ function Manual() {
     <div>
       <a href="/">
         <img
+          alt="deno logo"
           src="https://denolib.github.io/animated-deno-logo/deno-circle-thunder.gif"
           width="200"
         />
       </a>
-      <ReactMarkdown source={state.markdown} renderers={{ code: CodeBlock }} />
+      <Markdown source={state.markdown} />
     </div>
   );
 }

src/Markdown.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import CodeBlock from "./CodeBlock";
+
+function Markdown(props) {
+  return (
+    <ReactMarkdown source={props.source} renderers={{ code: CodeBlock }} />
+  );
+}
+
+export default Markdown;

src/Registry.js

@@ -1,23 +1,102 @@
 import React from "react";
-import { Box } from "@material-ui/core";
+import { Breadcrumbs, Box } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import assert from "assert";
+import Markdown from "./Markdown";
+const DATABASE = require("./database.json");
 
-function matchParamsToRemoteUrl({
+/**
+ * Pull an entry from the database
+ * @param  {string} name
+ * @param  {string}                branch
+ * @return {import('./types').Entry}
+ */
+function getEntry(name, branch = "master") {
+  const rawEntry = DATABASE[name];
+  if (!rawEntry) {
+    return null;
+  } else if (rawEntry.type === "url") {
+    return {
+      name,
+      branch,
+      raw: rawEntry,
+      type: "url",
+      url: rawEntry.url.replace(/\$\{b}/, branch),
+      repo: rawEntry.repo.replace(/\$\{b}/, branch)
+    };
+  }
+  if (rawEntry.type === "esm") {
+    const version = branch === "master" ? "latest" : branch;
+    return {
+      name,
+      raw: rawEntry,
+      type: "esm",
+      url: rawEntry.url.replace(/\$\{v}/, version),
+      repo: rawEntry.repo.replace(/\$\{v}/, version)
+    };
+  }
+  if (rawEntry.type === "github") {
+    return {
+      name,
+      branch,
+      raw: rawEntry,
+      type: "github",
+      url: `https://raw.githubusercontent.com/${rawEntry.owner}/${
+        rawEntry.repo
+      }/${branch}${rawEntry.path || "/"}`,
+      repo: `https://github.com/${rawEntry.owner}/${rawEntry.repo}${
+        rawEntry.path ? `/tree/${branch}${rawEntry.path || "/"}` : ""
+      }`
+    };
+  }
+  return null;
+}
+
+function matchParamsToModule({
   stdPath,
   stdVersion,
-  mod,
+  modName,
   modVersion,
   modPath
 }) {
-  return "todo";
+  if (stdPath) {
+    assert(!modName && !modPath && !modVersion);
+    return { name: "std", version: stdVersion, path: stdPath };
+  } else {
+    assert(!stdPath && !stdVersion);
+    return { name: modName, version: modVersion, path: modPath };
+  }
 }
 
-function Registry({ match }) {
-  const rUrl = matchParamsToRemoteUrl(match.params);
+function Registry(params) {
+  const { match } = params;
+  const mod = matchParamsToModule(match.params);
+
+  const entry = getEntry(mod.name, mod.version);
+  const rUrl = entry.url + mod.path;
+
+  const [state, setState] = React.useState({ contents: "loading" });
+
+  React.useEffect(() => {
+    fetch(rUrl).then(async response => {
+      const m = await response.text();
+      setState({ contents: m });
+    });
+  });
+
+  console.log("rUrl", rUrl);
+  console.log("entry", entry);
+  console.log("entry", mod);
 
   return (
     <Box>
-      <p>deno mod {JSON.stringify(match)}</p>
-      <p>remote url {rUrl}</p>
+      <Breadcrumbs separator="/">
+        {params.location.pathname.split("/").map(part => {
+          return <Link href="/">{part}</Link>;
+        })}
+      </Breadcrumbs>
+      {/* TODO handle types other than markdown */}
+      <Markdown source={state.contents} />
     </Box>
   );
 }