@gscdump/nuxt 0.22.4 → 1.5.3

package/app/components/GscBootProgress.vue

@@ -1,297 +0,0 @@
-<script setup lang="ts">
-// Minimal boot-progress indicator for the browser-side DuckDB-WASM + parquet
-// attach flow. Reads per-site progress straight off the injected analyzer
-// state (`siteProgress` on `BrowserAnalyzerState`) — no derived composable,
-// no prop drilling.
-//
-// Collapsed view: one slim stacked bar, each segment a site, coloured by
-// stage. Tap to expand per-site rows with file counters. Hidden once every
-// tracked site is ready.
-
-import type { SiteLoadProgress, SiteLoadStage } from '../composables/useGscAnalytics'
-import { useGscBootProgress } from '../composables/useGscAnalytics'
-
-// Reads the shared per-site progress ref directly. Both DuckDB boot and rollup
-// fan-out write to it, so this component lights up for either flow without
-// caring who's producing the signal.
-const { progress: siteProgress } = useGscBootProgress()
-
-const expanded = ref(false)
-
-const sites = computed<SiteLoadProgress[]>(() =>
-  Object.values(siteProgress.value).sort((a, b) => a.startedAt - b.startedAt),
-)
-
-const allReady = computed(() => sites.value.length > 0 && sites.value.every(s => s.stage === 'ready'))
-const anyActive = computed(() => sites.value.some(s => s.stage !== 'ready' && s.stage !== 'idle' && s.stage !== 'error'))
-
-const aggregate = computed(() => {
-  let attached = 0
-  let total = 0
-  for (const s of sites.value) {
-    attached += s.filesAttached
-    total += s.filesTotal
-  }
-  return { attached, total, pct: total > 0 ? Math.round((attached / total) * 100) : 0 }
-})
-
-// Rank stages so the earliest-stage site drives the overall headline.
-const stageRank: Record<SiteLoadStage, number> = {
-  idle: 0,
-  wasm: 1,
-  manifest: 2,
-  attach: 3,
-  ready: 4,
-  error: -1,
-}
-
-const earliestStage = computed<SiteLoadStage>(() => {
-  let min: SiteLoadStage = 'ready'
-  let minRank = stageRank.ready
-  for (const s of sites.value) {
-    const r = stageRank[s.stage]
-    if (r >= 0 && r < minRank) {
-      min = s.stage
-      minRank = r
-    }
-  }
-  return min
-})
-
-const stageLabel: Record<SiteLoadStage, string> = {
-  idle: 'Queued',
-  wasm: 'Starting DuckDB',
-  manifest: 'Fetching manifest',
-  attach: 'Attaching parquet',
-  ready: 'Ready',
-  error: 'Error',
-}
-
-const stageColor: Record<SiteLoadStage, string> = {
-  idle: 'bg-neutral-700',
-  wasm: 'bg-violet-500',
-  manifest: 'bg-sky-500',
-  attach: 'bg-emerald-500',
-  ready: 'bg-emerald-600',
-  error: 'bg-rose-500',
-}
-
-function siteWidth(site: SiteLoadProgress): string {
-  if (site.stage === 'ready')
-    return '100%'
-  if (site.filesTotal === 0)
-    // No file count yet (wasm / manifest phase) — show a fractional sliver so
-    // the segment is visible but clearly not done.
-    return site.stage === 'wasm' ? '10%' : '25%'
-  return `${Math.max(5, Math.round((site.filesAttached / site.filesTotal) * 100))}%`
-}
-
-function truncate(id: string, max = 28): string {
-  if (id.length <= max)
-    return id
-  return `${id.slice(0, max - 1)}…`
-}
-</script>
-
-<template>
-  <Transition
-    enter-active-class="transition-all duration-200"
-    enter-from-class="opacity-0 translate-y-[-4px]"
-    enter-to-class="opacity-100 translate-y-0"
-    leave-active-class="transition-all duration-300"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="!allReady && sites.length > 0"
-      class="analytics-boot-progress"
-    >
-      <button
-        type="button"
-        class="headline"
-        :aria-expanded="expanded"
-        @click="expanded = !expanded"
-      >
-        <span class="dot" :class="stageColor[earliestStage]" />
-        <span class="label">{{ stageLabel[earliestStage] }}</span>
-        <span class="counter">
-          <template v-if="aggregate.total > 0">
-            {{ aggregate.attached }} / {{ aggregate.total }}
-          </template>
-          <template v-else>
-            {{ sites.length }} site{{ sites.length === 1 ? '' : 's' }}
-          </template>
-        </span>
-        <span class="caret" :class="{ open: expanded }">⌄</span>
-      </button>
-
-      <div class="bar">
-        <div
-          v-for="site in sites"
-          :key="site.siteId"
-          class="seg"
-          :class="[stageColor[site.stage], { shimmer: anyActive && site.stage !== 'ready' && site.stage !== 'error' }]"
-          :style="{ width: siteWidth(site) }"
-          :title="`${site.siteId}: ${stageLabel[site.stage]}`"
-        />
-      </div>
-
-      <Transition
-        enter-active-class="transition-all duration-200"
-        enter-from-class="opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[400px]"
-        leave-active-class="transition-all duration-150"
-        leave-from-class="opacity-100 max-h-[400px]"
-        leave-to-class="opacity-0 max-h-0"
-      >
-        <ul v-if="expanded" class="rows">
-          <li v-for="site in sites" :key="site.siteId" class="row">
-            <span class="row-dot" :class="stageColor[site.stage]" />
-            <span class="row-id">{{ truncate(site.siteId) }}</span>
-            <span class="row-stage">{{ stageLabel[site.stage] }}</span>
-            <span class="row-count">
-              <template v-if="site.filesTotal > 0">
-                {{ site.filesAttached }}/{{ site.filesTotal }}
-              </template>
-              <template v-else-if="site.stage === 'ready' && site.endedAt">
-                {{ Math.round(site.endedAt - site.startedAt) }}ms
-              </template>
-              <template v-else-if="site.stage === 'error'">
-                <span class="err">{{ truncate(site.error ?? 'error', 40) }}</span>
-              </template>
-              <template v-else>
-                —
-              </template>
-            </span>
-          </li>
-        </ul>
-      </Transition>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.analytics-boot-progress {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-.headline {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-}
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  flex-shrink: 0;
-}
-.label {
-  color: rgba(255, 255, 255, 0.82);
-  font-weight: 500;
-}
-.counter {
-  color: rgba(255, 255, 255, 0.55);
-  margin-left: auto;
-  font-variant-numeric: tabular-nums;
-}
-.caret {
-  display: inline-block;
-  color: rgba(255, 255, 255, 0.4);
-  transition: transform 180ms ease;
-  width: 10px;
-  text-align: center;
-}
-.caret.open {
-  transform: rotate(180deg);
-}
-.bar {
-  display: flex;
-  gap: 2px;
-  height: 3px;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 2px;
-  background: rgba(255, 255, 255, 0.04);
-}
-.seg {
-  height: 100%;
-  border-radius: 2px;
-  transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
-  min-width: 4px;
-  position: relative;
-}
-.seg.shimmer::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.28) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  animation: boot-shimmer 1.4s linear infinite;
-}
-@keyframes boot-shimmer {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(100%); }
-}
-.rows {
-  list-style: none;
-  margin: 4px 0 0;
-  padding: 0;
-  overflow: hidden;
-}
-.row {
-  display: grid;
-  grid-template-columns: 10px minmax(0, 1fr) auto auto;
-  gap: 8px;
-  align-items: center;
-  padding: 3px 0;
-  color: rgba(255, 255, 255, 0.72);
-}
-.row + .row {
-  border-top: 1px solid rgba(255, 255, 255, 0.04);
-}
-.row-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  margin-left: 2px;
-}
-.row-id {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: rgba(255, 255, 255, 0.88);
-}
-.row-stage {
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 11px;
-}
-.row-count {
-  color: rgba(255, 255, 255, 0.7);
-  font-variant-numeric: tabular-nums;
-  font-size: 11px;
-  min-width: 60px;
-  text-align: right;
-}
-.row-count .err {
-  color: #fb7185;
-}
-</style>

