diff --git a/src/components/Header.astro b/src/components/Header.astro index e669dcd..24b5860 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -18,6 +18,7 @@ const nav = [ { path: "downloads/", label: t("nav.downloads") }, { path: "quickstart/", label: t("nav.quickstart") }, { path: "explore/", label: t("nav.explorer") }, + { path: "marketplace/", label: t("nav.marketplace") }, ]; // Compared on the locale-stripped route so /en/agents/ marks the same item as // /agents/ rather than matching on a substring of the full path. diff --git a/src/i18n/index.ts b/src/i18n/index.ts index d450954..3e47758 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -43,7 +43,7 @@ export function localePath(locale: Locale, path = ""): string { * — which validate-build.mjs fails the build over. Add a route here in the same * change that adds its translation. */ -export const translatedRoutes = new Set(["", "downloads/", "quickstart/", "explore/", "security/", "help/"]); +export const translatedRoutes = new Set(["", "downloads/", "quickstart/", "explore/", "security/", "help/", "marketplace/"]); /** * Prefixes whose every child route is translated, for families generated from a @@ -55,7 +55,7 @@ export const translatedRoutes = new Set(["", "downloads/", "quickstart/", "explo * declared no hreflang alternates, so nothing told a crawler the two were * translations of each other. */ -const translatedPrefixes = ["help/"]; +const translatedPrefixes = ["help/", "marketplace/"]; /** True for a route that exists in every locale, including collection children. */ export function isTranslated(route: string): boolean { diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 1d89fac..24e4ed0 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -20,6 +20,7 @@ const strings = { "nav.quickstart": "快速开始", "nav.help": "帮助文档", "nav.explorer": "配置", + "nav.marketplace": "工具市场", "nav.agents": "Agent", "nav.providers": "Provider", "nav.support": "支持", @@ -72,6 +73,7 @@ const strings = { "nav.quickstart": "Quickstart", "nav.help": "Help", "nav.explorer": "Explorer", + "nav.marketplace": "Marketplace", "nav.agents": "Agents", "nav.providers": "Providers", "nav.support": "Support", diff --git a/src/lib/marketplace.ts b/src/lib/marketplace.ts new file mode 100644 index 0000000..afb3256 --- /dev/null +++ b/src/lib/marketplace.ts @@ -0,0 +1,26 @@ +export type MarketplaceKind = "skill" | "mcp" | "tool" | "framework"; + +export interface MarketplaceItem { + id: string; + name: string; + kind: MarketplaceKind; + description: string; + descriptionEn: string; + source: string; + url: string; + tags: string[]; +} + +export const marketplaceItems: MarketplaceItem[] = [ + { id: "claude-code", name: "Claude Code", kind: "tool", description: "Anthropic 的终端编码 Agent，支持 Skills、Hooks 与 MCP。", descriptionEn: "Anthropic's terminal coding agent with Skills, Hooks, and MCP.", source: "Anthropic", url: "https://docs.anthropic.com/en/docs/claude-code", tags: ["编码", "MCP"] }, + { id: "codex-cli", name: "Codex CLI", kind: "tool", description: "OpenAI 的本地编码 Agent，可读取、修改和运行代码。", descriptionEn: "OpenAI's local coding agent for reading, editing, and running code.", source: "OpenAI", url: "https://developers.openai.com/codex/", tags: ["编码", "终端"] }, + { id: "cline", name: "Cline", kind: "tool", description: "VS Code 中的自主编码扩展，支持浏览器、终端和 MCP。", descriptionEn: "An autonomous coding extension for VS Code with browser, terminal, and MCP.", source: "VS Code Marketplace", url: "https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev", tags: ["VS Code", "MCP"] }, + { id: "ollama", name: "Ollama", kind: "tool", description: "在本机运行和管理开源大模型，提供 CLI 与 API。", descriptionEn: "Run and manage open models locally with a CLI and API.", source: "Ollama", url: "https://ollama.com/", tags: ["本地模型", "自托管"] }, + { id: "langchain", name: "LangChain", kind: "framework", description: "用于构建 LLM 应用和 Agent 工作流的开源框架。", descriptionEn: "An open framework for building LLM applications and agent workflows.", source: "PyPI / npm", url: "https://docs.langchain.com/", tags: ["Agent", "工作流"] }, + { id: "mcp-registry", name: "MCP 官方 Registry", kind: "mcp", description: "Model Context Protocol 官方服务器目录，用于发现和核验 MCP 包。", descriptionEn: "The official Model Context Protocol server directory for discovery and verification.", source: "MCP 官方", url: "https://registry.modelcontextprotocol.io/", tags: ["MCP", "目录"] }, +]; + +export const marketplaceKindLabels = { + zh: { skill: "Skill", mcp: "MCP", tool: "工具", framework: "框架" }, + en: { skill: "Skill", mcp: "MCP", tool: "Tool", framework: "Framework" }, +} as const; diff --git a/src/pages/en/marketplace/[id].astro b/src/pages/en/marketplace/[id].astro new file mode 100644 index 0000000..8db01ed --- /dev/null +++ b/src/pages/en/marketplace/[id].astro @@ -0,0 +1,11 @@ +--- +import BaseLayout from "../../../layouts/BaseLayout.astro"; +import { localePath } from "../../../i18n"; +import { marketplaceItems, marketplaceKindLabels } from "../../../lib/marketplace"; +export function getStaticPaths() { return marketplaceItems.map((item) => ({ params: { id: item.id }, props: { item } })); } +const { item } = Astro.props; +--- + +

