create-magic-storefront 0.1.0

package/template/app/globals.css

@@ -0,0 +1,268 @@
+:root {
+  --bg: #fff;
+  --fg: #16161a;
+  --muted: #6b6b76;
+  --line: #e7e7ec;
+  --accent: #1f5eff;
+  --danger: #c62828;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  color: var(--fg);
+  background: var(--bg);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+a {
+  color: inherit;
+}
+main {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px 16px 64px;
+}
+header.site {
+  border-bottom: 1px solid var(--line);
+}
+header.site nav {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 12px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+header.site .brand {
+  font-weight: 700;
+  text-decoration: none;
+  margin-right: auto;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 20px;
+}
+.card {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.card img,
+.card .noimg {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  background: #f3f3f6;
+  border-radius: 8px;
+}
+.muted {
+  color: var(--muted);
+}
+.error {
+  color: var(--danger);
+}
+.row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.product {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 32px;
+}
+@media (max-width: 720px) {
+  .product {
+    grid-template-columns: 1fr;
+  }
+}
+.product img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+button,
+.button {
+  font: inherit;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: #fff;
+  cursor: pointer;
+  text-decoration: none;
+}
+button.primary,
+.button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+button[aria-pressed='true'] {
+  border-color: var(--fg);
+}
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+input,
+select {
+  font: inherit;
+  padding: 9px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+td,
+th {
+  padding: 10px 6px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
+}
+.pager {
+  display: flex;
+  gap: 8px;
+  margin-top: 24px;
+}
+fieldset {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 16px;
+}
+.home {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+.announcement {
+  margin: 0;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--fg);
+  color: var(--bg);
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.announcement-ltr span,
+.announcement-rtl span {
+  display: inline-block;
+  animation: marquee 18s linear infinite;
+}
+.announcement-rtl span {
+  animation-direction: reverse;
+}
+@keyframes marquee {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .announcement span {
+    animation: none;
+  }
+}
+.banner {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  gap: 16px;
+}
+.banner > * {
+  scroll-snap-align: start;
+}
+.banner img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.deal {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 24px;
+  padding: 16px;
+  border: 2px solid var(--accent);
+  border-radius: 12px;
+}
+@media (max-width: 720px) {
+  .deal {
+    grid-template-columns: 1fr;
+  }
+}
+.deal img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.badge {
+  align-self: flex-start;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+}
+.stories {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+}
+.story {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  flex: 0 0 88px;
+}
+.story img,
+.story .noimg {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  background: #f3f3f6;
+  border-radius: 12px;
+}
+.stories-circle .story img,
+.stories-circle .story .noimg {
+  border-radius: 50%;
+}
+blockquote {
+  margin: 0;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+footer.site {
+  border-top: 1px solid var(--line);
+}
+footer.site nav {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 16px;
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}

package/template/app/layout.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import type { ReactNode } from 'react';
+import { CartLink } from '@/components/cart-link';
+import { api, locale } from '@/lib/api';
+import { Providers } from './providers';
+import './globals.css';
+
+// Rendered per request: the shop is the API's, not the build's. Public reads are still cached
+// (lib/api.ts) and revalidated by the webhook.
+export const dynamic = 'force-dynamic';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const { data: shop } = await api.shop();
+  return {
+    title: shop.seo.title || shop.name,
+    description: shop.seo.description ?? shop.description,
+  };
+}
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const [{ data: shop }, { data: collections }, { data: pages }] = await Promise.all([
+    api.shop(),
+    api.collectionsIndex({ query: { perPage: 6 } }),
+    api.pagesIndex(),
+  ]);
+
+  return (
+    <html lang={locale}>
+      <body>
+        <Providers shop={shop}>
+          <header className="site">
+            <nav>
+              <Link href="/" className="brand">
+                {shop.name}
+              </Link>
+              {collections.map((collection) => (
+                <Link key={collection.id} href={`/collections/${collection.handle}`}>
+                  {collection.title}
+                </Link>
+              ))}
+              <Link href="/search">Search</Link>
+              <Link href="/account">Account</Link>
+              <CartLink />
+            </nav>
+          </header>
+          <main>{children}</main>
+          {pages.length > 0 && (
+            <footer className="site">
+              <nav>
+                {pages.map((page) => (
+                  <Link key={page.handle} href={`/pages/${page.handle}`}>
+                    {page.title}
+                  </Link>
+                ))}
+              </nav>
+            </footer>
+          )}
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/template/app/not-found.tsx

@@ -0,0 +1,10 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="stack">
+      <h1>Not found</h1>
+      <Link href="/">Back to the shop</Link>
+    </div>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,16 @@
+import { HomeSections } from '@/components/sections';
+import { api } from '@/lib/api';
+
+export default async function Home() {
+  const { data: home } = await api.home();
+  // A shop that has not laid out its home page yet still greets buyers with its newest products.
+  const sections =
+    home.sections.length > 0
+      ? home.sections
+      : [{ id: 'default', type: 'NEW_ARRIVALS' as const, settings: { limit: null } }];
+  return (
+    <div className="home">
+      <HomeSections sections={sections} />
+    </div>
+  );
+}

package/template/app/pages/[handle]/page.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from 'next';
+import { pageMeta } from '@magicstoreai/hydrogen/seo';
+import { api, orNotFound } from '@/lib/api';
+
+type Props = { params: Promise<{ handle: string }> };
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { handle } = await params;
+  const { data: page } = await orNotFound(api.pagesShow({ path: { handle } }));
+  const meta = pageMeta({ seo: page.seo, title: page.title });
+  return { title: meta.title, description: meta.description };
+}
+
+/** A merchant's content page (about, delivery, offer…). `body` is the merchant's HTML. */
+export default async function ContentPage({ params }: Props) {
+  const { handle } = await params;
+  const { data: page } = await orNotFound(api.pagesShow({ path: { handle } }));
+  return (
+    <article className="stack">
+      <h1>{page.title}</h1>
+      {page.body ? (
+        <div dangerouslySetInnerHTML={{ __html: page.body }} />
+      ) : (
+        <p className="muted">Nothing here yet.</p>
+      )}
+    </article>
+  );
+}

package/template/app/products/[handle]/page.tsx

@@ -0,0 +1,47 @@
+import type { Metadata } from 'next';
+import { Image } from '@magicstoreai/hydrogen';
+import { jsonLdScript, pageMeta, productJsonLd } from '@magicstoreai/hydrogen/seo';
+import { BuyBox } from '@/components/buy-box';
+import { api, orNotFound } from '@/lib/api';
+
+type Props = { params: Promise<{ handle: string }> };
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { handle } = await params;
+  const { data: product } = await orNotFound(api.productsShow({ path: { handle } }));
+  const meta = pageMeta({
+    seo: product.seo,
+    title: product.title,
+    description: product.description,
+    images: product.images,
+  });
+  return {
+    title: meta.title,
+    description: meta.description,
+    openGraph: { images: meta.openGraph.images },
+  };
+}
+
+export default async function ProductPage({ params }: Props) {
+  const { handle } = await params;
+  const { data: product } = await orNotFound(api.productsShow({ path: { handle } }));
+
+  return (
+    <article className="product">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: jsonLdScript(productJsonLd(product, { url: `/products/${product.handle}` })),
+        }}
+      />
+      <div className="stack">
+        <Image data={product.featuredImage} alt={product.title} loading="eager" />
+      </div>
+      <div className="stack">
+        <h1>{product.title}</h1>
+        <BuyBox product={product} />
+        {product.description && <div dangerouslySetInnerHTML={{ __html: product.description }} />}
+      </div>
+    </article>
+  );
+}

package/template/app/providers.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { MagicStoreProvider, useAnalytics, type Shop } from '@magicstoreai/hydrogen';
+import { usePathname } from 'next/navigation';
+import { useEffect, useRef, type ReactNode } from 'react';
+
+const token = process.env.NEXT_PUBLIC_MAGICSTORE_STOREFRONT_TOKEN;
+const locale = process.env.NEXT_PUBLIC_MAGICSTORE_LOCALE || 'ru';
+
+/**
+ * With a public storefront token the browser calls the shop's API directly (the token lists this
+ * origin); without one, it goes through this app's same-origin proxy (app/storefront-api).
+ */
+const connection = token
+  ? { shopDomain: process.env.NEXT_PUBLIC_MAGICSTORE_SHOP_DOMAIN!, storefrontToken: token }
+  : { baseUrl: '/storefront-api' };
+
+export function Providers({ shop, children }: { shop: Shop; children: ReactNode }) {
+  return (
+    <MagicStoreProvider {...connection} shop={shop} locale={locale}>
+      <PageViews />
+      {children}
+    </MagicStoreProvider>
+  );
+}
+
+/** One PAGE_VIEW per route; the first carries the landing attribution. */
+function PageViews() {
+  const analytics = useAnalytics();
+  const pathname = usePathname();
+  const first = useRef(true);
+
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      const url = new URL(window.location.href);
+      analytics.pageView(pathname, {
+        utmSource: url.searchParams.get('utm_source'),
+        utmMedium: url.searchParams.get('utm_medium'),
+        utmCampaign: url.searchParams.get('utm_campaign'),
+        referrer: document.referrer || null,
+      });
+      return;
+    }
+    analytics.pageView(pathname);
+  }, [analytics, pathname]);
+
+  return null;
+}

