From a015190fd4670fe7393e2b3495a654d628349279 Mon Sep 17 00:00:00 2001
From: teabyte <yazan4code@gmail.com>
Date: Sun, 7 Jan 2024 18:00:57 +0300
Subject: [PATCH] cleaning, added daisyui

---
 components/Collapse.tsx | 24 +++++++++++++
 components/Drawer.tsx   | 54 ++++++++++++++++++++++++++++
 components/Footer.tsx   | 64 +++++++++++++++++++++++++++++++++
 components/Nav.tsx      | 80 ++---------------------------------------
 deno.json               |  3 +-
 routes/[...slug].tsx    | 33 +----------------
 routes/_404.tsx         | 40 +++++++++++----------
 routes/_app.tsx         |  5 ---
 routes/index.tsx        |  7 ++--
 static/moaco.js         |  1 -
 static/resizer.js       |  1 -
 static/styles.css       |  3 +-
 tailwind.config.ts      |  2 ++
 13 files changed, 178 insertions(+), 139 deletions(-)
 create mode 100644 components/Collapse.tsx
 create mode 100644 components/Drawer.tsx
 create mode 100644 components/Footer.tsx

diff --git a/components/Collapse.tsx b/components/Collapse.tsx
new file mode 100644
index 0000000..1106c42
--- /dev/null
+++ b/components/Collapse.tsx
@@ -0,0 +1,24 @@
+import { Course } from "../utils/types.ts";
+
+export default function Collapse(
+  { titile, courses }: { titile: string; courses: Course[] },
+) {
+  return (
+    <div
+      tabindex={1}
+      class="collapse collapse-plus border border-base-300 bg-base-200"
+    >
+      <input type="checkbox" />
+      <div class="collapse-title text-xl font-medium">
+        {titile}
+      </div>
+      <div class="collapse-content">
+        {courses.map((course) => (
+          <li key={course.slug}>
+            <a title={course.title} href={`/${course.slug}`}>{course.title}</a>
+          </li>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
new file mode 100644
index 0000000..b5295d2
--- /dev/null
+++ b/components/Drawer.tsx
@@ -0,0 +1,54 @@
+import IconAdjustmentsDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/adjustments-down.tsx";
+
+import { Course, CourseGroup } from "../utils/types.ts";
+import Collapse from "./Collapse.tsx";
+
+export default function Drawer(
+  { courses }: { courses: (Course | CourseGroup)[] },
+) {
+  return (
+    <div class="drawer">
+      <input
+        id="my-drawer-4"
+        type="checkbox"
+        class="drawer-toggle"
+      />
+      <div class="drawer-content">
+        <label
+          for="my-drawer-4"
+          class="drawer-button btn btn-active btn-ghost top-[-24px] left-0 absolute"
+        >
+          <IconAdjustmentsDown aria-hidden="true" />
+        </label>
+      </div>
+      <div class="drawer-side z-50">
+        <label
+          for="my-drawer-4"
+          aria-label="close sidebar"
+          class="drawer-overlay"
+        >
+        </label>
+        <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
+          {courses.map((course, index) => {
+            if ("courses" in course) {
+              return (
+                <Collapse
+                  titile={course.label || "بدون عنوان"}
+                  courses={course.courses}
+                />
+              );
+            } else {
+              return (
+                <li class="" key={course.slug}>
+                  <a title={course.title} href={`/${course.slug}`}>
+                    {course.title}
+                  </a>
+                </li>
+              );
+            }
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..7138a3b
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,64 @@
+import BrandGithub from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/brand-github.tsx";
+
+export default function Footer() {
+  const menus = [
+    {
+      title: "الصفحات",
+      children: [
+        { name: "الصفحة الرئيسية", href: "#" },
+        { name: "المدونة", href: "#" },
+        { name: "الدروس", href: "#" },
+      ],
+    },
+    {
+      title: "المجتمع",
+      children: [
+        { name: "قناه", href: "https://t.me/NakhlahJS" },
+        { name: "جروب", href: "https://t.me/Unassisted" },
+      ],
+    },
+  ];
+
+  return (
+    <div class="bg-base-300 flex flex-col md:flex-row w-full gap-8 md:gap-16 px-8 py-8 text-sm">
+      <div class="flex-1">
+        <div class="flex items-center gap-1">
+          <div class="font-bold text-2xl">
+            نخلة جي أس
+          </div>
+        </div>
+        <div class="text-gray-500 mt-1">
+          اكتسب مهارات جافاسكربت بسهولة وفعالية
+        </div>
+      </div>
+
+      {menus.map((item) => (
+        <div class="mb-4" key={item.title}>
+          <div class="font-bold">{item.title}</div>
+          <ul class="mt-2">
+            {item.children.map((child) => (
+              <li class="mt-2" key={child.name}>
+                <a
+                  class="text-gray-500 hover:text-gray-700"
+                  href={child.href}
+                >
+                  {child.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <div class="text-gray-500 space-y-2">
+        <a
+          href="https://github.com/TeaByte/NakhlahJS"
+          class="inline-block hover:text-black"
+          aria-label="GitHub"
+        >
+          <BrandGithub aria-hidden="true" />
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Nav.tsx b/components/Nav.tsx
index 80b8ea0..00d82ea 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -1,29 +1,8 @@
 import { cache, populateCache } from "../utils/course-cache.ts";
-import { Course } from "../utils/types.ts";
+import Drawer from "./Drawer.tsx";
 
 populateCache();
 
-function Collapse({ titile, courses }: { titile: string; courses: Course[] }) {
-  return (
-    <div
-      tabindex={1}
-      class="collapse collapse-plus border border-base-300 bg-base-200"
-    >
-      <input type="checkbox" />
-      <div class="collapse-title text-xl font-medium">
-        {titile}
-      </div>
-      <div class="collapse-content">
-        {courses.map((course) => (
-          <li key={course.slug}>
-            <a title={course.title} href={`/${course.slug}`}>{course.title}</a>
-          </li>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 export default function NavBar() {
   return (
     <nav class="bg-base-300 w-full py-4 px-2 md:px-8 flex items-center gap-4">
@@ -47,62 +26,7 @@ export default function NavBar() {
           </a>
         </div>
       </div>
-      <div class="drawer">
-        <input
-          id="my-drawer-4"
-          type="checkbox"
-          class="drawer-toggle"
-        />
-        <div class="drawer-content">
-          <label
-            for="my-drawer-4"
-            class="drawer-button btn btn-active btn-ghost top-[-24px] left-0 absolute"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="w-6 h-6"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
-              />
-            </svg>
-          </label>
-        </div>
-        <div class="drawer-side z-50">
-          <label
-            for="my-drawer-4"
-            aria-label="close sidebar"
-            class="drawer-overlay"
-          >
-          </label>
-          <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
-            {cache.merged.map((course, index) => {
-              if ("courses" in course) {
-                return (
-                  <Collapse
-                    titile={course.label || "بدون عنوان"}
-                    courses={course.courses}
-                  />
-                );
-              } else {
-                return (
-                  <li class="" key={course.slug}>
-                    <a title={course.title} href={`/${course.slug}`}>
-                      {course.title}
-                    </a>
-                  </li>
-                );
-              }
-            })}
-          </ul>
-        </div>
-      </div>
+      <Drawer courses={cache.merged} />
     </nav>
   );
 }
diff --git a/deno.json b/deno.json
index 77ee1f0..fd86ad8 100644
--- a/deno.json
+++ b/deno.json
@@ -30,7 +30,8 @@
     "tailwindcss/": "npm:/tailwindcss@3.3.5/",
     "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
     "$std/": "https://deno.land/std@0.208.0/",
-    "$gfm": "https://deno.land/x/gfm@0.1.26/mod.ts"
+    "$gfm": "https://deno.land/x/gfm@0.1.26/mod.ts",
+    "daisyui": "npm:daisyui@latest"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
index c62fe4b..59f19a5 100644
--- a/routes/[...slug].tsx
+++ b/routes/[...slug].tsx
@@ -25,19 +25,17 @@ export default function CoursePage(props: PageProps<Course>) {
   return (
     <>
       <Head>
-        <title>Nakhlahjs - {course.title}</title>
+        <title>نخلة - {course.title}</title>
         <meta name="description" content={course.snippet} />
         <meta name="keywords" content={`${course.title}, ${course.snippet}`} />
         <meta property="og:title" content={course.title} />
         <meta property="og:description" content={course.snippet} />
-
         <meta
           property="og:url"
           content={`https://nakhlahjs.com/${course.slug}`}
         />
 
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
-
         <link
           rel="stylesheet"
           data-name="vs/editor/editor.main"
@@ -45,10 +43,8 @@ export default function CoursePage(props: PageProps<Course>) {
         />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js">
         </script>
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.1.1/split.min.js">
         </script>
-
         <script src="/moaco.js"></script>
         <script src="/resizer.js" />
       </Head>
@@ -82,33 +78,6 @@ export default function CoursePage(props: PageProps<Course>) {
             </div>
           </div>
         </div>
-
-        {
-          /* <div>
-          <section dir="rtl" class="p-3 py-5 mb-40">
-            <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>
-            <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>
-          <p class="py-2 bg-[#1E1E1E]"></p>
-          <div dir="ltr" class="h-[400px] mb-2" id="editor"></div>
-          <Editor
-            preCode={'console.log("Hello World!")'}
-            testCode={"x == x"}
-          />
-        </div> */
-        }
       </main>
     </>
   );
diff --git a/routes/_404.tsx b/routes/_404.tsx
index b1a7dae..8290971 100644
--- a/routes/_404.tsx
+++ b/routes/_404.tsx
@@ -1,4 +1,5 @@
 import { Head } from "$fresh/runtime.ts";
+import Footer from "../components/Footer.tsx";
 
 export default function Error404() {
   return (
@@ -6,25 +7,28 @@ export default function Error404() {
       <Head>
         <title>الصفحه غير موجوده</title>
       </Head>
-      <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.webp"
-            width="128"
-            height="128"
-            title="NakhlahJS Logo"
-            alt="Website logo"
-          />
-          <h1 class="text-4xl font-bold">الصفحه غير موجوده</h1>
-          <p class="my-4">
-            الصفحة التي تبحث عنها غير موجودة.
-          </p>
-          <a title="العودى الى الصفحة الرئيسية" href="/" class="underline">
-            العودى الى الصفحة الرئيسية
-          </a>
+      <main class="flex flex-col h-full-minus-bar">
+        <div class="px-4 py-8 mx-auto grow">
+          <div class="max-w-screen-md mx-auto flex flex-col md:mt-8 items-center justify-center">
+            <img
+              class="my-6"
+              src="/logo.webp"
+              width="128"
+              height="128"
+              title="لوغو نخلة جي اس"
+              alt="Website logo"
+            />
+            <h1 class="text-4xl font-bold">الصفحه غير موجوده</h1>
+            <p class="my-4">
+              تأكد من صحه الرابط.
+            </p>
+            <a title="العودى الى الصفحة الرئيسية" href="/" class="underline">
+              العودى الى الصفحة الرئيسية
+            </a>
+          </div>
         </div>
-      </div>
+        <Footer />
+      </main>
     </>
   );
 }
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 4870a8d..ecaa1b3 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -9,11 +9,6 @@ export default function App({ Component }: PageProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Nakhlahjs</title>
         <link rel="stylesheet" href="/styles.css" />
-        <link
-          href="https://cdn.jsdelivr.net/npm/daisyui@4.5.0/dist/full.min.css"
-          rel="stylesheet"
-          type="text/css"
-        />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
           rel="preconnect"
diff --git a/routes/index.tsx b/routes/index.tsx
index b5b21bf..1f9caf3 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -6,6 +6,7 @@ import CourseCard from "../components/CourseCard.tsx";
 import { getCourses } from "../utils/course.ts";
 import { Course, CourseGroup } from "../utils/types.ts";
 import { cache, populateCache } from "../utils/course-cache.ts";
+import Footer from "../components/Footer.tsx";
 
 populateCache();
 
@@ -31,7 +32,7 @@ export default function BlogIndexPage(
           name="keywords"
           content="Nakhlahjs, Nakhlah, تعلم جافاسكربت, جافاسكربت, تعليم جافاسكربت, كورس جافاسربت, كورس جافاسكربت مجاني, كورس جافاسكربت"
         />
-        <meta property="og:title" content="Nakhlahjs" />
+        <meta property="og:title" content="نخلة جي أس" />
         <meta
           property="og:description"
           content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
@@ -41,6 +42,7 @@ export default function BlogIndexPage(
         <h1 class="text-5xl font-bold z-10">المحتوى</h1>
         <section class="flex flex-col gap-2">
           {merged.map((course, index) => {
+            // Group of courses
             if ("courses" in course) {
               return (
                 <div class="" key={index}>
@@ -55,7 +57,7 @@ export default function BlogIndexPage(
                 </div>
               );
             } else {
-              // This is a Course
+              // Single course
               return (
                 <div class="" key={course.slug}>
                   <CourseCard course={course} />
@@ -65,6 +67,7 @@ export default function BlogIndexPage(
           })}
         </section>
       </main>
+      <Footer />
     </>
   );
 }
diff --git a/static/moaco.js b/static/moaco.js
index 237b2b5..4ca1380 100644
--- a/static/moaco.js
+++ b/static/moaco.js
@@ -10,7 +10,6 @@ require(["vs/editor/editor.main"], () => {
     theme: "vs-dark",
     minimap: { enabled: false },
   });
-
   setInterval(() => {
     editor.layout();
   }, 50);
diff --git a/static/resizer.js b/static/resizer.js
index 1000d83..0fe6790 100644
--- a/static/resizer.js
+++ b/static/resizer.js
@@ -10,7 +10,6 @@ document.addEventListener("DOMContentLoaded", function () {
       minSize: 0,
       gutterSize: 13,
     });
-
     let isRight = true;
     const gutter = document.querySelector(".gutter");
     gutter.addEventListener("touchstart", function () {
diff --git a/static/styles.css b/static/styles.css
index b996339..b1e0ccd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -20,7 +20,8 @@ body .markdown-body {
 }
 
 .h-full-minus-bar {
-  height: calc(100vh - 88px);
+  /* screen - navbar */
+  height: calc(100vh - 64px);
 }
 
 .gutter {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 99dba8f..97ba4d7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,9 @@
 import { type Config } from "tailwindcss";
+import daisyui from "daisyui";
 
 export default {
   content: [
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],
+  plugins: [daisyui],
 } satisfies Config;