Add webpage component with Hero component

Update the web page layout
Correct the image URLs
2026-03-20 18:07:16 +01:00 · 2026-03-20 18:06:59 +01:00 · 2026-03-20 18:06:47 +01:00 · 2026-03-20 18:06:29 +01:00
9 changed files with 252 additions and 37 deletions
--- a/astro/src/components/web/Hero.astro
+++ b/astro/src/components/web/Hero.astro
@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    hero: HeroComponent;
+}
+
+const hero = Astro.props.hero;
+console.log(hero);
+---
+
+<div id={`hero-${hero.id}`} class="flex w-full">
+    <div class="flex w-full h-screen static">
+        <Image
+            src={hero.backgroundImage.url}
+            width={hero.backgroundImage.width}
+            height={hero.backgroundImage.height}
+            class="flex w-full h-screen object-cover z-1"
+            alt=""
+        />
+
+        <div class="absolute flex items-center w-full h-screen bg-[#00000082] z-10">
+            <div class="absolute text-white md:left-40 sm:left-20 p-8 z-30">
+                <div class="flex flex-col gap-2.5 text-left">
+                    <h1 class="text-white font-bold text-8xl w-fit">{hero.title}</h1>
+                    { hero.text !== null && (
+                        <div class="text-2xl max-w-170">{hero.text}</div>
+                    ) }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
--- a/astro/src/components/webpage/Webpage.astro
+++ b/astro/src/components/webpage/Webpage.astro
@@ -0,0 +1,19 @@
+---
+import Hero from '../web/Hero.astro';
+
+interface Props {
+    webpage: WebpageComponent[];
+}
+
+const components = Astro.props.webpage;
+
+console.log(Astro.props.webpage);
+---
+
+<div class="flex flex-col">
+    { components.map((component) => (
+        <Fragment>
+            { component.component === "Hero" && <Hero hero={component} /> }
+        </Fragment>
+    )) }
+</div>
--- a/astro/src/content/pages/pages.ts
+++ b/astro/src/content/pages/pages.ts
@@ -3,6 +3,7 @@ import { print } from 'graphql';
 import { formatDate } from "@/lib/dates";
 import getAllPages from "@/graphql/pages/getAllPages.graphql";
 import getPage from "@/graphql/pages/getPage.graphql";
