Cleaning, organizing the codebase

CONTRIBUTING.md

@@ -1,33 +1,34 @@
 <div dir="rtl">
 
 <!-- ## مستندات المساهمة متاحة هنا: <https://nakhlahjs.site/contribute>. -->
-# مقدمة
 
-نحن مطورين نخلة جي أس لا زلنا نعتبر مشروعنا صغير و متواضع. نحن نرحب بالمساهمات من الجميع. يمكنك المساهمة بطرق مختلفة مثل:
+# مستندات المساهمة
+
+نحن مطورين نخلة جي أس لا زلنا نعتبر مشروعنا صغير و متواضع. نحن نرحب بالمساهمات
+من الجميع. يمكنك المساهمة بطرق مختلفة مثل:
 
 - إبلاغنا عن الأخطاء والمشاكل عن طريق فتح مشكلة في خانة المشاكل.
 - إقتراح تحسينات أو ميزات جديدة عن طريق خانة المناقشة.
-- إرسال طلب دمج لتحسينات أو ميزات جديدة (من فضلك تأكد من أن الكود يتوافق مع الأسلوب والمعايير المستخدمة في المشروع).<br>
-  Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change and make sure to follow the coding style and standards used in the project.
+- إرسال طلب دمج لتحسينات أو ميزات جديدة (من فضلك تأكد من أن الكود يتوافق مع
+  الأسلوب والمعايير المستخدمة).
 
 ## الأسلوب والمعايير
-- يجب أن يكون الكود نظيف ومنظم.
-- يجب أن يكون الكود مكتوب بأسلوب متسق.
-- يجب أن يكون الكود معتمد على الأساليب الحديثة والمعايير الجديدة.
-- يجب أن يكون الكود مكتوب بأسلوب يسهل فهمه وصيانته.
-- يجب أن يكون الكود مكتوب بأسلوب يسهل توسيعه وتطويره.
-- يجب أن يكون الكود مكتوب بأسلوب يسهل اختباره.
-- يجب أن تكتب الوثائق بأسلوب يسهل فهمه واستخدامه -commenting-.
+
+- أن يكون الكود مكتوب بأسلوب متسق.
+- أن يكون الكود معتمد على الأساليب الحديثة والمعايير الجديدة.
+- أن يكون الكود مكتوب بأسلوب يسهل فهمه وصيانته.
+- أن تكتب الوثائق بأسلوب يسهل فهمه واستخدامه
 
 ## الأمان
-- يجب أن يكون الكود آمن ومحمي من الثغرات والهجمات.
-- يجب أن يكون الكود محمي من الثغرات الشائعة والهجمات الشائعة.
+
+- أن يكون الكود آمن ومحمي من الثغرات والهجمات.
 
 # الخطوات
+
 1. قم بعمل Fork للمشروع.
 2. قم بعمل Clone للمشروع إلى جهازك.
 3. قم بتنصيب الأدوات والمكتبات المطلوبة.
 4. قم بتطوير الكود المطلوب.
-5. قم بإرسال طلب دمج. make a pull request to the original repository to development branch.
+5. قم بإرسال طلب دمج.
 
 </div>

components/EditorSplit.tsx → components/CoursePage/EditorPart/EditorSplit.tsx

