Add page types, index components, and layout

2026-03-20 16:40:21 +01:00
parent cb4cb9e578
commit 4bb3fa3671
8 changed files with 258 additions and 42 deletions
--- a/astro/src/components/blogs/BlogIndex.astro
+++ b/astro/src/components/blogs/BlogIndex.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+    page: BlogIndex;
+}
+
+const { page } = Astro.props;
+---
+
+<div>Blog Index</div>
--- a/astro/src/components/projects/ProjectIndex.astro
+++ b/astro/src/components/projects/ProjectIndex.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+    page: ProjectIndex;
+}
+
+const { page } = Astro.props;
+---
+
+<div>Project Index</div>
--- a/astro/src/content/pages/pages.ts
+++ b/astro/src/content/pages/pages.ts
@@ -287,6 +287,7 @@ export function dataToPage(pageRecord: any): WebPage {

    let page: WebPage = {
        type: "Webpage",
+        exists: true,
        id: pageRecord["id"],
        lastModified: lastModified,
        url: pageRecord["url"],
@@ -330,5 +331,25 @@ export async function getWebpage(route: string): Promise<WebPage | null> {
        route: route
    });

-    return dataToPage(result["Pages"][0]);
+    if (result["Pages"].length === 0) {
+        return {
+            type: "Webpage",
+            exists: false
+        };
+    }
+
+    const page = dataToPage(result["Pages"][0]);
+
+    if (!page.exists) {
+        return {
+            type: "Webpage",
+            exists: false
+        };
+    }
+
+    return {
+        ...page,
+        type: "Webpage",
+        exists: true
+    }
 }
--- a/astro/src/layouts/WebpageLayout.astro
+++ b/astro/src/layouts/WebpageLayout.astro
@@ -2,6 +2,11 @@
 import '@/styles/global.css';
 import { getSettings } from "@/content/settings/settings";

+interface Props {
+    settings: WebpageLayoutProps;
+}
+
+const pageSettings = Astro.props.settings.searchEngine;
 const settings = await getSettings();
 ---

@@ -9,45 +14,43 @@ const settings = await getSettings();
 	<head>
        <!-- High Priority Metadata -->
 		<meta charset="utf-8" />
-        <meta name="lanuage" content="EN" />
+        <meta name="lanuage" content="en" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width" />
        <meta name="theme-color" content={settings.website.colors.primary} />

        <!-- High Priority Page Metadata -->
-		<title>{settings.website.titleTemplate.replaceAll("%T", "")}</title>
+		<title>{settings.website.titleTemplate.replaceAll("%T", pageSettings.title)}</title>

        <!-- Medium Priority Metadata -->
        <meta name="msapplication-TileColor" content={settings.website.colors.primary} />
        <meta name="msapplication-TileImage" content="" />
        <link rel="sitemap" href="/sitemap/index.xml" />
        <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
-        <link rel="canonical" href={`${settings.website.domainName}/`}>
+        <link rel="canonical" href={`${settings.website.domainName}/`} />
        <meta name="robots" content="index,follow" />

        <!-- Low Priority Page Metadata -->
-        <meta name="description" content="" />
+        <meta name="description" content={pageSettings.description} />

        <meta property="og:type" content="website" />
        <meta property="og:locale" content="en-GB" />
        <meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", "")} />
-        <meta property="og:description" content="" />
-        <meta property="og:image:url" content="" />
-        <meta property="og:image:alt" content="" />
+        <meta property="og:description" content={pageSettings.description} />
+        <meta property="og:image:url" content={pageSettings.thumbnail.url} />
        <meta property="og:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
        <meta property="og:site_name" content={settings.website.applicationName} />

        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", "")} />
-        <meta name="twitter:description" content="" />
-        <meta name="twitter:image" content="" />
-        <meta name="twitter:image:alt" content="" />
+        <meta name="twitter:description" content={pageSettings.description} />
+        <meta name="twitter:image" content={pageSettings.thumbnail.url} />
        <meta name="twitter:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
        <meta name="twitter:site" content={settings.website.twitter.handle} />
        <meta name="twitter:creator" content={settings.website.twitter.handle} />

-        <meta name="pagename" content="" />
+        <meta name="pagename" content={pageSettings.title} />
        <meta name="category" content="webpage" />

        <!-- Low Priority Metadata -->
@@ -59,6 +62,6 @@ const settings = await getSettings();
        <meta name="application-name" content={settings.website.applicationName} />
 	</head>
 	<body>
-		<slot />
+		<slot name="content" />
 	</body>
 </html>
--- a/astro/src/lib/pages.ts
+++ b/astro/src/lib/pages.ts
@@ -61,7 +61,10 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
        return {
            route: route,
            pageType: "ProjectIndex",
-            page: null
+            page: {
+                type: "ProjectIndex",
+                pageNumber: params["page"] !== undefined ? Number(params["page"]) : 1
+            }
        };
    }
    // Project Post
@@ -163,14 +166,34 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
            }
        };
    }
