Merge pull request #7 from TeaByte/main

sync
TeaByte · Jan 10, 2024 · ac976e3 · ac976e3
2 parents 850c2ce + 500deeb
commit ac976e3
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 47 deletions.
diff --git a/components/Collapse.tsx b/components/Collapse.tsx
@@ -1,21 +1,19 @@
 import { Course } from "../utils/types.ts";
+import CourseCard from "./CourseCard.tsx";
 
 export default function Collapse(
   { titile, courses }: { titile: string; courses: Course[] },
 ) {
   return (
-    <div
-      tabindex={1}
-      class="collapse collapse-plus border border-base-300 bg-base-100"
-    >
-      <input type="checkbox" />
+    <div class="collapse collapse-arrow bg-base-300">
+      <input type="radio" name="my-accordion-2" checked={false} />
       <div class="collapse-title text-xl font-medium">
         {titile}
       </div>
-      <div class="collapse-content">
+      <div class="collapse-content list-none">
         {courses.map((course) => (
           <li key={course.slug}>
-            <a title={course.title} href={`/${course.slug}`}>{course.title}</a>
+            <CourseCard course={course} />
           </li>
         ))}
       </div>

diff --git a/components/Drawer.tsx b/components/Drawer.tsx
@@ -2,6 +2,7 @@ import IconAdjustmentsDown from "https://deno.land/x/[email protected]/tsx/
 
 import { Course, CourseGroup } from "../utils/types.ts";
 import Collapse from "./Collapse.tsx";
+import CourseCard from "./CourseCard.tsx";
 
 export default function Drawer(
   { courses }: { courses: (Course | CourseGroup)[] },
@@ -39,10 +40,8 @@ export default function Drawer(
               );
             } else {
               return (
-                <li class="" key={course.slug}>
-                  <a title={course.title} href={`/${course.slug}`}>
-                    {course.title}
-                  </a>
+                <li key={course.slug}>
+                  <CourseCard course={course} />
                 </li>
               );
             }

diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
@@ -12,7 +12,7 @@ export default function ThemeToggle() {
     const storedTheme = localStorage.getItem("selectedTheme");
     if (storedTheme === "nord") {
       document.documentElement.setAttribute("data-theme", "dracula");
-      localStorage.setItem("selectedTheme", "dracula"); // Fix this line
+      localStorage.setItem("selectedTheme", "dracula");
     } else {
       document.documentElement.setAttribute("data-theme", "nord");
       localStorage.setItem("selectedTheme", "nord");

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -7,6 +7,8 @@ import { Head } from "$fresh/runtime.ts";
 import Editor from "../islands/Editor.tsx";
 import EditButton from "../components/EditButton.tsx";
 
+import IconAppWindow from "https://deno.land/x/[email protected]/tsx/app-window.tsx";
+
 export const handler: Handlers<{ course: Course; lable: string | undefined }> =
   {
     async GET(_req, ctx) {
@@ -99,7 +101,16 @@ export default function CoursePage(
                   </div>
                   <div class="flex flex-col gap-2 md:flex-row justify-between mb-4">
                     <h1 class="text-3xl">{course.title}</h1>
-                    <EditButton slug={course.slug} />
+                    <div class="flex justify-between items-center">
+                      <EditButton slug={course.slug} />
+                      <div
+                        class="flex items-center gap-1 md:hidden"
+                        id="open-editor"
+                      >
+                        <IconAppWindow />
+                        <p>فتح المحرر</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
 

diff --git a/routes/group/[slug].tsx b/routes/group/[slug].tsx
@@ -12,21 +12,12 @@ import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chev
 export const handler: Handlers<CourseGroup> = {
   GET(_req, ctx) {
     let foundCourseGroup: CourseGroup | Course | undefined = undefined;
-    const toFind = isNaN(parseInt(ctx.params.slug))
-      ? decodeURIComponent(ctx.params.slug)
-      : parseInt(ctx.params.slug);
+    const toFind = decodeURIComponent(ctx.params.slug);
 
-    if (typeof toFind === "number") {
-      foundCourseGroup = cache.courses.find((c) => {
-        return "courses" in c && c.courses.length > 0 &&
-          c.order === toFind;
-      });
-    } else {
-      foundCourseGroup = cache.courses.find((c) => {
-        return "courses" in c && c.courses.length > 0 &&
-          c.label === toFind;
-      });
-    }
+    foundCourseGroup = cache.courses.find((c) => {
+      return "courses" in c && c.courses.length > 0 &&
+        c.label === toFind;
+    });
 
     if (!foundCourseGroup) return ctx.renderNotFound();
     return ctx.render(foundCourseGroup as CourseGroup);

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -8,6 +8,7 @@ import { cache } from "../utils/course-cache.ts";
 import Footer from "../components/Footer.tsx";
 
 import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
+import Collapse from "../components/Collapse.tsx";
 
 export const handler: Handlers<{ courses: (Course | CourseGroup)[] }> = {
   async GET(_req, ctx) {
@@ -44,21 +45,11 @@ export default function BlogIndexPage(
             // Group of courses
             if ("courses" in course) {
               return (
-                <div class="mt-4" key={index}>
-                  <a
-                    href={`/group/${course.order}`}
-                    class="flex gap-1 items-center"
-                  >
-                    <h2 class="text-3xl font-bold hover:opacity-75">
-                      {course.label}
-                    </h2>
-                    <IconChevronDown />
-                  </a>
-                  <div class="flex flex-col mt-2 pr-3">
-                    {course.courses.map((innerCourse) => (
-                      <CourseCard key={innerCourse.slug} course={innerCourse} />
-                    ))}
-                  </div>
+                <div key={index} class="mt-2">
+                  <Collapse
+                    titile={course.label}
+                    courses={course.courses}
+                  />
                 </div>
               );
             } else {

diff --git a/static/resizer.js b/static/resizer.js
@@ -8,11 +8,11 @@ document.addEventListener("DOMContentLoaded", function () {
       sizes: [0, 100],
       gutterAlign: "end",
       minSize: 0,
-      gutterSize: 16,
+      gutterSize: 19,
     });
     let isRight = true;
-    const gutter = document.querySelector(".gutter");
-    gutter.addEventListener("touchstart", function () {
+    const openEditorButton = document.querySelector("#open-editor");
+    openEditorButton.addEventListener("touchend", function () {
       if (isRight) {
         splitInstance.setSizes([100, 0]);
         isRight = false;
@@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
       sizes: [50, 50],
       gutterAlign: "end",
       minSize: 0,
-      gutterSize: 16,
+      gutterSize: 19,
     });
   }
 

diff --git a/static/styles.css b/static/styles.css
@@ -75,7 +75,7 @@ mark::before {
   top: 50%;
   right: 0;
   bottom: 0;
-  left: 5px;
+  left: 7px;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
   filter: invert(100%);
   background-repeat: no-repeat;