@stackonward/cli 0.0.1 → 1.0.0

package/dist/resources/templates/nuxt/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{json,yml,yaml}]
+indent_size = 2

package/dist/resources/templates/nuxt/.env.example

@@ -0,0 +1,22 @@
+NUXT_PUBLIC_API_BASE_URL=
+NUXT_PUBLIC_API_TIMEOUT=30000
+NUXT_PUBLIC_SITE_URL=
+NUXT_PUBLIC_SITE_ENV=development
+NUXT_PUBLIC_SITE_NAME="{{projectName}}"
+NUXT_PUBLIC_SITE_DESCRIPTION="Reusable Nuxt product-site foundation."
+NUXT_PUBLIC_ANALYTICS_ENABLED=false
+NUXT_PUBLIC_ANALYTICS_DEBUG=false
+NUXT_PUBLIC_ANALYTICS_REQUIRE_CONSENT=true
+NUXT_PUBLIC_ANALYTICS_PAGE_TRACKING=true
+NUXT_PUBLIC_ANALYTICS_DATA_LAYER=dataLayer
+NUXT_PUBLIC_GA_ID=
+NUXT_PUBLIC_GTM_ID=
+NUXT_PUBLIC_GOOGLE_IDENTITY_ENABLED=false
+NUXT_PUBLIC_GOOGLE_CLIENT_ID=
+NUXT_PUBLIC_GOOGLE_CREDENTIAL_ENDPOINT=
+NUXT_PUBLIC_GOOGLE_ONE_TAP=false
+NUXT_PUBLIC_GOOGLE_AUTO_PROMPT=false
+NUXT_PUBLIC_CHECKOUT_URL=
+NUXT_PUBLIC_CHECKOUT_RESULT_PARAM=checkout_status
+NUXT_PUBLIC_YOUTUBE_PRIVACY_ENHANCED=true
+NUXT_PUBLIC_OG_IMAGE_ENABLED=false

package/dist/resources/templates/nuxt/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Verify application
+        run: pnpm check

package/dist/resources/templates/nuxt/.husky/commit-msg

@@ -0,0 +1 @@
+pnpm exec commitlint --edit "$1"

package/dist/resources/templates/nuxt/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

package/dist/resources/templates/nuxt/.nvmrc

@@ -0,0 +1 @@
+22.23.1

package/dist/resources/templates/nuxt/.prettierignore

@@ -0,0 +1,9 @@
+.claude
+.nuxt
+.output
+coverage
+dist
+docs/designs
+node_modules
+pnpm-lock.yaml
+public

package/dist/resources/templates/nuxt/.prettierrc

@@ -0,0 +1 @@
+"@stackonward/prettier-config"

package/dist/resources/templates/nuxt/README.md

@@ -0,0 +1,23 @@
+# Nuxt Product Site Template
+
+This template extends `@stackonward/nuxt-site-shell` for Nuxt module wiring and installs editable source from the component registry, so a new project starts with:
+
+- Nuxt UI and Tailwind theme wiring.
+- Local source files for marketing, app, content and static page shells under `app/layouts` and `app/components`.
+- Editable base components such as `BaseButton`, `BaseModal`, `BaseText`, `BasePopover`, `GoogleSignInButton`, `YoutubeEmbed`, `InfiniteScroll`, `CheckoutSummary` and `CheckoutStatus`.
+- Editable composables and plugins for Google Identity, GA/GTM analytics, consent-gated tracking, privacy-enhanced YouTube embeds and provider-free checkout redirects.
+- Local Nuxt UI theme overrides under `app/theme` and CSS tokens under `app/assets/css`.
+- A generated `/ui` page showing how to use the included theme and components.
+
+Product-specific copy, assets, auth, analytics, CMS providers and business workflows belong in the generated application. Source is copied into the project so product teams can edit it directly.
+
+## Engineering workflow
+
+```bash
+pnpm install
+pnpm check
+```
+
+`pnpm check` verifies formatting, TypeScript/Vue linting, CSS and Vue-style linting, Nuxt type safety, route rendering and the production build. Husky installs repository-owned `pre-commit` and `commit-msg` hooks during dependency installation. GitHub Actions runs the same gate from the committed lockfile.
+
+Use `pnpm lint:code:fix`, `pnpm lint:styles:fix` and `pnpm format` for explicit local fixes. Shared policy comes from versioned `@stackonward/*-config` packages; the root composition files remain application-owned.