@@ -1,6 +1,6 @@
-import Editor from "../islands/Editor.tsx";
-import { getPreCode } from "../utils/precode.ts";
-import { getTestingCode } from "../utils/testingcode.ts";
+import Editor from "@/islands/Editor.tsx";
+import { getPreCode } from "@/utils/precode.ts";
+import { getTestingCode } from "@/utils/testingcode.ts";
 
 interface EditorSplitProps {
   slug: string;

components/MarkdownSplit.tsx → components/CoursePage/MarkdownPart/MarkdownSplit.tsx

@@ -1,7 +1,7 @@
 import { render } from "$gfm";
-import { Course } from "../utils/types.ts";
+import { Course } from "@/utils/types.ts";
 
-import EditButton from "../components/EditButton.tsx";
+import EditButton from "./EditButton.tsx";
 
 import IconPlayerTrackNext from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/player-track-next.tsx";
 import IconPlayerTrackPrev from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/player-track-prev.tsx";

components/Collapse.tsx → components/Main/Collapse.tsx

@@ -1,5 +1,5 @@
 import ProgressCheck from "@/islands/ProgressCheck.tsx";
-import { Course } from "../utils/types.ts";
+import { Course } from "@/utils/types.ts";
 
 interface CloseProps {
   title: string;

components/Footer.tsx → components/Main/Footer.tsx

@@ -1,3 +1,5 @@
+import Icon from "@/components/Nav/Icon.tsx";
+
 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">
@@ -24,10 +26,7 @@ export default function Footer() {
               data-current="true"
               aria-current="page"
             >
-              <div class="flex items-center">
-                <span class="text-yellow-500">JS</span>
-                <span class="ml-2 font-bold text-2xl">نخلة</span>
-              </div>
+              <Icon />
             </a>
           </div>
         </div>

components/Drawer.tsx → components/Nav/Drawer.tsx

@@ -1,7 +1,7 @@
 import ProgressCheck from "@/islands/ProgressCheck.tsx";
-import { Course, CourseGroup } from "../utils/types.ts";
+import { Course, CourseGroup } from "@/utils/types.ts";
 
-import Collapse from "./Collapse.tsx";
+import Collapse from "@/components/Main/Collapse.tsx";
 
 import IconLayoutSidebarLeftCollapse from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/layout-sidebar-left-collapse.tsx";
 import IconChevronDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/chevron-down.tsx";

components/Icon.tsx → components/Nav/Icon.tsx

@@ -1,7 +1,7 @@
 export default function Icon() {
   return (
     <div class="flex items-center">
-      <span class="text-yellow-500 text-2xl font-bold">JS</span>
+      <span class="text-yellow-500">JS</span>
       <span class="ml-2 font-bold text-2xl">نخلة</span>
     </div>
   );

components/Nav.tsx → components/Nav/Nav.tsx

@@ -1,7 +1,8 @@
-import { cache } from "../utils/course-cache.ts";
+import { cache } from "@/utils/course-cache.ts";
 
-import ThemeToggle from "../islands/ThemeToggle.tsx";
-import Drawer from "./Drawer.tsx";
+import ThemeToggle from "@/islands/ThemeToggle.tsx";
+import Drawer from "@/components/Nav/Drawer.tsx";
+import Icon from "@/components/Nav/Icon.tsx";
 
 export default function NavBar() {
   return (
@@ -21,10 +22,7 @@ export default function NavBar() {
             title="نخلة جي اس"
             class="text-2xl ml-1 font-bold hover:animate-pulse"
           >
-            <div class="flex items-center">
-              <span class="text-yellow-500">JS</span>
-              <span class="ml-2 font-bold text-2xl">نخلة</span>
-            </div>
+            <Icon />
           </a>
         </div>
       </div>

islands/ProgressBar.tsx

@@ -6,6 +6,7 @@ export default function ProgressBar(props: ProgressBarProps) {
   // min default must be 5 for better style
   const defultWidth = (props.progress < 5 && props.progress > 0) ? 5 : props.progress;
   const widthStyle = { width: `${defultWidth}%` };
+
   return (
     <div className="bg-base-100 rounded-box shadow-sm overflow-hidden p-1">
       <div className="relative h-6 flex items-center justify-center">

islands/ProgressCheck.tsx

@@ -9,6 +9,7 @@ interface ProgressCheckProps {
 
 export default function ProgressCheck(props: ProgressCheckProps) {
     const [isPassed, setIsPassed] = useState<boolean>(false);
+
     useEffect(() => {
         const passedTEXT = localStorage.getItem("passedCourses");
         let passed: string[] = [];
@@ -19,6 +20,7 @@ export default function ProgressCheck(props: ProgressCheckProps) {
             setIsPassed(true);
         }
     }, [newPassSignal.value]);
+
     return isPassed
         ? <IconCircleCheckFilled aria-hidden="true" class="h-4 w-4" />
         : <IconCircle aria-hidden="true" class="h-4 w-4" />;

islands/ProgressSection.tsx

@@ -9,6 +9,7 @@ interface ProgressSectionProps {
 export default function ProgressSection(
   props: ProgressSectionProps,
 ) {
+
   const [completed, setCompleted] = useState<number>(0);
   useEffect(() => {
     const passedTEXT = localStorage.getItem("passedCourses");
@@ -18,6 +19,7 @@ export default function ProgressSection(
     }
     setCompleted(passed.length);
   }, []);
+
   return (
     <div class={"flex-col py-2 " + props.className}>
       <h2 className="text-xl font-bold pb-2">تقدمك في إنجاز الدروس</h2>

plugins/sw-page-json-builder.ts

@@ -1,6 +1,8 @@
 import { Plugin, PluginMiddleware } from "$fresh/server.ts";
 import * as path from "https://deno.land/std@0.207.0/path/mod.ts";
+
 import { getFlatSlugs } from "@/utils/course.ts";
+
 export default function SW_cache(
 ): Plugin {
     let staticDir = path.join(Deno.cwd(), "static");

routes/[...slug].tsx

@@ -3,13 +3,13 @@ import { Handlers, RouteConfig } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { CSS } from "$gfm";
 
-import { Course } from "../utils/types.ts";
-import { getCourse, getJson, findNextCourse, findPrevCourse } from "../utils/course.ts";
+import { Course } from "@/utils/types.ts";
+import { getCourse, getJson, findNextCourse, findPrevCourse } from "@/utils/course.ts";
 
-import EditorSplit from "../components/EditorSplit.tsx";
-import MarkdownSplit from "../components/MarkdownSplit.tsx";
-import SmallScreenButton from "@/components/SmallScreenButton.tsx";
-import CourseLoading from "@/components/CourseLoading.tsx";
+import EditorSplit from "@/components/CoursePage/EditorPart/EditorSplit.tsx";
+import MarkdownSplit from "@/components/CoursePage/MarkdownPart/MarkdownSplit.tsx";
+import SmallScreenButton from "@/components/CoursePage/MarkdownPart/SmallScreenButton.tsx";
+import CourseLoading from "@/components/CoursePage/MarkdownPart/CourseLoading.tsx";
 
 interface Props {
   course: Course;

routes/_404.tsx

@@ -1,5 +1,5 @@
 import { Head } from "$fresh/runtime.ts";
-import Footer from "../components/Footer.tsx";
+import Footer from "@/components/Main/Footer.tsx";
 
 export default function Error404() {
   return (

routes/_app.tsx

@@ -1,7 +1,7 @@
 import { FreshContext } from "$fresh/server.ts";
-import NavBar from "../components/Nav.tsx";
+import NavBar from "@/components/Nav/Nav.tsx";
 
-import { populateCache } from "../utils/course-cache.ts";
+import { populateCache } from "@/utils/course-cache.ts";
 populateCache().then(() => { console.log("Course cache populated"); }).catch((err) => console.error("Error populating course cache", err));
 
 // deno-lint-ignore require-await
@@ -36,7 +36,7 @@ export default async function Layout(req: Request, ctx: FreshContext) {
       <body>
         <NavBar />
         {/* Update your browser message */}
-        <section id="old-check" class="flex-grow h-[100%] w-full h-full absolute bg-base-300 z-[9999] hidden">
+        <section id="old-check" class="flex-grow w-full h-full absolute bg-base-300 z-[9999] hidden">
           <div className="flex flex-col justify-center items-center text-center h-[89%] gap-2 p-5">
             <p class="text-2xl">
               يعتبر المتصفح الذي تستخدمه قديمًا وغير مدعوم حاليًا. يُرجى تحديث المتصفح الخاص بك أو استخدام متصفح آخر لضمان تجربة متصفح فعّالة.

routes/_layout.tsx

@@ -1,5 +1,6 @@
 import { PageProps } from "$fresh/server.ts"
 import { Partial } from "$fresh/runtime.ts"
+
 export default function Layout({ Component }: PageProps) {
     // DO change location of the layout file or move it to _app.. 
     return (

routes/about.tsx

@@ -1,7 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
 
-import AboutIcons from "@/components/AboutIcons.tsx";
-import Footer from "../components/Footer.tsx";
+import AboutIcons from "@/components/Main/AboutIcons.tsx";
+import Footer from "@/components/Main/Footer.tsx";
 
 export default function AboutPage() {
   return (

routes/courses.tsx

@@ -3,11 +3,11 @@ import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 
 import { getNumberOfCourses } from "@/utils/course.ts";
-import { Course, CourseGroup } from "../utils/types.ts";
-import { cache } from "../utils/course-cache.ts";
+import { Course, CourseGroup } from "@/utils/types.ts";
+import { cache } from "@/utils/course-cache.ts";
 
-import Footer from "../components/Footer.tsx";
-import Courses from "../components/Courses.tsx";
+import Footer from "@/components/Main/Footer.tsx";
+import Courses from "@/components/Main/Courses.tsx";
 
 interface Props {
   courses: (Course | CourseGroup)[];

routes/group/[slug].tsx

@@ -2,10 +2,10 @@ import { Head } from "$fresh/runtime.ts";
 import { Handlers } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 
-import { Course, CourseGroup } from "../../utils/types.ts";
-import { cache } from "../../utils/course-cache.ts";
+import { Course, CourseGroup } from "@/utils/types.ts";
+import { cache } from "@/utils/course-cache.ts";
 
-import Footer from "../../components/Footer.tsx";
+import Footer from "@/components/Main/Footer.tsx";
 
 import IconChevronDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/chevron-down.tsx";
 import ProgressCheck from "@/islands/ProgressCheck.tsx";

routes/index.tsx

@@ -1,8 +1,9 @@
 import { Head } from "$fresh/runtime.ts";
 
-import Footer from "../components/Footer.tsx";
+import Footer from "@/components/Main/Footer.tsx";
+import AboutIcons from "@/components/Main/AboutIcons.tsx";
+
 import IconArrowBigRightLines from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/arrow-big-right-lines.tsx";
-import AboutIcons from "@/components/AboutIcons.tsx";
 
 export default function IndexPage() {
   return (

routes/offline.tsx

@@ -1,5 +1,5 @@
 import { Head } from "$fresh/runtime.ts";
-import Footer from "@/components/Footer.tsx";
+import Footer from "@/components/Main/Footer.tsx";
 
 export default function Offline() {
   return (

utils/course.ts

@@ -2,7 +2,7 @@ import { join } from "$std/path/mod.ts";
 import { readJson } from "https://deno.land/std@0.66.0/fs/read_json.ts";
 import { extract } from "https://deno.land/std@0.151.0/encoding/front_matter.ts";
 import { cache as CourceCache } from "@/utils/course-cache.ts";
-import { Course, CourseAttributes, CourseGroup } from "../utils/types.ts";
+import { Course, CourseAttributes, CourseGroup } from "@/utils/types.ts";
 
 export let CoursesCount = 0;
 export let FlatSlugsCache: string[] = [];