Add webpage component with Hero component

astro/src/pages/[...route].astro

@@ -3,8 +3,11 @@ import { getAllRoutesList } from "@/lib/routing";
 import { getPage } from "@/lib/pages";
 import { getSettings } from "@/content/settings/settings"
 import WebpageLayout from "@/layouts/WebpageLayout.astro";
+import BlogLayout from "@/layouts/BlogLayout.astro";
+import ProjectLayout from "@/layouts/ProjectLayout.astro";
 import BlogIndex from "@/components/blogs/BlogIndex.astro";
 import ProjectIndex from "@/components/projects/ProjectIndex.astro";
+import Webpage from "@/components/webpage/Webpage.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -45,12 +48,12 @@ if (page === null || page.page === null) {
             }
     }}}>
         <Fragment slot="content">
-            <div>Webpage</div>
+            <Webpage webpage={page.page.components} />
         </Fragment>
     </WebpageLayout>
 ) }
 
-{ page.pageType === "BlogIndex" && (
+{ page.page.type === "BlogIndex" && (
     <WebpageLayout settings={{
         searchEngine: {
             title: "Blogs",
@@ -65,32 +68,34 @@ if (page === null || page.page === null) {
             }
     }}}>
         <Fragment slot="content">
-            <BlogIndex page={page.page as BlogIndex} />
+            <BlogIndex page={page.page} />
         </Fragment>
     </WebpageLayout>
 ) }
 
-{ page?.pageType === "BlogPost" && (
-    <WebpageLayout settings={{
+{ page.page.type === "BlogPost" && (
+    <BlogLayout settings={{
         searchEngine: {
-            title: "Blogs",
-            description: "",
-            allowCrawlers: true,
-            canonical: null,
-            priority: 65,
+            title: page.page.searchEngine.title,
+            description: page.page.searchEngine.description,
+            allowCrawlers: page.page.searchEngine.allowCrawlers,
+            canonical: page.page.searchEngine.canonical,
+            priority: page.page.searchEngine.priority,
             thumbnail: {
-                url: "",
+                url: page.page.searchEngine.thumbnail.url,
                 width: 1200,
                 height: 630
             }
-    }}}>
+        },
+        tags: []
+    }}>
         <Fragment slot="content">
             <dib>BlogPost</dib>
         </Fragment>
-    </WebpageLayout>
+    </BlogLayout>
 ) }
 
-{ page.pageType === "ProjectIndex" && (
+{ page.page.type === "ProjectIndex" && (
     <WebpageLayout settings={{
         searchEngine: {
             title: "Projects",
@@ -110,8 +115,8 @@ if (page === null || page.page === null) {
     </WebpageLayout>
 ) }
 
-{ page.pageType === "ProjectPost" && (
-    <WebpageLayout settings={{
+{ page.page.type === "ProjectPost" && (
+    <ProjectLayout settings={{
         searchEngine: {
             title: "Projects",
             description: "",
@@ -123,11 +128,13 @@ if (page === null || page.page === null) {
                 width: 1200,
                 height: 630
             }
-    }}}>
+        },
+        tags: []
+    }}>
         <Fragment slot="content">
             <div>ProjectPost</div>
         </Fragment>
-    </WebpageLayout>
+    </ProjectLayout>
 ) }
 
 { page.pageType === "PhotoCategoryIndex" && (