From 658e55cebe98af568f7f009747c5aef2567efd00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henry=20Gr=C3=A6sberg=20=28Mac=29?= <henrygr@stud.ntnu.no>
Date: Thu, 24 Oct 2024 01:28:40 +0200
Subject: [PATCH 1/3] Add logic to fill or center post image

---
 src/app/templates/BlogPostTemplate.tsx | 7 ++++---
 src/app/templates/page.tsx             | 6 ++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/templates/BlogPostTemplate.tsx b/src/app/templates/BlogPostTemplate.tsx
index 1e97093..6a45296 100644
--- a/src/app/templates/BlogPostTemplate.tsx
+++ b/src/app/templates/BlogPostTemplate.tsx
@@ -9,19 +9,20 @@ export interface PostProps {
   image?: {
     src: StaticImageData | string
     alt: string
-  }
+    fill: boolean
+  },
   author: string
   date: string
   content: string
 }
 
-const Post: FC<PostProps> = ({ title, hook, image={src: "https://picsum.photos/1000/500", alt: "A randomly generated image from Lorem Picsum"}, author, date, content }) => {
+const Post: FC<PostProps> = ({ title, hook, image={src: "https://picsum.photos/1000/500", alt: "A randomly generated image from Lorem Picsum", fill: true}, author, date, content }) => {
   return (
     <>
       <Navbar />
       <main>
         <div className="grid grid-cols-2 grid-rows-2 h-[50vh] w-[100vw] overflow-hidden relative gap-4">
-          <Image src={image.src} alt={image.alt} height={0} width={0} sizes="100vw" className="col-start-1 col-end-3 w-[100vw] h-auto" />
+          <Image src={image.src} alt={image.alt} height={0} width={0} sizes="100vw" className={`col-start-1 col-end-3 ${image.fill ? "w-[100vw]" : "w-auto"} ${!image.fill && "justify-self-center"} h-auto`} />
           <div className="col-start-1 row-start-2 z-10 m-6 bg-[#BE8CFF] p-4 w-fit rounded-xl flex flex-col gap-3">
             <h1 className="text-4xl text-text_secondary font-black">{title}</h1>
             {hook && <p>{hook}</p>}
diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx
index 707eb6d..27f80e2 100644
--- a/src/app/templates/page.tsx
+++ b/src/app/templates/page.tsx
@@ -1,8 +1,14 @@
 import Post, { PostProps } from "./BlogPostTemplate"
+import onboardingLogo from "@/app/assets/onboarding_logo_rev_2.png"
 
 const anArticle: PostProps = {
     title: "Dotkom er best",
     hook: "Men det visste jo alle fra før. I tilfelle du er appkommer eller bare dum, og ikke er enig, så forklarer denne artikkelen hvorfor!",
+    image: {
+        src: onboardingLogo,
+        alt: "Dotkom sitt logo",
+        fill: false
+    },
     author: "Henry Græbserg",
     date: "23/10/2024",
     content: `The standard Lorem Ipsum passage, used since the 1500s

From 6bcdfd049b62d9d6fc51b47159c40a4d47a48cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henry=20Gr=C3=A6sberg?= <henrygr@stud.ntnu.no>
Date: Fri, 25 Oct 2024 19:28:03 +0200
Subject: [PATCH 2/3] Make image.fill optional and true by default

---
 src/app/templates/BlogPostTemplate.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/templates/BlogPostTemplate.tsx b/src/app/templates/BlogPostTemplate.tsx
index 6a45296..1876874 100644
--- a/src/app/templates/BlogPostTemplate.tsx
+++ b/src/app/templates/BlogPostTemplate.tsx
@@ -9,7 +9,7 @@ export interface PostProps {
   image?: {
     src: StaticImageData | string
     alt: string
-    fill: boolean
+    fill?: boolean
   },
   author: string
   date: string
@@ -17,6 +17,8 @@ export interface PostProps {
 }
 
 const Post: FC<PostProps> = ({ title, hook, image={src: "https://picsum.photos/1000/500", alt: "A randomly generated image from Lorem Picsum", fill: true}, author, date, content }) => {
+  image.fill ??= true
+
   return (
     <>
       <Navbar />

From 552da044b8fcac8653ffac9b1bc22ea1045493db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henry=20Gr=C3=A6sberg?=
 <108506830+henrygraesberg@users.noreply.github.com>
Date: Sat, 26 Oct 2024 17:43:06 +0200
Subject: [PATCH 3/3] =?UTF-8?q?Ikke=20se=20p=C3=A5=20hva=20jeg=20endra,=20?=
 =?UTF-8?q?flaut...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/templates/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx
index 27f80e2..9b0b9db 100644
--- a/src/app/templates/page.tsx
+++ b/src/app/templates/page.tsx
@@ -6,7 +6,7 @@ const anArticle: PostProps = {
     hook: "Men det visste jo alle fra før. I tilfelle du er appkommer eller bare dum, og ikke er enig, så forklarer denne artikkelen hvorfor!",
     image: {
         src: onboardingLogo,
-        alt: "Dotkom sitt logo",
+        alt: "Dotkom Onboaring 2024 sin logo",
         fill: false
     },
     author: "Henry Græbserg",
@@ -26,4 +26,4 @@ const Page = () => {
     )
 }
 
-export default Page;
\ No newline at end of file
+export default Page;