@shop-on/theme-server 0.3.0 → 0.4.0

package/dist/availability.d.ts

@@ -0,0 +1,10 @@
+//#region src/availability.d.ts
+/**
+ * Request middleware: every theme registers it in `src/start.ts` after
+ * `storefrontActivityMiddleware`, which answers `/health` before it. A closed
+ * or suspended store (see docs/shop-lifecycle.md) serves one uncacheable,
+ * unindexed 503 page in place of every route; the shop record is the
+ * memoised one the root loader reads, so this costs no extra request.
+ */
+export declare const storefrontAvailabilityMiddleware: import("@tanstack/react-start").RequestMiddlewareAfterServer<{}, undefined, undefined>;
+//#endregion

package/dist/availability.js

@@ -0,0 +1,59 @@
+import { fetchShopInfo } from "./shop.js";
+import { escapeHtmlAttr } from "./html.js";
+import { createMiddleware } from "@tanstack/react-start";
+//#region src/availability.ts
+/**
+* Request middleware: every theme registers it in `src/start.ts` after
+* `storefrontActivityMiddleware`, which answers `/health` before it. A closed
+* or suspended store (see docs/shop-lifecycle.md) serves one uncacheable,
+* unindexed 503 page in place of every route; the shop record is the
+* memoised one the root loader reads, so this costs no extra request.
+*/
+const storefrontAvailabilityMiddleware = createMiddleware().server(async ({ next }) => {
+	let shop;
+	try {
+		shop = await fetchShopInfo();
+	} catch {
+		return next();
+	}
+	if (!shop || shop.status === "active") return next();
+	return unavailableResponse(shop.name);
+});
+function unavailableResponse(shopName) {
+	const name = escapeHtmlAttr(shopName);
+	const html = `<!doctype html>
+<html lang="mn">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>${name}</title>
+<style>
+:root{color-scheme:light dark;--bg:#fafafa;--fg:#171717;--muted:#737373}
+@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--fg:#fafafa;--muted:#a3a3a3}}
+body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;box-sizing:border-box;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center}
+main{max-width:28rem}
+h1{margin:0 0 12px;font-size:1.25rem;font-weight:600}
+p{margin:4px 0;color:var(--muted)}
+</style>
+</head>
+<body>
+<main>
+<h1>${name}</h1>
+<p>Энэ дэлгүүр одоогоор түр хаалттай байна.</p>
+<p lang="en">This store is currently unavailable.</p>
+</main>
+</body>
+</html>
+`;
+	return new Response(html, {
+		status: 503,
+		headers: {
+			"Content-Type": "text/html; charset=utf-8",
+			"Cache-Control": "no-store",
+			"X-Robots-Tag": "noindex"
+		}
+	});
+}
+//#endregion
+export { storefrontAvailabilityMiddleware };

package/dist/collection.d.ts

@@ -184,6 +184,7 @@ export declare const CollectionImageFragment: import("gql.tada").TadaDocumentNod
   thumbUrl: string | null;
   thumbhash: string | null;
   url: string | null;
+  url1_5x: string | null;
   url2x: string | null;
   url3x: string | null;
   width: number | null;

package/dist/collection.js

