cleaning, added daisyui

TeaByte · Jan 7, 2024 · a015190 · a015190
1 parent d94e873
commit a015190
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 139 deletions.
diff --git a/components/Collapse.tsx 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
@@ -0,0 +1,54 @@
+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";
+
+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
@@ -0,0 +1,64 @@
+import BrandGithub from "https://deno.land/x/[email protected]/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
@@ -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
@@ -30,7 +30,8 @@
     "tailwindcss/": "npm:/[email protected]/",
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$std/": "https://deno.land/[email protected]/",
-    "$gfm": "https://deno.land/x/[email protected]/mod.ts"
+    "$gfm": "https://deno.land/x/[email protected]/mod.ts",
+    "daisyui": "npm:daisyui@latest"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -25,30 +25,26 @@ 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"
           href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/editor/editor.main.min.css"
         />
         <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
@@ -1,30 +1,34 @@
 import { Head } from "$fresh/runtime.ts";
+import Footer from "../components/Footer.tsx";
 
 export default function Error404() {
   return (
     <>
       <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
@@ -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/[email protected]/dist/full.min.css"
-          rel="stylesheet"
-          type="text/css"
-        />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
           rel="preconnect"