|
1 | 1 | <?php |
2 | | - |
3 | 2 | /** @var \App\Web\Blog\BlogPost $post */ |
4 | | -use App\Web\Meta\MetaImageController; |
5 | | - |
6 | | -use function Tempest\uri; |
7 | | - |
8 | 3 | ?> |
9 | 4 |
|
10 | 5 | <x-base |
11 | | - :meta-image-uri="uri([MetaImageController::class, 'blog'], slug: $post->slug)" |
12 | | - :title="$post->title" |
13 | | - :description="$post->description" |
14 | | - :copy-code-blocks="true" |
15 | | - :meta="$post->meta" |
| 6 | + :meta-image-uri="$post->metaImageUri" |
| 7 | + :title="$post->title" |
| 8 | + :description="$post->description" |
| 9 | + :copy-code-blocks="true" |
| 10 | + :meta="$post->meta" |
16 | 11 | > |
17 | 12 | <!-- Main container --> |
18 | | - <main class="container px-4 mx-auto xl:px-8 flex flex-col grow isolate items-center relative"> |
| 13 | + <main class="isolate relative flex flex-col items-center mx-auto px-4 xl:px-8 container grow"> |
19 | 14 | <!-- Main content --> |
20 | | - <article class="grow px-2 flex flex-col w-full md:w-auto min-w-0 lg:mt-10 max-w-3xl"> |
| 15 | + <article class="flex flex-col lg:mt-10 px-2 w-full md:w-auto min-w-0 max-w-3xl grow"> |
21 | 16 | <!-- Breadcrumbs --> |
22 | 17 | <nav class="text-(--ui-text-dimmed) font-medium flex items-center mb-4 text-sm gap-x-1.5"> |
23 | | - <x-icon name="tabler:news" class="size-5 mr-1" /> |
| 18 | + <x-icon name="tabler:news" class="mr-1 size-5" /> |
24 | 19 | <a :href="uri([BlogController::class, 'index'])" class="hover:text-(--ui-text) transition">Blog</a> |
25 | 20 | <span>/</span> |
26 | 21 | <span class="text-(--ui-primary)">{{ $post->title }}</span> |
27 | 22 | </nav> |
28 | 23 | <!-- Header --> |
29 | 24 | <div class="flex flex-col pb-8 border-b border-(--ui-border) max-w-[65ch]"> |
30 | | - <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl"> |
| 25 | + <h1 class="font-bold text-gray-900 dark:text-white text-3xl sm:text-4xl lg:text-5xl tracking-tight"> |
31 | 26 | {{ $post->title }} |
32 | 27 | </h1> |
33 | | - <p class="mt-4 text-lg text-gray-500 dark:text-gray-400"> |
| 28 | + <p class="mt-4 text-gray-500 dark:text-gray-400 text-lg"> |
34 | 29 | {{ $post->description }} |
35 | 30 | </p> |
36 | 31 | <span :if="$post->author" class="text-(--ui-text-muted) text-sm mt-8"> |
37 | 32 | by <span class="font-medium">{{ $post->author->getName() }}</span> on <span class="font-medium">{{ $post->createdAt->format('F d, Y') }}</span> |
38 | 33 | </span> |
39 | 34 | </div> |
40 | 35 | <!-- Content --> |
41 | | - <div class="prose dark:prose-invert mt-8 pb-24 space-y-12 w-full"> |
| 36 | + <div class="space-y-12 dark:prose-invert mt-8 pb-24 w-full prose"> |
42 | 37 | {!! $post->content !!} |
43 | 38 | </div> |
44 | 39 | </article> |
|
0 commit comments