feat: make mobile work (#45)

Co-authored-by: Lino Le Van <linolevan@Linos-MacBook-Air.local>

Author: lino-levan

deno.jsonc

@@ -12,6 +12,6 @@
   },
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "https://esm.sh/preact@10.17.1"
+    "jsxImportSource": "https://esm.sh/preact@10.19.3"
   }
 }

deps.ts

@@ -1,5 +1,5 @@
-export type { JSX } from "https://esm.sh/preact@10.17.1";
-export { renderToString } from "https://esm.sh/preact-render-to-string@6.2.1";
+export type { JSX } from "https://esm.sh/preact@10.19.3";
+export { renderToString } from "https://esm.sh/preact-render-to-string@6.3.1";
 
 export {
   fromFileUrl,
@@ -8,44 +8,45 @@ export {
   resolve,
   toFileUrl,
   win32,
-} from "https://deno.land/std@0.199.0/path/mod.ts";
-export { walkSync } from "https://deno.land/std@0.199.0/fs/walk.ts";
-export { parse as parseYaml } from "https://deno.land/std@0.199.0/yaml/mod.ts";
-export { parse as parseJsonc } from "https://deno.land/std@0.199.0/jsonc/mod.ts";
-export { parse as parseToml } from "https://deno.land/std@0.199.0/toml/mod.ts";
-export { copySync } from "https://deno.land/std@0.199.0/fs/copy.ts";
-export { serveDir } from "https://deno.land/std@0.199.0/http/file_server.ts";
-export { extract } from "https://deno.land/std@0.199.0/front_matter/any.ts";
-export { existsSync } from "https://deno.land/std@0.199.0/fs/exists.ts";
+} from "https://deno.land/std@0.210.0/path/mod.ts";
+export { walkSync } from "https://deno.land/std@0.210.0/fs/walk.ts";
+export { parse as parseYaml } from "https://deno.land/std@0.210.0/yaml/mod.ts";
+export { parse as parseJsonc } from "https://deno.land/std@0.210.0/jsonc/mod.ts";
+export { parse as parseToml } from "https://deno.land/std@0.210.0/toml/mod.ts";
+export { copySync } from "https://deno.land/std@0.210.0/fs/copy.ts";
+export { serveDir } from "https://deno.land/std@0.210.0/http/file_server.ts";
+export { extract } from "https://deno.land/std@0.210.0/front_matter/any.ts";
+export { existsSync } from "https://deno.land/std@0.210.0/fs/exists.ts";
 
-export { launch } from "https://deno.land/x/astral@0.2.3/mod.ts";
+export { launch } from "https://deno.land/x/astral@0.3.2/mod.ts";
 
-export * as esbuild from "https://deno.land/x/esbuild@v0.17.19/mod.js";
-export { denoPlugins } from "https://deno.land/x/esbuild_deno_loader@0.8.1/mod.ts";
+export * as esbuild from "https://deno.land/x/esbuild@v0.19.2/mod.js";
+export { denoPlugins } from "https://deno.land/x/esbuild_deno_loader@0.8.2/mod.ts";
 
