feat: add docs vertical (#180)

Adds Docs vertical

closes #97

apps/next-app/pages/404.page.tsx

@@ -1,7 +1,7 @@
 import { default as OpenInNewIcon } from "@mui/icons-material/OpenInNewOutlined";
 import { Link, Button, Stack } from "@mui/joy";
-import { LayoutPublic } from "@cf/next/public";
-import { Ups, AppHead } from "@cf/react/components";
+import { AppHead, LayoutPublic } from "@cf/next/public";
+import { Ups } from "@cf/react/components";
 import type { NextPage } from "next";
 
 const PageNotFound: NextPage = () => {

apps/next-app/pages/analytics/index.page.tsx

@@ -3,8 +3,8 @@ import { GlobalStyles, Sheet, Typography } from "@mui/joy";
 import { LineChart } from "@mui/x-charts/LineChart";
 import { PieChart } from "@mui/x-charts/PieChart";
 import { DateTime } from "luxon";
-import { BlogIndex, LayoutPublic } from "@cf/next/public";
-import { AppHead, BackgroundFadedImage } from "@cf/react/components";
+import { AppHead, BlogIndex, LayoutPublic } from "@cf/next/public";
+import { BackgroundFadedImage } from "@cf/react/components";
 import { trpc } from "@cf/trpc/client";
 import { staticHandler } from "@cf/trpc/server";
 import type { NextPage } from "next";

apps/next-app/pages/blog/[postId].page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
-import { BlogPost, LayoutPublic } from "@cf/next/public";
-import { AppHead, BackgroundFadedImage } from "@cf/react/components";
+import { AppHead, BlogPost, LayoutPublic } from "@cf/next/public";
+import { BackgroundFadedImage } from "@cf/react/components";
 import { trpc } from "@cf/trpc/client";
 import { staticHandler, staticPathsHandler } from "@cf/trpc/server";
 import type { NextPage } from "next";

apps/next-app/pages/blog/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
-import { BlogIndex, LayoutPublic } from "@cf/next/public";
-import { AppHead, BackgroundFadedImage } from "@cf/react/components";
+import { AppHead, BlogIndex, LayoutPublic } from "@cf/next/public";
+import { BackgroundFadedImage } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { NextPage } from "next";
 

apps/next-app/pages/index.page.tsx

@@ -1,7 +1,7 @@
 import * as fs from "node:fs/promises";
 import { useState } from "react";
-import { LayoutPublic, HeroWelcome } from "@cf/next/public";
-import { AppHead, BackgroundSlidingImages } from "@cf/react/components";
+import { LayoutPublic, HeroWelcome, AppHead } from "@cf/next/public";
+import { BackgroundSlidingImages } from "@cf/react/components";
 import { ThemeOverrideColorScheme } from "@cf/react/theme";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";

apps/next-app/pages/modules/[questionBank]/annexes/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, AnnexSearch } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler, staticPathsHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/docs/[docId].page.tsx

@@ -1,40 +1,38 @@
 import * as fs from "node:fs/promises";
+import { Drawer, ModalClose, Typography, useTheme } from "@mui/joy";
+import { AppHead } from "@cf/next/public";
 import {
-  Chip,
-  Divider,
-  Drawer,
-  Link,
-  ModalClose,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/joy";
-import { DocContent, LayoutModule } from "@cf/next/question-bank";
-import { AppHead, useDisclose, useMediaQuery } from "@cf/react/components";
-import { trpc } from "@cf/trpc/client";
+  DocContent,
+  DocLearningObjectives,
+  DocQuestions,
+  LayoutModule,
+} from "@cf/next/question-bank";
+import { useDisclose, useMediaQuery } from "@cf/react/components";
 import { staticHandler, staticPathsHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
+import type { AppHeadProps } from "@cf/next/public";
 import type { Breadcrumbs } from "@cf/next/question-bank";
 import type { NextPage } from "next";
 
+const HEADER_HEIGHT = 48;
+
 type PageProps = {
   docId: string;
   questionBank: QuestionBankName;
+  meta: AppHeadProps;
 };
 
 type PageParams = {
   docId: string;
   questionBank: QuestionBankName;
 };
 
-const useDoc = trpc.containers.docs.getDoc.useSuspenseQuery;
-
-export const Page: NextPage<PageProps> = ({ docId, questionBank }) => {
-  const [{ doc }] = useDoc({ docId, questionBank });
+export const Page: NextPage<PageProps> = ({ docId, questionBank, meta }) => {
   const theme = useTheme();
   const loDrawer = useDisclose(false);
   const questionDrawer = useDisclose(false);
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const crumbs = [
     [questionBank.toUpperCase(), `/modules/${questionBank}`],
     ["Docs", `/modules/${questionBank}/docs`],
@@ -43,83 +41,70 @@ export const Page: NextPage<PageProps> = ({ docId, questionBank }) => {
 
   return (
     <LayoutModule questionBank={questionBank} breadcrumbs={crumbs}>
-      <AppHead
-        title={doc.title}
-        linkTitle={doc.title}
-        linkDescription={doc.description}
-      />
-      <Stack
+      <AppHead {...meta} />
+      <DocContent
+        onLearningObjectivesOpen={loDrawer.open}
+        onQuestionsOpen={questionDrawer.open}
+        docId={docId}
+        questionBank={questionBank}
         sx={{
           width: "100%",
           maxWidth: "md",
           margin: "auto",
+          minHeight: `calc(100vh - ${HEADER_HEIGHT}px - 32px)`,
         }}
+      />
+
+      <Drawer
+        anchor="right"
+        size="lg"
+        open={loDrawer.isOpen}
+        onClose={loDrawer.close}
       >
-        {doc.parent && (
-          <Link href={doc.parent.href} children={doc.parent.title} />
-        )}
-        <Typography
-          level="h3"
-          component="h1"
-          sx={{ fontWeight: "bold" }}
-          children={doc.title}
+        {isMobile && <ModalClose />}
+        <Typography level="h3" sx={{ m: 1, mt: 1.5 }}>
+          Learning Objectives
+        </Typography>
+        <DocLearningObjectives
+          noSsr
+          docId={docId}
+          questionBank={questionBank}
+          sx={{ mx: 2 }}
         />
+      </Drawer>
 
-        <Divider sx={{ width: "100%", mb: 1 }} />
-
-        <Stack
-          spacing={1}
-          width={"100%"}
-          marginBottom={2}
-          direction={{ xs: "column", sm: "row" }}
-          alignItems={{ xs: "flex-start" }}
-        >
-          <Chip color="primary" onClick={loDrawer.open}>
-            Learning Objectives
-          </Chip>
-          <Chip color="primary" onClick={questionDrawer.open}>
-            Questions
-          </Chip>
-        </Stack>
-
-        <DocContent docId={docId} questionBank={questionBank} />
-
-        <Drawer
-          anchor="right"
-          size="md"
-          open={loDrawer.isOpen}
-          onClose={loDrawer.close}
-        >
-          {isMobile && <ModalClose />}
-          <Typography level="h3" sx={{ m: 1, mt: 1.5 }}>
-            Learning Objectives
-          </Typography>
-        </Drawer>
-
-        <Drawer
-          anchor="right"
-          size="md"
-          open={questionDrawer.isOpen}
-          onClose={questionDrawer.close}
-        >
-          {isMobile && <ModalClose />}
-          <Typography level="h3" sx={{ m: 1, mt: 1.5 }}>
-            Questions
-          </Typography>
-        </Drawer>
-      </Stack>
+      <Drawer
+        anchor="right"
+        size="lg"
+        open={questionDrawer.isOpen}
+        onClose={questionDrawer.close}
+      >
+        {isMobile && <ModalClose />}
+        <Typography level="h3" sx={{ m: 1, mt: 1.5 }}>
+          Questions
+        </Typography>
+        <DocQuestions
+          noSsr
+          docId={docId}
+          questionBank={questionBank}
+          sx={{ mx: 2 }}
+        />
+      </Drawer>
     </LayoutModule>
   );
 };
 
 export const getStaticProps = staticHandler<PageProps, PageParams>(
-  async ({ params: rawParams, helper }) => {
-    const data = await helper.containers.docs.getDoc.fetch(rawParams);
-    const learningObjective = data.doc.learningObjective;
-    const params = { ...rawParams, learningObjective };
+  async ({ params, helper }) => {
     await LayoutModule.getData({ helper, params });
     await DocContent.getData({ helper, params });
-    return { props: params };
+    const { doc } = await helper.common.docs.getDoc.fetch(params);
+    const meta: AppHeadProps = {
+      title: doc.title,
+      linkTitle: `Chair FLight: ${doc.title}`,
+    };
+
+    return { props: { ...params, meta } };
   },
   fs,
 );

apps/next-app/pages/modules/[questionBank]/docs/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { DocSearch, LayoutModule } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler, staticPathsHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";
@@ -22,7 +22,7 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
 
   return (
     <LayoutModule fixedHeight questionBank={questionBank} breadcrumbs={crumbs}>
-      <AppHead />
+      <AppHead title="Doc Search" linkTitle="Chair Flight: Doc Search" />
       <DocSearch questionBank={questionBank} sx={{ height: "100%" }} />
     </LayoutModule>
   );

apps/next-app/pages/modules/[questionBank]/flashcards/[collectionId]/[seed].page.tsx

@@ -1,6 +1,6 @@
 import { getRandomId } from "@cf/base/utils";
+import { AppHead } from "@cf/next/public";
 import { FlashcardTest, LayoutModule } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/flashcards/[collectionId]/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { FlashcardList, LayoutModule } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler, staticPathsHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/flashcards/index.page.tsx

@@ -1,7 +1,7 @@
 import * as fs from "node:fs/promises";
 import { Typography, Box } from "@mui/joy";
+import { AppHead } from "@cf/next/public";
 import { FlashcardCollectionList, LayoutModule } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, OverviewModules } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/learning-objectives/[learningObjectiveId]/index.page.tsx

@@ -1,12 +1,12 @@
 import { default as LinkIcon } from "@mui/icons-material/ChevronRightOutlined";
 import { Divider, Link, Sheet, Stack, Typography } from "@mui/joy";
+import { AppHead } from "@cf/next/public";
 import {
   LayoutModule,
   LearningObjectiveOverview,
   LearningObjectiveQuestions,
   LearningObjectiveTree,
 } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/learning-objectives/[learningObjectiveId]/questions.page.tsx

@@ -1,8 +1,8 @@
+import { AppHead } from "@cf/next/public";
 import {
   LayoutModule,
   LearningObjectiveQuestions,
 } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/learning-objectives/[learningObjectiveId]/tree.page.tsx

@@ -1,5 +1,5 @@
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, LearningObjectiveTree } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/learning-objectives/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, LearningObjectivesSearch } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/questions/[questionId].page.tsx

@@ -1,13 +1,13 @@
 import { useRouter } from "next/router";
 import { Box, Tab, TabList, TabPanel, Tabs, tabClasses } from "@mui/joy";
 import { getRandomId } from "@cf/base/utils";
+import { AppHead } from "@cf/next/public";
 import {
   LayoutModule,
   QuestionExplanation,
   QuestionMeta,
   QuestionStandAlone,
 } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/questions/editor/[questionId].page.tsx

@@ -8,6 +8,7 @@ import {
   tabClasses,
   tabPanelClasses,
 } from "@mui/joy";
+import { AppHead } from "@cf/next/public";
 import {
   LayoutModule,
   QuestionEditorAnnexes,
@@ -18,7 +19,6 @@ import {
   QuestionEditorRelatedQuestions,
   QuestionEditorVariant,
 } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { ssrHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/questions/editor/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, QuestionEditorManager } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/questions/editor/submit.page.tsx

@@ -1,12 +1,12 @@
 import * as fs from "node:fs/promises";
 import { Box, Divider, Stack, Typography } from "@mui/joy";
+import { AppHead } from "@cf/next/public";
 import {
   LayoutModule,
   QuestionEditorDiff,
   QuestionEditorManager,
   QuestionEditorSubmitForm,
 } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";

apps/next-app/pages/modules/[questionBank]/questions/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
+import { AppHead } from "@cf/next/public";
 import { LayoutModule, QuestionSearch } from "@cf/next/question-bank";
-import { AppHead } from "@cf/react/components";
 import { staticHandler } from "@cf/trpc/server";
 import type { QuestionBankName } from "@cf/core/question-bank";
 import type { Breadcrumbs } from "@cf/next/question-bank";