Further progress on registry UI.

Add package README view support and style adjustments

registry/src/views/package.tsx

@@ -0,0 +1,70 @@
+/// <reference path="../types/jsx.d.ts" />
+import { React, Fragment, Marked } from "../deps.ts";
+import Base from "./_base.tsx";
+import DB, { IPackage } from "../db.ts";
+import { sortVersions, getFile } from "../utils.ts";
+
+// function Package({ pkg }: { pkg: IPackage }) {
+//    const { name, versions, author } = pkg;
+
+//    const sorted = versions.sort(sortVersions);
+
+//    return (
+//       <div
+//          class="card margin"
+//          onClick={"window.location.href = '/package/" + name + "'"}
+//       >
+//          <div class="card-body">
+//             <h4 class="card-title">{name}</h4>
+
+//             <ul class="card-text">
+//                {versions.map((version) => (
+//                   <li>{version}</li>
+//                ))}
+//                {author} {sorted[0]}
+//             </ul>
+//          </div>
+//       </div>
+//    );
+// }
+
+import { Main, Menu } from "./_default.tsx";
+
+export default async function index({ packageName }: any) {
+   const pkg = await DB.package.findOne({ name: packageName });
+
+   if (!pkg)
+      return (
+         <Base>
+            <h1>Not found</h1>
+         </Base>
+      );
+
+   const readmeContent = await getFile(
+      packageName,
+      undefined,
+      "README.md"
+   ).then((res) => {
+      if (res)
+         return Marked.parse(new TextDecoder().decode(res)).content as string;
+      else return undefined;
+   });
+
+   return (
+      <Base>
+         <Main>
+            <h2 style="margin-bottom: 0">Package: {pkg.name}</h2>
+            <h4 class="text-muted" style="margin-top: 0; margin-left: .5rem">
+               By {pkg.author}
+            </h4>
+
+            {readmeContent !== undefined ? (
+               <div innerHTML={readmeContent} />
+            ) : (
+               <div class="alert alert-warning">No README.md found!</div>
+            )}
+         </Main>
+         <Menu></Menu>
+      </Base>
+   );
+}