create-getly-store 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# create-getly-store
+
+Scaffold a minimal, beautiful Next.js storefront for your
+[Getly](https://www.getly.store) store — one command, zero dependencies in the
+scaffolder itself:
+
+```bash
+npx create-getly-store my-store --store your-store-slug
+cd my-store
+npm install
+npm run dev        # http://localhost:3000
+```
+
+Omit `--store` and you'll be prompted. The slug is the part after
+`getly.store/store/` on your public store page.
+
+## What you get
+
+A complete Next.js 15 App Router app (React 19, TypeScript, strict) that
+renders your store's active products from Getly's **public** storefront API —
+no API key, no database:
+
+- **Catalog grid** (`app/page.tsx`) — `GET /api/v1/public/stores/{slug}/products`,
+  server-fetched with `revalidate: 300`.
+- **Product pages** (`app/p/[slug]/page.tsx`) — single-product endpoint with
+  description, gallery and metadata.
+- **Buy button** → Getly's hosted checkout (`urls.buy`); files are delivered
+  by Getly after payment.
+- **Money done right** — the template reads only `priceCents` (integer cents)
+  and formats with `Intl.NumberFormat`.
+- **Dark/light** via `prefers-color-scheme`; styling is tasteful hand-written
+  CSS (`app/globals.css`), no component libraries.
+
+## Configuration
+
+The store slug is written into two places at scaffold time:
+
+- `getly.config.json` — the committed default;
+- `.env.local.example` — copy to `.env.local` (or set on your host) as
+  `NEXT_PUBLIC_GETLY_STORE_SLUG` to override without code changes.
+
+## Deploy
+
+The generated `README.md` documents the honest path: push the folder to a
+GitHub repository, then import it at <https://vercel.com/new> (a `vercel.json`
+is included) — or add Vercel's Deploy button to *your* repo pointing at
+itself. A one-click clone URL can only point at a repo you control, so the
+scaffolder doesn't pretend otherwise.
+
+## Safety notes
+
+- The scaffolder **refuses to write into a non-empty directory** — it never
+  overwrites existing files.
+- The template never injects seller-provided HTML (descriptions are stripped
+  to plain paragraphs — no `dangerouslySetInnerHTML`).
+
+## License
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+interface Args {
+    dir?: string;
+    store?: string;
+    help: boolean;
+    errors: string[];
+}
+export declare function parseArgs(argv: string[]): Args;
+export {};

