@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/deployments/[id].stx

@@ -0,0 +1,234 @@
+@extends('layouts/default')
+
+@section('content')
+<div :show="hasWorkflowRun" class="px-4 py-8 sm:px-6 lg:px-8">
+  <div class="px-6 py-8 text-sm bg-white dark:bg-neutral-800 rounded-lg">
+    <div class="px-4 sm:px-0">
+      <h3 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">Latest Deployment</h3>
+    </div>
+    <div class="mt-6 border-gray-100 border-t dark:border-neutral-600">
+      <dl class="divide-gray-100 divide-y dark:divide-neutral-600">
+        <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-6 sm:px-0">
+          <dt class="font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Status</dt>
+          <dd class="flex items-center sm:col-span-2 mt-1 sm:mt-0 leading-6 text-gray-700 text-sm dark:text-neutral-200">
+            <span>{{ statusLabel() }}</span>
+            <svg fill="none" class="ml-2 h-5 w-5 text-green-500" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </dd>
+        </div>
+
+        <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-6 sm:px-0">
+          <dt class="font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Duration</dt>
+          <dd class="sm:col-span-2 mt-1 sm:mt-0 leading-6 text-gray-700 text-sm dark:text-neutral-200">{{ durationLabel() }}</dd>
+        </div>
+        <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-6 sm:px-0">
+          <dt class="font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Domain</dt>
+          <dd class="sm:col-span-2 mt-1 sm:mt-0 leading-6 text-gray-700 text-sm dark:text-neutral-200">www.stacks.com</dd>
+        </div>
+        <div class="sm:grid sm:gap-4 sm:grid-cols-3 px-4 py-6 sm:px-0">
+          <dt class="font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100">Source</dt>
+          <dd class="sm:col-span-2 mt-1 sm:mt-0 leading-6 text-gray-700 text-sm dark:text-neutral-200">
+            <div class="flex items-center">
+              <svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color: currentcolor; width: 16px; height: 16px;">
+                <path d="M6 3v12" />
+                <circle cx="18" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M18 9a9 9 0 01-9 9" />
+              </svg>
+              <a href="#" class="hover:underline"><code class="pl-1 text-xs">main</code></a>
+            </div>
+            <div class="flex items-center">
+              <svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color: currentcolor; width: 16px; height: 16px;">
+                <circle cx="12" cy="12" r="4" />
+                <path d="M1.05 12H7" />
+                <path d="M17.01 12h5.95" />
+              </svg>
+              <a :show="hasHeadCommit" href="#" class="hover:underline">
+                <code class="text-xs">{{ headCommitId() }}</code>
+                <span class="pl-1">{{ headCommitMessage() }}</span>
+              </a>
+            </div>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div class="mt-12 px-6 py-8 text-sm bg-white dark:bg-neutral-800 rounded-lg">
+    <h2 class="font-bold leading-10 text-2xl text-gray-900 tracking-tight dark:text-neutral-100">Deployment Details</h2>
+    <div>
+      <ul role="list" class="mt-8 border divide-gray-200 divide-y rounded-md dark:divide-neutral-600">
+        <li class="relative flex-col cursor-pointer" @click="toggleFlag()">
+          <div class="flex justify-between px-4 py-5">
+            <div class="flex gap-x-4">
+              <div class="flex-auto min-w-0">
+                <div class="flex items-center font-semibold leading-6 text-gray-900 text-sm dark:text-neutral-100">
+                  <div class="flex-none h-6 w-6 text-gray-400 i-hugeicons-chevron-right-20-solid"></div>
+                  <span>Building</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex gap-x-4 items-center">
+              <div class="sm:flex sm:flex-col sm:items-end">
+                <div class="h-6 w-6 text-green-500 i-hugeicons-check-circle-20-solid"></div>
+              </div>
+            </div>
+          </div>
+
+          <div :show="flag" class="border-t">
+            <pre v-highlightjs class="-mb-10 -mt-5">
+              <code class="bash">
+Running build in Cleveland, USA (East) – cle1
+Cloning github.com/chrisbbreuer/chrisbbreuer (Branch: main, Commit: b0f6755)
+Previous build cache not available
+Cloning completed: 529.499ms
+Running "vercel build"
+Vercel CLI 28.18.5
+Installing dependencies...
+added 770 packages in 12s
+228 packages are looking for funding
+run `npm fund` for details
+Detected Next.js version: 13.0.2
+Detected `package-lock.json` generated by npm 7+...
+Running "npm run build"
+              </code>
+            </pre>
+          </div>
+        </li>
+        <li class="relative flex-col cursor-pointer" @click="toggleFlag()">
+          <div class="flex justify-between px-4 py-5">
+            <div class="flex gap-x-4">
+              <div class="flex-auto min-w-0">
+                <div class="flex items-center font-semibold leading-6 text-gray-900 text-sm dark:text-neutral-100">
+                  <div class="flex-none h-6 w-6 text-gray-400 i-hugeicons-chevron-right-20-solid"></div>
+                  <span>Deployment Summary</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex gap-x-4 items-center">
+              <div class="sm:flex sm:flex-col sm:items-end">
+                <div class="h-6 w-6 text-green-500 i-hugeicons-check-circle-20-solid"></div>
+              </div>
+            </div>
+          </div>
+
+          <div :show="flag" class="border-t">
+            <pre v-highlightjs class="-mb-10 -mt-5">
+              <code class="bash">
+Running build in Cleveland, USA (East) – cle1
+Cloning github.com/chrisbbreuer/chrisbbreuer (Branch: main, Commit: b0f6755)
+Previous build cache not available
+Cloning completed: 529.499ms
+Running "vercel build"
+Vercel CLI 28.18.5
+Installing dependencies...
+added 770 packages in 12s
+228 packages are looking for funding
+run `npm fund` for details
+Detected Next.js version: 13.0.2
+Detected `package-lock.json` generated by npm 7+...
+Running "npm run build"
+              </code>
+            </pre>
+          </div>
+        </li>
+        <li class="relative flex-col cursor-pointer" @click="toggleFlag()">
+          <div class="flex justify-between px-4 py-5">
+            <div class="flex gap-x-4">
+              <div class="flex-auto min-w-0">
+                <div class="flex items-center font-semibold leading-6 text-gray-900 text-sm dark:text-neutral-100">
+                  <div class="flex-none h-6 w-6 text-gray-400 i-hugeicons-chevron-right-20-solid"></div>
+                  <span>Running Checks</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex gap-x-4 items-center">
+              <div class="sm:flex sm:flex-col sm:items-end">
+                <div class="h-6 w-6 text-red-500 i-hugeicons-x-circle-20-solid"></div>
+              </div>
+            </div>
+          </div>
+
+          <div :show="flag" class="border-t">
+            <pre v-highlightjs class="-mb-10 -mt-5">
+              <code class="bash">
+Running build in Cleveland, USA (East) – cle1
+Cloning github.com/chrisbbreuer/chrisbbreuer (Branch: main, Commit: b0f6755)
+Previous build cache not available
+Cloning completed: 529.499ms
+Running "vercel build"
+Vercel CLI 28.18.5
+Installing dependencies...
+added 770 packages in 12s
+228 packages are looking for funding
+run `npm fund` for details
+Detected Next.js version: 13.0.2
+Detected `package-lock.json` generated by npm 7+...
+Running "npm run build"
+              </code>
+            </pre>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface HeadCommit {
+  id: string
+  message: string
+}
+
+interface WorkflowRun {
+  conclusion?: string
+  created_at?: string
+  updated_at?: string
+  head_commit?: HeadCommit
+}
+
+const route = useRoute()
+
+const flag = state(false)
+const workflowRun = state<WorkflowRun | null>(null)
+
+const hasWorkflowRun = derived(() => workflowRun() !== null)
+const hasHeadCommit = derived(() => Boolean(workflowRun()?.head_commit))
+
+function statusLabel(): string {
+  return workflowRun()?.conclusion === 'success' ? 'Ready' : 'Failed'
+}
+
+function durationLabel(): string {
+  const run = workflowRun()
+  if (!run?.created_at || !run?.updated_at)
+    return ''
+  const ms = new Date(run.updated_at).getTime() - new Date(run.created_at).getTime()
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60)
+    return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  return `${minutes}m ${seconds % 60}s`
+}
+
+function headCommitId(): string {
+  return workflowRun()?.head_commit?.id?.slice(0, 10) ?? ''
+}
+
+function headCommitMessage(): string {
+  return workflowRun()?.head_commit?.message ?? ''
+}
+
+function toggleFlag(): void {
+  flag.update(v => !v)
+}
+
+onMount(async () => {
+  // Hook up to GitHub workflow data when the helper lands.
+  // Until then the page renders the empty state via :show="hasWorkflowRun".
+  void route.params.id
+})
+</script>
+
+@endsection

