Skip to content

Commit fd314bb

Browse files
SamuNatsuSamuNatsu
committed
feat: update CAT
1 parent 831aca2 commit fd314bb

13 files changed

Lines changed: 318 additions & 76 deletions

File tree

‎contents/notifications/20260730.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
title: System Upload
2+
time: 2026-07-30T10:25:00+0800
3+
contents: |
4+
<p>Time Capsule system has been updated to Chrono Agency Terminal system</p>
5+
<p>All the assets are moved to "Database > Query Executor > Legacy"</p>

‎src/components/cat/DialogContainer.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
// --- Types ---
3+
interface Props {
4+
id: string;
5+
}
6+
7+
// --- Injects ---
8+
const { id } = Astro.props;
9+
---
10+
11+
<c-dialog
12+
class=":uno: text-white bg-black/50 h-screen w-screen hidden items-center inset-0 justify-center fixed"
13+
{id}
14+
>
15+
<div
16+
class=":uno: m-2 p-4 border-2 bg-black/80 max-w-3xl w-full relative"
17+
id="content"
18+
data-crt
19+
>
20+
<button
21+
class=":uno: i-mdi-close h-4 w-4 cursor-pointer right-0 top-0 absolute"
22+
id="btn-close"
23+
data-crt></button>
24+
<slot />
25+
</div>
26+
</c-dialog>
27+
28+
<style lang="scss" is:global>
29+
c-dialog {
30+
&[data-open] {
31+
--at-apply: "flex";
32+
}
33+
}
34+
</style>

‎src/components/cat/Navigation.astro‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
// --- Fonts ---
3+
import { css as spaceport } from "@/assets/fonts/Spaceport_2006.otf";
4+
5+
// --- Components ---
6+
import HazardArea from "./HazardArea.astro";
7+
8+
// --- Types ---
9+
interface Props {
10+
variant?: "default" | "compact";
11+
}
12+
13+
// --- Injects ---
14+
const { variant = "default" } = Astro.props;
15+
---
16+
17+
{
18+
variant === "default" ? (
19+
<nav
20+
class=":uno: flex flex-col gap-8"
21+
style={{ fontFamily: `'${spaceport.family}'` }}
22+
>
23+
<button class="cursor-pointer" id="btn-notifications" data-crt>
24+
<div class=":uno: i-mdi-bell-notification -translate-y-1" />
25+
Notifications
26+
</button>
27+
<a href="/cat/database" data-crt>
28+
<div class=":uno: i-mdi-database-search -translate-y-1" />
29+
Database
30+
</a>
31+
<div class=":uno: opacity-50 inline-flex gap-1 items-center">
32+
<div class=":uno: inline-flex gap-1 items-center" data-crt>
33+
<div class=":uno: i-mdi-box-variant-closed -translate-y-1" />
34+
Registry
35+
</div>
36+
<HazardArea class=":uno: opacity-50 h-12 w-300px translate-x-[-25%]" />
37+
</div>
38+
<div class=":uno: opacity-50 inline-flex gap-1 items-center">
39+
<div class=":uno: inline-flex gap-1 items-center" data-crt>
40+
<div class=":uno: i-mdi-done-all -translate-y-1" />
41+
Submission
42+
</div>
43+
<HazardArea class=":uno: opacity-50 h-12 w-300px translate-x-[-25%]" />
44+
</div>
45+
</nav>
46+
) : (
47+
<nav class=":uno: flex gap-8 max-md:mt-4 md:(ml-8 pb-4 self-end)">
48+
<button class="cursor-pointer" id="btn-notifications" data-crt>
49+
<div class="i-mdi-bell-notification" />
50+
</button>
51+
<a href="/cat/database" data-crt>
52+
<div class="i-mdi:database-search" />
53+
</a>
54+
<div class=":uno: opacity-50 inline-flex gap-1 items-center relative">
55+
<div class="i-mdi-box-variant-closed" />
56+
<HazardArea class=":uno: opacity-50 inset-0" />
57+
</div>
58+
<div class=":uno: opacity-50 inline-flex gap-1 items-center relative">
59+
<div class="i-mdi-done-all" />
60+
<HazardArea class=":uno: opacity-50 inset-0" />
61+
</div>
62+
</nav>
63+
)
64+
}
65+
66+
<style lang="scss">
67+
a,
68+
button {
69+
--at-apply: "opacity-50 inline-flex gap-1 transition-opacity items-center hover:opacity-100";
70+
}
71+
72+
div[class*="i-mdi"] {
73+
--at-apply: "h-8 w-8";
74+
}
75+
</style>
76+
77+
<script>
78+
import type { CDialog } from "@/components/cat/web/dialog-container";
79+
80+
// --- On page load ---
81+
document.addEventListener("astro:page-load", () => {
82+
document
83+
.querySelector<HTMLButtonElement>("#btn-notifications")
84+
?.addEventListener("click", () => {
85+
const dia = document.querySelector<CDialog>("#dialog-notifications");
86+
if (!dia) return;
87+
88+
dia.open();
89+
});
90+
});
91+
</script>

