Refactor shell and offline quiz loading

Author: malikpiara

.gitignore

@@ -13,6 +13,7 @@
 # next.js
 /.next/
 /out/
+/public/offline-manifest.json
 
 # production
 /build

README.md

@@ -2,6 +2,19 @@
 
 LogiCola 3 is an instructional program that goes with Gensler's Introduction to Logic (Routledge Press). Since Harry Gensler, the original creator has passed away, I decided to create a new version to preserve an important learning resource and honour his legacy.
 
+Logicola is a web-based remake of the original Logicola software, designed to help students learn logic more easily across modern devices while preserving the spirit of the original program.
+
+The live project is available at [logicola.org](https://logicola.org).
+
+## About
+
+This project focuses on making logic instruction more accessible to students,teachers, and universities by combining:
+
+- Interactive quizzes.
+- Installable web app support for offline quiz use.
+
+Logicola is still growing. The current codebase reflects both ongoing content development and the practical goal of keeping the platform widely accessible on the web.
+
 ## Getting Started
 
 Install dependencies with pnpm:
@@ -18,7 +31,8 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the app by modifying files in `app/`, `components/`, and
+`content/`.
 
 ## Verification
 
@@ -29,21 +43,20 @@ pnpm build
 pnpm test
 ```
 
-For the dependency-upgrade workflow, use the checklist in [docs/modernization-checklist.md](/Users/malik/Code/logicola/docs/modernization-checklist.md).
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Roboto Flex.
-
-## Learn More
+The production build also regenerates the offline cache manifest used by the service worker.
 
-To learn more about Next.js, take a look at the following resources:
+## Offline Support
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Logicola supports offline access for published quizzes after the app has been installed or loaded while online.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Technical details and maintenance notes are documented in
+[docs/offline-support.md](docs/offline-support.md).
 
-## Deploy on Vercel
+## Project Notes
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+- Quiz route publishing is tracked in `content/quiz-catalog.json`.
+- The offline service worker is intentionally scoped to published quizzes and the app shell they need.
+- For maintenance and release verification, see
+  [docs/release-checks.md](docs/release-checks.md).
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to load Roboto Flex.

app/(quiz)/[...slugs]/page.tsx

@@ -0,0 +1,55 @@
+import Quiz from '@/components/quiz';
+import { findQuizCatalogEntry, quizRouteSlugs } from '@/lib/quizCatalog';
+import { loadPublishedQuizSubSet } from '@/lib/publishedQuizLookup';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export interface QuizPageProps {
+  params: Promise<{ slugs: string[] }>;
+}
+
+export default async function QuizPage({ params }: QuizPageProps) {
+  const { slugs } = await params;
+  const publishedQuiz = findQuizCatalogEntry(slugs);
+
+  if (!publishedQuiz) {
+    notFound();
+  }
+
+  const subSet = await loadPublishedQuizSubSet(slugs);
+
+  if (!subSet) {
+    notFound();
+  }
+
+  return (
+    <div className='flex w-full h-screen'>
+      {/* <ExerciseSidebar
+          chapter={3}
+          path={params.slugs.slice(0, -1)}
+          isQuestionActive={(index) => {
+            return pathname === `/informal/definitions/${index + 1}`;
+          }}
+          initialQuestionIdx={0}
+        /> */}
+      <main className='p-4 w-full'>
+        <Quiz subSet={subSet} />
+      </main>
+    </div>
+  );
+}
+
+export function generateStaticParams() {
+  return quizRouteSlugs.map((slugs) => ({ slugs }));
+}
+
+export async function generateMetadata({
+  params,
+}: QuizPageProps): Promise<Metadata> {
+  const { slugs } = await params;
+  const publishedQuiz = findQuizCatalogEntry(slugs);
+
+  return {
+    title: (publishedQuiz?.title || 'Not found') + ' | Logicola',
+  };
+}

app/(quiz)/layout.tsx

@@ -0,0 +1,14 @@
+import ExerciseNavbar from '@/components/mobile/exerciseNavbar';
+
+export default function QuizLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <ExerciseNavbar />
+      {children}
+    </>
+  );
+}

app/keyboard/page.tsx app/(site)/keyboard/page.tsxapp/keyboard/page.tsx renamed to app/(site)/keyboard/page.tsx

@@ -0,0 +1,19 @@
+import Navbar from '@/components/navbar';
+import MobileNavbar from '@/components/mobile/navbar';
+import { Footer } from '@/components/footer';
+import { quizCatalog } from '@/lib/quizCatalog';
+
+export default function SiteLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <MobileNavbar quizCatalog={quizCatalog} />
+      <Navbar quizCatalog={quizCatalog} />
+      <main className='flex'>{children}</main>
+      <Footer />
+    </>
+  );
+}

app/(site)/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata, Viewport } from 'next';
 import { Roboto_Flex } from 'next/font/google';
-import '../globals.css';
-import thumbnail from '../../public/thumbnail.jpg';
+import thumbnail from '../../../public/thumbnail.jpg';
 
 const robotoFlex = Roboto_Flex({
   subsets: ['latin'],

app/page.tsx app/(site)/page.tsxapp/page.tsx renamed to app/(site)/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
 import { Button } from '@/components/ui/button';