wip: Story detail page

app/[locale]/page.tsx

@@ -11,6 +11,7 @@ import NewsletterSignup from 'components/layout/newsletter-signup';
 import SagyobarPreview from 'components/layout/sagyobar-preview';
 import Shoplist from 'components/layout/shoplist';
 import Stories from 'components/layout/stories';
+import { BLOG_HANDLE } from 'lib/constants';
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
@@ -131,7 +132,7 @@ export default async function HomePage({
       </div>
 
       <div className="relative">
-        <Stories handle="headless" articles={3} locale={locale} more />
+        <Stories handle={BLOG_HANDLE} articles={3} locale={locale} more />
       </div>
 
       <div className="relative">

app/[locale]/stories/[handle]/layout.tsx

@@ -0,0 +1,43 @@
+import Footer from 'components/layout/footer';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+
+import Navbar from 'components/layout/navbar';
+import { getCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
+import { ReactNode, Suspense } from 'react';
+
+export const runtime = 'edge';
+const { SITE_NAME } = process.env;
+
+export const metadata = {
+  title: SITE_NAME,
+  description: SITE_NAME,
+  openGraph: {
+    type: 'website'
+  }
+};
+
+export default async function BlogLayout({
+  params: { locale },
+  children
+}: {
+  params: { locale?: SupportedLocale };
+  children: ReactNode[] | ReactNode | string;
+}) {
+  const cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
+  return (
+    <div>
+      <Navbar cart={cart} locale={locale} compact />
+      {children}
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}

app/[locale]/stories/[handle]/page.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import Prose from 'components/prose';
+import { BLOG_HANDLE, HIDDEN_ARTICLE_TAG } from 'lib/constants';
+import { getBlogArticle } from 'lib/shopify';
+import { BlogArticle } from 'lib/shopify/types';
+import Image from 'next/image';
+export const runtime = 'edge';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string; locale?: SupportedLocale };
+}): Promise<Metadata> {
+  const article: BlogArticle | undefined = await getBlogArticle({
+    handle: BLOG_HANDLE,
+    articleHandle: params.handle,
+    language: params?.locale?.toUpperCase()
+  });
+
+  if (!article) return notFound();
+
+  const { url, width, height, altText: alt } = article.image || {};
+  const indexable = !article?.tags?.includes(HIDDEN_ARTICLE_TAG);
+
+  return {
+    title: article?.seo?.title || article?.title,
+    description: article?.seo?.description || article?.excerpt,
+    robots: {
+      index: indexable,
+      follow: indexable,
+      googleBot: {
+        index: indexable,
+        follow: indexable
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function BlogArticlePage({
+  params
+}: {
+  params: { handle: string; locale?: SupportedLocale };
+}) {
+  const article: BlogArticle | undefined = await getBlogArticle({
+    handle: BLOG_HANDLE,
+    articleHandle: params.handle,
+    language: params?.locale?.toUpperCase()
+  });
+
+  if (!article) return notFound();
+
+  return (
+    <>
+      <div className="mx-auto max-w-screen-xl py-24">
+        <div className="flex flex-col space-y-12">
+          {!!article?.image && (
+            <div className="relative aspect-square h-full w-full">
+              <Image
+                src={article?.image?.url}
+                alt={article?.image?.altText}
+                height={article?.image.height}
+                width={article?.image.width}
+                className="h-full w-full object-cover"
+              />
+            </div>
+          )}
+
+          <div className="flex flex-col space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+            <div className="md:w-1/2">
+              <h1 className="font-multilingual mb-2 text-5xl leading-normal">{article.title}</h1>
+            </div>
+            <div className="md:w-1/2">
+              <div className="flex flex-col space-y-6">
+                <Prose html={article.contentHtml} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/[locale]/stories/page.tsx

@@ -3,6 +3,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 
 import Navbar from 'components/layout/navbar';
 import Stories from 'components/layout/stories';
+import { BLOG_HANDLE } from 'lib/constants';
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
@@ -34,7 +35,7 @@ export default async function StoriesPage({
     <div>
       <Navbar cart={cart} locale={locale} compact />
       <div className="py-24 md:py-48">
-        <Stories handle="headless" locale={locale} />
+        <Stories handle={BLOG_HANDLE} locale={locale} />
       </div>
 
       <Suspense>