❇: Added phone-editor-open, fixing-some-colors

TeaByte · Jan 11, 2024 · d96314a · d96314a
1 parent 051dd4e
commit d96314a
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 44 deletions.
diff --git a/components/EditButton.tsx b/components/EditButton.tsx
@@ -4,7 +4,7 @@ export default function EditButton({ slug }: { slug: string }) {
       target="_blank"
       href={`https://github.com/TeaByte/NakhlahJS/blob/main/courses/${slug}.md`}
       class="pl-3 flex items-center gap-1 hover:opacity-75"
-      title="تعديل المقال"
+      title="تعديل"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -21,14 +21,16 @@ export default function Footer() {
   return (
     <footer 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="flex items-center flex-1">
           <div class="flex items-center gap-1">
-            <img
-              title="نخله جي اس"
-              alt="Website logo"
-              src="/logo.webp"
-              class="h-8 w-8"
-            />
+            <a href="/" title="نخله جي اس">
+              <img
+                title="نخله جي اس"
+                alt="Website logo"
+                src="/logo.webp"
+                class="h-8 w-8"
+              />
+            </a>
             <a
               href="/"
               title="نخله جي اس"

diff --git a/components/MarkdownSplit.tsx b/components/MarkdownSplit.tsx
@@ -27,16 +27,6 @@ export default function MarkdownSplit(
         </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

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -8,12 +8,14 @@ export default function NavBar() {
     <nav class="bg-base-300 w-full py-4 px-4 md:px-8 flex items-center gap-4 border-b base-content">
       <div class="flex items-center flex-1">
         <div class="flex items-center gap-1">
-          <img
-            title="نخله جي اس"
-            alt="Website logo"
-            src="/logo.webp"
-            class="h-8 w-8"
-          />
+          <a href="/" title="نخله جي اس">
+            <img
+              title="نخله جي اس"
+              alt="Website logo"
+              src="/logo.webp"
+              class="h-8 w-8"
+            />
+          </a>
           <a
             href="/"
             title="نخله جي اس"

diff --git a/islands/Editor.tsx b/islands/Editor.tsx
@@ -95,7 +95,7 @@ export default function Editor(props: CounterProps) {
             مسح
           </button>
           <button
-            class="btn btn-error grow"
+            class="btn btn-active btn-ghost grow"
             onClick={handleCodeTest}
           >
             اختبار

diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
@@ -20,21 +20,21 @@ export default function ThemeToggle() {
   };
 
   return (
-    <label class="swap swap-rotate">
+    <label class="swap swap-rotate btn btn-active btn-ghost opacity-50">
       <input
         type="checkbox"
         onChange={handleThemeChange}
         class="theme-controller"
       />
       <svg
-        class="swap-on fill-current w-6 h-6"
+        class="swap-on fill-current w-6 h-6 opacity-100"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >
         <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
       </svg>
       <svg
-        class="swap-off fill-current w-6 h-6"
+        class="swap-off fill-current w-6 h-6 opacity-100"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
       >

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -10,26 +10,35 @@ import EditorSplit from "../components/EditorSplit.tsx";
 import MarkdownSplit from "../components/MarkdownSplit.tsx";
 import { getTestCase } from "../utils/testcase.ts";
 
-export const handler: Handlers<{ course: Course; lable: string | undefined, testcases: { regex?: string | undefined; output?: string | undefined; }[] | undefined }> =
+import IconAppWindow from "https://deno.land/x/[email protected]/tsx/app-window.tsx";
+
+export const handler: Handlers<
   {
-    async GET(_req, ctx) {
-      try {
-        let lable: string | undefined;
-        const course = await getCourse(ctx.params.slug);
-        if (ctx.params.slug.includes("/")) {
-          lable = await getJson(ctx.params.slug.split("/")[0]);
-        }
-        if (course === null) return ctx.renderNotFound();
-        const testcases = await getTestCase(course.slug);
-        return ctx.render({ course, lable, testcases });
-      } catch {
-        return ctx.renderNotFound();
+    course: Course;
+    lable: string | undefined;
+    testcases:
+      | { regex?: string | undefined; output?: string | undefined }[]
+      | undefined;
+  }
+> = {
+  async GET(_req, ctx) {
+    try {
+      let lable: string | undefined;
+      const course = await getCourse(ctx.params.slug);
+      if (ctx.params.slug.includes("/")) {
+        lable = await getJson(ctx.params.slug.split("/")[0]);
       }
-    },
-  };
+      if (course === null) return ctx.renderNotFound();
+      const testcases = await getTestCase(course.slug);
+      return ctx.render({ course, lable, testcases });
+    } catch {
+      return ctx.renderNotFound();
+    }
+  },
+};
 
 export default function CoursePage(
-  props: PageProps<{ 
+  props: PageProps<{
     course: Course;
     lable: string | undefined;
   }>,
@@ -61,6 +70,16 @@ export default function CoursePage(
         <script src="/resizer.js" />
       </Head>
       <main>
+        <div
+          class="btn btn-info flex items-center gap-1 md:hidden mt-2 absolute z-[999] bottom-2 right-2"
+          id="open-editor"
+        >
+          <IconAppWindow />
+          <p>
+            فتح المحرر
+          </p>
+        </div>
+
         <div dir="ltr" class="split flex-grow h-full-minus-bar">
           <div id="split-0" class="flex flex-col">
             <EditorSplit slug={course.slug} />

diff --git a/static/resizer.js b/static/resizer.js
@@ -12,13 +12,16 @@ document.addEventListener("DOMContentLoaded", function () {
     });
     let isRight = true;
     const openEditorButton = document.querySelector("#open-editor");
+    const pElement = openEditorButton.querySelector("p");
     openEditorButton.addEventListener("touchend", function () {
       if (isRight) {
         splitInstance.setSizes([100, 0]);
         isRight = false;
+        pElement.textContent = "فتح الدرس";
       } else {
         splitInstance.setSizes([0, 100]);
         isRight = true;
+        pElement.textContent = "فتح المحرر";
       }
     });
   } else {

diff --git a/static/styles.css b/static/styles.css
@@ -29,6 +29,10 @@ body .markdown-body {
   width: fit-content;
 }
 
+.markdown-body td, .markdown-body th, .markdown-body code {
+  color: white;
+}
+
 pre {
   direction: ltr !important;
 }