summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/pages/releases/[version].tsx112
-rw-r--r--src/ui/base/SplitLayout.tsx37
2 files changed, 96 insertions, 53 deletions
diff --git a/src/pages/releases/[version].tsx b/src/pages/releases/[version].tsx
index 262dac1..280925b 100644
--- a/src/pages/releases/[version].tsx
+++ b/src/pages/releases/[version].tsx
@@ -3,6 +3,7 @@ import { Page, PipelineStageError } from "corvos";
3import { strapiLoader } from "$/deps/strapi.tsx"; 3import { strapiLoader } from "$/deps/strapi.tsx";
4import { releaseStrapiSchema } from "$/schemas/releases.ts"; 4import { releaseStrapiSchema } from "$/schemas/releases.ts";
5import { BaseLayout } from "$/ui/base/BaseLayout.tsx"; 5import { BaseLayout } from "$/ui/base/BaseLayout.tsx";
6import { SplitLayout } from "$/ui/base/SplitLayout.tsx";
6import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx"; 7import { ReleaseCard } from "$/ui/components/ReleaseCard.tsx";
7import { SiteHeader } from "$/ui/components/SiteHeader.tsx"; 8import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
8import { CardList } from "$/ui/layouts/CardList.tsx"; 9import { CardList } from "$/ui/layouts/CardList.tsx";
@@ -11,6 +12,9 @@ import { HList } from "$/ui/layouts/HList.tsx";
11import { ActionButton } from "$/ui/objects/ActionButton.tsx"; 12import { ActionButton } from "$/ui/objects/ActionButton.tsx";
12import { Badge } from "$/ui/objects/Badge.tsx"; 13import { Badge } from "$/ui/objects/Badge.tsx";
13import { Body } from "$/ui/objects/Body.tsx"; 14import { Body } from "$/ui/objects/Body.tsx";
15import { Button } from "$/ui/objects/Button.tsx";
16import { Card } from "$/ui/objects/Card.tsx";
17import { CardBody } from "$/ui/objects/CardBody.tsx";
14import { Divider } from "$/ui/objects/Divider.tsx"; 18import { Divider } from "$/ui/objects/Divider.tsx";
15import { Heading } from "$/ui/objects/Heading.tsx"; 19import { Heading } from "$/ui/objects/Heading.tsx";
16import { Icon } from "$/ui/objects/Icon.tsx"; 20import { Icon } from "$/ui/objects/Icon.tsx";
@@ -39,63 +43,65 @@ export const template = site.$.template({ type: "release" }, (page, pages) => {
39 43
40 const feed = query.type(".rss").match({ type: "releases" }).one(); 44 const feed = query.type(".rss").match({ type: "releases" }).one();
41 45
42 const prev = query.type(".html").match({ type: "release" }).prev(page);
43 const next = query.type(".html").match({ type: "release" }).next(page);
44
45 return ( 46 return (
46 <BaseLayout page={page}> 47 <SplitLayout
47 <SiteHeader 48 page={page}
48 mode="compact" 49 content={
49 url={page.url} 50 <>
50 end={ 51 <Heading as="h1" class="u-mbs-0 p-name" display level="xl">
51 <div class="l-media__block"> 52 Release notes
52 <ActionButton 53 </Heading>
53 align-block
54 class="u-mbs-0"
55 href={feed.url}
56 icon={<Icon icon="rss-simple" variant="bold" />}
57 level="quiet"
58 pill
59 title="RSS Feed"
60 />
61 </div>
62 }
63 >
64 <div class="l-media__block l-media__block--main">
65 <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
66 </div>
67 </SiteHeader>
68 54
69 <Container as="main" class="u-mbs-neutralize h-entry" fixed="150" pad-block pad-inline> 55 <Body class="e-content">{{ __html: page.content }}</Body>
70 <HList aria-label="Categories"> 56 </>
71 <li> 57 }
72 <Badge as="strong" pill selected> 58 header-end={
73 <time class="dt-published" datetime={page.data.date.toISOString()}> 59 <div class="l-media__block">
74 {page.data.date.toLocaleDateString(undefined, { 60 <ActionButton
75 day: "numeric", 61 align-block
76 month: "short", 62 class="u-mbs-0"
77 year: "numeric", 63 href={feed.url}
78 })} 64 icon={<Icon icon="rss-simple" variant="bold" />}
79 </time> 65 level="quiet"
80 </Badge> 66 pill
81 </li> 67 title="RSS Feed"
82 </HList> 68 />
83 69 </div>
84 <Heading as="h1" class="u-mbs-200 p-name" display highlight level="xxl"> 70 }
85 {page.data.title} 71 >
86 </Heading> 72 <Card horizontal>
73 <CardBody class="u-pie-0">
74 <Icon icon="package" variant="fill" class="u-fs-300" />
75 </CardBody>
87 76
88 <Body class="e-content">{{ __html: page.content }}</Body> 77 <CardBody main>
89 </Container> 78 <ul class="u-c-mute">
79 <li>
80 <small>
81 <time datetime={page.data.date.toISOString()}>
82 {page.data.date.toLocaleDateString(undefined, {
83 day: "numeric",
84 month: "long",
85 year: "numeric",
86 })}
87 </time>
88 </small>
89 </li>
90 </ul>
90 91
91 <Divider level="faint" /> 92 <Heading class="u-mbs-50" as="h1" level="xl">
93 {page.data.title}
94 </Heading>
95 </CardBody>
96 </Card>
92 97
93 <Container as="footer" class="u-mbs-neutralize" fixed="150" pad-block pad-inline> 98 <Button
94 <CardList layout="grid"> 99 class="u-d-block u-mbs-200"
95 {prev && <ReleaseCard heading-level="h2" page={prev} list />} 100 href={site.$.url(`/pkg/corvos@${page.data.version}/`)}
96 {next && <ReleaseCard heading-level="h2" page={next} list />} 101 variant="primary"
97 </CardList> 102 >
98 </Container> 103 View source
99 </BaseLayout> 104 </Button>
105 </SplitLayout>
100 ); 106 );
101}); 107});
diff --git a/src/ui/base/SplitLayout.tsx b/src/ui/base/SplitLayout.tsx
new file mode 100644
index 0000000..65dff2d
--- /dev/null
+++ b/src/ui/base/SplitLayout.tsx
@@ -0,0 +1,37 @@
1import { SiteHeader } from "$/ui/components/SiteHeader.tsx";
2import { SplitView } from "$/ui/layouts/SplitView.tsx";
3import { SplitViewPanel } from "$/ui/layouts/SplitViewPanel.tsx";
4import { Heading } from "$/ui/objects/Heading.tsx";
5
6import type { Props as BaseLayoutProps } from "./BaseLayout.tsx";
7
8import { BaseLayout } from "./BaseLayout.tsx";
9
10export interface Props extends BaseLayoutProps {
11 "content"?: JSX.Element;
12 "header-end"?: JSX.Element;
13}
14
15export const SplitLayout = ({
16 children,
17 page,
18 content,
19 "header-end": headerEnd,
20 ...props
21}: Props) => (
22 <BaseLayout page={page} {...props}>
23 <SiteHeader mode="compact" url={page.url} end={headerEnd}>
24 <div class="l-media__block l-media__block--main">
25 <Heading class="u-mbs-0 u-elp">{page.data.title}</Heading>
26 </div>
27 </SiteHeader>
28
29 <SplitView as="main" class="l-container l-container--pad-i l-container--pad-b u-pbs-400">
30 <SplitViewPanel sticky side="25" min="200">
31 {children}
32 </SplitViewPanel>
33
34 <SplitViewPanel>{content}</SplitViewPanel>
35 </SplitView>
36 </BaseLayout>
37);
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-10 13:50:29 +0000