package/app/components/GscCommandPalette.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-// Cmd+K palette. Wraps UCommandPalette inside a UModal, wires up the global
-// keyboard shortcut, and sources its items from the analytics context + a
-// static list of top-level routes. Drop `<GscCommandPalette />` into your
-// root layout once.
-//
-// Hosts can extend the groups via the `groups` prop — e.g. nuxtseo.com adds
-// its billing / settings entries without forking the component.
-
-import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
-import type { SiteListItem } from '../composables/useGscAnalytics'
-import { useMagicKeys, whenever } from '@vueuse/core'
-import { useGscSites } from '../composables/useGscAnalytics'
-
-const { groups: extraGroups = [] } = defineProps<{
-  groups?: CommandPaletteGroup[]
-}>()
-
-const router = useRouter()
-const { sites } = useGscSites()
-
-const open = ref(false)
-const selected = ref<CommandPaletteItem | null>(null)
-
-const keys = useMagicKeys()
-const cmdK = computed(() => keys.meta_k?.value || keys.ctrl_k?.value || false)
-whenever(cmdK, () => {
-  open.value = !open.value
-})
-
-const siteGroup = computed<CommandPaletteGroup<CommandPaletteItem>>(() => ({
-  id: 'sites',
-  label: 'Sites',
-  items: (sites.value ?? []).map<CommandPaletteItem>((s: SiteListItem) => ({
-    label: s.hostname,
-    suffix: s.propertyType === 'domain' ? 'sc-domain' : 'url-prefix',
-    icon: 'i-lucide-globe',
-    to: `/sites/${encodeURIComponent(s.id)}`,
-  })),
-}))
-
-const navGroup: CommandPaletteGroup<CommandPaletteItem> = {
-  id: 'nav',
-  label: 'Navigation',
-  items: [
-    { label: 'Overview', icon: 'i-lucide-layout-dashboard', to: '/' },
-  ],
-}
-
-const allGroups = computed<CommandPaletteGroup[]>(() => [
-  siteGroup.value,
-  navGroup,
-  ...extraGroups,
-])
-
-watch(selected, (item) => {
-  if (!item)
-    return
-  if (typeof item.to === 'string')
-    router.push(item.to)
-  open.value = false
-  selected.value = null
-})
-</script>
-
-<template>
-  <UModal v-model:open="open" :ui="{ content: 'max-w-[560px]' }">
-    <template #content>
-      <UCommandPalette
-        v-model="selected"
-        :groups="allGroups"
-        placeholder="Jump to a site or action…"
-        class="h-[420px]"
-      />
-    </template>
-  </UModal>
-</template>