+import { getImageUrl } from "@/lib/images";

 export function dataToPage(pageRecord: any): WebPage {
    let dates: string[] = [
@@ -27,7 +28,7 @@ export function dataToPage(pageRecord: any): WebPage {
                    title: component["hero_title"],
                    text: component["hero_text"],
                    backgroundImage: {
-                        url: component["background_image"]["filename_disk"],
+                        url: getImageUrl(component["background_image"]["filename_disk"]),
                        width: component["background_image"]["width"],
                        height: component["background_image"]["height"]
                    }
@@ -47,7 +48,7 @@ export function dataToPage(pageRecord: any): WebPage {
                    text: component["twsi_text"],
                    imageSide: component["twsi_image_side"],
                    image: {
-                        url: component["image"]["filename_disk"],
+                        url: getImageUrl(component["image"]["filename_disk"]),
                        width: component["image"]["width"],
                        height: component["image"]["height"]
                    }
@@ -144,7 +145,7 @@ export function dataToPage(pageRecord: any): WebPage {
                        title: itemRecord["title"],
                        text: itemRecord["text"],
                        icon: {
-                            url: itemRecord["icon"]["filename_disk"],
+                            url: getImageUrl(itemRecord["icon"]["filename_disk"]),
                            width: itemRecord["icon"]["width"],
                            height: itemRecord["icon"]["height"]
                        }
@@ -177,7 +178,7 @@ export function dataToPage(pageRecord: any): WebPage {
                        stars: reviewRecord["stars"],
                        date: reviewRecord["date"],
                        thumbnail: {
-                            url: reviewRecord["thumbnail"]["filename_disk"],
+                            url: getImageUrl(reviewRecord["thumbnail"]["filename_disk"]),
                            width: reviewRecord["thumbnail"]["width"],
                            height: reviewRecord["thumbnail"]["height"]
                        }
@@ -209,7 +210,7 @@ export function dataToPage(pageRecord: any): WebPage {
                        text: contactMethodRecord["text"],
                        color: contactMethodRecord["color"],
                        icon: {
-                            url: contactMethodRecord["icon"]["filename_disk"],
+                            url: getImageUrl(contactMethodRecord["icon"]["filename_disk"]),
                            width: contactMethodRecord["icon"]["width"],
                            height: contactMethodRecord["icon"]["height"]
                        }
@@ -298,7 +299,7 @@ export function dataToPage(pageRecord: any): WebPage {
            allowCrawlers: searchEngine["allow_crawler"],
            priority: searchEngine["priority"],
            thumbnail: {
-                url: searchEngine["thumbnail"]["filename_disk"],
+                url: getImageUrl(searchEngine["thumbnail"]["filename_disk"]),
                height: searchEngine["thumbnail"]["height"],
                width: searchEngine["thumbnail"]["width"]
            }
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -0,0 +1,73 @@
+---
+import '@/styles/global.css';
+import { getSettings } from "@/content/settings/settings";
+
+interface Props {
+    settings: BlogLayoutProps;
+}
+
+const pageSettings = Astro.props.settings.searchEngine;
+const settings = await getSettings();
+---
+
+<!DOCTYPE html>
+<html>
+    <head>    
+        <!-- High Priority Metadata -->
+        <meta charset="utf-8" />
+        <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", 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}/`} />
+        <meta name="robots" content="index,follow" />
+        <meta name="keywords" content={[].join(',')} />
+
+        <!-- Low Priority Page Metadata -->
+        <meta name="description" content={pageSettings.description} />
+
+        <meta property="og:type" content="article" />
+        <meta property="og:locale" content="en-GB" />
+        <meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
+        <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 property="article:author" content={settings.website.author.name} />
+        <meta property="article:tags" content={[].join(',')} />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
+        <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={pageSettings.title} />
+        <meta name="category" content="webpage" />
+
+        <!-- Low Priority Metadata -->
+        <meta name="copyright" content={settings.website.copyright} />
+        <meta name="author" content={`${settings.website.author.name}, ${settings.website.author.url}`} />
+        <meta name="designer" content={settings.website.designer} />
+        <meta name="owner" content={settings.website.owner} />
+        <meta name="developer" content={settings.website.developer} />
+        <meta name="application-name" content={settings.website.applicationName} />
+
+        <!-- Scripts and Style -->
+    </head>
+    <body>
+        <slot name="content" />
+    </body>
+</html>
--- a/astro/src/layouts/ProjectLayout.astro
+++ b/astro/src/layouts/ProjectLayout.astro
@@ -0,0 +1,73 @@
+---
+import '@/styles/global.css';
+import { getSettings } from "@/content/settings/settings";
+
+interface Props {
+    settings: BlogLayoutProps;
+}
+
+const pageSettings = Astro.props.settings.searchEngine;
+const settings = await getSettings();
+---
+
+<!DOCTYPE html>
+<html>
+    <head>    
+        <!-- High Priority Metadata -->
+        <meta charset="utf-8" />
+        <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", 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}/`} />
+        <meta name="robots" content="index,follow" />
+        <meta name="keywords" content={[].join(',')} />
+
+        <!-- Low Priority Page Metadata -->
+        <meta name="description" content={pageSettings.description} />
+
+        <meta property="og:type" content="article" />
+        <meta property="og:locale" content="en-GB" />
+        <meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
+        <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 property="article:author" content={settings.website.author.name} />
+        <meta property="article:tags" content={[].join(',')} />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
+        <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={pageSettings.title} />
+        <meta name="category" content="webpage" />
+
+        <!-- Low Priority Metadata -->
+        <meta name="copyright" content={settings.website.copyright} />
+        <meta name="author" content={`${settings.website.author.name}, ${settings.website.author.url}`} />
+        <meta name="designer" content={settings.website.designer} />
+        <meta name="owner" content={settings.website.owner} />
+        <meta name="developer" content={settings.website.developer} />
+        <meta name="application-name" content={settings.website.applicationName} />
+
+        <!-- Scripts and Style -->
+    </head>
+    <body>
+        <slot name="content" />
+    </body>
+</html>
--- a/astro/src/layouts/WebpageLayout.astro
+++ b/astro/src/layouts/WebpageLayout.astro
@@ -10,18 +10,19 @@ const pageSettings = Astro.props.settings.searchEngine;
 const settings = await getSettings();
 ---

-<html lang="en">
-	<head>
+<!DOCTYPE html>
+<html>
+    <head>
        <!-- High Priority Metadata -->
-		<meta charset="utf-8" />
+        <meta charset="utf-8" />
        <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" />
+        <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", pageSettings.title)}</title>
+        <title>{settings.website.titleTemplate.replaceAll("%T", pageSettings.title)}</title>

        <!-- Medium Priority Metadata -->
        <meta name="msapplication-TileColor" content={settings.website.colors.primary} />
@@ -36,14 +37,14 @@ const settings = await getSettings();

        <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:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
        <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:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
        <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}`} />
@@ -62,8 +63,8 @@ const settings = await getSettings();
        <meta name="application-name" content={settings.website.applicationName} />

        <!-- Scripts and Style -->
-	</head>
-	<body>
-		<slot name="content" />
-	</body>
+    </head>
+    <body>
+        <slot name="content" />
+    </body>
 </html>
--- a/astro/src/lib/images.ts
+++ b/astro/src/lib/images.ts
@@ -0,0 +1,3 @@
+export function getImageUrl(url: string) {
+    return `${import.meta.env.DIRECTUS_URL}assets/${url}`;
+}
--- a/astro/src/pages/[...route].astro
+++ b/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" && (
--- a/astro/src/types/layouts/webpageLayout.d.ts
+++ b/astro/src/types/layouts/webpageLayout.d.ts
@@ -1,3 +1,8 @@
 type WebpageLayoutProps = {
    searchEngine: SearchEngine;
 }
+
+type BlogLayoutProps = {
+    searchEngine: SearchEngine;
+    tags: string[] | null;
+}
Author	SHA1	Message	Date
itsfinniii	50dc6ec4c0	Add webpage component with Hero component	2026-03-20 18:07:16 +01:00
itsfinniii	423a4b74dd	Update the web page layout	2026-03-20 18:06:59 +01:00
itsfinniii	a0f2c93a23	Correct the image URLs	2026-03-20 18:06:47 +01:00
itsfinniii	d53df4b898	Add Blog and Project layouts with SEO metadata	2026-03-20 18:06:29 +01:00