package/dist/resources/templates/nuxt/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+.nuxt
+.output
+dist
+.env
+.env.*
+!.env.example

package/dist/resources/templates/nuxt/app/app.config.ts

@@ -0,0 +1,105 @@
+import siteUiTheme from "./theme";
+
+export default defineAppConfig({
+  ui: siteUiTheme,
+  siteShell: {
+    name: "{{projectName}}",
+    description:
+      "A premium product media workspace for generating product images, campaign sets, and short-form ad videos.",
+    url: "",
+    defaultLocale: "en",
+    homePath: "/",
+    appPath: "/app",
+    logoText: "{{projectName}}",
+    primaryActionLabel: "Start creating",
+    secondaryActionLabel: "Sign in",
+    secondaryActionPath: "/app",
+    consent: {
+      enabled: true,
+      storageKey: "{{projectName}}-consent",
+      message:
+        "Store preference cookies to keep campaign previews, consent, and analytics choices consistent on this device.",
+      acceptLabel: "Allow",
+      rejectLabel: "Decline",
+    },
+    navigation: {
+      marketing: [
+        { label: "Product", to: "/" },
+        {
+          label: "Solutions",
+          children: [
+            {
+              label: "Creative workspace",
+              to: "/app",
+              description: "Application shell for production workflows",
+            },
+            {
+              label: "Design system",
+              to: "/ui",
+              description:
+                "Tokens, components, checkout, identity, video, and infinite-scroll examples",
+            },
+          ],
+        },
+        {
+          label: "Resources",
+          children: [
+            {
+              label: "Playbook",
+              to: "/blog/creative-playbook",
+              description: "Content detail shell for product education and SEO",
+            },
+            { label: "Privacy", to: "/legal/privacy", description: "Static policy page" },
+          ],
+        },
+        { label: "Pricing", to: "/#pricing" },
+        { label: "Blog", to: "/blog" },
+      ],
+      app: [
+        {
+          label: "Production",
+          items: [
+            { label: "Workspace board", to: "/app", icon: "i-lucide-layout-dashboard" },
+            { label: "Design system", to: "/ui", icon: "i-lucide-palette" },
+            { label: "Content hub", to: "/blog", icon: "i-lucide-newspaper" },
+          ],
+        },
+      ],
+      footer: [
+        {
+          title: "Product",
+          links: [
+            { label: "Overview", to: "/" },
+            { label: "Workspace board", to: "/app" },
+            { label: "Design system", to: "/ui" },
+          ],
+        },
+        {
+          title: "Resources",
+          links: [
+            { label: "Content hub", to: "/blog" },
+            { label: "Creative playbook", to: "/blog/creative-playbook" },
+          ],
+        },
+        {
+          title: "Company",
+          links: [
+            { label: "Terms", to: "/legal/terms" },
+            { label: "Privacy", to: "/legal/privacy" },
+          ],
+        },
+      ],
+      legal: [
+        { label: "Terms", to: "/legal/terms" },
+        { label: "Privacy", to: "/legal/privacy" },
+      ],
+      social: [],
+    },
+    content: {
+      blogPath: "/blog",
+      authorPath: "/authors",
+      previewPath: "/api/preview",
+      sitemapSourcePath: "/api/content/sitemap-urls",
+    },
+  },
+});

package/dist/resources/templates/nuxt/app/i18n/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "common": {
+    "close": "Close"
+  }
+}

