mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-23 06:10:32 +00:00
aef71852f0
*PR Created by the Glary-Bot Agent*
---
## Summary
Adds a demo pages system to the website that embeds Arcade interactive
walkthroughs at `comfy.org/demos/{slug}`. These pages will be linked
from welcome/lifecycle emails via Customer.io.
- Adds `/demos/image-to-video` and `/demos/workflow-templates` as the
first two demos
- Follows the existing `customers/[slug].astro` pattern exactly
(config-driven `getStaticPaths()`)
- Full SEO: OG/Twitter cards, HowTo + LearningResource + BreadcrumbList
JSON-LD schemas
- GEO: AI crawler directives in robots.txt, crawlable transcript
alongside iframe
- A11y: iframe title, sr-only transcript, aria-expanded toggle, noscript
fallback
- Email optimization: 1200x630 OG images, SSG pre-rendered, preconnect
to Arcade CDN
- Full zh-CN localization
- Library index stub at /demos for future expansion
- Automatic sitemap inclusion
## Architecture
Adding a new demo = adding one object to `src/config/demos.ts`.
## Note
OG images are tiny placeholders — replace with real 1200x630 screenshots
before go-live.
## Screenshots
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11436-feat-add-demo-pages-with-Arcade-embeds-at-demos-slug-3486d73d365081abbd72e02bf497a43a)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Locale } from '../../i18n/translations'
|
|
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
import { ref } from 'vue'
|
|
|
|
import { t } from '../../i18n/translations'
|
|
|
|
const { transcript, locale = 'en' } = defineProps<{
|
|
transcript: string
|
|
locale?: Locale
|
|
}>()
|
|
|
|
const expanded = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
class="px-4 py-8 lg:px-20 lg:py-12"
|
|
:aria-label="t('demos.transcript.label', locale)"
|
|
>
|
|
<div class="mx-auto max-w-4xl">
|
|
<button
|
|
type="button"
|
|
class="text-primary-comfy-canvas text-left"
|
|
:aria-expanded="expanded"
|
|
@click="expanded = !expanded"
|
|
>
|
|
<span class="text-sm font-semibold tracking-wide uppercase">
|
|
{{ t('demos.transcript.label', locale) }}
|
|
</span>
|
|
<span class="text-primary-warm-gray ml-2 text-xs">
|
|
{{ t('demos.transcript.note', locale) }}
|
|
</span>
|
|
</button>
|
|
|
|
<div
|
|
role="region"
|
|
:aria-label="t('demos.transcript.label', locale)"
|
|
:class="
|
|
cn(
|
|
expanded ? 'mt-4' : 'sr-only',
|
|
'text-primary-warm-gray text-sm/relaxed'
|
|
)
|
|
"
|
|
v-html="transcript"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|