chore(storefront): metadata and blog image fixes (#2332)

sets the `metadataBase` so it is not always using localhost.
fixes width on blog header images

Author: Barsnes

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);
 }

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'>

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',