package/app/components/GscDashboardPage.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-// Thin page container: sets the `flex flex-col min-h-screen` chrome every
-// site-scoped page has been repeating and provides a main-region slot with
-// the shared max-width + padding. Use together with PageHeader.
-
-const { gap = 'md' } = defineProps<{
-  /** Spacing between direct children of the main region. Maps to tailwind gap-3/4/5. */
-  gap?: 'sm' | 'md' | 'lg'
-}>()
-
-const gapClass = computed(() => (
-  gap === 'sm' ? 'gap-3' : gap === 'lg' ? 'gap-5' : 'gap-4'
-))
-</script>
-
-<template>
-  <div class="flex flex-col min-h-screen overflow-x-clip">
-    <slot name="header" />
-    <div
-      class="max-w-[1128px] min-w-0 px-4 sm:px-6 lg:px-9 pt-4 pb-10 flex flex-col flex-1 w-full"
-      :class="gapClass"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/GscEngineBadge.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-// Small observability pill: shows which backend served the query
-// (browser/DuckDB-WASM vs server/D1), how long it took, and the fallback
-// reason if the browser path tried and failed. Silent until data settles.
-
-const { engine, elapsedMs = null, fallbackReason = null } = defineProps<{
-  engine: 'browser' | 'server' | null
-  elapsedMs?: number | null
-  fallbackReason?: string | null
-}>()
-</script>
-
-<template>
-  <div v-if="engine" class="flex items-center gap-2 text-[10px] font-mono uppercase text-neutral-500">
-    <span
-      class="px-1.5 py-0.5 border"
-      :class="engine === 'browser'
-        ? 'border-cyan-500/40 text-cyan-400 bg-cyan-500/5'
-        : 'border-white/15 text-neutral-400 bg-white/5'"
-    >
-      engine: {{ engine }}
-    </span>
-    <span v-if="elapsedMs != null">{{ Math.round(elapsedMs) }} ms</span>
-    <span v-if="fallbackReason" class="text-amber-500" :title="fallbackReason">
-      fallback
-    </span>
-  </div>
-</template>

package/app/components/GscHero.vue

