@stackonward/cli 0.0.1 → 1.0.0

package/dist/resources/components/nuxt/site-source/app/components/site/ApplicationHeader.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const site = useSiteShell();
+
+defineEmits<{
+  toggleSidebar: [];
+}>();
+</script>
+
+<template>
+  <header class="application-header">
+    <div class="application-header__left">
+      <button
+        type="button"
+        class="icon-button application-header__menu-button"
+        aria-label="Toggle sidebar"
+        @click="$emit('toggleSidebar')"
+      >
+        <span aria-hidden="true">☰</span>
+      </button>
+      <SiteBrand />
+    </div>
+
+    <div class="application-header__center">
+      <slot name="center" />
+    </div>
+
+    <div class="application-header__right">
+      <slot name="actions">
+        <NuxtLink :to="site.homePath" class="base-button base-button--secondary">
+          Site
+        </NuxtLink>
+      </slot>
+    </div>
+  </header>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ApplicationShell.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const sidebarOpen = ref(false);
+const appContentRef = ref<HTMLElement | null>(null);
+const route = useRoute();
+
+provide("applicationSidebarOpen", readonly(sidebarOpen));
+provide("applicationContentRef", appContentRef);
+
+function closeSidebar(): void {
+  sidebarOpen.value = false;
+}
+
+function resetScrollPosition(): void {
+  if (!import.meta.client) return;
+  void nextTick(() => {
+    appContentRef.value?.scrollTo({ top: 0, behavior: "auto" });
+  });
+}
+
+watch(
+  () => route.fullPath,
+  () => {
+    closeSidebar();
+    resetScrollPosition();
+  },
+);
+</script>
+
+<template>
+  <div class="application-shell">
+    <slot name="header">
+      <ApplicationHeader @toggle-sidebar="sidebarOpen = !sidebarOpen" />
+    </slot>
+
+    <div class="application-shell__body">
+      <div
+        class="application-shell__overlay"
+        :class="{ 'application-shell__overlay--visible': sidebarOpen }"
+        @click="closeSidebar"
+      />
+
+      <div
+        class="application-shell__sidebar"
+        :class="{ 'application-shell__sidebar--open': sidebarOpen }"
+      >
+        <slot name="sidebar">
+          <ApplicationSidebar @navigate="closeSidebar" />
+        </slot>
+      </div>
+
+      <main ref="appContentRef" class="application-shell__content" tabindex="-1">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ApplicationSidebar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { appNavGroups } = useNavigation();
+
+defineEmits<{
+  navigate: [];
+}>();
+</script>
+
+<template>
+  <aside class="application-sidebar" aria-label="Application">
+    <nav class="application-sidebar__nav">
+      <section
+        v-for="group in appNavGroups"
+        :key="group.label || group.items[0]?.to"
+        class="application-sidebar__group"
+      >
+        <h2 v-if="group.label">{{ group.label }}</h2>
+        <NuxtLink
+          v-for="item in group.items"
+          :key="item.to"
+          :to="item.to"
+          class="application-sidebar__link"
+          @click="$emit('navigate')"
+        >
+          <UIcon
+            v-if="item.icon?.startsWith('i-')"
+            :name="item.icon"
+            class="application-sidebar__icon"
+            aria-hidden="true"
+          />
+          <span v-else-if="item.icon" class="application-sidebar__icon" aria-hidden="true">{{
+            item.icon
+          }}</span>
+          <span>{{ item.label }}</span>
+          <small v-if="item.badge">{{ item.badge }}</small>
+        </NuxtLink>
+      </section>
+    </nav>
+  </aside>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/BackToTop.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    bottomOffset?: number;
+  }>(),
+  {
+    bottomOffset: 24,
+  },
+);
+
+const isVisible = ref(false);
+
+function updateVisibility(): void {
+  isVisible.value = window.scrollY > 320;
+}
+
+function scrollToTop(): void {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+onMounted(() => {
+  updateVisibility();
+  window.addEventListener("scroll", updateVisibility, { passive: true });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", updateVisibility);
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="back-to-top"
+    :class="{ 'back-to-top--visible': isVisible }"
+    :style="{ bottom: `${props.bottomOffset}px` }"
+    aria-label="Back to top"
+    @click="scrollToTop"
+  >
+    <UIcon name="i-lucide-chevron-up" class="back-to-top__icon" />
+  </button>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ContentArticlePage.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ContentArticle, ContentListItem } from "~/types/site-shell";
+
+defineProps<{
+  article: ContentArticle;
+  related?: ContentListItem[];
+}>();
+</script>
+
+<template>
+  <article class="content-article">
+    <header class="page-heading content-article__header">
+      <p v-if="article.category" class="page-heading__eyebrow">{{ article.category }}</p>
+      <h1>{{ article.title }}</h1>
+      <p v-if="article.description">{{ article.description }}</p>
+      <span v-if="article.author || article.date || article.updatedAt" class="content-article__meta">
+        {{
+          [article.author, article.date, article.updatedAt && `Updated ${article.updatedAt}`]
+            .filter(Boolean)
+            .join(" · ")
+        }}
+      </span>
+    </header>
+
+    <div class="content-article__body">
+      <slot />
+    </div>
+
+    <aside v-if="related?.length" class="content-article__related" aria-label="Related content">
+      <h2>Related</h2>
+      <div class="content-list__grid">
+        <NuxtLink v-for="item in related" :key="item.to" :to="item.to" class="content-card">
+          <small v-if="item.category">{{ item.category }}</small>
+          <h3>{{ item.title }}</h3>
+          <p v-if="item.description">{{ item.description }}</p>
+        </NuxtLink>
+      </div>
+    </aside>
+  </article>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ContentListPage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ContentListItem } from "~/types/site-shell";
+
+defineProps<{
+  title: string;
+  description?: string;
+  items: ContentListItem[];
+}>();
+</script>
+
+<template>
+  <section class="content-list">
+    <header class="page-heading">
+      <p v-if="$slots.eyebrow" class="page-heading__eyebrow"><slot name="eyebrow" /></p>
+      <h1>{{ title }}</h1>
+      <p v-if="description">{{ description }}</p>
+    </header>
+
+    <div class="content-list__grid">
+      <NuxtLink v-for="item in items" :key="item.to" :to="item.to" class="content-card">
+        <small v-if="item.category">{{ item.category }}</small>
+        <h2>{{ item.title }}</h2>
+        <p v-if="item.description">{{ item.description }}</p>
+        <span v-if="item.date || item.author">
+          {{ [item.author, item.date].filter(Boolean).join(" · ") }}
+        </span>
+      </NuxtLink>
+    </div>
+  </section>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/CookieConsent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const site = useSiteShell();
+const consent = useConsent();
+</script>
+
+<template>
+  <section v-if="consent.visible.value" class="site-consent" role="region" aria-label="Consent">
+    <p class="site-consent__message">{{ site.consent.message }}</p>
+    <div class="site-consent__actions">
+      <button type="button" class="base-button base-button--secondary" @click="consent.reject">
+        {{ site.consent.rejectLabel }}
+      </button>
+      <button type="button" class="base-button base-button--primary" @click="consent.accept">
+        {{ site.consent.acceptLabel }}
+      </button>
+    </div>
+  </section>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingFooter.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const site = useSiteShell();
+const { footerGroups, legalLinks, socialLinks } = useNavigation();
+const year = new Date().getFullYear();
+</script>
+
+<template>
+  <footer class="marketing-footer">
+    <div class="marketing-footer__inner">
+      <section class="marketing-footer__brand" aria-label="Site">
+        <SiteBrand />
+        <p>{{ site.description }}</p>
+        <div v-if="socialLinks.length" class="marketing-footer__social">
+          <a
+            v-for="link in socialLinks"
+            :key="link.label"
+            :href="link.href"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ link.label }}
+          </a>
+        </div>
+      </section>
+
+      <nav class="marketing-footer__nav" aria-label="Footer">
+        <section v-for="group in footerGroups" :key="group.title" class="marketing-footer__group">
+          <h2>{{ group.title }}</h2>
+          <ul>
+            <li v-for="link in group.links" :key="link.label">
+              <a v-if="link.external" :href="link.to" target="_blank" rel="noopener noreferrer">
+                {{ link.label }}
+              </a>
+              <NuxtLink v-else :to="link.to || site.homePath">
+                {{ link.label }}
+              </NuxtLink>
+            </li>
+          </ul>
+        </section>
+      </nav>
+    </div>
+
+    <div class="marketing-footer__legal">
+      <span>© {{ year }} {{ site.name }}</span>
+      <nav aria-label="Legal">
+        <NuxtLink v-for="link in legalLinks" :key="link.label" :to="link.to">
+          {{ link.label }}
+        </NuxtLink>
+      </nav>
+    </div>
+  </footer>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingHeader.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { MarketingNavigationItem } from "~/types/site-shell";
+
+const site = useSiteShell();
+const { marketingNav } = useNavigation();
+const menuOpen = ref(false);
+
+function closeMenu(): void {
+  menuOpen.value = false;
+}
+
+function hasChildren(item: MarketingNavigationItem): boolean {
+  return Boolean(item.children?.length);
+}
+</script>
+
+<template>
+  <header class="marketing-header">
+    <div class="marketing-header__inner">
+      <SiteBrand />
+
+      <nav class="marketing-header__nav" aria-label="Primary">
+        <template v-for="item in marketingNav" :key="item.label">
+          <details v-if="hasChildren(item)" class="marketing-nav-menu">
+            <summary>{{ item.label }}</summary>
+            <div class="marketing-nav-menu__panel">
+              <NuxtLink
+                v-for="child in item.children"
+                :key="child.label"
+                :to="child.to || site.homePath"
+                class="marketing-nav-menu__item"
+              >
+                <span>{{ child.label }}</span>
+                <small v-if="child.description">{{ child.description }}</small>
+              </NuxtLink>
+            </div>
+          </details>
+          <a
+            v-else-if="item.external"
+            class="marketing-nav-link"
+            :href="item.to"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ item.label }}
+          </a>
+          <NuxtLink v-else class="marketing-nav-link" :to="item.to || site.homePath">
+            {{ item.label }}
+          </NuxtLink>
+        </template>
+      </nav>
+
+      <div class="marketing-header__actions">
+        <slot name="actions">
+          <NuxtLink :to="site.secondaryActionPath" class="base-button base-button--secondary">
+            {{ site.secondaryActionLabel }}
+          </NuxtLink>
+          <NuxtLink :to="site.appPath" class="base-button base-button--primary">
+            {{ site.primaryActionLabel }}
+            <UIcon name="i-lucide-arrow-right" />
+          </NuxtLink>
+        </slot>
+        <button
+          type="button"
+          class="icon-button marketing-header__menu-button"
+          :aria-expanded="menuOpen"
+          aria-controls="mobile-nav"
+          aria-label="Toggle navigation"
+          @click="menuOpen = !menuOpen"
+        >
+          <UIcon :name="menuOpen ? 'i-lucide-x' : 'i-lucide-menu'" class="marketing-header__menu-icon" />
+        </button>
+      </div>
+    </div>
+
+    <nav
+      id="mobile-nav"
+      class="mobile-nav"
+      :class="{ 'mobile-nav--open': menuOpen }"
+      aria-label="Mobile primary"
+    >
+      <template v-for="item in marketingNav" :key="item.label">
+        <NuxtLink
+          v-if="!hasChildren(item)"
+          :to="item.to || site.homePath"
+          class="mobile-nav__link"
+          @click="closeMenu"
+        >
+          {{ item.label }}
+        </NuxtLink>
+        <details v-else class="mobile-nav__group">
+          <summary>{{ item.label }}</summary>
+          <NuxtLink
+            v-for="child in item.children"
+            :key="child.label"
+            :to="child.to || site.homePath"
+            class="mobile-nav__link"
+            @click="closeMenu"
+          >
+            {{ child.label }}
+          </NuxtLink>
+        </details>
+      </template>
+    </nav>
+  </header>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/MarketingShell.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const LazyMarketingHeader = defineLazyHydrationComponent(
+  "idle",
+  () => import("./MarketingHeader.vue"),
+);
+const LazyMarketingFooter = defineLazyHydrationComponent(
+  "visible",
+  () => import("./MarketingFooter.vue"),
+);
+
+const consent = useConsent();
+const backToTopOffset = computed(() => (consent.visible.value ? 104 : 24));
+</script>
+
+<template>
+  <div class="marketing-shell">
+    <slot name="header">
+      <LazyMarketingHeader :hydrate-on-idle="800" />
+    </slot>
+
+    <main class="marketing-shell__main">
+      <slot />
+    </main>
+
+    <slot name="footer">
+      <LazyMarketingFooter hydrate-on-visible />
+    </slot>
+
+    <BackToTop :bottom-offset="backToTopOffset" />
+
+    <slot name="consent">
+      <CookieConsent />
+    </slot>
+  </div>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/SiteBrand.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const site = useSiteShell();
+</script>
+
+<template>
+  <NuxtLink :to="site.homePath" class="site-brand" aria-label="Home">
+    <span class="site-brand__mark" aria-hidden="true">{{ site.logoText.slice(0, 1) }}</span>
+    <span class="site-brand__text">{{ site.logoText }}</span>
+  </NuxtLink>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/StaticPage.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  updatedAt?: string;
+}>();
+</script>
+
+<template>
+  <article class="static-page">
+    <header class="page-heading">
+      <h1>{{ title }}</h1>
+      <p v-if="description">{{ description }}</p>
+      <span v-if="updatedAt">Updated {{ updatedAt }}</span>
+    </header>
+
+    <div class="static-page__body">
+      <slot />
+    </div>
+  </article>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/site/ToastViewport.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { toasts, dismiss } = useToasts();
+</script>
+
+<template>
+  <div class="toast-viewport" role="region" aria-label="Notifications">
+    <TransitionGroup name="site-toast" tag="div" class="toast-viewport__stack">
+      <section
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="site-toast"
+        :class="`site-toast--${toast.tone}`"
+        role="status"
+      >
+        <div class="site-toast__body">
+          <h2>{{ toast.title }}</h2>
+          <p v-if="toast.description">{{ toast.description }}</p>
+        </div>
+        <button type="button" aria-label="Dismiss notification" @click="dismiss(toast.id)">
+          ×
+        </button>
+      </section>
+    </TransitionGroup>
+  </div>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/ui/BaseButton.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+type ButtonColor =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "info"
+  | "warning"
+  | "error"
+  | "neutral";
+type ButtonVariant = "solid" | "outline" | "soft" | "subtle" | "ghost" | "link";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    to?: string;
+    href?: string;
+    target?: string;
+    external?: boolean;
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    block?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: string;
+    leadingIcon?: string;
+    trailingIcon?: string;
+    square?: boolean;
+    customClass?: string;
+    ui?: Record<string, unknown>;
+  }>(),
+  {
+    color: "primary",
+    variant: "solid",
+    size: "md",
+    block: false,
+    fullWidth: false,
+    disabled: false,
+    loading: false,
+    external: false,
+    square: false,
+    customClass: "",
+    ui: () => ({}),
+  },
+);
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const isBlock = computed(() => props.block || props.fullWidth);
+const resolvedIcon = computed(() => props.leadingIcon || props.icon);
+</script>
+
+<template>
+  <UButton
+    v-bind="$attrs"
+    :to="to"
+    :href="href"
+    :target="target"
+    :external="external"
+    :label="label"
+    :color="color"
+    :variant="variant"
+    :size="size"
+    :block="isBlock"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="resolvedIcon"
+    :trailing-icon="trailingIcon"
+    :square="square"
+    :ui="ui"
+    :class="customClass"
+    @click="emit('click', $event)"
+  >
+    <template v-if="$slots.leading" #leading>
+      <slot name="leading" />
+    </template>
+    <slot />
+    <template v-if="$slots.trailing" #trailing>
+      <slot name="trailing" />
+    </template>
+  </UButton>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/ui/BaseGradientBorder.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    padding?: string;
+    radius?: string;
+    from?: string;
+    to?: string;
+    direction?: string;
+  }>(),
+  {
+    padding: "1px",
+    radius: "10px",
+    from: "rgb(168 101 80 / 0.26)",
+    to: "rgb(168 101 80 / 0.14)",
+    direction: "135deg",
+  },
+);
+
+const style = computed(() => ({
+  "--base-gradient-border-padding": props.padding,
+  "--base-gradient-border-radius": props.radius,
+  "--base-gradient-border-from": props.from,
+  "--base-gradient-border-to": props.to,
+  "--base-gradient-border-direction": props.direction,
+}));
+</script>
+
+<template>
+  <div class="base-gradient-border" :style="style">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.base-gradient-border {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  border-radius: var(--base-gradient-border-radius);
+}
+
+.base-gradient-border::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  padding: var(--base-gradient-border-padding);
+  border-radius: inherit;
+  background: linear-gradient(
+    var(--base-gradient-border-direction),
+    var(--base-gradient-border-from),
+    var(--base-gradient-border-to)
+  );
+  content: "";
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+</style>