sort by group

components/EditButton.tsx

@@ -2,7 +2,7 @@ export default function EditButton({ slug }: { slug: string }) {
   return (
     <a
       target="_blank"
-      href={`https://github.com/TeaByte/NakhlahJS/edit/main/courses/${slug}.md`}
+      href={`https://github.com/TeaByte/NakhlahJS/blob/main/courses/${slug}.md`}
       class="pl-3 flex items-center gap-1 hover:opacity-75"
       title="تعديل الملف"
     >

courses/functions/_data.json

@@ -1,4 +1,4 @@
 {
   "label": "الدوال",
-  "order": 8
+  "order": 9
 }

fresh.gen.ts

@@ -6,6 +6,7 @@ import * as $_slug_ from "./routes/[...slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $api_test from "./routes/api/test.ts";
+import * as $group_slug_ from "./routes/group/[slug].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $Editor from "./islands/Editor.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -16,6 +17,7 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/api/test.ts": $api_test,
+    "./routes/group/[slug].tsx": $group_slug_,
     "./routes/index.tsx": $index,
   },
   islands: {

routes/group/[slug].tsx

@@ -0,0 +1,44 @@
+import { Course, CourseGroup } from "../../utils/types.ts";
+import { getCourse } from "../../utils/course.ts";
+import { Handlers } from "$fresh/server.ts";
+import { PageProps } from "$fresh/server.ts";
+import { CSS, render } from "$gfm";
+import { Head } from "$fresh/runtime.ts";
+import { cache, populateCache } from "../../utils/course-cache.ts";
+import CourseCard from "../../components/CourseCard.tsx";
+
+import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
+
+populateCache();
+
+// TODO - FIX TYPES
+export const handler: Handlers<CourseGroup> = {
+  GET(_req, ctx) {
+    const foundCourseGroup = cache.merged.find((c) => {
+      return "courses" in c && c.courses.length > 0 &&
+        c.order === parseInt(ctx.params.slug, 10);
+    });
+    if (!foundCourseGroup) return ctx.renderNotFound();
+    return ctx.render(foundCourseGroup as CourseGroup);
+  },
+};
+
+export default function CoursePage(props: PageProps<CourseGroup>) {
+  const foundCourseGroup = props.data;
+
+  return (
+    <main class="max-w-screen-md px-4 pt-12 mx-auto mb-6">
+      <div class="flex gap-1 items-center">
+        <h2 class="text-3xl font-bold">
+          {foundCourseGroup.label}
+        </h2>
+        <IconChevronDown />
+      </div>
+      <div class="flex flex-col mt-2 pr-3">
+        {foundCourseGroup.courses.map((innerCourse) => (
+          <CourseCard key={innerCourse.slug} course={innerCourse} />
+        ))}
+      </div>
+    </main>
+  );
+}

routes/index.tsx

@@ -1,13 +1,14 @@
 import { Handlers } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
 import { PageProps } from "$fresh/server.ts";
-
 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";
 
+import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
+
 populateCache();
 
 export const handler: Handlers<{ merged: (Course | CourseGroup)[] }> = {
@@ -46,9 +47,12 @@ export default function BlogIndexPage(
             if ("courses" in course) {
               return (
                 <div class="" key={index}>
-                  <h2 class="text-3xl font-bold">
-                    {course.label}
-                  </h2>
+                  <div class="flex gap-1 items-center">
+                    <h2 class="text-3xl font-bold hover:opacity-75">
+                      <a href={`/group/${course.order}`}>{course.label}</a>
+                    </h2>
+                    <IconChevronDown />
+                  </div>
                   <div class="flex flex-col mt-2 pr-3">
                     {course.courses.map((innerCourse) => (
                       <CourseCard key={innerCourse.slug} course={innerCourse} />