feat(theme): add a capabilities section band
- Replace the techStack band with project-type capabilities - Delete the TechStack component and its section type - Give grid cards an optional status badge - Pad --big buttons, which Rspress ships with none - Revise the home, services and products copy
This commit is contained in:
14 files changed
+331
-292
No files matched your search
@@ -1,15 +1,38 @@
|
||||
import type { Feature } from "@rspress/core"
|
||||
import { HomeFeature } from "@rspress/core/theme-original"
|
||||
import { arr } from "./types"
|
||||
import { arr, str, type FeatureCard } from "./types"
|
||||
|
||||
/** The badge is interpolated into markup, so it cannot carry its own markup. */
|
||||
function escapeHtml(value: string): string {
|
||||
return value
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
}
|
||||
|
||||
/**
|
||||
* Card grid used for both the homepage advantages and the products/services
|
||||
* grids. Delegates to the stock `HomeFeature`, which already handles `span`,
|
||||
* icons and the reveal animation — it accepts a `features` prop precisely so it
|
||||
* can be driven from somewhere other than page frontmatter.
|
||||
*
|
||||
* A card's `badge` is folded into the front of `details` as a span, because
|
||||
* `HomeFeature` renders `details` through `renderHtmlOrText` (which passes HTML
|
||||
* through) and exposes no other slot. Note this makes the whole `details` string
|
||||
* render as HTML for badged cards — frontmatter is first-party, and
|
||||
* `renderHtmlOrText` already does this for any string containing a tag.
|
||||
*/
|
||||
export function FeatureGrid({ items }: { items?: Feature[] }) {
|
||||
const features = arr<Feature>(items)
|
||||
export function FeatureGrid({ items }: { items?: FeatureCard[] }) {
|
||||
const features = arr<FeatureCard>(items)?.map(({ badge, ...feature }) => {
|
||||
const label = str(badge)
|
||||
if (!label) return feature as Feature
|
||||
const details = str(feature.details) ?? ""
|
||||
return {
|
||||
...feature,
|
||||
details: `<span class="rp-card-badge">${escapeHtml(label)}</span>${details}`,
|
||||
} as Feature
|
||||
})
|
||||
if (!features) return null
|
||||
return <HomeFeature features={features} />
|
||||
}
|
||||
Reference in new issue
Block a user