Rendering markdown in readme

tinyexec/mod.ts

@@ -1 +1 @@
-export { x } from "./tinyexec.ts";
+export * from "./tinyexec.ts";

tinyexec/tinyexec.ts

@@ -45,4 +45,4 @@ export function x(
       yield* tinyproc.kill();
     }
   });
-}
+}

www/components/api.tsx

@@ -18,6 +18,7 @@ import {
   Punctuation,
 } from "./tokens.tsx";
 import { useMDX } from "../hooks/use-mdx.tsx";
+import { useMarkdown } from "../hooks/use-markdown.tsx";
 
 interface DescriptionProps {
   pkg: Package;
@@ -147,12 +148,9 @@ function* TSInterfaceDef(
 ): Operation<JSXElement> {
   const elements: JSXElement[] = [];
   for (const property of interfaceDef.properties) {
-    const jsDoc = yield* call(function* (): Operation<JSXElement | undefined> {
-      if (property.jsDoc?.doc) {
-        const mod = yield* useMDX(property.jsDoc?.doc);
-        return mod.default();
-      }
-    });
+    const jsDoc = property.jsDoc?.doc
+      ? yield* useMarkdown(property.jsDoc?.doc)
+      : undefined;
     elements.push(
       <li class={`${jsDoc ? "my-0 border-l-2 first:-mt-5" : "my-1"}`}>
         {jsDoc

www/hooks/use-markdown.tsx

@@ -0,0 +1,10 @@
+import { call, type Operation } from "effection";
+import type { JSXElement } from "revolution/jsx-runtime";
+import { useMDX } from './use-mdx.tsx';
+
+export function* useMarkdown(markdown: string): Operation<JSXElement> {
+  return yield* call(function* (): Operation<JSXElement> {
+    const mod = yield* useMDX(markdown);
+    return mod.default();
+  })
+}

www/routes/package.tsx

@@ -6,6 +6,7 @@ import type { RoutePath, SitemapRoute } from "effection-www/plugins/sitemap.ts";
 import { usePackages } from "../hooks/use-packages.ts";
 import { Exports } from "../components/exports.tsx";
 import { API } from "../components/api.tsx";
+import { useMarkdown } from "../hooks/use-markdown.tsx";
 
 export function packageRoute(): SitemapRoute<JSXElement> {
   return {
@@ -54,13 +55,12 @@ export function packageRoute(): SitemapRoute<JSXElement> {
         <AppHTML>
           <article class="prose">
             <header>
-              <h1>{pkg.packageName}</h1>
-              <p>
-                <pkg.MDXDescription />
-              </p>
+              <>
+                {yield* useMarkdown(pkg.readme)}
+              </>
             </header>
             <Exports pkg={pkg} />
-            <h2 class="mb-0">Documentation</h2>
+            <h2 class="mb-0">API</h2>
             {yield* API({ pkg })}
           </article>
         </AppHTML>