package/template/app/search/page.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from 'next';
+import { SearchView } from '@/components/analytics-views';
+import { Pager } from '@/components/pager';
+import { ProductGrid } from '@/components/product-grid';
+import { api } from '@/lib/api';
+
+type Props = { searchParams: Promise<{ q?: string; page?: string }> };
+
+// Result pages are endless and change by the minute: keep them out of the index.
+export const metadata: Metadata = { title: 'Search', robots: { index: false, follow: true } };
+
+export default async function SearchPage({ searchParams }: Props) {
+  const { q = '', page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const results = q.trim() ? await api.search({ query: { q, page, perPage: 24 } }) : null;
+
+  return (
+    <>
+      <h1>Search</h1>
+      <form className="row" action="/search">
+        <input name="q" defaultValue={q} placeholder="What are you looking for?" />
+        <button className="primary">Search</button>
+      </form>
+      {results && (
+        <>
+          <SearchView query={q} resultsCount={results.meta.pagination.total} />
+          <p className="muted">{results.meta.pagination.total} found</p>
+          <ProductGrid products={results.data} />
+          <Pager
+            meta={results.meta.pagination}
+            href={(p) => `/search?q=${encodeURIComponent(q)}&page=${p}`}
+          />
+        </>
+      )}
+    </>
+  );
+}

package/template/app/sitemap.ts

@@ -0,0 +1,36 @@
+import type { MetadataRoute } from 'next';
+import { api } from '@/lib/api';
+
+const PATHS = { PAGE: 'pages', COLLECTION: 'collections', PRODUCT: 'products' } as const;
+/** The sitemap protocol allows 50 000 URLs in one file: 50 pages of `GET /sitemap`. */
+const PER_PAGE = 1000;
+const MAX_PAGES = 50;
+
+// Built per request like every page: the shop is the API's, not the build's.
+export const dynamic = 'force-dynamic';
+
+/**
+ * Every published product, collection and page (`GET /sitemap`, up to 1000 rows a page). URLs are
+ * absolute on `SITE_URL`, else the shop's primary domain.
+ */
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const { data: shop } = await api.shop();
+  const origin =
+    process.env.SITE_URL?.replace(/\/+$/, '') ??
+    `https://${shop.primaryDomain ?? process.env.MAGICSTORE_SHOP_DOMAIN}`;
+
+  const entries: MetadataRoute.Sitemap = [{ url: `${origin}/` }];
+  for (let page = 1; page <= MAX_PAGES; page++) {
+    const { data, meta } = await api.sitemap({ query: { page, perPage: PER_PAGE } });
+    for (const row of data) {
+      entries.push({
+        url: `${origin}/${PATHS[row.type]}/${row.handle}`,
+        ...(row.updatedAt && { lastModified: row.updatedAt }),
+      });
+    }
+    if (!meta.pagination.hasNextPage) {
+      break;
+    }
+  }
+  return entries;
+}