‎src/components/cat/dialogs/Notifications.astro‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
import { getCollection } from "astro:content";
3+
import dayjs from "dayjs";
4+
5+
// --- Fonts ---
6+
import { css as spaceport } from "@/assets/fonts/Spaceport_2006.otf";
7+
8+
// --- Components ---
9+
import DialogContainer from "../DialogContainer.astro";
10+
11+
// --- Types ---
12+
interface Props {
13+
id: string;
14+
}
15+
16+
// --- Injects ---
17+
const { id } = Astro.props;
18+
19+
// --- Constants ---
20+
const notifications = (await getCollection("notifications")).toSorted(
21+
(a, b) => b.data.time.getTime() - a.data.time.getTime(),
22+
);
23+
---
24+
25+
<DialogContainer {id}>
26+
<div data-crt>
27+
<h2
28+
class=":uno: mb-4 flex gap-1"
29+
style={{ fontFamily: `'${spaceport.family}'` }}
30+
>
31+
<div class=":uno: i-mdi-bell-notification h-5 w-5"></div>Notifications
32+
</h2>
33+
<div class=":uno: max-h-[calc(100vh-6rem)] overflow-y-auto">
34+
{
35+
notifications.map(({ data }) => (
36+
<section class=":uno: py-1 pl-4 border-l-2">
37+
<h3 class="mb-2">
38+
<span class=":uno: font-bold mr-2">{data.title}</span>
39+
<time class=":uno: text-xs opacity-50">
40+
{dayjs.utc(data.time).format()}
41+
</time>
42+
</h3>
43+
<div set:html={data.contents} />
44+
</section>
45+
))
46+
}
47+
</div>
48+
</div>
49+
</DialogContainer>

‎src/components/cat/web/dialog-container.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { animate } from "animejs";
2+
3+
// --- Export class ---
4+
export class CDialog extends HTMLElement {
5+
public connectedCallback() {
6+
this.querySelector<HTMLButtonElement>("#btn-close")?.addEventListener(
7+
"click",
8+
() => this.close(),
9+
);
10+
}
11+
12+
public open() {
13+
animate(this.querySelector("#content")!, {
14+
scaleY: [0, 1],
15+
duration: 100,
16+
onBegin: () => {
17+
this.dataset.open = "1";
18+
},
19+
});
20+
}
21+
22+
public close() {
23+
animate(this.querySelector("#content")!, {
24+
scaleY: [1, 0],
25+
duration: 100,
26+
onComplete: () => {
27+
delete this.dataset.open;
28+
},
29+
});
30+
}
31+
}
32+
33+
// --- Register element ---
34+
customElements.define("c-dialog", CDialog);

‎src/components/cat/web/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./dialog-container";

‎src/content.config.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ const authors = defineCollection({
2020
}),
2121
});
2222

23+
const notifications = defineCollection({
24+
loader: glob({ pattern: "**/[^_]*.yaml", base: "contents/notifications" }),
25+
schema: z.object({
26+
title: z.string().min(1),
27+
time: z.string().transform((s) => new Date(s)),
28+
contents: z.string(),
29+
}),
30+
});
31+
2332
const posts = defineCollection({
2433
loader: glob({ pattern: "**/[^_]*.md", base: "contents/posts" }),
2534
schema: z.object({
@@ -46,4 +55,4 @@ const puzzles = defineCollection({
4655
});
4756

4857
// Export collections
49-
export const collections = { authors, posts, puzzles };
58+
export const collections = { authors, notifications, posts, puzzles };

‎src/layouts/cat/BaseLayout.astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import "@/styles/base.scss";
66
import { ClientRouter } from "astro:transitions";
77
import CRT from "@/components/cat/CRT.astro";
88
import Loader from "@/components/cat/Loader.astro";
9+
import Notifications from "@/components/cat/dialogs/Notifications.astro";
910
import Preloader from "@/components/Preloader.astro";
1011
1112
// --- Fonts ---
@@ -36,6 +37,7 @@ const fontFamily =
3637
<slot name="head-links" />
3738

3839
<!-- Styles -->
40+
<script src="@/components/cat/web"></script>
3941
<slot name="head-styles" />
4042

4143
<!-- Scripts -->
@@ -49,6 +51,7 @@ const fontFamily =
4951
<CRT>
5052
<Loader />
5153
<slot />
54+
<Notifications id="dialog-notifications" />
5255
</CRT>
5356
</body>
5457
</html>

0 commit comments

Comments
 (0)