package/dist/cli.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/**
+ * create-getly-store — npx scaffolder. Zero runtime dependencies.
+ *
+ *   npx create-getly-store my-store --store my-getly-slug
+ */
+import path from 'node:path';
+import readline from 'node:readline/promises';
+import { normalizeSlug, scaffold, ScaffoldError } from './index.js';
+const HELP = `create-getly-store — a minimal Next.js storefront for your Getly store.
+
+Usage:
+  npx create-getly-store <directory> [--store <store-slug>]
+
+Options:
+  --store <slug>   Your Getly store slug (the part after getly.store/store/).
+                   Prompted for interactively when omitted.
+  --help, -h       Show this help.
+`;
+export function parseArgs(argv) {
+    const args = { help: false, errors: [] };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === '--help' || arg === '-h')
+            args.help = true;
+        else if (arg === '--store') {
+            const value = argv[++i];
+            if (!value)
+                args.errors.push('--store requires a value');
+            else
+                args.store = value;
+        }
+        else if (arg.startsWith('-')) {
+            args.errors.push(`Unknown flag: ${arg}`);
+        }
+        else if (args.dir) {
+            args.errors.push(`Unexpected extra argument: ${arg}`);
+        }
+        else {
+            args.dir = arg;
+        }
+    }
+    return args;
+}
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    if (args.help || (!args.dir && args.errors.length === 0)) {
+        console.log(HELP);
+        return args.help ? 0 : 1;
+    }
+    if (args.errors.length > 0) {
+        for (const err of args.errors)
+            console.error(`Error: ${err}`);
+        console.error('\nRun with --help for usage.');
+        return 1;
+    }
+    let storeSlug = args.store;
+    if (!storeSlug) {
+        const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+        try {
+            const answer = await rl.question('Your Getly store slug (getly.store/store/<slug>): ');
+            storeSlug = answer;
+        }
+        finally {
+            rl.close();
+        }
+    }
+    if (!normalizeSlug(storeSlug ?? '')) {
+        console.error('Error: a store slug is required (letters, digits and dashes).');
+        console.error('Find yours on your store page URL: https://www.getly.store/dashboard/settings');
+        return 1;
+    }
+    try {
+        const result = scaffold({ targetDir: args.dir, storeSlug: storeSlug });
+        const rel = path.relative(process.cwd(), result.targetDir) || '.';
+        console.log(`\nScaffolded ${result.filesWritten.length} files into ${rel}/`);
+        console.log(`Store slug: ${result.storeSlug} (written to getly.config.json and .env.local.example)`);
+        console.log('\nNext steps:');
+        console.log(`  cd ${rel}`);
+        console.log('  npm install');
+        console.log('  npm run dev        # http://localhost:3000');
+        console.log('\nDeploy:');
+        console.log('  push this folder to a GitHub repo, then import it at https://vercel.com/new');
+        console.log('  (details + a Deploy button recipe are in the generated README.md)');
+        return 0;
+    }
+    catch (err) {
+        if (err instanceof ScaffoldError) {
+            console.error(`Error: ${err.message}`);
+            return 1;
+        }
+        throw err;
+    }
+}
+main().then((code) => process.exit(code), (err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+export declare class ScaffoldError extends Error {
+    constructor(message: string);
+}
+export interface ScaffoldOptions {
+    targetDir: string;
+    storeSlug: string;
+    /** Defaults to the template shipped with this package. */
+    templateDir?: string;
+    /** Defaults to the target directory's basename. */
+    appName?: string;
+}
+export interface ScaffoldResult {
+    targetDir: string;
+    storeSlug: string;
+    appName: string;
+    filesWritten: string[];
+}
+/** Lowercases and strips anything a Getly store slug can't contain. */
+export declare function normalizeSlug(raw: string): string;
+export declare function defaultTemplateDir(): string;
+/**
+ * Scaffold the storefront. Refuses to write into an existing non-empty
+ * directory (no-clobber guard) — an existing EMPTY directory is fine.
+ */
+export declare function scaffold(opts: ScaffoldOptions): ScaffoldResult;

package/dist/index.js

@@ -0,0 +1,99 @@
+/**
+ * create-getly-store — scaffold logic (zero runtime dependencies, node:fs only).
+ *
+ * Copies the embedded `template/` directory into the target, injecting the
+ * store slug into `getly.config.json` and `.env.local.example`. Files that
+ * npm would mangle inside a published package are shipped under safe names
+ * and renamed on copy (`gitignore` → `.gitignore`, `env.local.example` →
+ * `.env.local.example`).
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+export class ScaffoldError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ScaffoldError';
+    }
+}
+/** npm publish mangles some dotfiles — ship safe names, rename on copy. */
+const RENAMES = {
+    gitignore: '.gitignore',
+    'env.local.example': '.env.local.example',
+};
+const SLUG_TOKEN = '__STORE_SLUG__';
+const APP_NAME_TOKEN = '__APP_NAME__';
+/** Lowercases and strips anything a Getly store slug can't contain. */
+export function normalizeSlug(raw) {
+    return raw
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, '-')
+        .replace(/-{2,}/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+export function defaultTemplateDir() {
+    // src/index.ts  → ../template ; dist/index.js → ../template (same depth).
+    return path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', 'template');
+}
+function sanitizeAppName(raw) {
+    const name = normalizeSlug(raw);
+    return name || 'getly-storefront';
+}
+function walkTemplate(dir, base = '') {
+    const out = [];
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true }).sort((a, b) => a.name.localeCompare(b.name))) {
+        const rel = base ? path.join(base, entry.name) : entry.name;
+        if (entry.isDirectory()) {
+            // Never copy build artifacts if someone ran the template in place.
+            if (entry.name === 'node_modules' || entry.name === '.next')
+                continue;
+            out.push(...walkTemplate(path.join(dir, entry.name), rel));
+        }
+        else if (entry.isFile()) {
+            out.push(rel);
+        }
+    }
+    return out;
+}
+/**
+ * Scaffold the storefront. Refuses to write into an existing non-empty
+ * directory (no-clobber guard) — an existing EMPTY directory is fine.
+ */
+export function scaffold(opts) {
+    const storeSlug = normalizeSlug(opts.storeSlug);
+    if (!storeSlug) {
+        throw new ScaffoldError(`"${opts.storeSlug}" is not a usable store slug (letters, digits and dashes only).`);
+    }
+    const targetDir = path.resolve(opts.targetDir);
+    const templateDir = opts.templateDir ?? defaultTemplateDir();
+    if (!fs.existsSync(templateDir)) {
+        throw new ScaffoldError(`Template directory not found: ${templateDir}`);
+    }
+    if (fs.existsSync(targetDir)) {
+        const stat = fs.statSync(targetDir);
+        if (!stat.isDirectory()) {
+            throw new ScaffoldError(`Target exists and is not a directory: ${targetDir}`);
+        }
+        if (fs.readdirSync(targetDir).length > 0) {
+            throw new ScaffoldError(`Target directory is not empty: ${targetDir} — refusing to overwrite existing files.`);
+        }
+    }
+    const appName = sanitizeAppName(opts.appName ?? path.basename(targetDir));
+    const filesWritten = [];
+    for (const rel of walkTemplate(templateDir)) {
+        const parts = rel.split(path.sep);
+        const fileName = parts[parts.length - 1];
+        const renamed = RENAMES[fileName] ?? fileName;
+        const destRel = path.join(...parts.slice(0, -1), renamed);
+        const destAbs = path.join(targetDir, destRel);
+        fs.mkdirSync(path.dirname(destAbs), { recursive: true });
+        const content = fs
+            .readFileSync(path.join(templateDir, rel), 'utf8')
+            .replaceAll(SLUG_TOKEN, storeSlug)
+            .replaceAll(APP_NAME_TOKEN, appName);
+        fs.writeFileSync(destAbs, content);
+        filesWritten.push(destRel);
+    }
+    return { targetDir, storeSlug, appName, filesWritten };
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "create-getly-store",
+  "version": "0.1.0",
+  "description": "Scaffold a minimal, beautiful Next.js storefront powered by the Getly public API.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Getly-Store/headless-sdk.git",
+    "directory": "packages/create-getly-store"
+  },
+  "homepage": "https://www.getly.store/developers",
+  "keywords": ["getly", "create", "storefront", "nextjs", "digital-products"],
+  "bin": {
+    "create-getly-store": "./dist/cli.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "template", "README.md"],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0"
+  }
+}

