mirror of
https://github.com/longbridge/developers.git
synced 2026-09-19 03:34:09 +08:00
b6e83e209a
## Summary A complete overhaul of the Longbridge Developers homepage, introducing a new brand design system built on inspira-ui animations, interactive product showcases, and a unified multi-language content structure. ### New homepage sections - **HeroSection** — Animated FlickeringGrid background, ColourfulText rotating product showcase, interactive CTA buttons - **PlatformStats** — 4 key stats with animated NumberTicker and hover detail cards - **CapSection** — Developer capability highlights with Spotlight + Expand hover interaction - **ArchSection** — Architecture diagram (custom SVG bus-topology) with SdkMarquee - **ProductCLI** — Interactive terminal mockup with real CLI output, theme-aware (follows VitePress isDark), click-to-switch features - **ProductMCP** — Custom SVG bus-topology diagram replacing VueFlow, per-client config panels (shell/JSON/UI), tab sync with diagram - **ProductSkill** — AI agent simulator with macOS traffic light dots and install flow - **ProductOpenAPI** — Bento Grid SDK showcase with Shiki syntax highlighting, 6 SDKs × 4 domain code examples - **GetStarted** — Quick-start cards ### Design system additions - 15+ inspira-ui animation components (`FlickeringGrid`, `ColourfulText`, `NumberTicker`, `BorderBeam`, `Marquee`, `AnimatedBeam`, etc.) - Tailwind CSS integration (`postcss.config.mjs`, `tailwind.css`) - Unified section styles: consistent title/subtitle spacing (24px gap), muted subtitle color, 14px minimum font size ### i18n - 150+ new keys added across `en.json`, `zh-CN.json`, `zh-HK.json` - All three locales kept in sync
30 lines
843 B
JavaScript
30 lines
843 B
JavaScript
import tailwindcss from '@tailwindcss/postcss'
|
|
|
|
// Wrap @tailwindcss/postcss so it only processes files that contain
|
|
// `@import "tailwindcss"`. This prevents it from interfering with
|
|
// UnoCSS's @apply handling in Vue SFC <style> blocks.
|
|
const twPlugin = tailwindcss()
|
|
|
|
function gatedTailwind() {
|
|
const inner = typeof twPlugin === 'function' ? twPlugin() : twPlugin
|
|
return {
|
|
postcssPlugin: 'gated-tailwindcss',
|
|
prepare(result) {
|
|
const css = result.root.toString()
|
|
// Only run Tailwind if the file imports tailwindcss
|
|
if (!css.includes('@import "tailwindcss"') && !css.includes("@import 'tailwindcss'")) {
|
|
return {}
|
|
}
|
|
if (inner.prepare) {
|
|
return inner.prepare(result)
|
|
}
|
|
return inner
|
|
},
|
|
}
|
|
}
|
|
gatedTailwind.postcss = true
|
|
|
|
export default {
|
|
plugins: [gatedTailwind],
|
|
}
|