{marketplaceKindLabels.en[item.kind]} · {item.source}

{item.name}

{item.descriptionEn}

+

Source and usage

BootAgent helps you discover this item. Installation stays with the original project, and BootAgent never takes custody of your credentials.

{item.tags.map((tag) => {tag})}
+ diff --git a/src/pages/en/marketplace/index.astro b/src/pages/en/marketplace/index.astro new file mode 100644 index 0000000..da40d25 --- /dev/null +++ b/src/pages/en/marketplace/index.astro @@ -0,0 +1,16 @@ +--- +import BaseLayout from "../../../layouts/BaseLayout.astro"; +import { localePath } from "../../../i18n"; +import { marketplaceItems, marketplaceKindLabels } from "../../../lib/marketplace"; +const kinds = ["all", "tool", "mcp", "framework"] as const; +--- + +

Marketplace

Tools for your AI workspace

Discover Agents, MCP servers, and developer tools from trusted sources. Every item links back to its original project for installation.

+
{kinds.map((kind, index) => )}
{marketplaceItems.map((item) =>
{marketplaceKindLabels.en[item.kind]}{item.source}

{item.name}

{item.descriptionEn}

{item.tags.map((tag) => {tag})}
View details
)}
+ + diff --git a/src/pages/marketplace/[id].astro b/src/pages/marketplace/[id].astro new file mode 100644 index 0000000..59b97a9 --- /dev/null +++ b/src/pages/marketplace/[id].astro @@ -0,0 +1,11 @@ +--- +import BaseLayout from "../../layouts/BaseLayout.astro"; +import { localePath } from "../../i18n"; +import { marketplaceItems, marketplaceKindLabels } from "../../lib/marketplace"; +export function getStaticPaths() { return marketplaceItems.map((item) => ({ params: { id: item.id }, props: { item } })); } +const { item } = Astro.props; +--- + +

{marketplaceKindLabels.zh[item.kind]} · {item.source}

{item.name}

{item.description}

+

来源与使用方式

BootAgent 只负责发现和整理条目，不代替原项目安装，也不接管你的账号或凭证。

{item.tags.map((tag) => {tag})}
+ diff --git a/src/pages/marketplace/index.astro b/src/pages/marketplace/index.astro new file mode 100644 index 0000000..edb9e57 --- /dev/null +++ b/src/pages/marketplace/index.astro @@ -0,0 +1,24 @@ +--- +import BaseLayout from "../../layouts/BaseLayout.astro"; +import { localePath } from "../../i18n"; +import { marketplaceItems, marketplaceKindLabels } from "../../lib/marketplace"; +const kinds = ["all", "tool", "mcp", "framework"] as const; +--- + +

Marketplace

工具市场

从官方目录和可信来源发现 Agent、MCP 与开发工具。每个条目都标明来源，安装动作回到原始项目完成。

+
+
+ {kinds.map((kind, index) => )} +
+
+ {marketplaceItems.map((item) =>
{marketplaceKindLabels.zh[item.kind]}{item.source}

{item.name}

{item.description}

{item.tags.map((tag) => {tag})}
查看详情
)} +
+ +
+ + diff --git a/src/styles/global.css b/src/styles/global.css index bfdaed1..010b11c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -446,6 +446,22 @@ button, select { color: inherit; } .agent-mark-wrap { width: 34px; height: 34px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .agent-mark-wrap img { width: var(--mark-size); height: var(--mark-size); object-fit: contain; } .agent-fallback { font-size: 13px; font-weight: 650; } +.marketplace-shell { max-width: 1180px; } +.marketplace-toolbar { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; } +.marketplace-filter { padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent; cursor: pointer; } +.marketplace-filter.is-active, .marketplace-filter:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } +.marketplace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } +.marketplace-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); } +.marketplace-card h2 { margin: 18px 0 8px; font-size: 22px; } +.marketplace-card p { min-height: 54px; color: var(--ink-soft); } +.marketplace-card-top { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-faint); font-size: 12px; } +.marketplace-kind { color: var(--accent); font-weight: 700; } +.marketplace-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; } +.marketplace-tags span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-faint); font-size: 12px; } +.marketplace-empty { color: var(--ink-faint); } +.marketplace-detail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; } +.marketplace-detail h2 { margin-top: 0; } +@media (max-width: 800px) { .marketplace-grid { grid-template-columns: 1fr; } .marketplace-detail { grid-template-columns: 1fr; gap: 24px; } } .chip { min-height: 26px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--surface); font-size: 11px; font-weight: 600; white-space: nowrap; } /* Neutral like the base chip: 托管配置 is a fact about support, not a state that