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:
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Example brand color overrides for the custom theme scaffold. */
|
||||
--rp-c-brand: #0f766e;
|
||||
|
||||
@@ -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 };
|
||||
|
||||
Reference in New Issue
Block a user