@@ -1,214 +0,0 @@
-<script setup lang="ts">
-// Hero block: four stat cards (clicks / impressions / CTR / avg position) with
-// growth badges vs. the comparison window, plus a PerformanceChart over the
-// selected period. Fed directly by the `daily_totals` rollup payload so it
-// works before DuckDB has finished booting.
-//
-// Consumes `DateRange` from useGscPeriod — the caller owns period/compare state
-// and passes the resolved window in. Keeping the compute here means the stat
-// grid and chart read from the same windowed slice.
-
-import type { CompareMode, DateRange } from '../composables/useGscPeriod'
-import { computeGrowth } from '../composables/useGscPeriod'
-
-interface DailyTotal {
-  /** Rollup writer stamps this as Unix ms, not an ISO date. */
-  date: number
-  clicks: number
-  impressions: number
-  sum_position: number
-  anonymizedImpressionsPct: number
-}
-
-const { payload, range, compareMode } = defineProps<{
-  payload: readonly DailyTotal[] | null | undefined
-  range: DateRange
-  compareMode: CompareMode
-}>()
-
-function toIso(ms: number): string {
-  return new Date(ms).toISOString().slice(0, 10)
-}
-
-function daysBetween(a: string, b: string): number {
-  return Math.round((Date.parse(b) - Date.parse(a)) / 86400000)
-}
-
-function shiftIso(iso: string, days: number): string {
-  return new Date(Date.parse(iso) + days * 86400000).toISOString().slice(0, 10)
-}
-
-// Snap the requested window's `end` to the site's actual most-recent data
-// point. Without this, a syncing site whose last day is earlier than the
-// stable-latency cutoff compares a short-current window to a full-length
-// previous window and shows a false decline.
-function snapWindow(payload: readonly DailyTotal[], start: string, end: string): { start: string, end: string } {
-  let maxIso: string | null = null
-  for (const d of payload) {
-    const iso = toIso(d.date)
-    if (!maxIso || iso > maxIso)
-      maxIso = iso
-  }
-  if (!maxIso || maxIso >= end)
-    return { start, end }
-  const shift = daysBetween(end, maxIso)
-  return { start: shiftIso(start, shift), end: maxIso }
-}
-
-interface WindowTotals {
-  clicks: number
-  impressions: number
-  ctr: number
-  position: number
-  series: Array<{ date: string, clicks: number, impressions: number }>
-}
-
-function summarize(days: readonly DailyTotal[], start: string, end: string): WindowTotals {
-  let clicks = 0
-  let impressions = 0
-  let weightedPosition = 0
-  const series: WindowTotals['series'] = []
-  for (const d of days) {
-    const iso = toIso(d.date)
-    if (iso < start || iso > end)
-      continue
-    clicks += d.clicks
-    impressions += d.impressions
-    weightedPosition += d.sum_position
-    series.push({ date: iso, clicks: d.clicks, impressions: d.impressions })
-  }
-  return {
-    clicks,
-    impressions,
-    ctr: impressions > 0 ? clicks / impressions : 0,
-    position: impressions > 0 ? weightedPosition / impressions + 1 : 0,
-    series,
-  }
-}
-
-const stats = computed(() => {
-  if (!payload?.length)
-    return null
-  const snapped = snapWindow(payload, range.start, range.end)
-  const shift = daysBetween(range.end, snapped.end)
-  const cmpRawStart = compareMode === 'year' ? range.yearStart : range.prevStart
-  const cmpRawEnd = compareMode === 'year' ? range.yearEnd : range.prevEnd
-  const cmpStart = shift ? shiftIso(cmpRawStart, shift) : cmpRawStart
-  const cmpEnd = shift ? shiftIso(cmpRawEnd, shift) : cmpRawEnd
-  return {
-    current: summarize(payload, snapped.start, snapped.end),
-    previous: compareMode === 'none' ? null : summarize(payload, cmpStart, cmpEnd),
-    snapped,
-  }
-})
-
-function fmtInt(n: number): string {
-  return new Intl.NumberFormat().format(Math.round(n))
-}
-function fmtPct(n: number): string {
-  return `${(n * 100).toFixed(2)}%`
-}
-function fmtPos(n: number): string {
-  return n > 0 ? n.toFixed(1) : '–'
-}
-function fmtGrowth(g: number | null, invert = false): string {
-  if (g == null)
-    return ''
-  const v = invert ? -g : g
-  const sign = v > 0 ? '+' : ''
-  return `${sign}${(v * 100).toFixed(1)}%`
-}
-function growthColor(g: number | null, invert = false): 'success' | 'error' | 'neutral' {
-  if (g == null || Math.abs(g) < 0.005)
-    return 'neutral'
-  const v = invert ? -g : g
-  return v > 0 ? 'success' : 'error'
-}
-
-const statCards = computed(() => {
-  if (!stats.value)
-    return []
-  const { current, previous } = stats.value
-  return [
-    {
-      label: 'Clicks',
-      value: fmtInt(current.clicks),
-      icon: 'i-lucide-mouse-pointer-click',
-      growth: computeGrowth(current.clicks, previous?.clicks),
-      invert: false,
-    },
-    {
-      label: 'Impressions',
-      value: fmtInt(current.impressions),
-      icon: 'i-lucide-eye',
-      growth: computeGrowth(current.impressions, previous?.impressions),
-      invert: false,
-    },
-    {
-      label: 'CTR',
-      value: fmtPct(current.ctr),
-      icon: 'i-lucide-percent',
-      growth: computeGrowth(current.ctr, previous?.ctr),
-      invert: false,
-    },
-    {
-      label: 'Avg. position',
-      value: fmtPos(current.position),
-      icon: 'i-lucide-hash',
-      growth: computeGrowth(current.position, previous?.position),
-      invert: true,
-    },
-  ]
-})
-
-const chartData = computed(() => stats.value?.current.series ?? [])
-const chartPrevData = computed(() => stats.value?.previous?.series ?? [])
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
-      <div
-        v-for="stat in statCards"
-        :key="stat.label"
-        class="rounded-lg border border-default bg-default p-4"
-      >
-        <div class="flex items-center gap-1.5 text-[11px] font-semibold text-dimmed uppercase tracking-widest">
-          <UIcon :name="stat.icon" class="size-3" />
-          {{ stat.label }}
-        </div>
-        <div class="flex items-baseline gap-2 mt-1.5">
-          <div class="text-2xl font-semibold text-default tabular-nums tracking-tight">
-            {{ stat.value }}
-          </div>
-          <UBadge
-            v-if="stats?.previous"
-            :color="growthColor(stat.growth, stat.invert)"
-            variant="soft"
-            size="xs"
-            class="tabular-nums"
-          >
-            {{ fmtGrowth(stat.growth, stat.invert) }}
-          </UBadge>
-        </div>
-      </div>
-      <div
-        v-if="!stats"
-        class="col-span-full rounded-lg border border-dashed border-default p-6 text-center text-sm text-muted"
-      >
-        No data yet. Run <UKbd>gscdump sync</UKbd> to populate the daily_totals rollup.
-      </div>
-    </div>
-
-    <div
-      v-if="stats && chartData.length"
-      class="rounded-lg border border-default bg-default p-4"
-    >
-      <GscPerformanceChart
-        :value="chartData"
-        :prev-value="compareMode !== 'none' ? chartPrevData : null"
-        :height="220"
-      />
-    </div>
-  </div>
-</template>

