refactoring the code, fixing flex order

TeaByte · Jan 11, 2024 · ae754ba · ae754ba
1 parent 818e12a
commit ae754ba
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 146 deletions.
diff --git a/components/Collapse.tsx b/components/Collapse.tsx
@@ -6,15 +6,13 @@ export default function Collapse(
 ) {
   return (
     <div class="collapse collapse-arrow bg-base-300">
-      <input type="checkbox" /> 
+      <input type="checkbox" />
       <div class="collapse-title text-xl font-medium">
         {titile}
       </div>
-      <div class="collapse-content list-none">
+      <div class="collapse-content flex flex-col">
         {courses.map((course) => (
-          <li key={course.slug}>
-            <CourseCard course={course} />
-          </li>
+          <CourseCard key={course.slug} course={course} />
         ))}
       </div>
     </div>

diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
@@ -6,16 +6,16 @@ import IconCircle from "https://deno.land/x/[email protected]/tsx/circle.ts
 export default function CourseCard(props: { course: Course }) {
   const { course } = props;
   return (
-    <div
-      class="py-2 gray-200 hover:opacity-75"
+    <a
+      title={course.title}
+      href={`/${course.slug}`}
+      class="py-2 gray-200 hover:opacity-75 list-none"
       style={{ order: course.order }}
     >
-      <a title={course.title} href={`/${course.slug}`}>
-        <h3 class="text-gray-500 font-bold flex gap-1 items-center">
-          <IconCircle aria-hidden="true" class="h-4 w-4" />
-          {course.title}
-        </h3>
-      </a>
-    </div>
+      <h3 class="text-gray-500 font-bold flex gap-1 items-center">
+        <IconCircle aria-hidden="true" class="h-4 w-4" />
+        {course.title}
+      </h3>
+    </a>
   );
 }
diff --git a/components/Courses.tsx b/components/Courses.tsx
@@ -0,0 +1,44 @@
+import { Course, CourseGroup } from "../utils/types.ts";
+
+import Collapse from "./Collapse.tsx";
+import CourseCard from "./CourseCard.tsx";
+
+export default function Courses(
+  { courses }: { courses: (Course | CourseGroup)[] },
+) {
+  return (
+    <>
+      <h1 class="text-5xl font-bold z-10 mb-2">الاساسيات</h1>
+      <section class="flex flex-col gap-2">
+        {courses.map((course, index) => {
+          // Group of courses
+          if ("courses" in course) {
+            return (
+              <div key={index} class="mt-1">
+                <Collapse
+                  titile={course.label}
+                  courses={course.courses}
+                />
+              </div>
+            );
+          } else {
+            // Single course
+            return (
+              <div key={course.slug}>
+                <CourseCard course={course} />
+              </div>
+            );
+          }
+        })}
+        <p class="mt-4 text-2xl">نعمل على الدروس القادما...</p>
+        <a
+          href="https://github.com/TeaByte/NakhlahJS"
+          class="text-gray-500 hover:underline"
+          target="_blank"
+        >
+          هل تود المساهمه في الموقع ؟
+        </a>
+      </section>
+    </>
+  );
+}
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
@@ -1,9 +1,10 @@
-import IconAdjustmentsDown from "https://deno.land/x/[email protected]/tsx/adjustments-down.tsx";
-
 import { Course, CourseGroup } from "../utils/types.ts";
+
 import Collapse from "./Collapse.tsx";
 import CourseCard from "./CourseCard.tsx";
 
+import IconLayoutSidebarLeftCollapse from "https://deno.land/x/[email protected]/tsx/layout-sidebar-left-collapse.tsx";
+
 export default function Drawer(
   { courses }: { courses: (Course | CourseGroup)[] },
 ) {
@@ -17,9 +18,9 @@ export default function Drawer(
       <div class="drawer-content">
         <label
           for="my-drawer-4"
-          class="drawer-button btn btn-active btn-ghost top-[-24px] left-0 absolute"
+          class="drawer-button btn btn-active btn-ghost"
         >
-          <IconAdjustmentsDown aria-hidden="true" />
+          <IconLayoutSidebarLeftCollapse aria-hidden="true" />
         </label>
       </div>
       <div class="drawer-side z-50">

diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
@@ -0,0 +1,28 @@
+import Editor from "../islands/Editor.tsx";
+
+export default function EditorSplit() {
+  return (
+    <>
+      <div class="mt-2">
+        <div class="mb-2 mx-2 rounded-lg overflow-hidden">
+          <div
+            class="h-[400px]"
+            dir="ltr"
+            id="editor"
+          >
+            <p
+              id="editor-loading"
+              class="flex h-full items-center justify-center text-lg bg-[#1E1E1E] rounded-lg"
+            >
+              جاري تحميل المحرر
+            </p>
+          </div>
+        </div>
+      </div>
+      <Editor
+        preCode={'console.log("Hello World!")'}
+        testCode={"x == x"}
+      />
+    </>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -7,7 +7,6 @@ export default function Footer() {
       children: [
         { name: "الصفحة الرئيسية", href: "#" },
         { name: "المدونة", href: "#" },
-        { name: "الدروس", href: "#" },
       ],
     },
     {

diff --git a/components/MarkdownSplit.tsx b/components/MarkdownSplit.tsx
@@ -0,0 +1,52 @@
+import { render } from "$gfm";
+import { Course } from "../utils/types.ts";
+
+import EditButton from "../components/EditButton.tsx";
+import IconAppWindow from "https://deno.land/x/[email protected]/tsx/app-window.tsx";
+
+export default function MarkdownSplit(
+  { course, lable }: { course: Course; lable: string | undefined },
+) {
+  return (
+    <section dir="rtl" class="p-3 py-5 mb-40">
+      <div>
+        <div class="text-sm breadcrumbs" dir="rtl">
+          <ul>
+            <li>
+              <a href="/">الرئيسية</a>
+            </li>
+            {lable && (
+              <li>
+                <a href={`/group/${lable}`}>
+                  {lable}
+                </a>
+              </li>
+            )}
+            <li class="underline">{course.title}</li>
+          </ul>
+        </div>
+        <div class="flex flex-col gap-2 md:flex-row justify-between mb-4">
+          <h1 class="text-3xl">{course.title}</h1>
+          <div>
+            <EditButton slug={course.slug} />
+            <div
+              class="flex items-center gap-1 md:hidden mt-2 hover:opacity-75"
+              id="open-editor"
+            >
+              <IconAppWindow />
+              <p>فتح المحرر</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        id="document"
+        class="markdown-body"
+        data-color-mode="dark"
+        data-dark-theme="dark"
+        style={{ backgroundColor: "inherit" }}
+        dangerouslySetInnerHTML={{ __html: render(course.content) }}
+      />
+    </section>
+  );
+}
diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -1,5 +1,6 @@
-import ThemeToggle from "../islands/ThemeToggle.tsx";
 import { cache } from "../utils/course-cache.ts";
+
+import ThemeToggle from "../islands/ThemeToggle.tsx";
 import Drawer from "./Drawer.tsx";
 
 export default function NavBar() {
@@ -25,8 +26,10 @@ export default function NavBar() {
           </a>
         </div>
       </div>
-      <Drawer courses={cache.courses} />
-      <ThemeToggle />
+      <div class="flex gap-3 items-center">
+        <ThemeToggle />
+        <Drawer courses={cache.courses} />
+      </div>
     </nav>
   );
 }
diff --git a/courses/booleans/bool-if-statements.md b/courses/booleans/bool-if-statements.md
@@ -8,12 +8,10 @@ order: 2
 `true` أو `false`. إنها في الأساس مفاتيح تشغيل وإيقاف صغيرة، حيث يتم تشغيل
 `true` وإيقاف `false`. هاتان الدولتان متنافيتان.
 
-:::note
-
+<mark>
 لا يتم كتابة القيم المنطقية أبدًا مع علامات الاقتباس. السلاسل "true" و"false"
 ليست منطقية وليس لها أي معنى خاص في JavaScript.
-
-:::
+</mark>
 
 ```js
 function welcomeToBooleans() {

diff --git a/courses/booleans/intro.md b/courses/booleans/intro.md
@@ -8,12 +8,10 @@ order: 1
 `true` أو `false`. إنها في الأساس مفاتيح تشغيل وإيقاف صغيرة، حيث يتم تشغيل
 `true` وإيقاف `false`. هاتان الدولتان متنافيتان.
 
-:::note
-
+<mark>
 لا يتم كتابة القيم المنطقية أبدًا مع علامات الاقتباس. السلاسل "true" و"false"
 ليست منطقية وليس لها أي معنى خاص في JavaScript.
-
-:::
+</mark>
 
 ```js
 function welcomeToBooleans() {

diff --git a/courses/compound-operators.md b/courses/compound-operators.md
@@ -4,8 +4,6 @@ snippet: في عالم البرمجة، تُستخدم المشغلات او ا
 order: 5
 ---
 
-# عوامل مركبه
-
 في عالم البرمجة، تُستخدم المشغلات او العوامل او المهام لأداء العمليات على
 البيانات. تأتي المشغلات بأنواع متعددة، كما ذكرنا في دروس سابقا مثل `*`, `-`, `=`
 وغيرها الكثير ذكرنا في دروس وغيرها لم نذكرها بعد.

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -1,13 +1,13 @@
-import { Course } from "../utils/types.ts";
-import { getCourse, getJson } from "../utils/course.ts";
+import { Head } from "$fresh/runtime.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
-import { CSS, render } from "$gfm";
-import { Head } from "$fresh/runtime.ts";
-import Editor from "../islands/Editor.tsx";
-import EditButton from "../components/EditButton.tsx";
+import { CSS } from "$gfm";
+
+import { Course } from "../utils/types.ts";
+import { getCourse, getJson } from "../utils/course.ts";
 
-import IconAppWindow from "https://deno.land/x/[email protected]/tsx/app-window.tsx";
+import EditorSplit from "../components/EditorSplit.tsx";
+import MarkdownSplit from "../components/MarkdownSplit.tsx";
 
 export const handler: Handlers<{ course: Course; lable: string | undefined }> =
   {
@@ -55,75 +55,13 @@ export default function CoursePage(
         <script src="/moaco.js"></script>
         <script src="/resizer.js" />
       </Head>
-
       <main>
-        <div>
-          <div dir="ltr" class="split flex-grow h-full-minus-bar">
-            <div id="split-0" class="flex flex-col">
-              <div class="mt-2">
-                <div class="mb-2 mx-2 rounded-lg overflow-hidden">
-                  <div
-                    class="h-[400px]"
-                    dir="ltr"
-                    id="editor"
-                  >
-                    <p
-                      id="editor-loading"
-                      class="flex h-full items-center justify-center text-lg bg-[#1E1E1E] rounded-lg"
-                    >
-                      جاري تحميل المحرر
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <Editor
-                preCode={'console.log("Hello World!")'}
-                testCode={"x == x"}
-              />
-            </div>
-            <div id="split-1" class="overflow-y-scroll">
-              <section dir="rtl" class="p-3 py-5 mb-40">
-                <div>
-                  <div class="text-sm breadcrumbs" dir="rtl">
-                    <ul>
-                      <li>
-                        <a href="/">الرئيسية</a>
-                      </li>
-                      {lable && (
-                        <li>
-                          <a href={`/group/${lable}`}>
-                            {lable}
-                          </a>
-                        </li>
-                      )}
-                      <li class="underline">{course.title}</li>
-                    </ul>
-                  </div>
-                  <div class="flex flex-col gap-2 md:flex-row justify-between mb-4">
-                    <h1 class="text-3xl">{course.title}</h1>
-                    <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>
-
-                <div
-                  id="document"
-                  class="markdown-body"
-                  data-color-mode="dark"
-                  data-dark-theme="dark"
-                  style={{ backgroundColor: "inherit" }}
-                  dangerouslySetInnerHTML={{ __html: render(course.content) }}
-                />
-              </section>
-            </div>
+        <div dir="ltr" class="split flex-grow h-full-minus-bar">
+          <div id="split-0" class="flex flex-col">
+            <EditorSplit />
+          </div>
+          <div id="split-1" class="overflow-y-scroll">
+            <MarkdownSplit course={course} lable={lable} />
           </div>
         </div>
       </main>

diff --git a/routes/group/[slug].tsx b/routes/group/[slug].tsx
@@ -1,14 +1,15 @@
-import { Course, CourseGroup } from "../../utils/types.ts";
+import { Head } from "$fresh/runtime.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
-import { Head } from "$fresh/runtime.ts";
+
+import { Course, CourseGroup } from "../../utils/types.ts";
 import { cache } from "../../utils/course-cache.ts";
+
 import CourseCard from "../../components/CourseCard.tsx";
 import Footer from "../../components/Footer.tsx";
 
 import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
 
-// TODO - FIX TYPES
 export const handler: Handlers<CourseGroup> = {
   GET(_req, ctx) {
     let foundCourseGroup: CourseGroup | Course | undefined = undefined;