Add first pass of the web interface: Sites index + detail, via Livewire
Home page is now a Livewire-powered, searchable/paginated Site list (search by domain) instead of the stock Laravel welcome page. Clicking a site goes to a plain controller-rendered detail page listing its pages. Shared layout at resources/views/components/layouts/app.blade.php.
This commit is contained in:
m105
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>{{ isset($title) ? $title.' — ' : '' }}{{ config('app.name', 'Huginn') }}</title>
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@livewireStyles
|
||||
</head>
|
||||
<body class="min-h-screen bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100">
|
||||
<header class="border-b border-neutral-200 dark:border-neutral-800">
|
||||
<div class="mx-auto flex max-w-5xl items-center px-4 py-4">
|
||||
<a href="{{ route('sites.index') }}" class="text-lg font-semibold">Huginn</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{{ $slot }}
|
||||
</main>
|
||||
|
||||
@livewireScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<div class="mx-auto max-w-5xl px-4 py-8">
|
||||
<h1 class="text-2xl font-semibold">Sites</h1>
|
||||
<p class="mt-1 text-sm text-neutral-500">{{ number_format(\App\Models\Site::count()) }} sites indexed from Common Crawl.</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<input
|
||||
type="search"
|
||||
wire:model.live.debounce.400ms="search"
|
||||
placeholder="Search by domain…"
|
||||
class="w-full max-w-sm rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
|
||||
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
<thead class="bg-neutral-50 dark:bg-neutral-900">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Domain</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Title</th>
|
||||
<th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-neutral-500">Pages</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
@forelse ($sites as $site)
|
||||
<tr wire:key="site-{{ $site->id }}">
|
||||
<td class="px-4 py-2 text-sm">
|
||||
<a href="{{ route('sites.show', $site) }}" class="font-medium text-blue-600 hover:underline dark:text-blue-400">
|
||||
{{ $site->domain }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $site->title ?? '—' }}</td>
|
||||
<td class="px-4 py-2 text-right text-sm text-neutral-600 dark:text-neutral-400">{{ $site->pages_count }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="3" class="px-4 py-6 text-center text-sm text-neutral-500">No sites found.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $sites->links() }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,54 @@
|
||||
<x-layouts.app :title="$site->domain">
|
||||
<div class="mx-auto max-w-5xl px-4 py-8">
|
||||
<a href="{{ route('sites.index') }}" class="text-sm text-blue-600 hover:underline dark:text-blue-400">← Back to sites</a>
|
||||
|
||||
<h1 class="mt-2 text-2xl font-semibold">{{ $site->domain }}</h1>
|
||||
|
||||
@if ($site->title)
|
||||
<p class="mt-1 text-neutral-700 dark:text-neutral-300">{{ $site->title }}</p>
|
||||
@endif
|
||||
|
||||
@if ($site->description)
|
||||
<p class="mt-1 text-sm text-neutral-500">{{ $site->description }}</p>
|
||||
@endif
|
||||
|
||||
@if ($site->url)
|
||||
<p class="mt-1 text-sm">
|
||||
<a href="{{ $site->url }}" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-blue-400">{{ $site->url }}</a>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<h2 class="mt-8 text-lg font-medium">Pages ({{ $pages->total() }})</h2>
|
||||
|
||||
<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-800">
|
||||
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
<thead class="bg-neutral-50 dark:bg-neutral-900">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">URL</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-neutral-500">Title</th>
|
||||
<th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-neutral-500">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
@forelse ($pages as $page)
|
||||
<tr>
|
||||
<td class="max-w-md truncate px-4 py-2 text-sm">
|
||||
<a href="{{ $page->url }}" target="_blank" rel="noopener" class="text-blue-600 hover:underline dark:text-blue-400">{{ $page->url }}</a>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400">{{ $page->title ?? '—' }}</td>
|
||||
<td class="px-4 py-2 text-right text-sm text-neutral-600 dark:text-neutral-400">{{ $page->status ?? '—' }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="3" class="px-4 py-6 text-center text-sm text-neutral-500">No pages found.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $pages->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user