@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -1,234 +1,8 @@
 @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>
-
+@title('Dashboard - Deployment Details')
+<PageLayout>
+  <DeploymentDetail />
+</PageLayout>
 @endsection

package/views/dashboard/deployments/index.stx

@@ -2,8 +2,7 @@
 
 @section('content')
 @title('Dashboard - Deployments')
-<DeploymentList />
-
-<!-- <ActivityFeed /> -->
-
+<PageLayout>
+  <DeploymentList />
+</PageLayout>
 @endsection

package/views/dashboard/dns/index.stx

@@ -2,162 +2,9 @@
 
 @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 class="px-4 py-6 sm:px-6 lg:px-8 lg:py-8 min-h-screen">
+  <DnsDashboard />
 </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