package/dist/resources/templates/nuxt/app/pages/app/index.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: "app",
+});
+
+const queueItems = [
+  { label: "Hero product images", status: "Ready", accent: "primary" },
+  { label: "9:16 paid social clips", status: "Rendering", accent: "warm" },
+  { label: "Marketplace gallery set", status: "Review", accent: "accent" },
+];
+
+const outputFormats = ["Square image", "Vertical video", "Landing banner", "Creator brief"];
+
+useSeo({
+  title: "Workspace Board",
+  description: "Mobile-ready application shell for product creative production.",
+  canonicalPath: "/app",
+  robots: "noindex,nofollow",
+});
+</script>
+
+<template>
+  <section class="workspace-page">
+    <header class="workspace-page__header">
+      <div>
+        <p>Production board</p>
+        <h1>Creative output queue</h1>
+      </div>
+      <BaseButton label="New campaign" leading-icon="i-lucide-plus" />
+    </header>
+
+    <div class="workspace-page__grid">
+      <section class="workspace-page__panel workspace-page__panel--wide">
+        <div class="workspace-page__panel-heading">
+          <span>Current launch</span>
+          <strong>Beauty product refresh</strong>
+        </div>
+        <div class="workspace-page__timeline">
+          <article v-for="item in queueItems" :key="item.label" :data-accent="item.accent">
+            <span />
+            <div>
+              <h2>{{ item.label }}</h2>
+              <p>{{ item.status }}</p>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <section class="workspace-page__panel">
+        <span>Output mix</span>
+        <ul class="workspace-page__formats">
+          <li v-for="format in outputFormats" :key="format">
+            <UIcon name="i-lucide-check" />
+            {{ format }}
+          </li>
+        </ul>
+      </section>
+
+      <section class="workspace-page__panel workspace-page__metric">
+        <span>Campaign readiness</span>
+        <strong>82%</strong>
+        <p>
+          Assets, channel ratios, copy variants, and review states are visible in one scroll region.
+        </p>
+      </section>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.workspace-page {
+  display: grid;
+  gap: 20px;
+}
+
+.workspace-page__header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.workspace-page__header div {
+  display: grid;
+  gap: 6px;
+}
+
+.workspace-page__header p,
+.workspace-page__header h1,
+.workspace-page__panel h2,
+.workspace-page__panel p,
+.workspace-page__panel ul {
+  margin: 0;
+}
+
+.workspace-page__header p,
+.workspace-page__panel > span,
+.workspace-page__panel-heading span {
+  color: var(--site-color-accent-warm);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.workspace-page__header h1 {
+  font-size: clamp(32px, 6vw, 48px);
+  font-weight: 340;
+  line-height: 1;
+}
+
+.workspace-page__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
+  gap: 16px;
+}
+
+.workspace-page__panel {
+  display: grid;
+  align-content: start;
+  gap: 18px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-lg);
+  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  padding: 20px;
+}
+
+.workspace-page__panel--wide {
+  grid-row: span 2;
+}
+
+.workspace-page__panel-heading {
+  display: grid;
+  gap: 6px;
+}
+
+.workspace-page__panel-heading strong {
+  font-size: 24px;
+  font-weight: 420;
+}
+
+.workspace-page__timeline {
+  display: grid;
+  gap: 12px;
+}
+
+.workspace-page__timeline article {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr);
+  gap: 12px;
+  border: 1px solid var(--site-color-border);
+  border-radius: var(--site-radius-md);
+  background: rgb(168 101 80 / 4%);
+  padding: 14px;
+}
+
+.workspace-page__timeline article > span {
+  width: 10px;
+  height: 10px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--site-color-success);
+}
+
+.workspace-page__timeline article[data-accent="warm"] > span {
+  background: var(--site-color-accent-warm);
+}
+
+.workspace-page__timeline article[data-accent="accent"] > span {
+  background: var(--site-color-accent);
+}
+
+.workspace-page__timeline h2 {
+  font-size: 17px;
+}
+
+.workspace-page__timeline p,
+.workspace-page__metric p {
+  color: var(--site-color-muted);
+  line-height: 1.55;
+}
+
+.workspace-page__formats {
+  display: grid;
+  gap: 10px;
+  padding: 0;
+  list-style: none;
+}
+
+.workspace-page__formats li {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  gap: 8px;
+  color: var(--site-color-muted);
+}
+
+.workspace-page__formats svg {
+  color: var(--site-color-primary);
+}
+
+.workspace-page__metric strong {
+  color: var(--site-color-primary);
+  font-size: 58px;
+  font-weight: 340;
+  line-height: 0.95;
+}
+
+@media (width <= 900px) {
+  .workspace-page__header {
+    display: grid;
+  }
+
+  .workspace-page__header .base-button {
+    width: 100%;
+  }
+
+  .workspace-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-page__panel--wide {
+    grid-row: auto;
+  }
+}
+</style>