+    // Regular webpage
    else if (regexToRoute({ template: "/", allowPagination: false }).regex.test(route) || 
        regexToRoute({ template: "/%R", allowPagination: false }).regex.test(route)) {
        const webpageContent = await getWebpage(route);
+
+        if (webpageContent === null || !webpageContent.exists) {
+            return {
+                route: route,
+                pageType: "Webpage",
+                page: {
+                    type: "Webpage",
+                    exists: false
+                }
+            }
+        }
        
        return {
            route: route,
            pageType: "Webpage",
-            page: webpageContent
+            page: {
+                type: "Webpage",
+                exists: true,
+                id: webpageContent.id,
+                lastModified: webpageContent.lastModified,
+                url: webpageContent.url,
+                searchEngine: webpageContent.searchEngine,
+                components: webpageContent.components
+            }
        };
    }
    else {
--- a/astro/src/pages/[...route].astro
+++ b/astro/src/pages/[...route].astro
@@ -3,27 +3,169 @@ import { getAllRoutesList } from "@/lib/routing";
 import { getPage } from "@/lib/pages";
 import { getSettings } from "@/content/settings/settings"
 import WebpageLayout from "@/layouts/WebpageLayout.astro";
+import BlogIndex from "@/components/blogs/BlogIndex.astro";
+import ProjectIndex from "@/components/projects/ProjectIndex.astro";

 export async function getStaticPaths() {
    const settings = await getSettings();
    const pages = await getAllRoutesList(settings);

-    console.log(pages);
-
    let routes: any[] = [];

    pages.forEach((page) => {
        routes.push({ params: { route: page } });
-    })
+    });

    return routes;
 }

 const settings = await getSettings();
-const routes = await getAllRoutesList(settings);
-const page = await getPage(settings, "/album/2026/mirai-nexus-2026/6c0e4453ab");
+const page = await getPage(settings, Astro.url.pathname);
+
+if (page === null) {
+    return new Response("Page not found.", {
+        status: 404,
+        statusText: "Not Found"
+    });
+}
 ---

-<WebpageLayout>
-	<h1>Test</h1>
-</WebpageLayout>
+{ page.pageType === "Webpage" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <div>Webpage</div>
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page.pageType === "BlogIndex" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Blogs",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <BlogIndex page={page.page as BlogIndex} />
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page?.pageType === "BlogPost" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Blogs",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <dib>BlogPost</dib>
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page.pageType === "ProjectIndex" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Projects",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <ProjectIndex page={page.page as ProjectIndex} />
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page.pageType === "ProjectPost" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Projects",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <div>ProjectPost</div>
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page.pageType === "PhotoCategoryIndex" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Projects",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <div>PhotoCategoryIndex</div>
+        </Fragment>
+    </WebpageLayout>
+) }
+
+{ page.pageType === "Photo" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Projects",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <div>Photo</div>
+        </Fragment>
+    </WebpageLayout>
+) }
--- a/astro/src/types/layouts/webpageLayout.d.ts
+++ b/astro/src/types/layouts/webpageLayout.d.ts
@@ -0,0 +1,3 @@
+type WebpageLayoutProps = {
+    searchEngine: SearchEngine;
+}
--- a/astro/src/types/pages/page.d.ts
+++ b/astro/src/types/pages/page.d.ts
@@ -1,13 +1,18 @@
-type WebPage = {
-    type: "Webpage";
+type WebPage =
+  | {
+      type: "Webpage";
+      exists: false;
+    }
+  | {
+      type: "Webpage";
+      exists: true;

-    id: string;
-    lastModified: Date;
-    
-    url: string;
-    searchEngine: SearchEngine;
-    components: WebpageComponent[];
-}
+      id: string;
+      lastModified: Date;
+      url: string;
+      searchEngine: SearchEngine;
+      components: WebpageComponent[];
+    };

 type WebpageComponent = 
    ContactComponent |
@@ -28,13 +33,14 @@ type PageRegexMatchProps = {
    allowPagination: boolean;
 }

-type PageType = {
-    route: string;
-    pageType: "Webpage" | "BlogIndex" | "BlogPost" |
-        "ProjectIndex" | "ProjectPost" | "PhotoCategoryIndex" |
-        "PhotoCategory" | "PhotoAlbum" | "Photo";
-    page: WebPage | BlogPost | ProjectPost | BlogIndex |
-        ProjectIndex | PhotoCategoryIndex | PhotoCategory |
-        PhotoAlbum | PhotoPage | null;
-}
-
+type PageType =
+  | { pageType: "Webpage"; page: WebPage; route: string }
+  | { pageType: "BlogIndex"; page: BlogIndex; route: string }
+  | { pageType: "BlogPost"; page: BlogPost; route: string }
+  | { pageType: "ProjectIndex"; page: ProjectIndex; route: string }
+  | { pageType: "ProjectPost"; page: ProjectPost; route: string }
+  | { pageType: "PhotoCategoryIndex"; page: PhotoCategoryIndex; route: string }
+  | { pageType: "PhotoCategory"; page: PhotoCategory; route: string }
+  | { pageType: "PhotoAlbum"; page: PhotoAlbum; route: string }
+  | { pageType: "Photo"; page: PhotoPage; route: string }
+  | { pageType: "Unknown"; page: null; route: string };