From 2384c3608a8e0fa4fb1c851f5336068fddefa3af Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 27 Aug 2024 09:16:42 +0200
Subject: [PATCH] chore(storefront): metadata and blog image fixes (#2332)

sets the `metadataBase` so it is not always using localhost.
fixes width on blog header images
---
 .../_components/PostLayout/PostLayout.module.css     | 12 +++++++++++-
 .../bloggen/_components/PostLayout/PostLayout.tsx    | 12 ++++++------
 apps/storefront/app/layout.tsx                       |  5 +++++
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
index 04ceca2809..09ba846d15 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -12,6 +12,7 @@
 }
 
 .intro {
+  width: 100%;
   max-width: 720px;
   display: flex;
   flex-wrap: wrap;
@@ -57,12 +58,21 @@
 
 .content img {
   display: block;
-  width: 860px !important;
+  width: 860px;
   margin: var(--ds-spacing-12) 0;
   margin-left: calc((100% - 860px) / 2) !important;
   background-color: var(--ds-color-neutral-background-subtle);
 }
 
+.main > figure {
+  margin: auto;
+  width: 100%;
+}
+
+.main > figure img {
+  width: 100%;
+}
+
 .content:last-child {
   margin-bottom: var(--ds-spacing-12);
 }
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
index e9baf8df99..d8170918c4 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -61,13 +61,13 @@ function PostLayout({
               <span>{author}</span>
             </Paragraph>
           </div>
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            caption={imageCaption}
+            boxShadow={false}
+          />
           <MdxContent classname={classes.content}>
-            <Image
-              src={imageSrc}
-              alt={imageAlt}
-              caption={imageCaption}
-              boxShadow={false}
-            />
             {content}
             <div className={classes.wantToWrite}>
               <Heading level={3} size='xs'>
diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
index 1a0b3f87e6..fb843812cd 100644
--- a/apps/storefront/app/layout.tsx
+++ b/apps/storefront/app/layout.tsx
@@ -9,6 +9,11 @@ import type { Metadata } from 'next';
 import { Footer } from '../components/Footer/Footer';
 
 export const metadata: Metadata = {
+  metadataBase: new URL(
+    process.env.VERCEL_GIT_COMMIT_REF !== 'main'
+      ? 'https://next.designsystemet.no'
+      : 'https://designsystemet.no',
+  ),
   title: {
     template: '%s - Designsystemet',
     default: 'Designsystemet',