haetae/astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get updates styled

Browse Source
This commit is contained in:
haetae 2025-09-04 03:12:25 -04:00
parent f12810a424
commit c8cce26569
14 changed files with 157 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/guild-bbs-buttons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 875 B

12
src/components/Top.astro
View File

@ -1,12 +0,0 @@
<a id="top" href="#">
back to top
<!-- render this after scrolling -->
</a>
<style>
#top {
position: fixed;
bottom: 1rem;
right: 1rem;
}
</style>

78
src/components/UpdateCard.astro Normal file
View File

@ -0,0 +1,78 @@
---
import formatDate from '@/utils/formatDate';
interface Props {
title: string;
date: Date | string;
}
const { title, date } = Astro.props;
---
<article class="update card">
<header>
<h3><span>{title}</span></h3>
<time datetime={formatDate(date, true)}>{formatDate(date, false, "MM/DD/YY")}</time>
</header>
<div class="content inner">
<slot />
</div>
</article>
<style>
/* UPDATE CARDS */
.update {
padding: 4px 2px;
background-color: var(--bg-0);
border-bottom: 2px solid var(--bg-4);
header {
display: grid;
grid-template-columns: 2fr 1fr;
text-align: center;
& > * {
font: normal 1.375rem var(--dotum-11-font);
padding: 6px;
}
h3 {
background-color: var(--bg-1);
container: update-title / inline-size;
span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
time { background-color: var(--bg-3); }
}
.inner {
border: 2px solid var(--border-2);
border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
padding: 4px;
background-color: var(--bg-0);
}
.content {
margin: 4px 2px 2px;
padding: 6px;
a {
color: var(--normal-color);
text-decoration-thickness: 2px;
&:active, &:focus { color: var(--active-color); }
&:visited { color: var(--active-border); }
}
}
&:last-of-type {
border-bottom: 2px solid var(--border-2);
}
}
</style>

80
src/components/Updates.astro
View File

@ -1,3 +1,6 @@
---
import UpdateCard from "./UpdateCard.astro";
---
<section id="updates">
<header>
<h1>Updates</h1>
@ -13,16 +16,13 @@
</div>
</h2>
<article class="update card">
<header>
<h3><span>update title</span></h3>
<time datetime="">05/01/25</time>
</header>
<UpdateCard title="redo gallery and guestbook" date="2024-05-10">
<p>redid <a href="/gallery">gallery page</a> to make adding images easier and added alpinejs to <a href="/guestbook">guestbook</a> for fetching entries live</p>
</UpdateCard>
<div class="content inner">
<p>some stuff happened</p>
</div>
</article>
<UpdateCard title="changed name" date="2024-05-09">
<p>changed name from invicta to haetae since invicta doesn't fit anymore</p>
</UpdateCard>
<footer id="updates-pagination">
<a id="previous" aria-label="go to previous post" href="javascript:void(0)">
@ -93,60 +93,6 @@
border: none;
}
}
/* UPDATE CARDS */
.update {
padding: 4px 2px;
background-color: var(--bg-0);
border-bottom: 2px solid var(--bg-4);
header {
display: grid;
grid-template-columns: 2fr 1fr;
text-align: center;
& > * {
font: normal 1.375rem var(--dotum-11-font);
padding: 6px;
}
h3 {
max-width: 100%;
background-color: var(--bg-1);
span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (max-width: 560px) {
margin: 0 auto;
max-width: 15ch;
}
}
}
/* 15ch */
time { background-color: var(--bg-3); }
}
.inner {
border: 2px solid var(--border-2);
border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
padding: 4px;
background-color: var(--bg-0);
}
.content {
margin: 4px 2px 2px;
padding: 6px;
}
&:last-of-type {
border-bottom: 2px solid var(--border-2);
}
}
}
/* UPDATES PAGINATION */
@ -168,6 +114,7 @@
.arrow { background-position: 0 0; }
&:hover .arrow { background-position: -36px 0; }
&:active .arrow, &:focus .arrow { background-position: -72px 0; }
&:disabled .arrow { background-position: -108px 0; }
.title {
border-left: none;
@ -180,9 +127,10 @@
grid-column: 2 / -1;
justify-self: right;
.arrow { background-position: -108px 0; }
&:hover .arrow { background-position: -144px 0; }
&:active .arrow, &:focus .arrow { background-position: -180px 0; }
.arrow { background-position: -144px 0; }
&:hover .arrow { background-position: -180px 0; }
&:active .arrow, &:focus .arrow { background-position: -216px 0; }
&:disabled .arrow { background-position: -252px 0; }
.title {
position: relative;

18
src/content/config.ts
View File

@ -23,7 +23,10 @@ function slugify(input: string) {
const parser = marked.use({ gfm: true, breaks: true, });
const blog = defineCollection({
loader: glob({ pattern: "*.{md,mdx}", base: "./src/content/blog" }),
loader: glob({
pattern: "*.{md,mdx}",
base: "./src/content/blog"
}),
schema: rssSchema.extend({
currently: z.object({
mood: z.enum(moods).optional(),
@ -98,4 +101,15 @@ const fics = defineCollection({
}),
});
export const collections = { blog, fics, chapters };
const updates = defineCollection({
loader: glob({
pattern: "*.{md,mdx}",
base: "status",
}),
schema: z.object({
title: z.string(),
date: z.coerce.date(),
}),
});
export const collections = { blog, fics, chapters, updates };

1
src/pages/fics/[ficId]/[chapterId].astro
View File

@ -24,6 +24,7 @@ const { Content, remarkPluginFrontmatter } = await render(chapter);
const chapters = await getCollection("chapters", ({ id }) => id.split("/")[0] === ficId);
const fic = await getCollection("fics", ({ id }) => id === ficId);
chapters.sort((a, b) => a.data.sortOrder - b.data.sortOrder);
const current = chapters.findIndex(chapter => chapter.id === `${ficId}/${chapterId}`);
const next = current + 1 === chapters.length ? undefined : chapters[current + 1];

18
src/pages/fics/index.astro
View File

@ -14,21 +14,21 @@ chapters.sort((a, b) => b.data.publishedAt.valueOf() - a.data.publishedAt.valueO
<h2>recent updates</h2>
<ul>
{chapters.map(post => (
{chapters.map(chapter => (
<li>
<time datetime={formatDate(post.data.publishedAt, true)}>
{formatDate(post.data.publishedAt, false, "MMMM DD, YYYY")}
<time datetime={formatDate(chapter.data.publishedAt, true)}>
{formatDate(chapter.data.publishedAt, false, "MMMM DD, YYYY")}
</time>
{fics.some(({ data }) => data.chapters?.some(({ id }) => id === post.id))
{fics.some(({ data }) => data.chapters?.some(({ id }) => id === chapter.id))
? <>
<a href={`/fics/${post.id}`}>{post.data.title}</a>
<a href={`/fics/${chapter.id}`}>{chapter.data.title}</a>
in
<a href={`/fics/${post.id.split("/")[0]}`}>
{fics.filter(({ id }) => id === post.id.split("/")[0])[0].data.title}
<a href={`/fics/${chapter.id.split("/")[0]}`}>
{fics.find(({ id }) => id === chapter.id.split("/")[0])?.data.title}
</a>
</>
: <a href={`/fics/${post.id.split("/")[0]}`}>
{fics.filter(({ id }) => id === post.id.split("/")[0])[0].data.title}
: <a href={`/fics/${chapter.id.split("/")[0]}`}>
{fics.find(({ id }) => id === chapter.id.split("/")[0])?.data.title}
</a>}
</li>
))}

9
src/pages/index.astro
View File

@ -98,6 +98,15 @@ import buttons from "$/guild-bbs-buttons.png";
}
h1 { font: bold 1rem var(--arial-font); }
a {
color: var(--normal-color);
text-decoration-thickness: 2px;
&:active, &:focus {
color: var(--active-color);
text-decoration-color: var(--active-border);
}
}
.inner {
border: 2px solid var(--border-2);
border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;

5
status/changelog01.md Normal file
View File

@ -0,0 +1,5 @@
---
title: changed name
date: 2024-05-09
---
changed name from invicta to haetae since invicta doesn't fit anymore

5
status/changelog02.md Normal file
View File

@ -0,0 +1,5 @@
---
title: redid gallery and guestbook
date: 2024-05-10
---
redid the [gallery](/gallery) to make adding images easier and added alpinejs to [guestbook](/guestbook) for fetching entries live

5
status/changelog03.md Normal file
View File

@ -0,0 +1,5 @@
---
title: minfilia shrine
date: 2024-05-13
---
make wip layout for minfilia shrine, added history and Thoughts(tm) about her

5
status/changelog04.md Normal file
View File

@ -0,0 +1,5 @@
---
title: redid homepage
date: 2024-05-19
---
finally got around to making homepage pretty-ish

5
status/changelog05.md Normal file
View File

@ -0,0 +1,5 @@
---
title: add masaki and blog feed
date: 2024-05-23
---
make a wip layout for masaki's page and added a feed for the blog

5
status/changelog06.md Normal file
View File

@ -0,0 +1,5 @@
---
title: add links and fix stuff
date: 2024-05-24
---
added links in more and fixed some stuff in [guestbook](/guestbook) and [blog](/blog)