package/template/app/storefront-api/[...path]/route.ts

@@ -0,0 +1,83 @@
+/**
+ * Same-origin proxy for browser calls when the site has no public storefront token. The API
+ * identifies the shop by the request's host and CORS admits only origins a token lists, so the
+ * browser talks to this route and this route talks to the shop — with the shop's host, and the
+ * buyer's address in X-Forwarded-For. Only the API's own headers pass, both ways.
+ */
+import { upstreamBaseUrl } from '@/lib/upstream';
+
+const upstream = upstreamBaseUrl();
+
+const REQUEST_HEADERS = [
+  'accept',
+  'accept-language',
+  'authorization',
+  'content-type',
+  'idempotency-key',
+  'if-none-match',
+  'x-anonymous-id',
+  'x-checkout-id',
+  'x-request-id',
+  'x-session-id',
+];
+
+const RESPONSE_HEADERS = [
+  'cache-control',
+  'content-language',
+  'content-type',
+  'etag',
+  'location',
+  'ratelimit-limit',
+  'ratelimit-remaining',
+  'ratelimit-reset',
+  'retry-after',
+  'x-request-id',
+];
+
+async function proxy(
+  request: Request,
+  { params }: { params: Promise<{ path: string[] }> },
+): Promise<Response> {
+  if (upstream === null) {
+    return new Response('MAGICSTORE_SHOP_DOMAIN is not set', { status: 500 });
+  }
+  const { path } = await params;
+  const incoming = new URL(request.url);
+  const target = new URL(`${upstream}/${path.map(encodeURIComponent).join('/')}`);
+  target.search = incoming.search;
+
+  const headers = new Headers();
+  for (const name of REQUEST_HEADERS) {
+    const value = request.headers.get(name);
+    if (value !== null) {
+      headers.set(name, value);
+    }
+  }
+  const client = request.headers.get('x-forwarded-for');
+  if (client) {
+    headers.set('x-forwarded-for', client);
+  }
+
+  const hasBody = request.method !== 'GET' && request.method !== 'HEAD';
+  const answer = await fetch(target, {
+    method: request.method,
+    headers,
+    body: hasBody ? await request.arrayBuffer() : undefined,
+    cache: 'no-store',
+    redirect: 'manual',
+  });
+
+  const out = new Headers();
+  for (const name of RESPONSE_HEADERS) {
+    const value = answer.headers.get(name);
+    if (value !== null) {
+      out.set(name, value);
+    }
+  }
+  return new Response(answer.status === 204 || answer.status === 304 ? null : answer.body, {
+    status: answer.status,
+    headers: out,
+  });
+}
+
+export { proxy as DELETE, proxy as GET, proxy as PATCH, proxy as POST, proxy as PUT };

package/template/components/analytics-views.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useAnalytics } from '@magicstoreai/hydrogen';
+import { useEffect } from 'react';
+
+/** Reports a collection view once per collection; renders nothing. */
+export function CollectionView({ collectionId }: { collectionId: string }) {
+  const analytics = useAnalytics();
+  useEffect(() => analytics.collectionView(collectionId), [analytics, collectionId]);
+  return null;
+}
+
+/** Reports a search with how many results it found; renders nothing. */
+export function SearchView({ query, resultsCount }: { query: string; resultsCount: number }) {
+  const analytics = useAnalytics();
+  useEffect(() => analytics.search(query, resultsCount), [analytics, query, resultsCount]);
+  return null;
+}