@@ -134,6 +134,7 @@ const CollectionImageFragment = graphql(`
     thumbhash
     ... on ShopMediaImage {
       url(transform: { maxWidth: 640 })
+      url1_5x: url(transform: { maxWidth: 960 })
       url2x: url(transform: { maxWidth: 640, scale: 2 })
       url3x: url(transform: { maxWidth: 640, scale: 3 })
       thumbUrl: url(transform: { maxWidth: 80 })

package/dist/files.d.ts

@@ -36,6 +36,7 @@ type FileLikeNode = {
   preview?: {
     url?: string | null;
   } | null;
+  url1_5x?: string | null;
   url2x?: string | null;
   url3x?: string | null;
   thumbUrl?: string | null;

package/dist/files.js

@@ -6,6 +6,7 @@ const FileByIdQuery = graphql(`
   query FileById(
     $id: ID!
     $transform: ImageTransformInput
+    $transform1_5x: ImageTransformInput
     $transform2x: ImageTransformInput
     $transform3x: ImageTransformInput
   ) {
@@ -18,6 +19,7 @@ const FileByIdQuery = graphql(`
         width
         height
         url(transform: $transform)
+        url1_5x: url(transform: $transform1_5x)
         url2x: url(transform: $transform2x)
         url3x: url(transform: $transform3x)
         focalPoint {
@@ -50,23 +52,30 @@ function buildSrcset(entries) {
 	}
 	return parts.length > 1 ? parts.join(", ") : null;
 }
+function ladderSrcset(node, baseWidth) {
+	return buildSrcset([
+		{
+			url: node.url,
+			w: baseWidth
+		},
+		{
+			url: node.url1_5x,
+			w: Math.round(baseWidth * 1.5)
+		},
+		{
+			url: node.url2x,
+			w: baseWidth * 2
+		},
+		{
+			url: node.url3x,
+			w: baseWidth * 3
+		}
+	]);
+}
 function toFileInfo(node, extra = {}) {
 	if (!node) return null;
 	if (node.__typename === "ShopMediaImage") {
-		const computedSrcset = extra.baseWidth != null ? buildSrcset([
-			{
-				url: node.url,
-				w: extra.baseWidth
-			},
-			{
-				url: node.url2x,
-				w: extra.baseWidth * 2
-			},
-			{
-				url: node.url3x,
-				w: extra.baseWidth * 3
-			}
-		]) : null;
+		const computedSrcset = extra.baseWidth != null ? ladderSrcset(node, extra.baseWidth) : null;
 		return {
 			kind: "image",
 			id: node.id ?? "",
@@ -106,29 +115,31 @@ function scaled(t, scale) {
 		scale
 	};
 }
+function widened(t) {
+	if (!t?.maxWidth) return null;
+	const { scale: _, ...rest } = t;
+	return {
+		...rest,
+		maxWidth: Math.round(t.maxWidth * 1.5),
+		...t.maxHeight ? { maxHeight: Math.round(t.maxHeight * 1.5) } : {}
+	};
+}
 const fetchFileById = memoTTL(async ({ id, transform }) => {
 	const node = (await request(FileByIdQuery, {
 		id,
 		transform: transform ?? null,
+		transform1_5x: widened(transform),
 		transform2x: scaled(transform, 2),
 		transform3x: scaled(transform, 3)
 	})).node;
 	if (!node) return null;
 	const baseWidth = transform?.maxWidth;
-	return toFileInfo(node, { srcset: node.__typename === "ShopMediaImage" && baseWidth != null ? buildSrcset([
-		{
-			url: node.url,
-			w: baseWidth
-		},
-		{
-			url: node.url2x,
-			w: baseWidth * 2
-		},
-		{
-			url: node.url3x,
-			w: baseWidth * 3
-		}
-	]) : null });
+	return toFileInfo(node, { srcset: node.__typename === "ShopMediaImage" && baseWidth != null ? ladderSrcset({
+		url: node.url,
+		url1_5x: node.url1_5x,
+		url2x: node.url2x,
+		url3x: node.url3x
+	}, baseWidth) : null });
 }, {
 	key: ({ id, transform }) => `${id}|${transform ? JSON.stringify(transform) : ""}`,
 	version: getContentVersion

package/dist/shop.d.ts

@@ -27,6 +27,7 @@ declare const ShopQuery: import("gql.tada").TadaDocumentNode<{
       turnstileSitekey: string | null;
     } | null;
     primaryLocale: string;
+    status: string;
     taxesIncluded: boolean;
     timezone: string;
     turnstileSitekey: string | null;

package/dist/shop.js

@@ -8,6 +8,7 @@ const ShopQuery = graphql(`
       id
       name
       handle
+      status
       currency
       timezone
       primaryLocale

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shop-on/theme-server",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "SEE LICENSE IN dist/LICENSE.md",
   "files": [
     "dist"
@@ -11,6 +11,7 @@
     "./activity": "./dist/activity.js",
     "./analytics-proxy": "./dist/analytics-proxy.js",
     "./analytics-script-proxy": "./dist/analytics-script-proxy.js",
+    "./availability": "./dist/availability.js",
     "./blog": "./dist/blog.js",
     "./cache": "./dist/cache.js",
     "./canonical-host": "./dist/canonical-host.js",
@@ -58,8 +59,8 @@
     "graphql": "17.0.2",
     "graphql-request": "7.4.0",
     "liquidjs": "10.30.0",
-    "@shop-on/customer-runtime": "0.3.0",
-    "@shop-on/theme-runtime": "0.3.0"
+    "@shop-on/customer-runtime": "0.4.0",
+    "@shop-on/theme-runtime": "0.4.0"
   },
   "devDependencies": {
     "@tanstack/react-start": "1.169.3",