Implement Client-Side Partial Updates in Fresh #54

TeaByte · Feb 19, 2024 · 8369b40 · 8369b40
1 parent 9b8b935
commit 8369b40
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 60 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,7 @@
 .env.test.local
 .env.production.local
 .env.local
-
+.vscode/
 # Fresh build directory
 _fresh/
 # npm dependencies

diff --git a/components/Courses.tsx b/components/Courses.tsx
@@ -18,7 +18,7 @@ export default function Courses(
           total={total}
         />
       </div>
-      <section class="flex flex-col gap-2 mb-4 mt-6">
+      <section class="flex flex-col gap-2 mb-4 mt-6" f-client-nav={false}>
         {courses.map((course, index) => {
           // Group of courses
           if ("courses" in course) {

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -1,5 +1,5 @@
 import { Head } from "$fresh/runtime.ts";
-import { Handlers } from "$fresh/server.ts";
+import { Handlers, RouteConfig } from "$fresh/server.ts";
 import { PageProps } from "$fresh/server.ts";
 import { CSS } from "$gfm";
 
@@ -44,6 +44,10 @@ export const handler: Handlers<Props> = {
   },
 };
 
+export const config: RouteConfig = {
+  skipInheritedLayouts: true,
+}
+
 export default function CoursePage(
   props: PageProps<Props>,
 ) {

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,16 +1,53 @@
-import { PageProps } from "$fresh/server.ts";
+import { FreshContext, Handlers, type PageProps } from "$fresh/server.ts";
+import NavBar from "../components/Nav.tsx";
 
-export default function App({ Component }: PageProps) {
+import { populateCache } from "../utils/course-cache.ts";
+populateCache();
+
+// deno-lint-ignore require-await
+export default async function Layout(req: Request, ctx: FreshContext) {
   return (
-    <html>
+    // Don't delete data-theme="nord", used for defult theme and styles
+    <html dir="rtl" lang="ar" data-theme="nord">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>نخلة جي أس</title>
+        <link rel="stylesheet" href="/styles.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap"
+          rel="stylesheet"
+        />
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-TDHJL7ZT23"
+        >
+        </script>
+
+        <link rel="manifest" href="/manifest.json" />
+        <script src="/JavaScript/index.js"></script>
+        <script type="module" src="/JavaScript/sw-rg.js"></script>
       </head>
       <body>
-        <Component />
+        <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">
+          <div className="flex flex-col justify-center items-center text-center h-[89%] gap-2 p-5">
+            <p class="text-2xl">
+              يعتبر المتصفح الذي تستخدمه قديمًا وغير مدعوم حاليًا. يُرجى تحديث المتصفح الخاص بك أو استخدام متصفح آخر لضمان تجربة متصفح فعّالة.
+            </p>
+            <p>
+              نحن نلتزم بتوفير الدعم لمتصفحاتكم، حيث نعمل بجد لضمان تجربة موثوقة وفعّالة لجميع المستخدمين
+            </p>
+          </div>
+        </section>
+        <ctx.Component />
       </body>
     </html>
   );
-}
+}
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
@@ -1,53 +1,12 @@
-import { FreshContext, Handlers, type PageProps } from "$fresh/server.ts";
-import NavBar from "../components/Nav.tsx";
-
-import { populateCache } from "../utils/course-cache.ts";
-populateCache();
-
-// deno-lint-ignore require-await
-export default async function Layout(req: Request, ctx: FreshContext) {
-  return (
-    // Don't delete data-theme="nord", used for defult theme and styles
-    <html dir="rtl" lang="ar" data-theme="nord">
-      <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>نخلة جي أس</title>
-        <link rel="stylesheet" href="/styles.css" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap"
-          rel="stylesheet"
-        />
-        <script
-          async
-          src="https://www.googletagmanager.com/gtag/js?id=G-TDHJL7ZT23"
-        >
-        </script>
-
-        <link rel="manifest" href="/manifest.json" />
-        <script src="/JavaScript/index.js"></script>
-        <script type="module" src="/JavaScript/sw-rg.js"></script>
-      </head>
-      <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">
-          <div className="flex flex-col justify-center items-center text-center h-[89%] gap-2 p-5">
-            <p class="text-2xl">
-              يعتبر المتصفح الذي تستخدمه قديمًا وغير مدعوم حاليًا. يُرجى تحديث المتصفح الخاص بك أو استخدام متصفح آخر لضمان تجربة متصفح فعّالة.
-            </p>
-            <p>
-              نحن نلتزم بتوفير الدعم لمتصفحاتكم، حيث نعمل بجد لضمان تجربة موثوقة وفعّالة لجميع المستخدمين
-            </p>
-          </div>
-        </section>
-        <ctx.Component />
-      </body>
-    </html>
-  );
+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 (
+        <div f-client-nav>
+            <Partial name="layout">
+                <Component />
+            </Partial>
+        </div>
+    )
 }