package/dist/resources/templates/nuxt/app/pages/authors/[slug].vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const route = useRoute();
+const author = computed(() =>
+  String(route.params.slug || "team")
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(" "),
+);
+
+const posts = computed(() => [
+  {
+    title: "Creative Production Notes",
+    description: "Author route for product education and launch content.",
+    to: "/blog/creative-production-notes",
+    category: "Playbook",
+    date: "2026-01-01",
+    author: author.value,
+  },
+]);
+
+useSeo({
+  title: author.value,
+  description: "Author profile for product creative production content.",
+  canonicalPath: `/authors/${route.params.slug}`,
+});
+</script>
+
+<template>
+  <ContentListPage
+    :title="author"
+    description="Use this route shape for author profiles and authored content from the selected provider."
+    :items="posts"
+  >
+    <template #eyebrow>Author</template>
+  </ContentListPage>
+</template>

package/dist/resources/templates/nuxt/app/pages/blog/[slug].vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const route = useRoute();
+const slug = computed(() => String(route.params.slug || "creative-playbook"));
+const title = computed(() =>
+  slug.value
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(" "),
+);
+
+const article = computed(() => ({
+  title: title.value,
+  description:
+    "A product-education article frame for creative workflows, provider seams, and launch playbooks.",
+  category: "Playbook",
+  author: "Team",
+  date: "2026-01-01",
+  updatedAt: "2026-01-01",
+}));
+
+const related = [
+  {
+    title: "Production Seams",
+    description: "Adapter boundaries for identity, analytics, content, media, and checkout.",
+    to: "/blog/production-seams",
+    category: "Architecture",
+  },
+];
+
+useSeo({
+  title: title.value,
+  description: article.value.description,
+  canonicalPath: `/blog/${slug.value}`,
+});
+</script>
+
+<template>
+  <ContentArticlePage :article="article" :related="related">
+    <p>
+      A paid creative product needs content that sells outcomes before it explains implementation.
+      Use this article shape for launch guides, comparison pages, creator education, and SEO content.
+    </p>
+    <h2>Production Boundary</h2>
+    <p>
+      The generated app owns concrete product positioning, content sources, authors, categories,
+      preview rules, and publish workflow while shared layers keep the shell reusable.
+    </p>
+    <h2>Conversion Boundary</h2>
+    <p>
+      Use the SEO composable for page title, description, canonical path, robots rules, and social
+      image values so each campaign page can target a specific commercial search intent.
+    </p>
+  </ContentArticlePage>
+</template>

package/dist/resources/templates/nuxt/app/pages/blog/category/[category].vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const route = useRoute();
+const category = computed(() => String(route.params.category || "guide"));
+const categoryLabel = computed(() =>
+  category.value
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(" "),
+);
+
+const posts = computed(() => [
+  {
+    title: `${categoryLabel.value} Playbook`,
+    description: "Category route for grouped creative production content.",
+    to: `/blog/${category.value}-playbook`,
+    category: categoryLabel.value,
+    date: "2026-01-01",
+    author: "Team",
+  },
+]);
+
+useSeo({
+  title: categoryLabel.value,
+  description: "Category content for product creative production.",
+  canonicalPath: `/blog/category/${category.value}`,
+});
+</script>
+
+<template>
+  <ContentListPage
+    :title="`${categoryLabel} resources`"
+    description="Use this route shape for product education, launch notes, and SEO category pages."
+    :items="posts"
+  >
+    <template #eyebrow>Category</template>
+  </ContentListPage>
+</template>

package/dist/resources/templates/nuxt/app/pages/blog/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const posts = [
+  {
+    title: "Creative Playbook",
+    description: "How product teams turn one input into campaign-ready visual sets.",
+    to: "/blog/creative-playbook",
+    category: "Playbook",
+    date: "2026-01-01",
+    author: "Team",
+  },
+  {
+    title: "Production Seams",
+    description:
+      "Where identity, analytics, content, media, and checkout providers attach to the site.",
+    to: "/blog/production-seams",
+    category: "Architecture",
+    date: "2026-01-02",
+    author: "Team",
+  },
+  {
+    title: "Theme Tokens",
+    description:
+      "How semantic tokens keep premium visual identity editable inside the generated project.",
+    to: "/blog/theme-tokens",
+    category: "Design System",
+    date: "2026-01-03",
+    author: "Team",
+  },
+];
+
+useSeo({
+  title: "Content Hub",
+  description: "Creative production content for product image and video workflows.",
+  canonicalPath: "/blog",
+});
+</script>
+
+<template>
+  <ContentListPage
+    title="Content hub"
+    description="Playbooks, production notes, and design-system guidance for a paid creative product."
+    :items="posts"
+  >
+    <template #eyebrow>Resources</template>
+  </ContentListPage>
+</template>