fix: mobile design

tryandromeda · Sep 30, 2024 · 743fbaf · 743fbaf
1 parent a39acbe
commit 743fbaf
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 45 deletions.
diff --git a/deno.json b/deno.json
@@ -15,15 +15,15 @@
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
+    "fuse": "npm:[email protected]",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
     "tailwindcss": "npm:[email protected]",
     "tailwindcss/": "npm:/[email protected]/",
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "tailwindcss/typography": "npm:@tailwindcss/[email protected]",
     "$std/dotenv/load.ts": "jsr:@std/[email protected]/load",
-    "$std/path/posix": "jsr:@std/[email protected]/posix",
-    "$std/path/join": "jsr:@std/[email protected]/join",
+    "$std/path/": "jsr:@std/[email protected]/",
     "$std/front-matter": "jsr:@std/[email protected]",
     "tabler_icons_tsx/": "https://deno.land/x/[email protected]/tsx/",
     "$gfm": "jsr:@deno/[email protected]"

diff --git a/islands/DocNav.tsx b/islands/DocNav.tsx
@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any no-explicit-any no-explicit-any
-import Fuse from "https://cdn.skypack.dev/fuse.js";
+import Fuse from "fuse";
 import { useState } from "preact/hooks";
 
 interface DocEntry {
@@ -56,17 +56,17 @@ export function DocNav({
     return (
         <div>
             <button
-                className="md:hidden p-4"
+                className="md:hidden p-4 fixed top-4 right-4 z-50 bg-gray-800 rounded-full"
                 onClick={toggleNav}
             >
                 <ChevronDown />
             </button>
             <nav
-                class={`block px-10 py-2 max-w-md flex flex-col w-full h-screen transition-transform duration-300 ${
+                class={`fixed top-0 left-0 px-10 py-2 max-w-md flex flex-col w-full h-screen bg-gray-900 transition-transform duration-300 z-40 ${
                     isOpen ? "translate-x-0" : "-translate-x-full"
-                } md:translate-x-0`}
+                } md:relative md:translate-x-0 md:bg-transparent`}
             >
-                <h1 class="font-bold flex justify-center items-center">
+                <h1 class="font-bold flex justify-center items-center header2">
                     <a href="/">Andromeda</a>
                 </h1>
                 <div className="search-container my-5 text-center">
@@ -79,44 +79,40 @@ export function DocNav({
                     />
                 </div>
                 {filteredData.length > 0
-                    ? filteredData.map((
-                        { name: topicName, children: topicChildren }: any,
-                    ) => (
+                    ? filteredData.map(({
+                        name: topicName,
+                        children: topicChildren,
+                    }: any) => (
                         <div className="mt-4" key={topicName}>
                             <span className="font-bold uppercase text-gray-300">
                                 {topicName}
                             </span>
                             <ul className="font-semibold nested mt-2">
-                                {topicChildren.map(
-                                    (
-                                        {
-                                            name: routeName,
-                                            path: routePath,
-                                            id: routeId,
-                                        }: any,
-                                        i: number,
-                                    ) => {
-                                        return (
-                                            <li key={routeId} className="mb-2">
-                                                <div
-                                                    htmlFor={routeId}
-                                                    className={`py-2 pl-4 rounded-lg ${
-                                                        path === routePath
-                                                            ? "bg-slate-700 text-rose-600"
-                                                            : "hover:bg-slate-700 hover:text-rose-100"
-                                                    } font-semibold transition-colors duration-200`}
+                                {topicChildren.map(({
+                                    name: routeName,
+                                    path: routePath,
+                                    id: routeId,
+                                }: any, i: number) => {
+                                    return (
+                                        <li key={routeId} className="mb-2">
+                                            <div
+                                                htmlFor={routeId}
+                                                className={`py-2 pl-4 rounded-lg ${
+                                                    path === routePath
+                                                        ? "bg-slate-700 text-rose-600"
+                                                        : "hover:bg-slate-700 hover:text-rose-100"
+                                                } font-semibold transition-colors duration-200`}
+                                            >
+                                                <a
+                                                    href={routePath}
+                                                    className="block"
                                                 >
-                                                    <a
-                                                        href={routePath}
-                                                        className="block"
-                                                    >
-                                                        {i + 1}. {routeName}
-                                                    </a>
-                                                </div>
-                                            </li>
-                                        );
-                                    },
-                                )}
+                                                    {i + 1}. {routeName}
+                                                </a>
+                                            </div>
+                                        </li>
+                                    );
+                                })}
                             </ul>
                         </div>
                     ))

diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -6,16 +6,16 @@ export default function Error404() {
       <Head>
         <title>404 - Page not found</title>
       </Head>
-      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="px-4 py-8 mx-auto">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <img
             class="my-6"
             src="/logo.svg"
             width="128"
             height="128"
-            alt="the Fresh logo: a sliced lemon dripping with juice"
+            alt="Andromeda logo"
           />
-          <h1 class="text-4xl font-bold">404 - Page not found</h1>
+          <h1 class="text-4xl font-bold header1">404 - Page not found</h1>
           <p class="my-4">
             The page you were looking for doesn't exist.
           </p>

diff --git a/routes/docs/index.tsx b/routes/docs/index.tsx
@@ -6,7 +6,7 @@ export default function Docs() {
     return (
         <main className="flex-grow container mx-auto px-4 py-8">
             <section className="mb-12 text-center">
-                <h1 className="text-5xl font-bold mb-4"><a href="/">Andromeda Docs</a></h1>
+                <h1 className="text-5xl font-bold mb-4 header1"><a href="/">Andromeda Docs</a></h1>
                 <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                 </p>
             </section>

diff --git a/static/content/api-reference/console.md b/static/content/api-reference/console.md
@@ -0,0 +1,71 @@
+# Console API Reference
+
+The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
+
+## Methods
+
+The Console API provides the following methods:
+
+- [log](#log)
+- [debug](#debug)
+- [warn](#warn)
+- [error](#error)
+- [info](#info)
+- [assert](#assert)
+- [clear](#clear)
+
+### log
+
+```ts
+console.log("Hello", "World");
+```
+
+Prints a message to the console.
+
+### debug
+
+```ts
+console.debug("Hello", "World");
+```
+
+Prints a message to the console with the log level set to `Debug`.
+
+### warn
+
+```ts
+console.warn("Hello", "World");
+```
+
+Prints a message to the console with the log level set to `Warn`.
+
+### error
+
+```ts
+console.error("Hello", "World");
+```
+
+Prints a message to the console with the log level set to `Error`.
+
+### info
+
+```ts
+console.info("Hello", "World");
+```
+
+Prints a message to the console with the log level set to `Info`.
+
+### assert
+
+```ts
+console.assert(true, "Hello", "World");
+```
+
+Prints a message to the console with the log level set to `Error` if the first argument is `false`.
+
+### clear
+
+```ts
+console.clear();
+```
+
+Clears the console.
diff --git a/static/styles.css b/static/styles.css
@@ -100,7 +100,7 @@ header {
     color: #a0a0a0;
 }
 
-h1 {
+.header1 {
     font-size: 4em;
     margin-bottom: 10px;
     color: var(--primary-color);
@@ -135,7 +135,7 @@ h1 {
     }
 }
 
-h2 {
+.header2 {
     font-size: 2.8em;
     margin-bottom: 40px;
     color: var(--primary-color);

diff --git a/utils/toc.ts b/utils/toc.ts
@@ -10,4 +10,15 @@ export default [
             },
         ],
     },
+    {
+        name: "Andromeda APIS",
+        children: [
+            {
+                name: "Console",
+                path: "/docs/api-reference/console",
+                id: "console",
+                children: [],
+            },
+        ],
+    },
 ];