feat: add tags to articles, full i18n coverage, and Tailwind CSS setup

- Add tag frontmatter to all 6 blog articles (3 articles × 2 locales)
- Complete i18n.json with all 26 text keys for en-gb and zh-hans
- Install and configure Tailwind CSS v4 with PostCSS
- Create Tags component using Tailwind utility classes
- Inject Tags into DocLayout via theme override
- Fix zh-hans homepage icon extension
This commit is contained in:
siujamo
2026-05-20 03:39:59 -05:00
parent e9c83fbcd1
commit dbaf28ad98
14 changed files with 612 additions and 25 deletions
+20
View File
@@ -0,0 +1,20 @@
import { useFrontmatter } from "@rspress/core/runtime"
export function Tags() {
const { frontmatter } = useFrontmatter()
const tags: string[] | undefined = frontmatter?.tags as string[]
if (!tags?.length) return null
return (
<div className="flex flex-wrap gap-2 mb-6">
{tags.map((tag) => (
<span
key={tag}
className="inline-block px-2.5 py-0.5 text-xs leading-relaxed rounded
text-[var(--rp-c-brand)] bg-[var(--rp-c-brand-tint)]
whitespace-nowrap">
{tag}
</span>
))}
</div>
)
}
+2
View File
@@ -1,3 +1,5 @@
@import "tailwindcss";
:root {
/* Example brand color overrides for the custom theme scaffold. */
--rp-c-brand: #0f766e;
+17
View File
@@ -1,3 +1,20 @@
import './index.css';
import { DocLayout as OriginalDocLayout } from '@rspress/core/theme-original';
import { Tags } from './components/Tags';
function DocLayout(props) {
return (
<OriginalDocLayout
{...props}
beforeDocContent={
<>
<Tags />
{props.beforeDocContent}
</>
}
/>
);
}
export * from '@rspress/core/theme-original';
export { DocLayout };