package/template/README.md

@@ -0,0 +1,75 @@
+# __APP_NAME__
+
+A minimal Next.js storefront for the Getly store **`__STORE_SLUG__`**,
+scaffolded with [`create-getly-store`](https://www.npmjs.com/package/create-getly-store).
+
+It renders your store's **active products** from Getly's public API — no API
+key, no database, no server secrets:
+
+- `GET /api/v1/public/stores/__STORE_SLUG__/products` — catalog grid (`app/page.tsx`)
+- `GET /api/v1/public/stores/__STORE_SLUG__/products/{slug}` — product page (`app/p/[slug]/page.tsx`)
+
+Pages are server-rendered with `revalidate: 300` (5 minutes — the same cache
+the API itself serves), all prices are integer cents formatted with `Intl`,
+and the **Buy** button sends visitors to Getly's hosted checkout (`urls.buy`).
+Dark/light theme follows the visitor's system preference. Styling is plain
+hand-written CSS in `app/globals.css` — no component libraries.
+
+## Run locally
+
+```bash
+npm install
+npm run dev        # http://localhost:3000
+```
+
+## Point it at a different store
+
+The store slug lives in `getly.config.json`. An env var overrides it without
+touching code — copy `.env.local.example` to `.env.local` and edit:
+
+```bash
+NEXT_PUBLIC_GETLY_STORE_SLUG=your-store-slug
+```
+
+Your slug is the part after `getly.store/store/` on your public store page.
+
+## Deploy
+
+This folder is a complete, standalone Next.js app (a `vercel.json` is
+included). Vercel's one-click **Deploy** button needs a Git repository URL to
+clone, so the honest recipe is:
+
+1. Push this folder to a GitHub repository:
+
+   ```bash
+   git init && git add -A && git commit -m "storefront"
+   git remote add origin https://github.com/YOU/YOUR-REPO.git
+   git push -u origin main
+   ```
+
+2. Import it at <https://vercel.com/new> (framework is auto-detected), **or**
+   put a Deploy button in your repo's README pointing at itself:
+
+   ```md
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/YOU/YOUR-REPO)
+   ```
+
+3. Optionally set `NEXT_PUBLIC_GETLY_STORE_SLUG` in the Vercel project's
+   environment variables to switch stores per deployment.
+
+Any other Node 18+ host works too: `npm run build && npm start`.
+
+## Files
+
+```
+app/
+  layout.tsx        Shell + footer + metadata
+  page.tsx          Product grid (public catalog endpoint)
+  p/[slug]/page.tsx Product detail + Buy button
+  globals.css       All styling (hand CSS, dark/light aware)
+lib/
+  config.ts         Store slug + API origin resolution
+  getly.ts          Typed public-API helpers (cents → Intl formatting)
+getly.config.json   The store this storefront renders
+vercel.json         Framework hint for Vercel
+```

package/template/app/globals.css

@@ -0,0 +1,332 @@
+/* Minimal hand-rolled storefront styles — no component libraries.
+   Light/dark follows the visitor's system preference. */
+
+:root {
+  --bg: #faf9f7;
+  --surface: #ffffff;
+  --text: #1c1b1a;
+  --text-muted: #6d6a64;
+  --border: #e7e4de;
+  --accent: #1c1b1a;
+  --accent-contrast: #ffffff;
+  --shadow: 0 1px 2px rgba(28, 27, 26, 0.06), 0 8px 24px rgba(28, 27, 26, 0.06);
+  --radius: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #131211;
+    --surface: #1c1b1a;
+    --text: #f2f0ec;
+    --text-muted: #a09c94;
+    --border: #2c2a27;
+    --accent: #f2f0ec;
+    --accent-contrast: #131211;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+a {
+  color: inherit;
+}
+
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.1em 0.35em;
+}
+
+.page {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 3rem 1.25rem 4rem;
+  flex: 1;
+}
+
+/* ---------- Hero ---------- */
+
+.hero {
+  margin-bottom: 3rem;
+  max-width: 40rem;
+}
+
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+
+.hero .muted {
+  margin-top: 0.75rem;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.small {
+  font-size: 0.85rem;
+}
+
+/* ---------- Product grid ---------- */
+
+.grid {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1.5rem;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow);
+}
+
+.card-media-link {
+  display: block;
+}
+
+.card-media {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  background: var(--border);
+}
+
+.card-media-empty {
+  display: grid;
+  place-items: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.card-body {
+  padding: 1rem 1.1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.card-title {
+  font-size: 1.05rem;
+  font-weight: 650;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.card-title a {
+  text-decoration: none;
+}
+
+.card-title a:hover {
+  text-decoration: underline;
+}
+
+.card-desc {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-footer {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 0.25rem;
+}
+
+.price {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.price-lg {
+  font-size: 1.5rem;
+}
+
+.rating {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+/* ---------- Buttons ---------- */
+
+.button {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: 600;
+  font-size: 0.95rem;
+  border-radius: 999px;
+  padding: 0.6rem 1.4rem;
+  transition: opacity 120ms ease;
+}
+
+.button:hover {
+  opacity: 0.85;
+}
+
+.button-lg {
+  padding: 0.85rem 2rem;
+  font-size: 1.05rem;
+  margin-top: 0.5rem;
+}
+
+/* ---------- Product page ---------- */
+
+.breadcrumb {
+  margin-bottom: 2rem;
+  font-size: 0.9rem;
+}
+
+.breadcrumb a {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  color: var(--text);
+}
+
+.product {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+}
+
+@media (min-width: 820px) {
+  .product {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+    align-items: start;
+  }
+}
+
+.product-media {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.product-image {
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.product-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.product-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.lead {
+  font-size: 1.1rem;
+  color: var(--text-muted);
+}
+
+.description {
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.description h2 {
+  font-size: 1.15rem;
+  letter-spacing: -0.01em;
+}
+
+/* ---------- Footer ---------- */
+
+.footer {
+  border-top: 1px solid var(--border);
+  padding: 1.5rem 1.25rem;
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.footer a {
+  color: inherit;
+}

package/template/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { STORE_SLUG } from "@/lib/config";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: {
+    default: `${STORE_SLUG} — storefront`,
+    template: `%s — ${STORE_SLUG}`,
+  },
+  description: `Digital products by ${STORE_SLUG}, powered by Getly.`,
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="page">
+          {children}
+          <footer className="footer">
+            <p>
+              Powered by{" "}
+              <a
+                href="https://www.getly.store"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Getly
+              </a>
+            </p>
+          </footer>
+        </div>
+      </body>
+    </html>
+  );
+}

package/template/app/p/[slug]/page.tsx

@@ -0,0 +1,99 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { STORE_SLUG } from "@/lib/config";
+import {
+  descriptionToParagraphs,
+  formatPriceCents,
+  formatRating,
+  getProduct,
+} from "@/lib/getly";
+
+/** Re-fetch the product at most every 5 minutes (matches the API's cache). */
+export const revalidate = 300;
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const product = await getProduct(STORE_SLUG, slug);
+  if (!product) return {};
+  return {
+    title: product.name,
+    description: product.shortDescription ?? undefined,
+    openGraph: product.images[0] ? { images: [product.images[0].url] } : undefined,
+  };
+}
+
+export default async function ProductPage({ params }: PageProps) {
+  const { slug } = await params;
+  const product = await getProduct(STORE_SLUG, slug);
+  if (!product) notFound();
+
+  const rating = formatRating(product.avgRating, product.reviewCount);
+  const paragraphs = descriptionToParagraphs(product.description);
+
+  return (
+    <main className="container">
+      <nav className="breadcrumb">
+        <Link href="/">&larr; All products</Link>
+      </nav>
+
+      <article className="product">
+        <div className="product-media">
+          {product.images.length > 0 ? (
+            product.images.map((image, i) => (
+              <img
+                key={image.url}
+                className="product-image"
+                src={image.url}
+                alt={image.altText ?? product.name}
+                loading={i === 0 ? "eager" : "lazy"}
+              />
+            ))
+          ) : (
+            <span className="card-media card-media-empty product-image" aria-hidden>
+              {product.name.slice(0, 1).toUpperCase()}
+            </span>
+          )}
+        </div>
+
+        <div className="product-info">
+          <h1>{product.name}</h1>
+          <div className="product-meta">
+            <span className="price price-lg">
+              {formatPriceCents(product.priceCents, product.currency)}
+            </span>
+            {rating && <span className="rating">{rating}</span>}
+          </div>
+          {product.shortDescription && (
+            <p className="lead">{product.shortDescription}</p>
+          )}
+          <a
+            className="button button-lg"
+            href={product.urls.buy}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Buy now — instant download
+          </a>
+          <p className="muted small">
+            Secure checkout on Getly. Files are delivered instantly after
+            payment.
+          </p>
+
+          {paragraphs.length > 0 && (
+            <section className="description">
+              <h2>About this product</h2>
+              {paragraphs.map((text, i) => (
+                <p key={i}>{text}</p>
+              ))}
+            </section>
+          )}
+        </div>
+      </article>
+    </main>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,103 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { STORE_SLUG } from "@/lib/config";
+import {
+  formatPriceCents,
+  formatRating,
+  getStoreProducts,
+} from "@/lib/getly";
+
+/** Re-fetch the catalog at most every 5 minutes (matches the API's cache). */
+export const revalidate = 300;
+
+export async function generateMetadata(): Promise<Metadata> {
+  const data = await getStoreProducts(STORE_SLUG);
+  if (!data) return {};
+  return {
+    title: data.store.name,
+    description: `Digital products by ${data.store.name} — powered by Getly.`,
+  };
+}
+
+export default async function HomePage() {
+  const data = await getStoreProducts(STORE_SLUG);
+
+  if (!data) {
+    return (
+      <main className="container">
+        <header className="hero">
+          <h1>Store not found</h1>
+          <p className="muted">
+            No public store answers to the slug &ldquo;{STORE_SLUG}&rdquo;.
+            Check <code>getly.config.json</code> (or the{" "}
+            <code>NEXT_PUBLIC_GETLY_STORE_SLUG</code> env var) — the slug is
+            the part after <code>getly.store/store/</code> on your store page.
+          </p>
+        </header>
+      </main>
+    );
+  }
+
+  return (
+    <main className="container">
+      <header className="hero">
+        <p className="eyebrow">Digital products</p>
+        <h1>{data.store.name}</h1>
+        <p className="muted">
+          {data.items.length === 0
+            ? "No products published yet — new drops land here."
+            : `${data.items.length} product${data.items.length === 1 ? "" : "s"} available for instant download.`}
+        </p>
+      </header>
+
+      {data.items.length > 0 && (
+        <ul className="grid">
+          {data.items.map((product) => {
+            const cover = product.images[0];
+            const rating = formatRating(product.avgRating, product.reviewCount);
+            return (
+              <li key={product.id} className="card">
+                <Link href={`/p/${product.slug}`} className="card-media-link">
+                  {cover ? (
+                    <img
+                      className="card-media"
+                      src={cover.url}
+                      alt={cover.altText ?? product.name}
+                      loading="lazy"
+                    />
+                  ) : (
+                    <span className="card-media card-media-empty" aria-hidden>
+                      {product.name.slice(0, 1).toUpperCase()}
+                    </span>
+                  )}
+                </Link>
+                <div className="card-body">
+                  <h2 className="card-title">
+                    <Link href={`/p/${product.slug}`}>{product.name}</Link>
+                  </h2>
+                  {product.shortDescription && (
+                    <p className="card-desc">{product.shortDescription}</p>
+                  )}
+                  <div className="card-footer">
+                    <span className="price">
+                      {formatPriceCents(product.priceCents, product.currency)}
+                    </span>
+                    {rating && <span className="rating">{rating}</span>}
+                  </div>
+                  <a
+                    className="button"
+                    href={product.urls.buy}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Buy now
+                  </a>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </main>
+  );
+}

package/template/env.local.example

@@ -0,0 +1,5 @@
+# Copy to .env.local to override getly.config.json without editing code.
+NEXT_PUBLIC_GETLY_STORE_SLUG=__STORE_SLUG__
+
+# Optional: point at a different Getly deployment.
+# GETLY_API_URL=https://www.getly.store

package/template/getly.config.json

@@ -0,0 +1,3 @@
+{
+  "storeSlug": "__STORE_SLUG__"
+}

package/template/gitignore

@@ -0,0 +1,9 @@
+node_modules/
+.next/
+out/
+build/
+.env.local
+.env*.local
+.DS_Store
+*.tsbuildinfo
+next-env.d.ts.bak

package/template/lib/config.ts

@@ -0,0 +1,12 @@
+import config from "../getly.config.json";
+
+/**
+ * The Getly store this storefront renders. The env var (set it in
+ * .env.local or on Vercel) overrides getly.config.json.
+ */
+export const STORE_SLUG: string =
+  process.env.NEXT_PUBLIC_GETLY_STORE_SLUG || config.storeSlug;
+
+/** Getly API origin. Override with GETLY_API_URL for a different deployment. */
+export const GETLY_API_URL: string =
+  process.env.GETLY_API_URL || "https://www.getly.store";

package/template/lib/getly.ts

@@ -0,0 +1,116 @@
+/**
+ * Typed helpers for Getly's PUBLIC storefront API (no auth, CORS *):
+ *
+ *   GET /api/v1/public/stores/{slug}/products
+ *   GET /api/v1/public/stores/{slug}/products/{productSlug}
+ *
+ * Responses use the { success, data } envelope; every price is INTEGER CENTS
+ * (`priceCents`). Pages fetch server-side with `revalidate: 300` — the same
+ * s-maxage the API itself serves.
+ */
+import { GETLY_API_URL } from "./config";
+
+export interface PublicProductImage {
+  url: string;
+  altText: string | null;
+}
+
+export interface PublicProduct {
+  id: string;
+  slug: string;
+  name: string;
+  shortDescription: string | null;
+  /** Present only on the single-product endpoint. */
+  description?: string | null;
+  /** Integer cents — the only money field this template reads. */
+  priceCents: number;
+  currency: string;
+  avgRating: number;
+  reviewCount: number;
+  images: PublicProductImage[];
+  urls: {
+    product: string;
+    buy: string;
+  };
+}
+
+export interface StoreProducts {
+  store: { id: string; name: string; slug: string };
+  items: PublicProduct[];
+  nextCursor: string | null;
+}
+
+const REVALIDATE_SECONDS = 300;
+
+export async function getStoreProducts(
+  storeSlug: string,
+): Promise<StoreProducts | null> {
+  try {
+    const res = await fetch(
+      `${GETLY_API_URL}/api/v1/public/stores/${encodeURIComponent(storeSlug)}/products?limit=48`,
+      { next: { revalidate: REVALIDATE_SECONDS } },
+    );
+    if (!res.ok) return null;
+    const json = (await res.json()) as { success?: boolean; data?: StoreProducts };
+    return json.success && json.data ? json.data : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function getProduct(
+  storeSlug: string,
+  productSlug: string,
+): Promise<PublicProduct | null> {
+  try {
+    const res = await fetch(
+      `${GETLY_API_URL}/api/v1/public/stores/${encodeURIComponent(storeSlug)}/products/${encodeURIComponent(productSlug)}`,
+      { next: { revalidate: REVALIDATE_SECONDS } },
+    );
+    if (!res.ok) return null;
+    const json = (await res.json()) as { success?: boolean; data?: PublicProduct };
+    return json.success && json.data ? json.data : null;
+  } catch {
+    return null;
+  }
+}
+
+export function formatPriceCents(priceCents: number, currency = "USD"): string {
+  if (priceCents === 0) return "Free";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(priceCents / 100);
+}
+
+export function formatRating(avgRating: number, reviewCount: number): string | null {
+  if (reviewCount === 0) return null;
+  return `★ ${avgRating.toFixed(1)} · ${reviewCount} review${reviewCount === 1 ? "" : "s"}`;
+}
+
+/**
+ * Product descriptions may contain rich-text HTML (sellers write them in the
+ * Getly dashboard editor). This template deliberately does NOT inject that
+ * HTML (no dangerouslySetInnerHTML) — it strips tags and renders plain
+ * paragraphs instead. Safe by construction.
+ */
+export function descriptionToParagraphs(
+  description: string | null | undefined,
+): string[] {
+  if (!description) return [];
+  const text = description
+    // Block-level closers become paragraph breaks before tags are stripped.
+    .replace(/<\/(p|div|h[1-6]|li|blockquote|pre)>/gi, "\n\n")
+    .replace(/<(br|hr)\s*\/?>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/gi, " ")
+    .replace(/&amp;/gi, "&")
+    .replace(/&lt;/gi, "<")
+    .replace(/&gt;/gi, ">")
+    .replace(/&#39;|&apos;/gi, "'")
+    .replace(/&quot;/gi, '"');
+  return text
+    .split(/\n{2,}/)
+    .map((p) => p.replace(/\s+/g, " ").trim())
+    .filter(Boolean);
+}

package/template/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^15.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/template/vercel.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "framework": "nextjs"
+}