Improve some things

TeaByte · Jan 18, 2024 · da2fa6d · da2fa6d
1 parent a52a454
commit da2fa6d
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ help you achieve your learning goals.
 - [ ] Blogs page
 - [x] Quizes system
 - [ ] Improve phone users experience
-- [ ] Next and prev lesson buttons (maybe?)
+- [x] Next and prev lesson buttons
 
 ---
 

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -13,7 +13,7 @@ export default function Footer() {
       title: "المجتمع",
       children: [
         { name: "قناه التلغرام", href: "https://t.me/NakhlahJS" },
-        { name: "المجتمع", href: "https://t.me/Unassisted" },
+        { name: "المجتمع", href: "https://t.me/NakhlahChat" },
       ],
     },
   ];

diff --git a/components/MarkdownSplit.tsx b/components/MarkdownSplit.tsx
@@ -1,7 +1,7 @@
 import { render } from "https://deno.land/x/gfm/mod.ts";
 import { Course } from "../utils/types.ts";
-import IconPlayerTrackNext from "https://deno.land/x/[email protected]/tsx/player-track-next.tsx"
-import IconPlayerTrackPrev from "https://deno.land/x/[email protected]/tsx/player-track-prev.tsx"
+import IconPlayerTrackNext from "https://deno.land/x/[email protected]/tsx/player-track-next.tsx";
+import IconPlayerTrackPrev from "https://deno.land/x/[email protected]/tsx/player-track-prev.tsx";
 import EditButton from "../components/EditButton.tsx";
 
 export default function MarkdownSplit({
@@ -18,63 +18,65 @@ export default function MarkdownSplit({
   prevCourse: string | undefined;
 }) {
   return (
-    <section dir="rtl" class="p-3 py-5 mb-40">
-      <div>
-        <div className="flex flex-col-reverse">
-          <div class="flex flex-col-reverse text-sm breadcrumbs" dir="rtl">
-            <ul>
-              <li>
-                <a href="/">الرئيسية</a>
-              </li>
-              {lable && (
-                <li>
-                  <a href={`/group/${lableSlug}`}>{lable}</a>
-                </li>
-              )}
-              <li class="underline">{course.title}</li>
-            </ul>
-          </div>
-        </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>
-      </div>
-
-      <div
-        id="document"
-        class="markdown-body"
-        style={{ backgroundColor: "inherit" }}
-        dangerouslySetInnerHTML={{
-          __html: render(course.content, {
-            disableHtmlSanitization: true,
-          }),
-        }}
-      />
-      <div class="flex justify-between mt-4">
-        <div>
+    <>
+      <div class="flex px-2 pt-2 gap-2">
+        <div class="grow overflow-hidden">
           {prevCourse && (
             <a
               href={`/${prevCourse}`}
-              class="flex flex-row items-center gap-2 btn btn-outline"
+              class="flex items-center gap-2 btn btn-outline flex-nowrap"
             >
               <IconPlayerTrackNext size={18} />
               <span>الدرس السابق</span>
             </a>
           )}
         </div>
-        <div>
+        <div class="grow overflow-hidden">
           {nextCourse && (
             <a
-            href={`/${nextCourse}`}
-            class="flex flex-row items-center gap-2 btn btn-outline"
+              href={`/${nextCourse}`}
+              class="flex items-center gap-2 btn btn-outline flex-nowrap"
             >
               <span>الدرس التالي</span>
-            <IconPlayerTrackPrev size={18} />
+              <IconPlayerTrackPrev size={18} />
             </a>
           )}
         </div>
       </div>
-    </section>
+      <section dir="rtl" class="p-3 py-5 mb-24 md:mb-0">
+        <div>
+          <div className="flex flex-col-reverse">
+            <div class="flex flex-col-reverse text-sm breadcrumbs" dir="rtl">
+              <ul>
+                <li>
+                  <a href="/">الرئيسية</a>
+                </li>
+                {lable && (
+                  <li>
+                    <a href={`/group/${lableSlug}`}>{lable}</a>
+                  </li>
+                )}
+                <li class="underline">{course.title}</li>
+              </ul>
+            </div>
+          </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>
+        </div>
+
+        <div
+          id="document"
+          class="markdown-body"
+          style={{ backgroundColor: "inherit" }}
+          dangerouslySetInnerHTML={{
+            __html: render(course.content, {
+              disableHtmlSanitization: true,
+            }),
+          }}
+        />
+      </section>
+    </>
   );
 }
diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
@@ -4,7 +4,7 @@ export default function ProgressBar(props: { progress: number }) {
     <div className="bg-base-100 rounded-box shadow-sm overflow-hidden p-1">
       <div className="relative h-6 flex items-center justify-center">
         <div
-          className="absolute top-0 bottom-0 right-0 rounded-box bg-info"
+          className="absolute top-0 bottom-0 right-0 rounded-box bg-[#5bbcd1]"
           style={widthStyle}
         >
           <div className="relative text-black font-medium text-sm text-center">

diff --git a/components/ProgressPageSplit.tsx b/components/ProgressPageSplit.tsx
@@ -4,11 +4,11 @@ export default function ProgressPageSplit(
   props: { completed: number; total: number; className?: string },
 ) {
   return (
-    <div class={"flex-col" + props?.className}>
-      <h2 className="text-xl font-bold py-2">تقدمك في إنجاز الدروس:</h2>
-        <ProgressBar
-          progress={Math.floor((props.completed / props.total) * 100)}
-        />
+    <div class={"flex-col py-2 " + props?.className}>
+      <h2 className="text-xl font-bold pb-2">تقدمك في إنجاز الدروس</h2>
+      <ProgressBar
+        progress={Math.floor((props.completed / props.total) * 100)}
+      />
     </div>
   );
 }
diff --git a/courses/intro.md b/courses/intro.md
@@ -31,9 +31,9 @@ order: 1
 تجاربهم معك. هذا التفاعل يمكن أن يجعل عملية التعلم أكثر سهولة ومتعة.
 
 <div class="quiz">
-لتخطي هذا الدرس إضغط على زر إختبار 
+لتخطي هذا الدرس إضغط على زر إختبار
 </div>
 <!-- <mark>recommended</mark> -->
 
 أنضم الان! [قناه التلغرام](https://t.me/NakhlahJS),
-[جروب التلغرام](https://t.me/Unassisted)
+[جروب التلغرام](https://t.me/NakhlahChat)
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
@@ -127,8 +127,14 @@ export default function Editor(props: EditorProps) {
       if (code) {
         eval(code);
       }
+
       setIsError(false);
-      setOutput(capturedOutput.join("\n"));
+      if (capturedOutput.length > 0) {
+        setOutput(capturedOutput.join("\n"));
+      } else {
+        setOutput("لا يوجد اي شيء يتم طباعته");
+      }
+
       console.log = originalConsoleLog;
       return capturedOutput.join("\n");
     } catch (error) {
@@ -144,7 +150,9 @@ export default function Editor(props: EditorProps) {
         <div dir="rtl" class="flex gap-2">
           <button
             class={"btn btn-info hover:bg-[#5bbcd1] grow border-0 " +
-              (isError ? "bg-error hover:bg-[#ff6868]" : "hover:opacity-80")}
+              (isError
+                ? "bg-error hover:bg-[#ff6868]"
+                : "bg-[#5bbcd1] hover:opacity-80")}
             onClick={handleCodeRun}
           >
             تشغيل

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -13,7 +13,7 @@ import IconAppWindow from "https://deno.land/x/[email protected]/tsx/app-wi
 import { findNextCourse } from "../utils/course.ts";
 import { findPrevCourse } from "../utils/course.ts";
 
-interface Props   {
+interface Props {
   course: Course;
   lable: string | undefined;
   lableSlug: string | undefined;
@@ -33,7 +33,13 @@ export const handler: Handlers<Props> = {
         const [lableSlug, lable] = await getJson(ctx.params.slug.split("/")[0]);
         return ctx.render({ course, lable, lableSlug, nextCourse, prevCourse });
       }
-      return ctx.render({ course, lable: undefined, lableSlug: undefined, nextCourse, prevCourse });
+      return ctx.render({
+        course,
+        lable: undefined,
+        lableSlug: undefined,
+        nextCourse,
+        prevCourse,
+      });
     } catch {
       return ctx.renderNotFound();
     }