Configurable Tailwind based shadows; Github Icon in header;

Author: rajat1saxena

apps/web/app/(with-contexts)/(with-layout)/home-page-layout.tsx

@@ -8,7 +8,7 @@ import {
     TypefacesContext,
     ThemeContext,
 } from "@components/contexts";
-import { MasterLayout } from "@components/public/base-layout";
+import { BaseLayout } from "@components/public/base-layout";
 import { Profile } from "@courselit/common-models";
 import { getPage } from "@ui-lib/utils";
 import { useContext, useEffect, useState } from "react";
@@ -37,7 +37,7 @@ export default function HomepageLayout({
     }
 
     return (
-        <MasterLayout
+        <BaseLayout
             layout={page.layout}
             title={page.title}
             typefaces={typefaces}
@@ -69,6 +69,6 @@ export default function HomepageLayout({
             }}
         >
             {children}
-        </MasterLayout>
+        </BaseLayout>
     );
 }

apps/web/app/(with-contexts)/(with-layout)/p/[id]/client-side-page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useContext } from "react";
+import {
+    AddressContext,
+    ServerConfigContext,
+    TypefacesContext,
+} from "@components/contexts";
+import { ProfileContext } from "@components/contexts";
+import { BaseLayout } from "@components/public/base-layout";
+import { Profile } from "@courselit/common-models";
+
+export default function ClientSidePage({
+    page,
+    siteinfo,
+    theme,
+}: {
+    page;
+    siteinfo;
+    theme;
+}) {
+    const typefaces = useContext(TypefacesContext);
+    const config = useContext(ServerConfigContext);
+    const { profile } = useContext(ProfileContext);
+    const address = useContext(AddressContext);
+
+    if (!page) {
+        return null;
+    }
+
+    const layoutWithoutHeaderFooter = page?.layout
+        ?.filter((layout: any) => !["header", "footer"].includes(layout.name))
+        ?.map((layout: any) => ({
+            ...layout,
+            settings: layout.settings || {},
+        }));
+
+    return (
+        <BaseLayout
+            layout={layoutWithoutHeaderFooter}
+            title={page.title || page.pageData?.title}
+            pageData={page.pageData}
+            typefaces={typefaces}
+            siteInfo={siteinfo}
+            dispatch={() => {}}
+            theme={theme}
+            state={{
+                config: config,
+                siteinfo,
+                address,
+                profile: profile as Profile,
+                auth: profile.email
+                    ? {
+                          guest: false,
+                          checked: true,
+                      }
+                    : {
+                          guest: true,
+                          checked: true,
+                      },
+                networkAction: false,
+                theme,
+                typefaces,
+                message: {
+                    message: "",
+                    open: false,
+                    action: null,
+                },
+            }}
+        />
+    );
+}

apps/web/app/(with-contexts)/(with-layout)/p/[id]/page.tsx

@@ -0,0 +1,81 @@
+import { getPage, getSiteInfo } from "@ui-lib/utils";
+import { getAddressFromHeaders } from "@/ui-lib/utils";
+import ClientSidePage from "./client-side-page";
+import { headers } from "next/headers";
+import type { Metadata, ResolvingMetadata } from "next";
+
+type Props = {
+    params: {
+        id: string;
+    };
+};
+
+export async function generateMetadata(
+    { params }: Props,
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    const address = getAddressFromHeaders(headers);
+    const siteInfo = await getSiteInfo(address);
+    if (!siteInfo) {
+        return {
+            title: `${(await parent)?.title?.absolute}`,
+        };
+    }
+
+    const page = await getPage(address, params.id);
+
+    const title = page.title || page.pageData?.title || page.name;
+    const socialImage = page.socialImage || siteInfo.settings.logo;
+    const description =
+        page.description || (page.pageData?.description as string);
+
+    return {
+        generator: "CourseLit",
+        title: `${title} | ${(await parent)?.title?.absolute}`,
+        description,
+        openGraph: {
+            title: `${title} | ${(await parent)?.title?.absolute}`,
+            description,
+            images: [
+                {
+                    url: socialImage?.file || "",
+                    alt: socialImage?.caption || "",
+                },
+            ],
+        },
+        twitter: {
+            title: `${title} | ${(await parent)?.title?.absolute}`,
+            description,
+            images: [
+                {
+                    url: socialImage?.file || "",
+                    alt: socialImage?.caption || "",
+                },
+            ],
+        },
+        robots: {
+            index: page.robotsAllowed,
+        },
+        icons: {
+            icon: siteInfo.settings.logo?.file || "/favicon.ico",
+        },
+    };
+}
+
+export default async function Page({ params }: Props) {
+    const address = getAddressFromHeaders(headers);
+    const siteInfo = await getSiteInfo(address);
+    if (!siteInfo) {
+        return null;
+    }
+
+    const page = await getPage(address, params.id);
+
+    return (
+        <ClientSidePage
+            page={page}
+            siteinfo={siteInfo.settings}
+            theme={siteInfo.theme}
+        />
+    );
+}

apps/web/app/(with-contexts)/(with-layout)/page.tsx

@@ -0,0 +1,80 @@
+import { getPage, getSiteInfo } from "@ui-lib/utils";
+import { getAddressFromHeaders } from "@/ui-lib/utils";
+import ClientSidePage from "./p/[id]/client-side-page";
+import { headers } from "next/headers";
+import type { Metadata, ResolvingMetadata } from "next";
+
+type Props = {
+    params: {
+        id: string;
+    };
+};
+
+export async function generateMetadata(
+    { params }: Props,
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    const address = getAddressFromHeaders(headers);
+    const siteInfo = await getSiteInfo(address);
+    if (!siteInfo) {
+        return {
+            title: "CourseLit",
+        };
+    }
+
+    const page = await getPage(address, "homepage");
+
+    const title = page.title || siteInfo.settings.title;
+    const socialImage = page.socialImage || siteInfo.settings.logo;
+    const description = page.description || siteInfo.settings.subtitle;
+
+    return {
+        generator: "CourseLit",
+        title,
+        description,
+        openGraph: {
+            title,
+            description,
+            images: [
+                {
+                    url: socialImage?.file || "",
+                    alt: socialImage?.caption || "",
+                },
+            ],
+        },
+        twitter: {
+            title,
+            description,
+            images: [
+                {
+                    url: socialImage?.file || "",
+                    alt: socialImage?.caption || "",
+                },
+            ],
+        },
+        robots: {
+            index: page.robotsAllowed,
+        },
+        icons: {
+            icon: siteInfo.settings.logo?.file || "/favicon.ico",
+        },
+    };
+}
+
+export default async function Page() {
+    const address = getAddressFromHeaders(headers);
+    const siteInfo = await getSiteInfo(address);
+    if (!siteInfo) {
+        return null;
+    }
+
+    const page = await getPage(address, "homepage");
+
+    return (
+        <ClientSidePage
+            page={page}
+            siteinfo={siteInfo.settings}
+            theme={siteInfo.theme}
+        />
+    );
+}