From c1c126745d3950333ef6b1a944ddaf4e67c7016c Mon Sep 17 00:00:00 2001
From: teabyte <yazan4code@gmail.com>
Date: Sun, 7 Jan 2024 00:55:41 +0300
Subject: [PATCH] cleaning

---
 components/BlogIndexPage.tsx | 44 ------------------
 components/Button.tsx        | 12 -----
 components/CourseCard.tsx    | 20 ++++++++
 components/Nav.tsx           |  2 +-
 islands/Editor.tsx           |  5 +-
 routes/[slug].tsx            |  4 +-
 routes/index.tsx             | 89 ++++++------------------------------
 static/resizer.js            | 24 ++++++++--
 utils/course.ts              | 43 +++++++++++++----
 utils/types.ts               | 19 ++++++++
 10 files changed, 109 insertions(+), 153 deletions(-)
 delete mode 100644 components/BlogIndexPage.tsx
 delete mode 100644 components/Button.tsx
 create mode 100644 components/CourseCard.tsx
 create mode 100644 utils/types.ts

diff --git a/components/BlogIndexPage.tsx b/components/BlogIndexPage.tsx
deleted file mode 100644
index cbde736..0000000
--- a/components/BlogIndexPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PageProps } from "$fresh/server.ts";
-
-interface Post {
-  slug: string;
-  title: string;
-  publishedAt: Date;
-  content: string;
-  snippet: string;
-}
-
-export default function BlogIndexPage(props: PageProps<Post[]>) {
-  const posts = props.data;
-  return (
-    <main class="max-w-screen-md px-4 pt-16 mx-auto">
-      <h1 class="text-5xl font-bold">Blog</h1>
-      <div class="mt-8">
-        {posts.map((post) => <PostCard post={post} />)}
-      </div>
-    </main>
-  );
-}
-
-function PostCard(props: { post: Post }) {
-  const { post } = props;
-  return (
-    <div class="py-8 border(t gray-200)">
-      <a class="sm:col-span-2" href={`/${post.slug}`}>
-        <h3 class="text(3xl gray-900) font-bold">
-          {post.title}
-        </h3>
-        <time class="text-gray-500">
-          {new Date(post.publishedAt).toLocaleDateString("en-us", {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          })}
-        </time>
-        <div class="mt-4 text-gray-900">
-          {post.snippet}
-        </div>
-      </a>
-    </div>
-  );
-}
diff --git a/components/Button.tsx b/components/Button.tsx
deleted file mode 100644
index f1b80a0..0000000
--- a/components/Button.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { JSX } from "preact";
-import { IS_BROWSER } from "$fresh/runtime.ts";
-
-export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      {...props}
-      disabled={!IS_BROWSER || props.disabled}
-      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
-    />
-  );
-}
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
new file mode 100644
index 0000000..c08b892
--- /dev/null
+++ b/components/CourseCard.tsx
@@ -0,0 +1,20 @@
+import { Course } from "../utils/types.ts";
+
+export default function CourseCard(props: { course: Course }) {
+  const { course } = props;
+  return (
+    <div
+      class="py-4 gray-200 hover:opacity-75"
+      style={{ order: course.order }}
+    >
+      <a href={btoa(`/${course.slug}`)}>
+        <h3 class="gray-900 font-bold">
+          {course.title}
+        </h3>
+        <div class="text-gray-500 truncate text-ellipsis max-w-[300px] md:max-w-full overflow-hidden">
+          {course.snippet}
+        </div>
+      </a>
+    </div>
+  );
+}
diff --git a/components/Nav.tsx b/components/Nav.tsx
index ec604a6..0a6489b 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -19,7 +19,7 @@ export default function NavBar() {
           <li>
             <a
               href={menu.href}
-              class={"text-gray-500 hover:text-gray-700 py-1 border-gray-500 hidden"}
+              class="text-gray-500 hover:text-gray-700 py-1 border-gray-500 hidden"
             >
               {menu.name}
             </a>
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
index 7bdd7e3..e9464ff 100644
--- a/islands/Editor.tsx
+++ b/islands/Editor.tsx
@@ -1,5 +1,4 @@
-import { StateUpdater, useEffect, useState } from "preact/hooks";
-import { Button } from "../components/Button.tsx";
+import { useEffect, useState } from "preact/hooks";
 
 interface CounterProps {
   preCode: string;
@@ -8,7 +7,7 @@ interface CounterProps {
 
 declare var window: Window & typeof globalThis;
 interface Window {
-  editor: any; // Replace 'any' with the actual type of your 'editor' property
+  editor: any;
 }
 
 export default function Editor(props: CounterProps) {
diff --git a/routes/[slug].tsx b/routes/[slug].tsx
index ce1ad8e..016d998 100644
--- a/routes/[slug].tsx
+++ b/routes/[slug].tsx
@@ -1,5 +1,5 @@
-import { Course } from "../utils/course.ts";
-import { getCourse } from "./index.tsx";
+import { Course } from "../utils/types.ts";
+import { getCourse } from "../utils/course.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { CSS, render } from "$gfm";
diff --git a/routes/index.tsx b/routes/index.tsx
index 0fa4cad..a58e21b 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,70 +1,35 @@
 import { Handlers } from "$fresh/server.ts";
-import { extract } from "https://deno.land/std@0.151.0/encoding/front_matter.ts";
-import { join } from "$std/path/mod.ts";
 import { PageProps } from "$fresh/server.ts";
-import { readJson } from "https://deno.land/std@0.66.0/fs/read_json.ts";
-import { Course, CourseGroup } from "../utils/course.ts";
+import { join } from "$std/path/mod.ts";
 
-export interface CourseAttributes {
-  title?: string;
-  snippet?: string;
-  order?: number;
-}
+import CourseCard from "../components/CourseCard.tsx";
+import { getCourse, getGroupOrder } from "../utils/course.ts";
+import { Course, CourseGroup } from "../utils/types.ts";
 
 const cache: { merged: (Course | CourseGroup)[] } = { merged: [] };
-
-export async function getCourse(
-  slug: string,
-): Promise<Course | null> {
-  const text = await Deno.readTextFile(join("./courses", `${slug}.md`));
-  const { attrs, body } = extract(text);
-  const courseAttrs = attrs as CourseAttributes;
-
-  const course: Course = {
-    slug,
-    title: courseAttrs.title || "بدون عنوان",
-    content: body || "لايوجد محتوى",
-    snippet: courseAttrs.snippet || "لا يوجد",
-    order: courseAttrs.order || 999,
-  };
-
-  return course;
-}
-
-async function getGroupOrder(
-  groupPath: string,
-): Promise<{ order: number; label: string } | undefined> {
-  try {
-    const dataJsonPath = join(groupPath, "_data.json");
-    const jsonData = await readJson(dataJsonPath) as {
-      order: number;
-      label: string;
-    };
-    return { ...jsonData };
-  } catch (error) {
-    return undefined;
-  }
-}
+export const handler: Handlers<{ merged: (Course | CourseGroup)[] }> = {
+  async GET(_req, ctx) {
+    const courses = await getCourses();
+    return ctx.render(courses);
+  },
+};
 
 export async function getCourses(): Promise<
   { merged: (Course | CourseGroup)[] }
 > {
-  // if (cache.merged.length > 0) {
-  //   return cache;
-  // }
+  if (cache.merged.length > 0) {
+    return cache;
+  }
 
   console.log("Fetching courses...");
-
   const files = Deno.readDir("./courses");
   const groups: CourseGroup[] = [];
   const nonGroups: Course[] = [];
-
   for await (const file of files) {
     if (file.isDirectory) {
       const groupSlug = file.name;
       const groupFiles = Deno.readDir(join("./courses", groupSlug));
       const groupPromises = [];
-
       for await (const groupFile of groupFiles) {
         if (!groupFile.isDirectory && groupFile.name.endsWith(".md")) {
           const slug = groupFile.name.replace(".md", "");
@@ -74,7 +39,6 @@ export async function getCourses(): Promise<
           }
         }
       }
-
       const groupOrder = await getGroupOrder(join("./courses", groupSlug));
       groups.push({
         courses: groupPromises,
@@ -93,17 +57,9 @@ export async function getCourses(): Promise<
   const merged: (Course | CourseGroup)[] = [...nonGroups, ...groups];
   merged.sort((a, b) => (a.order || 999) - (b.order || 999));
   cache.merged = merged;
-
   return cache;
 }
 
-export const handler: Handlers<{ merged: (Course | CourseGroup)[] }> = {
-  async GET(_req, ctx) {
-    const courses = await getCourses();
-    return ctx.render(courses);
-  },
-};
-
 export default function BlogIndexPage(
   props: PageProps<{ merged: (Course | CourseGroup)[] }>,
 ) {
@@ -140,22 +96,3 @@ export default function BlogIndexPage(
     </main>
   );
 }
-
-function CourseCard(props: { course: Course }) {
-  const { course } = props;
-  return (
-    <div
-      class={`py-4 gray-200 hover:opacity-75 `}
-      style={{ order: course.order }}
-    >
-      <a href={btoa(`/${course.slug}`)}>
-        <h3 class="gray-900 font-bold">
-          {course.title}
-        </h3>
-        <div class="text-gray-500 truncate text-ellipsis max-w-[300px] md:max-w-full overflow-hidden">
-          {course.snippet}
-        </div>
-      </a>
-    </div>
-  );
-}
diff --git a/static/resizer.js b/static/resizer.js
index 37f32cb..3d909da 100644
--- a/static/resizer.js
+++ b/static/resizer.js
@@ -1,9 +1,23 @@
+function isMobile() {
+  return window.innerWidth <= 768;
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   document.body.style.overflow = "hidden";
 
-  Split(["#split-0", "#split-1"], {
-    gutterAlign: "start",
-    minSize: 0,
-    gutterSize: 13,
-  });
+  if (isMobile()) {
+    Split(["#split-0", "#split-1"], {
+      sizes: [0, 100],
+      gutterAlign: "start",
+      minSize: 0,
+      gutterSize: 13,
+    });
+  } else {
+    Split(["#split-0", "#split-1"], {
+      sizes: [50, 50],
+      gutterAlign: "start",
+      minSize: 0,
+      gutterSize: 13,
+    });
+  }
 });
diff --git a/utils/course.ts b/utils/course.ts
index 95c67cb..ca632fd 100644
--- a/utils/course.ts
+++ b/utils/course.ts
@@ -1,13 +1,36 @@
-export interface Course {
-  slug: string;
-  title: string;
-  content: string;
-  snippet: string;
-  order: number;
+import { join } from "$std/path/mod.ts";
+import { readJson } from "https://deno.land/std@0.66.0/fs/read_json.ts";
+import { extract } from "https://deno.land/std@0.151.0/encoding/front_matter.ts";
+
+import { Course, CourseAttributes } from "../utils/types.ts";
+
+export async function getGroupOrder(
+  groupPath: string,
+): Promise<{ order: number; label: string } | undefined> {
+  try {
+    const dataJsonPath = join(groupPath, "_data.json");
+    const jsonData = await readJson(dataJsonPath) as {
+      order: number;
+      label: string;
+    };
+    return { ...jsonData };
+  } catch {
+    return undefined;
+  }
 }
 
-export interface CourseGroup {
-  courses: Course[];
-  order?: number;
-  label?: string;
+export async function getCourse(
+  slug: string,
+): Promise<Course | null> {
+  const text = await Deno.readTextFile(join("./courses", `${slug}.md`));
+  const { attrs, body } = extract(text);
+  const courseAttrs = attrs as CourseAttributes;
+  const course: Course = {
+    slug,
+    title: courseAttrs.title || "بدون عنوان",
+    content: body || "لايوجد محتوى",
+    snippet: courseAttrs.snippet || "لا يوجد",
+    order: courseAttrs.order || 999,
+  };
+  return course;
 }
diff --git a/utils/types.ts b/utils/types.ts
new file mode 100644
index 0000000..ddeb9bf
--- /dev/null
+++ b/utils/types.ts
@@ -0,0 +1,19 @@
+export interface Course {
+  slug: string;
+  title: string;
+  content: string;
+  snippet: string;
+  order: number;
+}
+
+export interface CourseGroup {
+  courses: Course[];
+  order?: number;
+  label?: string;
+}
+
+export interface CourseAttributes {
+  title?: string;
+  snippet?: string;
+  order?: number;
+}