package/views/dashboard/deployments/index.stx

@@ -0,0 +1,9 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Deployments')
+<DeploymentList />
+
+<!-- <ActivityFeed /> -->
+
+@endsection

package/views/dashboard/dns/index.stx

@@ -0,0 +1,163 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - DNS')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="mb-8">
+      <div class="bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-6">
+            <div>
+              <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">DNS Records Over Time</h3>
+              <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Distribution of DNS record types</p>
+            </div>
+            <select x-model="timeRange" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+              <option value="day">Last 24 Hours</option>
+              <option value="week">Last 7 Days</option>
+              <option value="month">Last 30 Days</option>
+              <option value="year">Last Year</option>
+            </select>
+          </div>
+          <div class="relative h-[300px]">
+            <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+              <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+            </div>
+            <canvas id="dns_records_chart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:flex sm:items-center sm:justify-between">
+      <div>
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">DNS Records</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">A list of all your project DNS records.</p>
+      </div>
+      <button type="button" class="block mt-4 px-3 py-2 sm:mt-0 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add Record</button>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+            <table class="min-w-full divide-gray-300 divide-y">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">Type</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Name</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Content</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">TTL</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Status</th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Edit</span></th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">A</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">admin-api</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">666.666.666</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">Auto</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">Proxied</td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 hover:text-blue-900">View<span class="sr-only">, DNS Record</span></a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const timeRange = state('day')
+const isLoading = state(false)
+
+let chartHandle: { destroy: () => void } | null = null
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+      grid: { color: 'rgba(200, 200, 200, 0.1)' },
+      ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } },
+    },
+    x: {
+      grid: { display: false },
+      ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } },
+    },
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top',
+      align: 'end',
+      labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 },
+    },
+    tooltip: { mode: 'index', intersect: false },
+  },
+}
+
+function getDNSRecordsData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      {
+        label: 'A Records',
+        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10) + 5),
+        borderColor: 'rgb(59, 130, 246)',
+        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        fill: true,
+      },
+      {
+        label: 'CNAME Records',
+        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 8) + 3),
+        borderColor: 'rgb(16, 185, 129)',
+        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+        fill: true,
+      },
+      {
+        label: 'MX Records',
+        data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 5) + 1),
+        borderColor: 'rgb(245, 158, 11)',
+        backgroundColor: 'rgba(245, 158, 11, 0.1)',
+        fill: true,
+      },
+    ],
+  }
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const handle = useChart({
+    Chart: Chart as unknown as ChartCtor,
+    id: 'dns_records_chart',
+    type: 'line',
+    data: getDNSRecordsData(),
+    options: chartOptions,
+  })
+  chartHandle = handle
+  await new Promise(resolve => setTimeout(resolve, 500))
+  isLoading.set(false)
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection