summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/pages/index.tsx2
-rw-r--r--src/pages/releases/[version].tsx1
-rw-r--r--src/pages/releases/index.tsx2
-rw-r--r--src/ui/base/BaseLayout.tsx228
4 files changed, 120 insertions, 113 deletions
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 59f27de..0ade408 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,7 +16,7 @@ export const template = site.$.template({ type: "home" }, (page, pages) => {
16 const releases = query.type(".html").match({ type: "release" }).many().toArray(); 16 const releases = query.type(".html").match({ type: "release" }).many().toArray();
17 17
18 return ( 18 return (
19 <BaseLayout page={page}> 19 <BaseLayout page={page} pages={pages}>
20 <SiteHeader 20 <SiteHeader
21 url={page.url} 21 url={page.url}
22 sm={ 22 sm={
diff --git a/src/pages/releases/[version].tsx b/src/pages/releases/[version].tsx
index dde1e3b..16f1ba5 100644
--- a/src/pages/releases/[version].tsx
+++ b/src/pages/releases/[version].tsx
@@ -39,6 +39,7 @@ export const template = site.$.template({ type: "release" }, (page, pages) => {
39 return ( 39 return (
40 <SplitLayout 40 <SplitLayout
41 page={page} 41 page={page}
42 pages={pages}
42 content={ 43 content={
43 <> 44 <>
44 <Heading as="h1" class="u-mbs-0 p-name" display level="xl"> 45 <Heading as="h1" class="u-mbs-0 p-name" display level="xl">
diff --git a/src/pages/releases/index.tsx b/src/pages/releases/index.tsx
index 132eee7..9e5a3db 100644
--- a/src/pages/releases/index.tsx
+++ b/src/pages/releases/index.tsx
@@ -15,7 +15,7 @@ export const template = site.$.template({ type: "releases-index" }, (page, pages
15 const feed = query.type(".rss").match({ type: "releases" }).one(); 15 const feed = query.type(".rss").match({ type: "releases" }).one();
16 16
17 return ( 17 return (
18 <BaseLayout page={page}> 18 <BaseLayout page={page} pages={pages}>
19 <SiteHeader 19 <SiteHeader
20 url={page.url} 20 url={page.url}
21 end={ 21 end={
diff --git a/src/ui/base/BaseLayout.tsx b/src/ui/base/BaseLayout.tsx
index c57d41e..2fb999d 100644
--- a/src/ui/base/BaseLayout.tsx
+++ b/src/ui/base/BaseLayout.tsx
@@ -9,126 +9,132 @@ import { Lightbox } from "../objects/Lightbox.tsx";
9 9
10export interface Props { 10export interface Props {
11 page: Select<typeof site, ".html">; 11 page: Select<typeof site, ".html">;
12 pages: readonly Select<typeof site>[];
12 image?: string; 13 image?: string;
13 theme?: "l1" | "l2" | null; 14 theme?: "l1" | "l2" | null;
14 children?: JSX.Element; 15 children?: JSX.Element;
15 class?: unknown; 16 class?: unknown;
16} 17}
17 18
18export const BaseLayout = site.$.component( 19export const BaseLayout = async ({
19 async ({ page, theme = "l1", image: imageUrl, children, class: cls }: Props, pages) => { 20 page,
20 const query = site.$.query(pages); 21 pages,
22 theme = "l1",
23 image: imageUrl,
24 children,
25 class: cls,
26}: Props) => {
27 const query = site.$.query(pages);
21 28
22 const stylesheet = await site.load("styles/style.scss"); 29 const stylesheet = await site.load("styles/style.scss");
23 const script = await site.load("scripts/script.ts"); 30 const script = await site.load("scripts/script.ts");
24 const fonts = await site.glob("assets/**.woff2"); 31 const fonts = await site.glob("assets/**.woff2");
25 const favicon = await site.load("assets/favicon.svg"); 32 const favicon = await site.load("assets/favicon.svg");
26 const image = await site.load( 33 const image = await site.load(
27 imageUrl ?? "https://strapi.volpeon.ink/uploads/icon_7999cf625e.png", 34 imageUrl ?? "https://strapi.volpeon.ink/uploads/icon_7999cf625e.png",
28 ); 35 );
29 36
30 const feeds = query.type(".rss").many(); 37 const feeds = query.type(".rss").many();
31 38
32 return ( 39 return (
33 <> 40 <>
34 {{ __html: "<!DOCTYPE html>" }} 41 {{ __html: "<!DOCTYPE html>" }}
35 <html lang="en"> 42 <html lang="en">
36 <head> 43 <head>
37 <meta charset="utf-8" /> 44 <meta charset="utf-8" />
38 <meta content="light dark" name="color-scheme" /> 45 <meta content="light dark" name="color-scheme" />
39 <meta content="width=device-width, initial-scale=1" name="viewport" /> 46 <meta content="width=device-width, initial-scale=1" name="viewport" />
40 <meta content="scale" name="text-scale" /> 47 <meta content="scale" name="text-scale" />
41 <link href={site.$.url("sitemap.xml")} rel="sitemap" /> 48 <link href={site.$.url("sitemap.xml")} rel="sitemap" />
42 <link href={favicon.url} rel="icon" type="image/svg+xml" /> 49 <link href={favicon.url} rel="icon" type="image/svg+xml" />
43 {fonts.map((font) => ( 50 {fonts.map((font) => (
44 <link as="font" href={font.url} rel="preload" type="font/woff2" /> 51 <link as="font" href={font.url} rel="preload" type="font/woff2" />
45 ))} 52 ))}
46 53
47 <style>@layer scope, theme, object, layout, component, utility;</style> 54 <style>@layer scope, theme, object, layout, component, utility;</style>
48 <link rel="stylesheet" href={stylesheet.url} /> 55 <link rel="stylesheet" href={stylesheet.url} />
49 <script src={script.url} defer /> 56 <script src={script.url} defer />
50 {feeds.map((feed) => ( 57 {feeds.map((feed) => (
51 <link 58 <link
52 rel="alternate" 59 rel="alternate"
53 href={feed.url} 60 href={feed.url}
54 title={feed.data.title} 61 title={feed.data.title}
55 type="application/rss+xml" 62 type="application/rss+xml"
56 /> 63 />
57 ))} 64 ))}
58 <title> 65 <title>
59 {page.data.title} 66 {page.data.title}
60 {page.data.type === "home" ? "" : " · Corvos"} 67 {page.data.type === "home" ? "" : " · Corvos"}
61 </title> 68 </title>
62 69
63 <meta property="og:type" content="website" /> 70 <meta property="og:type" content="website" />
64 <meta property="og:site_name" content="Corvos" /> 71 <meta property="og:site_name" content="Corvos" />
65 <meta property="og:locale" content="en" /> 72 <meta property="og:locale" content="en" />
66 {"description" in page.data && page.data.description && ( 73 {"description" in page.data && page.data.description && (
67 <> 74 <>
68 <meta property="og:description" content={page.data.description} /> 75 <meta property="og:description" content={page.data.description} />
69 <meta name="description" content={page.data.description} /> 76 <meta name="description" content={page.data.description} />
70 </> 77 </>
71 )} 78 )}
72 <meta property="og:url" content={site.$.url("", true)} /> 79 <meta property="og:url" content={site.$.url("", true)} />
73 <meta property="og:image" content={image.url} /> 80 <meta property="og:image" content={image.url} />
74 <meta name="twitter:card" content={imageUrl ? "summary_large_image" : "summary"} /> 81 <meta name="twitter:card" content={imageUrl ? "summary_large_image" : "summary"} />
75 <meta name="generator" content={getGenerator()} /> 82 <meta name="generator" content={getGenerator()} />
76 </head> 83 </head>
77 <body class:list={["t-no-js", { [`t-${theme}`]: theme }, cls]}> 84 <body class:list={["t-no-js", { [`t-${theme}`]: theme }, cls]}>
78 {children} 85 {children}
79 86
80 <SiteFooter /> 87 <SiteFooter />
81 <SiteNav url={page.url} /> 88 <SiteNav url={page.url} />
82 <Lightbox /> 89 <Lightbox />
83 <svg 90 <svg
84 version="1.1" 91 version="1.1"
85 xmlns="http://www.w3.org/2000/svg" 92 xmlns="http://www.w3.org/2000/svg"
86 xmlns:xlink="http://www.w3.org/1999/xlink" 93 xmlns:xlink="http://www.w3.org/1999/xlink"
87 class="u-d-none" 94 class="u-d-none"
88 > 95 >
89 <title>Loading indicator</title> 96 <title>Loading indicator</title>
90 <symbol id="loading-indicator" viewBox="0 0 50 50"> 97 <symbol id="loading-indicator" viewBox="0 0 50 50">
91 <circle 98 <circle
92 cx="25" 99 cx="25"
93 cy="25" 100 cy="25"
94 r="20" 101 r="20"
95 fill="none" 102 fill="none"
96 stroke="currentColor" 103 stroke="currentColor"
97 stroke-width=".4em" 104 stroke-width=".4em"
98 stroke-linecap="round" 105 stroke-linecap="round"
99 stroke-dasharray="1 200" 106 stroke-dasharray="1 200"
100 stroke-dashoffset="0" 107 stroke-dashoffset="0"
101 stroke-miterlimit="10" 108 stroke-miterlimit="10"
102 transform-origin="center center" 109 transform-origin="center center"
103 > 110 >
104 <animate 111 <animate
105 attributeName="stroke-dasharray" 112 attributeName="stroke-dasharray"
106 keyTimes="0;0.5;1" 113 keyTimes="0;0.5;1"
107 values="1 200;89 200;89 200" 114 values="1 200;89 200;89 200"
108 dur="2s" 115 dur="2s"
109 repeatCount="indefinite" 116 repeatCount="indefinite"
110 /> 117 />
111 <animate 118 <animate
112 attributeName="stroke-dashoffset" 119 attributeName="stroke-dashoffset"
113 keyTimes="0;0.5;1" 120 keyTimes="0;0.5;1"
114 values="0;-35;-124" 121 values="0;-35;-124"
115 dur="2s" 122 dur="2s"
116 repeatCount="indefinite" 123 repeatCount="indefinite"
117 /> 124 />
118 <animateTransform 125 <animateTransform
119 attributeName="transform" 126 attributeName="transform"
120 type="rotate" 127 type="rotate"
121 from="0" 128 from="0"
122 to="360" 129 to="360"
123 dur="1.3s" 130 dur="1.3s"
124 repeatCount="indefinite" 131 repeatCount="indefinite"
125 /> 132 />
126 </circle> 133 </circle>
127 </symbol> 134 </symbol>
128 </svg> 135 </svg>
129 </body> 136 </body>
130 </html> 137 </html>
131 </> 138 </>
132 ); 139 );
133 }, 140};
134);