updating

components/CourseCard.tsx

@@ -7,7 +7,7 @@ export default function CourseCard(props: { course: Course }) {
       class="py-4 gray-200 hover:opacity-75"
       style={{ order: course.order }}
     >
-      <a title={course.title} href={btoa(`/${course.slug}`)}>
+      <a title={course.title} href={`/${course.slug}`}>
         <h3 class="gray-900 font-bold">
           {course.title}
         </h3>

components/Nav.tsx

@@ -19,7 +19,10 @@ export default function NavBar() {
             title="نخله جي اس"
             class="text-2xl ml-1 font-bold hover:animate-pulse"
           >
-            NakhlahJS
+            <div class="flex items-center">
+              <span class="text-yellow-500">JS</span>
+              <span class="ml-2 font-bold text-2xl">نخلة</span>
+            </div>
           </a>
         </div>
       </div>

fresh.gen.ts

@@ -2,20 +2,20 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $_slug_ from "./routes/[slug].tsx";
+import * as $_slug_ from "./routes/[...slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
-import * as $api_joke from "./routes/api/joke.ts";
+import * as $api_test from "./routes/api/test.ts";
 import * as $index from "./routes/index.tsx";
 import * as $Editor from "./islands/Editor.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/[slug].tsx": $_slug_,
+    "./routes/[...slug].tsx": $_slug_,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
-    "./routes/api/joke.ts": $api_joke,
+    "./routes/api/test.ts": $api_test,
     "./routes/index.tsx": $index,
   },
   islands: {

main.ts

@@ -22,7 +22,8 @@ async function getAllPaths(directory: string): Promise<string[]> {
         "",
       );
       if (!relativePath.endsWith(".json")) {
-        paths.push(btoa(relativePath));
+        const normalizedPath = relativePath.replace(/\\/g, "/");
+        paths.push(normalizedPath);
       }
     }
   }

routes/[slug].tsx → routes/[...slug].tsx

@@ -10,8 +10,7 @@ import EditButton from "../components/EditButton.tsx";
 export const handler: Handlers<Course> = {
   async GET(_req, ctx) {
     try {
-      const slug = atob(ctx.params.slug);
-      const course = await getCourse(slug);
+      const course = await getCourse(ctx.params.slug);
       if (course === null) return ctx.renderNotFound();
       return ctx.render(course);
     } catch {

routes/api/test.ts

@@ -0,0 +1,5 @@
+import { FreshContext } from "$fresh/server.ts";
+
+export const handler = (_req: Request, _ctx: FreshContext): Response => {
+  return new Response("200");
+};

static/resizer.js

@@ -7,15 +7,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
   if (isMobile()) {
     Split(["#split-0", "#split-1"], {
-      sizes: [0, 100],
+      sizes: [2, 100],
       gutterAlign: "start",
-      minSize: 0,
-      gutterSize: 13,
+      minSize: 1,
+      gutterSize: 15,
     });
   } else {
     Split(["#split-0", "#split-1"], {
       sizes: [50, 50],
-      gutterAlign: "start",
+      gutterAlign: "end",
       minSize: 0,
       gutterSize: 13,
     });

static/styles.css

@@ -20,8 +20,8 @@ body .markdown-body {
 }
 
 .gutter {
-  z-index: 99;
-  background-color: #796666;
+  z-index: 2;
+  background-color: var(--fallback-bc,oklch(var(--bc)/.2));
   background-repeat: no-repeat;
   background-position: 50%;
 }