@orderlyshop/web-components 0.1.0

package/server/node/product-snapshot-server.mjs

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+import { createServer } from "node:http";
+import { create } from "@bufbuild/protobuf";
+import { anyUnpack } from "@bufbuild/protobuf/wkt";
+import {
+  SearchObjectSchema,
+  SearchQuerySchema
+} from "@orderlyshop/core-client";
+import { createOrderlyNodeClient } from "@orderlyshop/core-client/node";
+
+const ORDERLY_SHARE_URL_PREFIX = "https://orderly.shop/";
+const DEFAULT_IMAGE_BASE_URL = "https://orderlyproduction.azureedge.net/";
+
+const port = Number.parseInt(process.env.PORT ?? process.env.ORDERLY_PRODUCT_SNAPSHOT_PORT ?? "4107", 10);
+const baseUrl = process.env.ORDERLY_BACKEND_URL ?? process.env.VITE_ORDERLY_BASE_URL ?? "https://service.orderly.shop";
+const protocol = process.env.ORDERLY_BACKEND_PROTOCOL === "grpc" ? "grpc" : "grpc-web";
+const imageBaseUrl = process.env.ORDERLY_IMAGE_BASE_URL ?? process.env.VITE_ORDERLY_IMAGE_BASE_URL ?? DEFAULT_IMAGE_BASE_URL;
+const client = createOrderlyNodeClient({ baseUrl, protocol });
+
+const server = createServer(async (request, response) => {
+  const url = new URL(request.url ?? "/", `http://${request.headers.host ?? "localhost"}`);
+  if (url.pathname !== "/orderly-product-snapshot") {
+    writeJson(response, 404, { error: "Not found" });
+    return;
+  }
+
+  const shareUrl = normalizeShareUrl(url.searchParams.get("url") ?? "");
+  if (!shareUrl) {
+    writeJson(response, 400, { error: "Missing url query parameter" });
+    return;
+  }
+
+  try {
+    const result = await client.services.searchService.search(create(SearchQuerySchema, {
+      ShareUrl: shareUrl
+    }));
+    const product = result.data
+      .map((item) => anyUnpack(item, SearchObjectSchema))
+      .filter(Boolean)[0];
+
+    if (!product) {
+      writeJson(response, 404, { error: "Product not found", shareUrl });
+      return;
+    }
+
+    writeJson(response, 200, productSnapshot(product, shareUrl));
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    writeJson(response, 502, { error: "Could not load product", detail: message });
+  }
+});
+
+server.listen(port, () => {
+  console.log(`Orderly product snapshot server listening on http://localhost:${port}/orderly-product-snapshot`);
+});
+
+function productSnapshot(product, fallbackShareUrl) {
+  return {
+    shareUrl: product.ShareURL?.URL || fallbackShareUrl,
+    title: product.Title || "Produkt",
+    brand: normalizedBrand(product.Brand),
+    description: product.Description || "",
+    priceText: formatCredit(product.Price),
+    imageUrl: storedImageUrl(product.Images?.[0])
+  };
+}
+
+function normalizeShareUrl(value) {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.startsWith(ORDERLY_SHARE_URL_PREFIX) || /^https?:\/\//i.test(trimmed)) {
+    return trimmed;
+  }
+  return `${ORDERLY_SHARE_URL_PREFIX}${trimmed.replace(/^\/+/, "")}`;
+}
+
+function normalizedBrand(brand) {
+  const value = brand?.trim();
+  if (!value || value.toLowerCase() === "ukendt" || value.toUpperCase() === "DVD") {
+    return "";
+  }
+  return value;
+}
+
+function formatCredit(credit) {
+  if (!credit) {
+    return "";
+  }
+  const amount = Number(credit.Amount ?? 0);
+  const currency = credit.Currency || "";
+  const prefix = currency.toUpperCase() === "DKK" ? "kr." : currency.trim();
+  const value = amount.toLocaleString("da-DK", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  return `${prefix ? `${prefix} ` : ""}${value}`.trim();
+}
+
+function storedImageUrl(image) {
+  if (!image) {
+    return "";
+  }
+  if (image.ImageDataBase64) {
+    return `data:image/jpeg;base64,${image.ImageDataBase64}`;
+  }
+  if (/^https?:\/\//i.test(image.Name) || image.Name.startsWith("/")) {
+    return image.Name;
+  }
+  if (!image.Name) {
+    return "";
+  }
+  const imageName = image.Name.toLowerCase();
+  const path = image.IsAsset || imageName.includes("cms") || imageName.startsWith("images")
+    ? "objects"
+    : "thumbnails";
+  return joinUrl(imageBaseUrl, path, image.Name);
+}
+
+function joinUrl(baseUrl, ...parts) {
+  const root = String(baseUrl).endsWith("/") ? String(baseUrl) : `${baseUrl}/`;
+  return new URL(parts
+    .filter(Boolean)
+    .map((part) => String(part).replace(/^\/+|\/+$/g, ""))
+    .join("/"), root).toString();
+}
+
+function writeJson(response, status, value) {
+  const body = `${JSON.stringify(value)}\n`;
+  response.writeHead(status, {
+    "content-type": "application/json; charset=utf-8",
+    "cache-control": status === 200 ? "public, max-age=300" : "no-store"
+  });
+  response.end(body);
+}

package/server/php/orderly-product.php

@@ -0,0 +1,204 @@
+<?php
+declare(strict_types=1);
+
+/*
+ * Orderly product SSR helper for PHP hosts.
+ *
+ * Deploy this file next to the built static shop output, including product.html.
+ * The script rewrites clean product URLs to a real HTML response, injects
+ * declarative SSR fallback content into <orderly-product-detail-page>, and then
+ * lets the browser web component hydrate the live product view.
+ *
+ * Optional environment variables:
+ * - ORDERLY_PRODUCT_TEMPLATE: path to built product.html. Defaults to ./product.html.
+ * - ORDERLY_PRODUCT_ORIGIN: prefix for compact product slugs. Defaults to https://orderly.shop/.
+ * - ORDERLY_PRODUCT_SNAPSHOT_ENDPOINT: internal JSON endpoint returning product snapshot data.
+ * - ORDERLY_PRODUCT_SNAPSHOT_TIMEOUT: snapshot endpoint timeout in seconds. Defaults to 2.
+ */
+
+$shareUrl = orderly_product_share_url();
+$snapshot = orderly_load_product_snapshot($shareUrl);
+$templatePath = getenv('ORDERLY_PRODUCT_TEMPLATE') ?: __DIR__ . '/product.html';
+$html = is_file($templatePath)
+    ? file_get_contents($templatePath)
+    : orderly_minimal_product_template();
+
+if ($html === false) {
+    http_response_code(500);
+    header('Content-Type: text/plain; charset=UTF-8');
+    echo 'Could not read product template.';
+    exit;
+}
+
+$html = orderly_inject_product_page($html, $shareUrl, $snapshot);
+$html = orderly_inject_meta($html, $shareUrl, $snapshot);
+
+header('Content-Type: text/html; charset=UTF-8');
+echo $html;
+
+function orderly_product_share_url(): string
+{
+    $value = $_GET['url'] ?? '';
+    if (!is_string($value) || $value === '') {
+        $path = parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH);
+        $value = is_string($path) ? ltrim($path, '/') : '';
+    }
+
+    $value = trim(rawurldecode($value));
+    if ($value === '') {
+        return '';
+    }
+
+    if (preg_match('~^https?://~i', $value) === 1) {
+        return $value;
+    }
+
+    $origin = getenv('ORDERLY_PRODUCT_ORIGIN') ?: 'https://orderly.shop/';
+    return rtrim($origin, '/') . '/' . ltrim($value, '/');
+}
+
+function orderly_load_product_snapshot(string $shareUrl): ?array
+{
+    $endpoint = getenv('ORDERLY_PRODUCT_SNAPSHOT_ENDPOINT') ?: '';
+    if ($endpoint === '' || $shareUrl === '') {
+        return null;
+    }
+
+    $separator = str_contains($endpoint, '?') ? '&' : '?';
+    $url = $endpoint . $separator . 'url=' . rawurlencode($shareUrl);
+    $timeout = (float) (getenv('ORDERLY_PRODUCT_SNAPSHOT_TIMEOUT') ?: '2');
+    $context = stream_context_create([
+        'http' => [
+            'method' => 'GET',
+            'timeout' => $timeout,
+            'header' => "Accept: application/json\r\n",
+        ],
+    ]);
+    $json = @file_get_contents($url, false, $context);
+    if ($json === false || $json === '') {
+        return null;
+    }
+
+    $data = json_decode($json, true);
+    return is_array($data) ? $data : null;
+}
+
+function orderly_inject_product_page(string $html, string $shareUrl, ?array $snapshot): string
+{
+    $fallback = orderly_render_product_fallback($shareUrl, $snapshot);
+    $component = '<orderly-product-detail-page data-orderly-ssr share-url="' . orderly_e($shareUrl) . '">' . "\n"
+        . $fallback . "\n"
+        . '</orderly-product-detail-page>';
+
+    $result = preg_replace(
+        '~<orderly-product-detail-page\b[^>]*>.*?</orderly-product-detail-page>~is',
+        $component,
+        $html,
+        1,
+        $count
+    );
+
+    if ($result !== null && $count > 0) {
+        return $result;
+    }
+
+    return str_replace('</body>', $component . "\n</body>", $html);
+}
+
+function orderly_render_product_fallback(string $shareUrl, ?array $snapshot): string
+{
+    $title = orderly_snapshot_value($snapshot, 'title') ?: orderly_title_from_share_url($shareUrl);
+    $brand = orderly_snapshot_value($snapshot, 'brand');
+    $price = orderly_snapshot_value($snapshot, 'priceText');
+    $description = orderly_snapshot_value($snapshot, 'description');
+    $imageUrl = orderly_snapshot_value($snapshot, 'imageUrl');
+    $titleMarkup = orderly_e($title);
+
+    $image = $imageUrl !== ''
+        ? '<div class="orderly-ssr-product-detail__image"><img src="' . orderly_e($imageUrl) . '" alt="' . orderly_e($title) . '" loading="eager"></div>'
+        : '';
+    $brandMarkup = $brand !== '' ? '<p data-orderly-field="brand">' . orderly_e($brand) . '</p>' : '';
+    $priceMarkup = $price !== '' ? '<p data-orderly-field="price">' . orderly_e($price) . '</p>' : '';
+    $descriptionMarkup = $description !== '' ? '<p data-orderly-field="description">' . orderly_e($description) . '</p>' : '';
+
+    return <<<HTML
+      <article slot="content-before" class="orderly-ssr-product-detail" data-orderly-ssr-fallback data-orderly-product>
+        {$image}
+        <section class="orderly-ssr-product-detail__text">
+          {$brandMarkup}
+          <h1 data-orderly-field="title">{$titleMarkup}</h1>
+          {$priceMarkup}
+          {$descriptionMarkup}
+        </section>
+      </article>
+HTML;
+}
+
+function orderly_inject_meta(string $html, string $shareUrl, ?array $snapshot): string
+{
+    $title = orderly_snapshot_value($snapshot, 'title') ?: orderly_title_from_share_url($shareUrl);
+    $description = orderly_snapshot_value($snapshot, 'description');
+    $imageUrl = orderly_snapshot_value($snapshot, 'imageUrl');
+
+    $html = preg_replace('~<title>.*?</title>~is', '<title>' . orderly_e($title) . '</title>', $html, 1) ?? $html;
+    $html = orderly_upsert_head_tag($html, '~<meta\s+name=["\']description["\'][^>]*>~i', '<meta name="description" content="' . orderly_e($description ?: $title) . '">');
+    $html = orderly_upsert_head_tag($html, '~<link\s+rel=["\']canonical["\'][^>]*>~i', '<link rel="canonical" href="' . orderly_e($shareUrl) . '">');
+    $html = orderly_upsert_head_tag($html, '~<meta\s+property=["\']og:title["\'][^>]*>~i', '<meta property="og:title" content="' . orderly_e($title) . '">');
+    $html = orderly_upsert_head_tag($html, '~<meta\s+property=["\']og:url["\'][^>]*>~i', '<meta property="og:url" content="' . orderly_e($shareUrl) . '">');
+    if ($description !== '') {
+        $html = orderly_upsert_head_tag($html, '~<meta\s+property=["\']og:description["\'][^>]*>~i', '<meta property="og:description" content="' . orderly_e($description) . '">');
+    }
+    if ($imageUrl !== '') {
+        $html = orderly_upsert_head_tag($html, '~<meta\s+property=["\']og:image["\'][^>]*>~i', '<meta property="og:image" content="' . orderly_e($imageUrl) . '">');
+    }
+    return $html;
+}
+
+function orderly_upsert_head_tag(string $html, string $pattern, string $tag): string
+{
+    if (preg_match($pattern, $html) === 1) {
+        return preg_replace($pattern, $tag, $html, 1) ?? $html;
+    }
+    return str_replace('</head>', '    ' . $tag . "\n  </head>", $html);
+}
+
+function orderly_snapshot_value(?array $snapshot, string $key): string
+{
+    $value = $snapshot[$key] ?? '';
+    return is_scalar($value) ? trim((string) $value) : '';
+}
+
+function orderly_title_from_share_url(string $shareUrl): string
+{
+    $path = parse_url($shareUrl, PHP_URL_PATH);
+    $name = is_string($path) ? basename($path, '.html') : 'Produkt';
+    $name = preg_replace('~-[a-z0-9]{8,}$~i', '', $name) ?? $name;
+    $name = str_replace(['-', '_'], ' ', $name);
+    return ucwords($name ?: 'Produkt');
+}
+
+function orderly_minimal_product_template(): string
+{
+    return <<<'HTML'
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Produkt</title>
+    <script src="/node_modules/@orderlyshop/web-components/dist/browser/orderly-web-components.global.js"></script>
+    <script>
+      OrderlyWebComponents.configureShop({
+        defaultShop: { baseUrl: "https://service.orderly.shop" }
+      });
+    </script>
+  </head>
+  <body></body>
+</html>
+HTML;
+}
+
+function orderly_e(string $value): string
+{
+    return htmlspecialchars($value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+}