package/app/components/GscLazyTopResult.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { useIntersectionObserver } from '@vueuse/core'
-import { gscQueries } from '../queries/gsc'
-import { useGscRpc } from '../utils/gsc-rpc'
-
-const props = defineProps<{
-  siteUrl: string
-  type: 'topPage' | 'topKeyword'
-  identifier: string
-  startDate: string
-  endDate: string
-}>()
-
-const container = useTemplateRef<HTMLElement>('container')
-const value = ref<string | null>(null)
-const loaded = ref(false)
-
-const { stop } = useIntersectionObserver(
-  container,
-  ([entry]) => {
-    if (!entry?.isIntersecting || loaded.value)
-      return
-    loaded.value = true
-    stop()
-    const request = useGscRpc().query(
-      gscQueries.topAssociation(props.siteUrl, {
-        type: props.type,
-        identifier: props.identifier,
-        startDate: props.startDate,
-        endDate: props.endDate,
-      }),
-    ) as unknown as Promise<{ value: string | null }>
-    request
-      .then(r => value.value = r.value)
-      .catch(() => {})
-  },
-  { rootMargin: '100px' },
-)
-</script>
-
-<template>
-  <div ref="container">
-    <div v-if="value" class="text-xs text-muted truncate max-w-md">
-      {{ value }}
-    </div>
-  </div>
-</template>