diff --git a/docs/intro.mdx b/docs/intro.mdx index a6ff1c5..78eb5c5 100644 --- a/docs/intro.mdx +++ b/docs/intro.mdx @@ -2,7 +2,7 @@ sidebar_position: 1 --- -import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals'; +import {AiAccess, DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals'; # Prism-Committee 文档 @@ -52,3 +52,14 @@ import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisua ]} /> + + diff --git a/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx b/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx index 3a9d68a..e70a2e2 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx @@ -2,7 +2,7 @@ sidebar_position: 1 --- -import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals'; +import {AiAccess, DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisuals'; # Prism-Committee Docs @@ -53,6 +53,17 @@ import {DocHero, FeatureCards, ProjectPanel} from '@site/src/components/DocVisua + + :::info[Feedback and issues] Report WebShopX or documentation issues at [Prism-Committee/WebShopX-Issues](https://github.com/Prism-Committee/WebShopX-Issues). ::: diff --git a/src/components/DocVisuals/index.tsx b/src/components/DocVisuals/index.tsx index 7245fa5..37f75a9 100644 --- a/src/components/DocVisuals/index.tsx +++ b/src/components/DocVisuals/index.tsx @@ -1,4 +1,4 @@ -import React, {type ReactNode} from 'react'; +import React, {type ReactNode, useEffect, useRef, useState} from 'react'; import Link from '@docusaurus/Link'; import {useLocation} from '@docusaurus/router'; import styles from './styles.module.css'; @@ -205,3 +205,78 @@ export function DocHero({ ); } + +export function AiAccess({ + title, + description, + indexLabel, + pageLabel, + copyLabel, + copiedLabel, + failedLabel, + prompt, +}: { + title: string; + description: string; + indexLabel: string; + pageLabel: string; + copyLabel: string; + copiedLabel: string; + failedLabel: string; + prompt: string; +}) { + const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle'); + const resetTimer = useRef | undefined>( + undefined, + ); + + useEffect( + () => () => { + if (resetTimer.current) { + clearTimeout(resetTimer.current); + } + }, + [], + ); + + const copyPrompt = async () => { + try { + await navigator.clipboard.writeText(prompt); + setStatus('copied'); + } catch { + setStatus('failed'); + } + + if (resetTimer.current) { + clearTimeout(resetTimer.current); + } + resetTimer.current = setTimeout(() => setStatus('idle'), 2000); + }; + + const buttonLabel = + status === 'copied' + ? copiedLabel + : status === 'failed' + ? failedLabel + : copyLabel; + + return ( +
+
+ AI-ready docs +

{title}

+

{description}

+
+ + {indexLabel}: /llms.txt + + {pageLabel}: /path/to/page.md +
+
+ +
+ ); +} diff --git a/src/components/DocVisuals/styles.module.css b/src/components/DocVisuals/styles.module.css index c22b9e1..c3a2e70 100644 --- a/src/components/DocVisuals/styles.module.css +++ b/src/components/DocVisuals/styles.module.css @@ -281,6 +281,76 @@ margin-top: .32rem; } +.aiAccess { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + margin: 1.75rem 0; + padding: 1.35rem 1.45rem; + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 16px; + background: linear-gradient(135deg, var(--ifm-color-primary-contrast-background), var(--ifm-background-surface-color)); +} + +.aiEyebrow { + display: block; + margin-bottom: .3rem; + color: var(--ifm-color-primary); + font-size: .75rem; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; +} + +.aiTitle { + margin: 0 0 .4rem; + font-size: 1.2rem; +} + +.aiDescription { + max-width: 48rem; + margin: 0; + color: var(--ifm-color-emphasis-700); + line-height: 1.6; +} + +.aiLinks { + display: flex; + flex-wrap: wrap; + gap: .45rem 1rem; + margin-top: .7rem; + font-family: var(--ifm-font-family-monospace); + font-size: .82rem; +} + +.aiCopyButton { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + gap: .45rem; + min-height: 2.5rem; + padding: .5rem .85rem; + border: 1px solid var(--ifm-color-primary); + border-radius: .5rem; + background: var(--ifm-color-primary); + color: var(--ifm-color-white); + cursor: pointer; + font: inherit; + font-size: .875rem; + font-weight: 700; +} + +.aiCopyButton:hover { + background: var(--ifm-color-primary-dark); +} + +.aiCopyButton:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; +} + @media (max-width: 760px) { .projectHeader { flex-direction: column; @@ -289,6 +359,11 @@ .projectLinks { justify-content: flex-start; } + + .aiAccess { + align-items: stretch; + flex-direction: column; + } } @media (max-width: 600px) {