@anglefeint/astro-theme 0.1.12 → 0.1.14

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@anglefeint/astro-theme",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "description": "Anglefeint core theme package for Astro",
+  "keywords": [
+    "astro",
+    "astro-theme",
+    "blog",
+    "portfolio",
+    "cyberpunk",
+    "hacker",
+    "matrix"
+  ],
   "license": "MIT",
   "files": [
     "src/index.ts",
@@ -16,8 +25,7 @@
     "src/styles",
     "src/assets/theme",
     "src/cli-new-post.mjs",
-    "src/cli-new-page.mjs",
-    "public"
+    "src/cli-new-page.mjs"
   ],
   "bin": {
     "anglefeint-new-post": "src/cli-new-post.mjs",
@@ -31,7 +39,6 @@
     "./i18n/*": "./src/i18n/*",
     "./styles/*": "./src/styles/*",
     "./assets/*": "./src/assets/*",
-    "./public/*": "./public/*",
     "./content-schema": "./src/content-schema.ts",
     "./consts": "./src/consts.ts"
   },

package/src/components/shared/CommonFooter.astro

@@ -15,10 +15,11 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
 
 <footer>
 	&copy; {today.getFullYear()} {SITE_TITLE}. {tagline}
-	{SOCIAL_LINKS.length > 0 && (
-		<div class="social-links">
-			<SocialMenu links={SOCIAL_LINKS} />
-		</div>
+	<div class="social-links">
+		<SocialMenu links={SOCIAL_LINKS} />
+	</div>
+	{import.meta.env.DEV && SOCIAL_LINKS.length === 0 && (
+		<p class="social-hint">Configure social links in <code>src/site.config.ts</code></p>
 	)}
 	{scanlines && <div class="ai-scanlines" aria-hidden="true"></div>}
 </footer>
@@ -36,6 +37,16 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
 		gap: 1em;
 		margin-top: 1em;
 	}
+	.social-hint {
+		margin: 0.6rem 0 0;
+		font-size: 0.78rem;
+		color: var(--chrome-text-muted, rgb(var(--text-muted)));
+		opacity: 0.82;
+	}
+	.social-hint code {
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.75rem;
+	}
 	.social-links a {
 		text-decoration: none;
 		color: var(--chrome-text-muted, rgb(var(--text-muted)));

package/src/components/shared/CommonHeader.astro

@@ -151,53 +151,17 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
 		gap: 0.4rem;
 		position: relative;
 		flex-wrap: nowrap;
-	}
-	.lang-switcher {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.2rem 0.4rem;
-		margin-right: 0.1rem;
-		border: 1px solid rgba(132, 214, 255, 0.2);
-		border-radius: 999px;
-		background: rgba(6, 16, 30, 0.35);
-		flex-shrink: 0;
-	}
-	.lang-label {
-		display: inline-block;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		font-size: 0.6rem;
-		text-transform: uppercase;
-		letter-spacing: 0.12em;
-		color: rgba(190, 226, 248, 0.78);
-		white-space: nowrap;
-	}
-	.lang-select {
-		appearance: none;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		background:
-			linear-gradient(45deg, transparent 50%, rgba(204, 236, 252, 0.82) 50%) calc(100% - 0.9rem) 50% / 0.35rem 0.35rem no-repeat,
-			linear-gradient(135deg, rgba(204, 236, 252, 0.82) 50%, transparent 50%) calc(100% - 0.7rem) 50% / 0.35rem 0.35rem no-repeat,
-			rgba(9, 22, 40, 0.68);
-		border: 1px solid rgba(132, 214, 255, 0.2);
-		border-radius: 999px;
-		padding: 0.2rem 1.45rem 0.2rem 0.55rem;
-		min-width: 6rem;
-		font-size: 0.62rem;
-		line-height: 1;
-		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-		color: rgba(204, 236, 252, 0.86);
-		cursor: pointer;
-	}
-	.lang-select:focus {
-		outline: none;
-		border-color: rgba(132, 214, 255, 0.5);
-		box-shadow: 0 0 0 2px rgba(98, 180, 228, 0.18);
-	}
-	.lang-select option {
-		color: #ccecfb;
-		background: #0b1c32;
+		--lang-switcher-border: rgba(132, 214, 255, 0.2);
+		--lang-switcher-bg: rgba(6, 16, 30, 0.35);
+		--lang-label-color: rgba(190, 226, 248, 0.78);
+		--lang-select-arrow: rgba(204, 236, 252, 0.82);
+		--lang-select-bg: rgba(9, 22, 40, 0.68);
+		--lang-select-border: rgba(132, 214, 255, 0.2);
+		--lang-select-text: rgba(204, 236, 252, 0.86);
+		--lang-select-focus-border: rgba(132, 214, 255, 0.5);
+		--lang-select-focus-ring: rgba(98, 180, 228, 0.18);
+		--lang-select-option-text: #ccecfb;
+		--lang-select-option-bg: #0b1c32;
 	}
 	.nav-status {
 		display: none;

package/src/components/shared/LangSwitcher.astro

@@ -33,3 +33,60 @@ const { label, currentLocale, options } = Astro.props as Props;
 		}
 	</select>
 </div>
+
+<style>
+	.lang-switcher {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.2rem 0.4rem;
+		margin-right: 0.1rem;
+		border: 1px solid var(--lang-switcher-border, rgba(132, 214, 255, 0.2));
+		border-radius: 999px;
+		background: var(--lang-switcher-bg, rgba(6, 16, 30, 0.35));
+		flex-shrink: 0;
+	}
+	.lang-label {
+		display: inline-block;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		font-size: 0.6rem;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		color: var(--lang-label-color, rgba(190, 226, 248, 0.78));
+		white-space: nowrap;
+	}
+	.lang-select {
+		appearance: none;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		background:
+			linear-gradient(45deg, transparent 50%, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%) calc(100% - 0.9rem) 50% /
+				0.35rem 0.35rem no-repeat,
+			linear-gradient(135deg, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%, transparent 50%) calc(100% - 0.7rem) 50% /
+				0.35rem 0.35rem no-repeat,
+			var(--lang-select-bg, rgba(9, 22, 40, 0.68));
+		border: 1px solid var(--lang-select-border, rgba(132, 214, 255, 0.2));
+		border-radius: 999px;
+		padding: 0.2rem 1.45rem 0.2rem 0.55rem;
+		min-width: 6rem;
+		font-size: 0.62rem;
+		line-height: 1;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		color: var(--lang-select-text, rgba(204, 236, 252, 0.86));
+		cursor: pointer;
+	}
+	.lang-select:focus {
+		outline: none;
+		border-color: var(--lang-select-focus-border, rgba(132, 214, 255, 0.5));
+		box-shadow: 0 0 0 2px var(--lang-select-focus-ring, rgba(98, 180, 228, 0.18));
+	}
+	.lang-select option {
+		color: var(--lang-select-option-text, #ccecfb);
+		background: var(--lang-select-option-bg, #0b1c32);
+	}
+	@media (max-width: 720px) {
+		.lang-switcher {
+			margin-right: 0;
+		}
+	}
+</style>

package/src/components/shared/SocialMenu.astro

@@ -5,16 +5,44 @@ import Icon from './Icon.astro';
 interface Props {
 	links?: SocialLink[];
 	iconSize?: number;
+	showPlaceholdersWhenEmpty?: boolean;
 }
 
-const { links = SOCIAL_LINKS, iconSize = 32 } = Astro.props as Props;
+const {
+	links = SOCIAL_LINKS,
+	iconSize = 32,
+	showPlaceholdersWhenEmpty = true,
+} = Astro.props as Props;
+const placeholderLinks: SocialLink[] = [
+	{ href: '', label: 'Mastodon', icon: 'mastodon' },
+	{ href: '', label: 'Twitter', icon: 'twitter' },
+	{ href: '', label: 'GitHub', icon: 'github' },
+];
+const resolvedLinks = links.length > 0 || !showPlaceholdersWhenEmpty ? links : placeholderLinks;
 ---
 
 {
-	links.map((link) => (
-		<a href={link.href} target="_blank" rel="noopener noreferrer">
-			<span class="sr-only">{link.label}</span>
-			{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
-		</a>
+	resolvedLinks.map((link) => (
+		links.length > 0 ? (
+			<a href={link.href} target="_blank" rel="noopener noreferrer">
+				<span class="sr-only">{link.label}</span>
+				{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
+			</a>
+		) : (
+			<span class="social-placeholder" aria-hidden="true" title="Configure social links in src/site.config.ts">
+				{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
+			</span>
+		)
 	))
 }
+
+<style>
+	.social-placeholder {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.45;
+		filter: saturate(0.7);
+		cursor: default;
+	}
+</style>

package/src/layouts/BlogPost.astro

@@ -5,6 +5,7 @@ import themeRedqueen1 from '../assets/theme/red-queen/theme-redqueen1.webp';
 import themeRedqueen2 from '../assets/theme/red-queen/theme-redqueen2.gif';
 import FormattedDate from '../components/FormattedDate.astro';
 import AiShell from './shells/AiShell.astro';
+import blogPostCssUrl from '../styles/blog-post.css?url';
 import { SITE_AUTHOR } from '@anglefeint/site-config/site';
 import { DEFAULT_LOCALE, type Locale, isLocale, localePath, blogIdToSlugAnyLocale } from '@anglefeint/site-i18n/config';
 import { getMessages } from '@anglefeint/site-i18n/messages';
@@ -62,7 +63,7 @@ const confidenceText = aiConfidence !== undefined ? aiConfidence.toFixed(2) : un
 	tags={tags}
 	localeHrefs={localeHrefs}
 >
-	<link slot="head" rel="stylesheet" href="/styles/blog-post.css" />
+	<link slot="head" rel="stylesheet" href={blogPostCssUrl} />
 	<Fragment slot="body-start">
 		<div class="ai-bg" aria-hidden="true">
 			<div class="ai-glow ai-glow-shift"></div>

package/src/layouts/shells/AiShell.astro

@@ -2,6 +2,7 @@
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
 import type { ImageMetadata } from 'astro';
+import themeAiCssUrl from '../../styles/theme-ai.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -51,7 +52,7 @@ const {
 	scanlines
 	localeHrefs={localeHrefs}
 >
-	<link slot="head" rel="stylesheet" href="/styles/theme-ai.css" />
+	<link slot="head" rel="stylesheet" href={themeAiCssUrl} />
 	<slot name="head" slot="head" />
 	<slot name="body-start" slot="body-start" />
 	<slot />

package/src/layouts/shells/CyberShell.astro

@@ -1,6 +1,8 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import themeCyberCssUrl from '../../styles/theme-cyber.css?url';
+import blogListCssUrl from '../../styles/blog-list.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -13,7 +15,8 @@ const { locale, title, description, localeHrefs } = Astro.props as Props;
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass="cyber-page" mainClass="page-main cyber-content" localeHrefs={localeHrefs}>
-	<link slot="head" rel="stylesheet" href="/styles/theme-cyber.css" />
+	<link slot="head" rel="stylesheet" href={themeCyberCssUrl} />
+	<link slot="head" rel="stylesheet" href={blogListCssUrl} />
 	<Fragment slot="body-start">
 		<div class="cyber-load-glitch" aria-hidden="true"></div>
 		<div class="cyber-spotlight" aria-hidden="true">

package/src/layouts/shells/HackerShell.astro

@@ -1,6 +1,7 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import aboutPageCssUrl from '../../styles/about-page.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -13,7 +14,7 @@ const { locale, title, description, bodyClass = 'hacker-page' } = Astro.props as
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass={bodyClass} mainClass="page-main hacker-content">
-	<link slot="head" rel="stylesheet" href="/styles/about-page.css" />
+	<link slot="head" rel="stylesheet" href={aboutPageCssUrl} />
 	<slot name="head" slot="head" />
 	<slot name="body-start" slot="body-start" />
 	<slot />

package/src/layouts/shells/MatrixShell.astro

@@ -1,6 +1,7 @@
 ---
 import type { Locale } from '@anglefeint/site-i18n/config';
 import ThemeFrame from '../../components/shared/ThemeFrame.astro';
+import homePageCssUrl from '../../styles/home-page.css?url';
 
 interface Props {
 	locale?: Locale;
@@ -12,7 +13,7 @@ const { locale, title, description } = Astro.props as Props;
 ---
 
 <ThemeFrame locale={locale} title={title} description={description} bodyClass="page-home" mainClass="page-main home-content">
-	<link slot="head" rel="stylesheet" href="/styles/home-page.css" />
+	<link slot="head" rel="stylesheet" href={homePageCssUrl} />
 	<canvas slot="body-start" id="matrix-bg" aria-hidden="true"></canvas>
 	<Fragment slot="body-end">
 		<script>