|
1 | | -<x-component name="x-base"> |
2 | | - <html lang="en" class="h-dvh flex flex-col"> |
3 | | - <head> |
| 1 | +<html lang="en" class="h-dvh flex flex-col"> |
| 2 | +<head> |
4 | 3 | <title :if="isset($fullTitle)">{{ $fullTitle }}</title> |
5 | 4 | <title :elseif="isset($title)">{{ $title }} — Tempest</title> |
6 | 5 | <title :else>Tempest</title> |
7 | 6 |
|
8 | | - <meta charset="UTF-8" /> |
9 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | + <meta charset="UTF-8"/> |
| 8 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
10 | 9 |
|
11 | 10 | <!-- Current meta image --> |
12 | 11 | <?php |
13 | 12 | $metaImageUri ??= ($meta ?? \App\Web\Meta\MetaType::HOME)->uri(); |
14 | 13 | ?> |
15 | 14 |
|
16 | 15 | <!-- Social --> |
17 | | - <meta property="og:image" content="<?= $metaImageUri ?>" /> |
18 | | - <meta property="twitter:image" content="<?= $metaImageUri ?>" /> |
19 | | - <meta name="image" content="<?= $metaImageUri ?>" /> |
20 | | - <meta name="twitter:card" content="summary_large_image" /> |
| 16 | + <meta property="og:image" content="<?= $metaImageUri ?>"/> |
| 17 | + <meta property="twitter:image" content="<?= $metaImageUri ?>"/> |
| 18 | + <meta name="image" content="<?= $metaImageUri ?>"/> |
| 19 | + <meta name="twitter:card" content="summary_large_image"/> |
21 | 20 |
|
22 | 21 | <!-- Favicon --> |
23 | | - <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> |
24 | | - <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" /> |
25 | | - <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" /> |
26 | | - <link rel="manifest" href="/favicon/site.webmanifest" /> |
| 22 | + <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/> |
| 23 | + <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/> |
| 24 | + <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/> |
| 25 | + <link rel="manifest" href="/favicon/site.webmanifest"/> |
27 | 26 |
|
28 | 27 | <!-- Vite tags --> |
29 | | - <x-vite-tags /> |
| 28 | + <x-vite-tags/> |
30 | 29 |
|
31 | 30 | <!-- Dark mode --> |
32 | 31 | <script> |
33 | | - function isDark() { |
34 | | - return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) |
35 | | - } |
36 | | - |
37 | | - function applyTheme(theme = undefined) { |
38 | | - if (theme) { |
39 | | - localStorage.theme = theme |
| 32 | + function isDark() { |
| 33 | + return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) |
40 | 34 | } |
41 | 35 |
|
42 | | - document.documentElement.classList.toggle('dark', isDark()) |
43 | | - document.dispatchEvent(new CustomEvent('theme-changed', { detail: { isDark: isDark() }})) |
44 | | - } |
| 36 | + function applyTheme(theme = undefined) { |
| 37 | + if (theme) { |
| 38 | + localStorage.theme = theme |
| 39 | + } |
| 40 | + |
| 41 | + document.documentElement.classList.toggle('dark', isDark()) |
| 42 | + document.dispatchEvent(new CustomEvent('theme-changed', {detail: {isDark: isDark()}})) |
| 43 | + } |
45 | 44 |
|
46 | | - function toggleDarkMode() { |
47 | | - applyTheme(isDark() ? 'light' : 'dark') |
48 | | - } |
| 45 | + function toggleDarkMode() { |
| 46 | + applyTheme(isDark() ? 'light' : 'dark') |
| 47 | + } |
49 | 48 |
|
50 | | - applyTheme() |
| 49 | + applyTheme() |
51 | 50 | </script> |
52 | 51 |
|
53 | | - <x-slot name="head" /> |
54 | | - </head> |
55 | | - <body :class="trim(($bodyClass ?? '') . ' relative antialiased flex flex-col grow')"> |
56 | | - <div class="absolute pointer-events-none inset-0 bg-repeat" style="background-image: url(/noise.svg)"> |
57 | | - <div id="command-palette"></div> |
58 | | - </div> |
59 | | - <x-header :stargazers="$stargazers" /> |
60 | | - <x-slot /> |
61 | | - <x-footer /> |
62 | | - <x-slot name="scripts" /> |
63 | | - <x-template :if="$copyCodeBlocks ?? false"> |
64 | | - <template id="copy-template"> |
65 | | - <button class="absolute group top-2 right-2 size-7 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition text-(--ui-text-dimmed) bg-(--ui-bg-muted) rounded border border-(--ui-border) hover:text-(--ui-text-highlighted)"> |
66 | | - <x-icon name="tabler:copy" class="size-5 absolute" /> |
67 | | - <x-icon name="tabler:copy-check-filled" class="size-5 absolute opacity-0 group-[[data-copied]]:opacity-100 transition" /> |
68 | | - </button> |
69 | | - </template> |
70 | | - </x-template> |
71 | | - </body> |
72 | | - </html> |
73 | | -</x-component> |
| 52 | + <x-slot name="head"/> |
| 53 | +</head> |
| 54 | +<body :class="trim(($bodyClass ?? '') . ' relative antialiased flex flex-col grow')"> |
| 55 | +<div class="absolute pointer-events-none inset-0 bg-repeat" style="background-image: url(/noise.svg)"> |
| 56 | + <div id="command-palette"></div> |
| 57 | +</div> |
| 58 | +<x-header :stargazers="$stargazers"/> |
| 59 | +<x-slot/> |
| 60 | +<x-footer/> |
| 61 | +<x-slot name="scripts"/> |
| 62 | +<x-template :if="$copyCodeBlocks ?? false"> |
| 63 | + <template id="copy-template"> |
| 64 | + <button class="absolute group top-2 right-2 size-7 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition text-(--ui-text-dimmed) bg-(--ui-bg-muted) rounded border border-(--ui-border) hover:text-(--ui-text-highlighted)"> |
| 65 | + <x-icon name="tabler:copy" class="size-5 absolute"/> |
| 66 | + <x-icon name="tabler:copy-check-filled" class="size-5 absolute opacity-0 group-[[data-copied]]:opacity-100 transition"/> |
| 67 | + </button> |
| 68 | + </template> |
| 69 | +</x-template> |
| 70 | +</body> |
| 71 | +</html> |
0 commit comments