init
This commit is contained in:
commit
f9ab31c247
62 changed files with 7894 additions and 0 deletions
66
src/components/BaseHead.astro
Normal file
66
src/components/BaseHead.astro
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '~/styles/global.css';
|
||||
import type { ImageMetadata } from 'astro';
|
||||
import FallbackImage from '~/assets/blog-placeholder-1.jpg';
|
||||
import { DEFAULT_LOCALE, type Locale, SITE } from '~/consts';
|
||||
import { getLocaleFromUrl, switchLocalePath } from '~/i18n/ui';
|
||||
import { Font } from 'astro:assets';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: ImageMetadata;
|
||||
locale?: Locale;
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
image = FallbackImage,
|
||||
locale = getLocaleFromUrl(Astro.url) ?? DEFAULT_LOCALE,
|
||||
} = Astro.props;
|
||||
|
||||
const otherLocale: Locale = locale === 'de' ? 'en' : 'de';
|
||||
const alternateHref = new URL(switchLocalePath(Astro.url.pathname, otherLocale), Astro.site);
|
||||
const rssHref = new URL(locale === 'de' ? 'rss.xml' : 'en/rss.xml', Astro.site);
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<link rel="alternate" type="application/rss+xml" title={SITE[locale].title} href={rssHref} />
|
||||
<link rel="alternate" hreflang={locale} href={canonicalURL} />
|
||||
<link rel="alternate" hreflang={otherLocale} href={alternateHref} />
|
||||
<link rel="alternate" hreflang="x-default" href={new URL('/', Astro.site)} />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<Font cssVariable="--font-atkinson" preload />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content={locale === 'de' ? 'de_DE' : 'en_US'} />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image.src, Astro.url)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
|
||||
62
src/components/CategoriesPage.astro
Normal file
62
src/components/CategoriesPage.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
import BaseLayout from '~/layouts/BaseLayout.astro';
|
||||
import { type Locale, SITE } from '~/consts';
|
||||
import { categoryHref, getCategoriesByLocale, getPostsByCategory } from '~/i18n/posts';
|
||||
import { t } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const categories = await getCategoriesByLocale(locale);
|
||||
const withCounts = await Promise.all(
|
||||
categories.map(async (c) => ({ category: c, count: (await getPostsByCategory(c)).length })),
|
||||
);
|
||||
|
||||
const pageTitle = `${t(locale, 'categories.title')} — ${SITE[locale].title}`;
|
||||
const pageDescription = t(locale, 'categories.description');
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
locale={locale}
|
||||
bodyClass="category-index"
|
||||
>
|
||||
<article class="prose">
|
||||
<h1>{t(locale, 'categories.title')}</h1>
|
||||
<p>{pageDescription}</p>
|
||||
<ul>
|
||||
{
|
||||
withCounts.map(({ category, count }) => (
|
||||
<li>
|
||||
<a href={categoryHref(category)}>
|
||||
<strong>{category.data.name}</strong>
|
||||
</a>
|
||||
<span class="count"> ({count})</span>
|
||||
{category.data.description && <p>{category.data.description}</p>}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
body.category-index main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: 2em auto;
|
||||
}
|
||||
body.category-index ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
body.category-index li {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
body.category-index .count {
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
</style>
|
||||
88
src/components/CategoryDetailPage.astro
Normal file
88
src/components/CategoryDetailPage.astro
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import FormattedDate from '~/components/FormattedDate.astro';
|
||||
import BaseLayout from '~/layouts/BaseLayout.astro';
|
||||
import { type Locale, SITE } from '~/consts';
|
||||
import { getPostsByCategory, postSlug } from '~/i18n/posts';
|
||||
import { localizePath, t } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
category: CollectionEntry<'categories'>;
|
||||
}
|
||||
|
||||
const { locale, category } = Astro.props;
|
||||
const posts = await getPostsByCategory(category);
|
||||
const pageTitle = `${category.data.name} — ${SITE[locale].title}`;
|
||||
const pageDescription =
|
||||
category.data.description ?? `${t(locale, 'category.postsIn')} ${category.data.name}`;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
locale={locale}
|
||||
entry={category}
|
||||
bodyClass="category-detail"
|
||||
>
|
||||
<article class="prose">
|
||||
<h1>{category.data.name}</h1>
|
||||
{category.data.description && <p class="lead">{category.data.description}</p>}
|
||||
<h2>{t(locale, 'category.postsIn')} {category.data.name}</h2>
|
||||
{
|
||||
posts.length === 0 ? (
|
||||
<p>{t(locale, 'category.noPosts')}</p>
|
||||
) : (
|
||||
<ul>
|
||||
{posts.map((post) => (
|
||||
<li>
|
||||
<a href={localizePath(`/${postSlug(post)}/`, locale)}>
|
||||
{post.data.heroImage && (
|
||||
<Image
|
||||
width={320}
|
||||
height={160}
|
||||
src={post.data.heroImage}
|
||||
alt=""
|
||||
transition:name={`hero-${post.id}`}
|
||||
/>
|
||||
)}
|
||||
<h3>{post.data.title}</h3>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} locale={locale} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
body.category-detail main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: 2em auto;
|
||||
}
|
||||
body.category-detail ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
body.category-detail li {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
body.category-detail li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
body.category-detail li img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
body.category-detail .date {
|
||||
color: rgb(var(--gray));
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
15
src/components/Footer.astro
Normal file
15
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Adrian Altner
|
||||
</footer>
|
||||
<style>
|
||||
footer {
|
||||
padding: 2em 1em 6em 1em;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
color: rgb(var(--gray));
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
22
src/components/FormattedDate.astro
Normal file
22
src/components/FormattedDate.astro
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
import { DEFAULT_LOCALE, type Locale } from '~/consts';
|
||||
import { getLocaleFromUrl } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
date: Date;
|
||||
locale?: Locale;
|
||||
}
|
||||
|
||||
const { date, locale = getLocaleFromUrl(Astro.url) ?? DEFAULT_LOCALE } = Astro.props;
|
||||
const tag = locale === 'de' ? 'de-DE' : 'en-US';
|
||||
---
|
||||
|
||||
<time datetime={date.toISOString()}>
|
||||
{
|
||||
date.toLocaleDateString(tag, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
</time>
|
||||
181
src/components/Header.astro
Normal file
181
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
import { DEFAULT_LOCALE, type Locale, SITE } from '~/consts';
|
||||
import {
|
||||
aboutSegment,
|
||||
categoryIndexSegment,
|
||||
entryHref,
|
||||
findTagBySlug,
|
||||
findTranslation,
|
||||
tagHref,
|
||||
tagIndexSegment,
|
||||
tagSegment,
|
||||
} from '~/i18n/posts';
|
||||
import { getLocaleFromUrl, localizePath, switchLocalePath, t } from '~/i18n/ui';
|
||||
import HeaderLink from '~/components/HeaderLink.astro';
|
||||
|
||||
interface Props {
|
||||
locale?: Locale;
|
||||
/** The current page's content entry, if any — used to resolve a translated language-switch link. */
|
||||
entry?: CollectionEntry<'posts' | 'categories'>;
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
const locale: Locale = Astro.props.locale ?? getLocaleFromUrl(Astro.url);
|
||||
const otherLocale: Locale = locale === 'de' ? 'en' : 'de';
|
||||
const homeHref = localizePath('/', locale);
|
||||
const aboutHref = localizePath(`/${aboutSegment(locale)}`, locale);
|
||||
const categoriesHref = localizePath(`/${categoryIndexSegment(locale)}`, locale);
|
||||
const tagsHref = localizePath(`/${tagIndexSegment(locale)}`, locale);
|
||||
|
||||
const translated = entry ? await findTranslation(entry, otherLocale) : undefined;
|
||||
|
||||
// If we're on a tag detail page, verify the tag exists in the target locale —
|
||||
// otherwise the switched URL would 404. Fall back to the target tags index.
|
||||
async function resolveSwitchHref(): Promise<string> {
|
||||
if (translated) return entryHref(translated);
|
||||
if (entry) return localizePath('/', otherLocale);
|
||||
const parts = Astro.url.pathname.split('/').filter(Boolean);
|
||||
const localePrefix = parts[0] === locale ? 1 : 0;
|
||||
const first = parts[localePrefix];
|
||||
const slug = parts[localePrefix + 1];
|
||||
if (first === tagSegment(locale) && slug) {
|
||||
const target = await findTagBySlug(otherLocale, slug);
|
||||
return target
|
||||
? tagHref(otherLocale, target)
|
||||
: localizePath(`/${tagIndexSegment(otherLocale)}`, otherLocale);
|
||||
}
|
||||
return switchLocalePath(Astro.url.pathname, otherLocale);
|
||||
}
|
||||
const switchHref = await resolveSwitchHref();
|
||||
---
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<h2><a href={homeHref}>{SITE[locale].title}</a></h2>
|
||||
<div class="internal-links">
|
||||
<HeaderLink href={homeHref}>{t(locale, 'nav.home')}</HeaderLink>
|
||||
<HeaderLink href={aboutHref}>{t(locale, 'nav.about')}</HeaderLink>
|
||||
<HeaderLink href={categoriesHref}>{t(locale, 'nav.categories')}</HeaderLink>
|
||||
<HeaderLink href={tagsHref}>{t(locale, 'nav.tags')}</HeaderLink>
|
||||
</div>
|
||||
<a
|
||||
class={`lang-toggle lang-toggle--${locale}`}
|
||||
href={switchHref}
|
||||
hreflang={otherLocale}
|
||||
lang={otherLocale}
|
||||
aria-label={t(locale, `lang.${otherLocale}`)}
|
||||
>
|
||||
<span class="lang-toggle__thumb" aria-hidden="true"></span>
|
||||
<span class={`lang-toggle__label${locale === 'de' ? ' is-active' : ''}`}>DE</span>
|
||||
<span class={`lang-toggle__label${locale === 'en' ? ' is-active' : ''}`}>EN</span>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
function wireLangToggle() {
|
||||
const toggle = document.querySelector<HTMLAnchorElement>('.lang-toggle');
|
||||
toggle?.addEventListener('click', () => toggle.classList.add('is-switching'), { once: true });
|
||||
}
|
||||
wireLangToggle();
|
||||
document.addEventListener('astro:page-load', wireLangToggle);
|
||||
</script>
|
||||
<style>
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
background: white;
|
||||
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h2 a,
|
||||
h2 a.active {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
nav a {
|
||||
padding: 1em 0.5em;
|
||||
color: var(--black);
|
||||
border-bottom: 4px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a.active {
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
nav a.lang-toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background: rgba(var(--gray-light), 0.7);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'tnum';
|
||||
user-select: none;
|
||||
}
|
||||
nav a.lang-toggle:hover {
|
||||
background: rgba(var(--gray-light), 1);
|
||||
}
|
||||
.lang-toggle__thumb {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
width: calc(50% - 3px);
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 1px 3px rgba(var(--black), 0.18);
|
||||
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.lang-toggle--en .lang-toggle__thumb {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.lang-toggle--de.is-switching .lang-toggle__thumb {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.lang-toggle--en.is-switching .lang-toggle__thumb {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.lang-toggle__label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
flex: 1;
|
||||
width: 2.2em;
|
||||
padding: 0.6em 0 0.5em;
|
||||
text-align: center;
|
||||
color: rgb(var(--gray));
|
||||
transition: color 280ms ease;
|
||||
}
|
||||
.lang-toggle__label.is-active {
|
||||
color: white;
|
||||
}
|
||||
.lang-toggle.is-switching .lang-toggle__label.is-active {
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
.lang-toggle.is-switching .lang-toggle__label:not(.is-active) {
|
||||
color: white;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lang-toggle__thumb,
|
||||
.lang-toggle__label {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
src/components/HeaderLink.astro
Normal file
42
src/components/HeaderLink.astro
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
import { LOCALES } from '~/consts';
|
||||
|
||||
type Props = HTMLAttributes<'a'>;
|
||||
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
|
||||
function stripTrailing(p: string) {
|
||||
return p.length > 1 && p.endsWith('/') ? p.slice(0, -1) : p;
|
||||
}
|
||||
|
||||
function stripBase(p: string) {
|
||||
const base = import.meta.env.BASE_URL;
|
||||
if (base && base !== '/' && p.startsWith(base)) return p.slice(base.length - 1) || '/';
|
||||
return p;
|
||||
}
|
||||
|
||||
const pathname = stripTrailing(stripBase(Astro.url.pathname));
|
||||
const target = stripTrailing(String(href ?? ''));
|
||||
|
||||
// Locale home URLs (`/`, `/en`) should only activate on exact match; deeper
|
||||
// routes activate when the pathname equals or is nested under the href.
|
||||
const localeHomes = new Set(['/', ...LOCALES.map((l) => `/${l}`)]);
|
||||
const isActive = localeHomes.has(target)
|
||||
? pathname === target
|
||||
: pathname === target || pathname.startsWith(target + '/');
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.active {
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
118
src/components/HomePage.astro
Normal file
118
src/components/HomePage.astro
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import FormattedDate from '~/components/FormattedDate.astro';
|
||||
import BaseLayout from '~/layouts/BaseLayout.astro';
|
||||
import { type Locale, SITE } from '~/consts';
|
||||
import { getPostsByLocale, postSlug } from '~/i18n/posts';
|
||||
import { localizePath } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const posts = await getPostsByLocale(locale);
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={SITE[locale].title}
|
||||
description={SITE[locale].description}
|
||||
locale={locale}
|
||||
bodyClass="home"
|
||||
>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={localizePath(`/${postSlug(post)}/`, locale)}>
|
||||
{post.data.heroImage && (
|
||||
<Image
|
||||
width={720}
|
||||
height={360}
|
||||
src={post.data.heroImage}
|
||||
alt=""
|
||||
transition:name={`hero-${post.id}`}
|
||||
/>
|
||||
)}
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} locale={locale} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
body.home main {
|
||||
width: 960px;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
ul li * {
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
ul li:first-child {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child img {
|
||||
width: 100%;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 2.369rem;
|
||||
}
|
||||
ul li img {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
ul li a:hover h4,
|
||||
ul li a:hover .date {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
ul a:hover img {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
ul {
|
||||
gap: 0.5em;
|
||||
}
|
||||
ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
84
src/components/TagDetailPage.astro
Normal file
84
src/components/TagDetailPage.astro
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import FormattedDate from '~/components/FormattedDate.astro';
|
||||
import BaseLayout from '~/layouts/BaseLayout.astro';
|
||||
import { type Locale, SITE } from '~/consts';
|
||||
import { type TagEntry, getPostsByTag, postSlug } from '~/i18n/posts';
|
||||
import { localizePath, t } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
tag: TagEntry;
|
||||
}
|
||||
|
||||
const { locale, tag } = Astro.props;
|
||||
const posts = await getPostsByTag(locale, tag.slug);
|
||||
const pageTitle = `${tag.name} — ${SITE[locale].title}`;
|
||||
const pageDescription = `${t(locale, 'tag.postsTagged')} ${tag.name}`;
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
locale={locale}
|
||||
bodyClass="tag-detail"
|
||||
>
|
||||
<article class="prose">
|
||||
<h1>{tag.name}</h1>
|
||||
<h2>{t(locale, 'tag.postsTagged')} {tag.name}</h2>
|
||||
{
|
||||
posts.length === 0 ? (
|
||||
<p>{t(locale, 'tag.noPosts')}</p>
|
||||
) : (
|
||||
<ul>
|
||||
{posts.map((post) => (
|
||||
<li>
|
||||
<a href={localizePath(`/${postSlug(post)}/`, locale)}>
|
||||
{post.data.heroImage && (
|
||||
<Image
|
||||
width={320}
|
||||
height={160}
|
||||
src={post.data.heroImage}
|
||||
alt=""
|
||||
transition:name={`hero-${post.id}`}
|
||||
/>
|
||||
)}
|
||||
<h3>{post.data.title}</h3>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} locale={locale} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
body.tag-detail main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: 2em auto;
|
||||
}
|
||||
body.tag-detail ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
body.tag-detail li {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
body.tag-detail li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
body.tag-detail li img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
body.tag-detail .date {
|
||||
color: rgb(var(--gray));
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
57
src/components/TagsPage.astro
Normal file
57
src/components/TagsPage.astro
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
import BaseLayout from '~/layouts/BaseLayout.astro';
|
||||
import { type Locale, SITE } from '~/consts';
|
||||
import { getTagsByLocale, tagHref } from '~/i18n/posts';
|
||||
import { t } from '~/i18n/ui';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const tags = await getTagsByLocale(locale);
|
||||
const pageTitle = `${t(locale, 'tags.title')} — ${SITE[locale].title}`;
|
||||
const pageDescription = t(locale, 'tags.description');
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
locale={locale}
|
||||
bodyClass="tag-index"
|
||||
>
|
||||
<article class="prose">
|
||||
<h1>{t(locale, 'tags.title')}</h1>
|
||||
<p>{pageDescription}</p>
|
||||
<ul class="tag-cloud">
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<li>
|
||||
<a href={tagHref(locale, tag)}>
|
||||
<strong>{tag.name}</strong>
|
||||
</a>
|
||||
<span class="count"> ({tag.count})</span>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
body.tag-index main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: 2em auto;
|
||||
}
|
||||
body.tag-index .tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em 1em;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
body.tag-index .count {
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue