Merge pull request #57 from TeaByte/partial-lesson

Partial lesson
TeaByte · Feb 20, 2024 · 61bb749 · 61bb749
2 parents 906c0f1 + fb057d6
commit 61bb749
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 50 deletions.
diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
@@ -1,3 +1,4 @@
+import { Partial } from "$fresh/runtime.ts";
 import Editor from "../islands/Editor.tsx";
 import { getPreCode } from "../utils/precode.ts";
 import { getTestingCode } from "../utils/testingcode.ts";
@@ -30,11 +31,13 @@ export default function EditorSplit(props: EditorSplitProps) {
           </div>
         </div>
       </div>
-      <Editor
-        preCode={precode}
-        testingCode={testingcode}
-        slug={props.slug}
-      />
+      <Partial name="editor">
+        <Editor
+          preCode={precode}
+          testingCode={testingcode}
+          slug={props.slug}
+        />
+      </Partial>
     </div>
   );
 }
diff --git a/components/MarkdownSplit.tsx b/components/MarkdownSplit.tsx
@@ -5,6 +5,7 @@ import EditButton from "../components/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";
+import { Partial } from "$fresh/runtime.ts";
 
 interface MarkdownSplitProps {
   course: Course;
@@ -24,63 +25,72 @@ export default function MarkdownSplit({
   return (
     <>
       <div class="flex px-2 pt-2 gap-2">
-        {nextCourse && (
-          <div class="grow">
-            <a
-              href={`/${nextCourse}`}
-              class="flex items-center gap-2 btn btn-outline flex-nowrap"
-            >
-              <IconPlayerTrackPrev size={18} />
-              <span>الدرس التالي</span>
-            </a>
-          </div>
-        )}
+        <Partial name="navigation-buttons">
+          {nextCourse && (
+            <div class="grow">
+              <a
+                f-partial={`/${nextCourse}`}
+                href={`/${nextCourse}`}
+                class="flex items-center gap-2 btn btn-outline flex-nowrap"
+              >
+                <IconPlayerTrackPrev size={18} />
+                <span>الدرس التالي</span>
+              </a>
+            </div>
+          )}
 
-        {prevCourse && (
-          <div class="grow">
-            <a
-              href={`/${prevCourse}`}
-              class="flex items-center gap-2 btn btn-outline flex-nowrap"
-            >
-              <span>الدرس السابق</span>
-              <IconPlayerTrackNext size={18} />
-            </a>
-          </div>
-        )}
+          {prevCourse && (
+            <div class="grow">
+              <a
+                f-partial={`/${prevCourse}`}
+                href={`/${prevCourse}`}
+                class="flex items-center gap-2 btn btn-outline flex-nowrap"
+              >
+                <span>الدرس السابق</span>
+                <IconPlayerTrackNext size={18} />
+              </a>
+            </div>
+          )}
+        </Partial>
       </div>
       <section dir="rtl" class="p-3 mb-40 md:mb-5">
         <div>
           <div className="flex flex-col-reverse">
             <div class="flex flex-col-reverse text-sm breadcrumbs" dir="rtl">
-              <ul>
-                <li>
-                  <a href="/courses">الدروس</a>
-                </li>
-                {lable && (
+              <Partial name="breadcrumbs">
+                <ul>
                   <li>
-                    <a href={`/group/${lableSlug}`}>{lable}</a>
+                    <a href="/courses">الدروس</a>
                   </li>
-                )}
-                <li class="underline">{course.title}</li>
-              </ul>
+                  {lable && (
+                    <li>
+                      <a href={`/group/${lableSlug}`}>{lable}</a>
+                    </li>
+                  )}
+                  <li class="underline">{course.title}</li>
+                </ul>
+              </Partial>
             </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} />
+            <Partial name="course-header">
+              <h1 class="text-3xl">{course.title}</h1>
+              <EditButton slug={course.slug} />
+            </Partial>
           </div>
         </div>
-
-        <div
-          id="document"
-          class="markdown-body"
-          style={{ backgroundColor: "inherit" }}
-          dangerouslySetInnerHTML={{
-            __html: render(course.content, {
-              disableHtmlSanitization: true,
-            }),
-          }}
-        />
+        <Partial name="course-content">
+          <div
+            id="document"
+            class="markdown-body"
+            style={{ backgroundColor: "inherit" }}
+            dangerouslySetInnerHTML={{
+              __html: render(course.content, {
+                disableHtmlSanitization: true,
+              }),
+            }}
+          />
+        </Partial>
       </section>
     </>
   );

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -77,7 +77,7 @@ export default function CoursePage(
         <script src="/JavaScript/monaco.js"></script>
         <script src="/JavaScript/courses-page.js" />
       </Head>
-      <main>
+      <main f-client-nav>
         {/* Small screen editor/docs toggle button */}
         <SmallScreenButton />
         {/* Course page loading */}

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -37,6 +37,7 @@ export default function IndexPage() {
               </p>
               <div class="mt-4 mb-2 flex flex-col md:flex-row justify-center items-center gap-1">
                 <a
+                  f-partial="/courses"
                   href="/courses"
                   class="px-8 text-lg btn bg-base-content text-base-100 hover:bg-base-200 hover:text-base-content rounded-box"
                 >