-export { createGenerator } from "https://esm.sh/@unocss/core@0.55.2";
-export { presetUno } from "https://esm.sh/@unocss/preset-uno@0.55.2";
+export { createGenerator } from "https://esm.sh/@unocss/core@0.58.0";
+export { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";
 
 export { decode } from "https://deno.land/x/pngs@0.1.1/mod.ts";
 
-export { default as Github } from "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/brand-github.tsx";
-export { default as ExternalLink } from "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/external-link.tsx";
-export { default as ChevronDown } from "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/chevron-down.tsx";
+export { default as Github } from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/brand-github.tsx";
+export { default as ExternalLink } from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/external-link.tsx";
+export { default as ChevronDown } from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/chevron-down.tsx";
+export { default as IconMenu2 } from "https://deno.land/x/tabler_icons_tsx@0.0.6/tsx/menu-2.tsx";
 
 export { Command } from "https://deno.land/x/cliffy@v1.0.0-rc.3/command/mod.ts";
 
-export { type Plugin, unified } from "https://esm.sh/unified@11.0.0";
-export { default as remarkParse } from "https://esm.sh/remark-parse@10.0.2";
-export { default as remarkGfm } from "https://esm.sh/remark-gfm@3.0.1";
-export { default as remarkRehype } from "https://esm.sh/remark-rehype@10.1.0";
-export { default as rehypeStringify } from "https://esm.sh/rehype-stringify@9.0.3";
+export { type Plugin, unified } from "https://esm.sh/unified@11.0.4";
+export { default as remarkParse } from "https://esm.sh/remark-parse@11.0.0";
+export { default as remarkGfm } from "https://esm.sh/remark-gfm@4.0.0";
+export { default as remarkRehype } from "https://esm.sh/remark-rehype@11.0.0";
+export { default as rehypeStringify } from "https://esm.sh/rehype-stringify@10.0.0";
 
 export {
   all,
   createStarryNight,
   type Grammar,
-} from "https://esm.sh/@wooorm/starry-night@2.1.1";
-export { toString } from "https://esm.sh/hast-util-to-string@2.0.0";
+} from "https://esm.sh/@wooorm/starry-night@3.2.0";
+export { toString } from "https://esm.sh/hast-util-to-string@3.0.0";
 export { visit } from "https://esm.sh/unist-util-visit@5.0.0";
 export {
   type Element,

src/build.ts

@@ -110,7 +110,7 @@ export async function build() {
     Deno.mkdirSync(resolve("build", folder), { recursive: true });
     Deno.writeTextFileSync(
       resolve("build", folder, "index.html"),
-      await render(config, magic, folder, plugins),
+      await render(magic, folder, plugins),
     );
   }
 

src/dev.ts

@@ -92,7 +92,6 @@ export async function dev(hostname = "0.0.0.0", port = 8000) {
 
     return new Response(
       await render(
-        config,
         getMagic(),
         resolve("pages", pathname.slice(1)),
         plugins,

src/lib/page.tsx

@@ -1,5 +1,5 @@
 import type { Config, FileTypes, JSX, Magic, RouteMap } from "./types.ts";
-import { ExternalLink, Github, posix } from "../../deps.ts";
+import { ExternalLink, Github, IconMenu2, posix } from "../../deps.ts";
 import { renderMD } from "../utils.tsx";
 import { Sidebar } from "./sidebar.tsx";
 
@@ -13,9 +13,20 @@ export function Header(props: {
 }) {
   return (
     <header class="w-full h-16 shadow-sm flex gap-4 items-center px-4 bg-white dark:bg-black text-gray-800 dark:text-gray-200 z-10">
+      <details class="sm:hidden">
+        <summary class="text-black dark:text-white hover:text-gray-800 dark:hover:text-gray-300">
+          <IconMenu2 />
+        </summary>
+        <div class="bg-white dark:bg-black absolute top-0 left-0 h-screen">
+          <Sidebar
+            class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 flex flex-col gap-2"
+            route="TOP"
+          />
+        </div>
+      </details>
       <a href="/">
         <h1 class="font-semibold text-lg text-gray-800 flex items-center gap-2 dark:text-gray-200 mr-4">
-          <image src="/icon.png" class="w-8 h-8" />
+          <img src="/icon.png" class="w-8 h-8" />
           {props.title}
         </h1>
       </a>
@@ -25,7 +36,7 @@ export function Header(props: {
         {props.github && (
           <a
             target="_blank"
-            class="text-black dark:text-white"
+            class="text-black dark:text-white hover:text-gray-800 dark:hover:text-gray-300"
             href={props.github}
           >
             <Github />
@@ -45,12 +56,12 @@ export function Footer(
 ) {
   return (
     <footer class="px-4 py-12 w-full flex justify-center text-gray-800 dark:text-gray-200 border-t dark:border-gray-700 bg-white dark:bg-black">
-      <div class="max-w-screen-lg w-full flex flex-wrap justify-around">
+      <div class="max-w-screen-lg w-full flex flex-col sm:flex-row flex-wrap justify-around">
         <image src="/icon.png" class="w-8 h-8" />
         {Object.entries(props.footer).map((
           [name, value],
         ) => (
-          <div>
+          <div class="py-4 sm:py-0">
             <p class="font-bold pb-4">{name}</p>
             <ul class="flex flex-col gap-2">
               {value.map((value) => (
@@ -69,7 +80,7 @@ export function Footer(
             </ul>
           </div>
         ))}
-        <div class="h-full flex flex-col justify-around">
+        <div class="py-4 sm:h-full flex flex-row-reverse sm:flex-col justify-around">
           {props.copyright && (
             <p class="whitespace-pre text-gray-500 dark:text-gray-400 text-sm">
               {props.copyright}
@@ -82,7 +93,7 @@ export function Footer(
                 class="w-min"
                 href={props.github}
               >
-                <Github class="text-gray-500 hover:text-gray-900" />
+                <Github class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-300" />
               </a>
             )}
           </div>
@@ -100,7 +111,6 @@ export async function page(props: {
   };
   options: {
     markdown: string;
-    route_map: RouteMap[];
     route: string;
     config: Config;
     magic: Magic;
@@ -171,12 +181,11 @@ export async function page(props: {
             >
               {!hide_navbar && (
                 <Sidebar
-                  class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 flex flex-col gap-2"
-                  route_map={props.options.route_map}
+                  class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 hidden sm:flex flex-col gap-2"
                   route={props.options.route}
                 />
               )}
-              <div class="flex-grow max-w-screen-lg flex flex-col gap-8 py-4 overflow-hidden">
+              <div class="flex-grow max-w-screen-lg flex flex-col gap-8 py-4 px-4 overflow-hidden">
                 <h1 class="text-5xl font-bold text-gray-800 dark:text-gray-100">
                   {props.page.title}
                 </h1>

src/lib/render.ts

@@ -10,8 +10,8 @@ import {
 
 import { Footer, Header, page } from "./page.tsx";
 import { get_route_map, resolve_file } from "./route_map.ts";
-import type { Config, Magic, PluginResult } from "./types.ts";
-import { getHeaderElements, importBuild } from "../utils.tsx";
+import type { Magic, PluginResult } from "./types.ts";
+import { getHeaderElements, importBuild, readConfig } from "../utils.tsx";
 
 const unoConfig = existsSync("./uno.config.ts")
   ? (await importBuild("./uno.config.ts")).default
@@ -36,12 +36,12 @@ async function applyUno(html: string) {
 }
 
 export async function render(
-  config: Config,
   magic: Magic,
   path: string,
   plugins: PluginResult[],
   dev = false,
 ) {
+  const config = readConfig();
   const base_path = resolve("pages", path);
   const [file_type, markdown] = resolve_file(base_path);
 
@@ -85,7 +85,7 @@ export async function render(
   }
 
   const frontmatter = extract(markdown);
-  const route_map = get_route_map(resolve("pages"), true);
+  get_route_map(resolve("pages"), true);
 
   const title = frontmatter.attrs.title as string ?? "No Title";
   const description = frontmatter.attrs.description as string ??
@@ -99,7 +99,6 @@ export async function render(
       page: { title, description, hide_navbar },
       options: {
         markdown,
-        route_map,
         route: "/" + path,
         config,
         magic,

src/lib/route_map.ts

@@ -11,8 +11,10 @@ export function resolve_file(path: string) {
   );
 }
 
+export let global_route_map: RouteMap[] = [];
+
 export function get_route_map(directory: string, top_level = false) {
-  const route_map: RouteMap[] = [];
+  const route_map = [];
 
   for (const entry of Deno.readDirSync(directory)) {
     if (entry.name.startsWith("_")) continue;
@@ -51,5 +53,9 @@ export function get_route_map(directory: string, top_level = false) {
 
   route_map.sort((a, b) => a.index - b.index);
 
+  if (top_level) {
+    global_route_map = route_map;
+  }
+
   return route_map;
 }

src/lib/sidebar.tsx

@@ -1,16 +1,28 @@
 import { ChevronDown } from "../../deps.ts";
 import type { RouteMap } from "./types.ts";
+import { global_route_map } from "./route_map.ts";
+import { readConfig } from "../utils.tsx";
 
 function simplify(url: string) {
   return url.replaceAll("/", "").replaceAll("-", "");
 }
 
 export function Sidebar(
-  props: { route_map: RouteMap[]; class: string; route: string },
+  props: { route_map?: RouteMap[]; class: string; route: string },
 ) {
+  const config = readConfig();
+  const route_map = props.route_map ?? global_route_map;
   return (
     <div class={props.class}>
-      {props.route_map.map((route) => (
+      {!props.route_map && (
+        <a href="/">
+          <h1 class="font-semibold text-lg text-gray-800 dark:text-gray-200 flex items-center gap-2 mr-4">
+            <img src="/icon.png" class="w-8 h-8" />
+            {config.title}
+          </h1>
+        </a>
+      )}
+      {route_map.map((route) => (
         <>
           {route.sub_route_map
             ? (

src/utils.tsx

@@ -149,7 +149,7 @@ export async function importBuild(entrypoint: string) {
     bundle: true,
     write: false,
     format: "esm",
-    jsxImportSource: "https://esm.sh/preact@10.17.0",
+    jsxImportSource: "https://esm.sh/preact@10.19.3",
     jsx: "automatic",
   });
   const file = new TextDecoder().decode(result.outputFiles[0].contents);

tests/end_to_end/unocss/uno.config.ts

@@ -1,14 +1,11 @@
-import {
-  defineConfig,
-  presetTypography,
-  presetUno,
-} from "https://esm.sh/unocss@0.55.2";
+import { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";
+import { presetTypography } from "https://esm.sh/@unocss/preset-typography@0.58.0";
 
-export default defineConfig({
+export default {
   presets: [
     presetUno({
       dark: "media",
     }),
     presetTypography(),
   ],
-});
+};

www/pages/core-concepts/unocss.md

@@ -8,36 +8,34 @@ Pyro uses UnoCSS for styling, both internally and for user code. By default, the
 configuration that Pyro uses for UnoCSS looks something like:
 
 ```ts
-import { defineConfig, presetUno } from "https://esm.sh/unocss@0.55.2";
+import { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";
 
-export default defineConfig({
+export default {
   presets: [
     presetUno({
       dark: "media",
     }),
   ],
-});
+};
 ```
 
 Some users would prefer to have more UnoCSS features. This is supported with
 zero extra configuration outside of just making the file! At the top level of
 your site, just add a `uno.config.ts` file. Below is an example of configuring
-UnoCSS to add the `presetTypography` plugin.
+UnoCSS to add the `presetTypography` plugin. Make sure not to import from the
+main `uno` package, as that is unsupported.
 
 ```ts
 // uno.config.ts
-import {
-  defineConfig,
-  presetTypography,
-  presetUno,
-} from "https://esm.sh/unocss@0.55.2";
+import { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";
+import { presetTypography } from "https://esm.sh/@unocss/preset-typography@0.58.0";
 
-export default defineConfig({
+export default {
   presets: [
     presetUno({
       dark: "media",
     }),
     presetTypography(),
   ],
-});
+};
 ```