wip: Story detail page

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