diff --git a/content/demos/_index.md b/content/demos/_index.md new file mode 100644 index 0000000000..80fc38e016 --- /dev/null +++ b/content/demos/_index.md @@ -0,0 +1,59 @@ +--- +title: Interactive demos +description: Hands-on interactive walkthroughs of Validated Patterns. +menu: + main: + name: Demos + weight: 22 +demos: + - id: 5nsew2VgJfkkdd5sQ0Mr + title: Deploy a Validated Pattern on RHDP + thumbnail: /images/demos/deploy-pattern-on-rhdp.png + description: Deploy a Validated Pattern on the Red Hat Demo Platform (RHDP) without provisioning your own cluster. Walk through the steps to launch a pattern in a pre-built environment. + pattern_link: https://demo.redhat.com + pattern_label: Red Hat Demo Platform + - id: U3ztnJKzMjsNM05f0ff5 + title: Using the Validated Patterns UI + thumbnail: /images/demos/validated-patterns-ui.png + description: See how the Validated Patterns framework looks and feels once deployed. This walkthrough covers the GitOps-driven UI, ArgoCD application views, and how to navigate a running pattern. + pattern_link: /patterns/multicloud-gitops/ + pattern_label: Multicloud GitOps pattern + - id: UusleQSZch8ZZyimr7aj + title: RAG VP UI — Red Hat Summit 2026 + thumbnail: /images/demos/rag-vp-ui-summit-2026.png + description: A walkthrough of the RAG Validated Pattern UI as shown at Red Hat Summit 2026. See the end-to-end experience from cluster deployment to a running AI application. + - id: 6SxOiDc3P7uMg38jAOLw + title: RAG-LLM GitOps pattern on Microsoft Azure + thumbnail: /images/demos/rag-llm-gitops-azure.png + description: LLM-based document generation on Azure with Red Hat OpenShift AI, from vector database ingestion to a running chatbot interface. + pattern_link: /patterns/azure-rag-llm-gitops/ + pattern_label: RAG-LLM pattern on Microsoft Azure + - id: drMY04qRCqQuq2BkZWpn + title: RAG AI and Quickstart VP UI + thumbnail: /images/demos/rag-ai-application.png + description: Tour the RAG-augmented chatbot UI. The RAG AI UI demo and RAG AI Quickstart VP UI use the same Arcade walkthrough (one share link). See how the application generates project proposals using Red Hat product documentation. + pattern_link: /patterns/rag-llm-gitops/ + pattern_label: AI generation with LLM and RAG + - id: WBiokIqAOZRlk7aXkvuU + title: RAG LLM on Lenovo SNO + thumbnail: /images/demos/rag-llm-lenovo-sno.png + description: RAG LLM on a Lenovo Single Node OpenShift cluster — CPU-based RAG without GPU hardware on compact infrastructure. + pattern_link: /patterns/rag-llm-cpu/ + pattern_label: RAG LLM Chatbot on CPU + - id: Qla3IzaQVM9yQP27TWDU + title: Performing disaster recovery with RamenDR backed by Dell PowerStore + thumbnail: /images/demos/ramendr-dell-powerstore-dr.png + description: Walk through regional disaster recovery for OpenShift Virtualization workloads using RamenDR with Dell PowerStore storage backing the recovery workflow. + pattern_link: /patterns/ramendr-starter-kit/ + pattern_label: RamenDR Starter Kit +next_steps: + - url: /patterns/ + label: Explore all patterns + text: browse the full catalog by tier and use case + - url: /learn/quickstart/ + label: Read the quickstart guide + text: step-by-step instructions for your first deployment + - url: /learn/about-validated-patterns/ + label: Learn the concepts + text: understand how the framework works +--- diff --git a/content/patterns/azure-rag-llm-gitops/_index.adoc b/content/patterns/azure-rag-llm-gitops/_index.adoc index 8a4cfd0cb8..a3b8e7c72d 100644 --- a/content/patterns/azure-rag-llm-gitops/_index.adoc +++ b/content/patterns/azure-rag-llm-gitops/_index.adoc @@ -22,6 +22,7 @@ links: install: getting-started bugs: https://github.com/validatedpatterns/rag-llm-gitops/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: 6SxOiDc3P7uMg38jAOLw --- :toc: diff --git a/content/patterns/multicloud-gitops/_index.adoc b/content/patterns/multicloud-gitops/_index.adoc index 6e5e7079b1..4b609f0f1a 100644 --- a/content/patterns/multicloud-gitops/_index.adoc +++ b/content/patterns/multicloud-gitops/_index.adoc @@ -20,6 +20,7 @@ links: arch: https://www.redhat.com/architect/portfolio/detail/8-hybrid-multicloud-management-with-gitops bugs: https://github.com/validatedpatterns/multicloud-gitops/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: U3ztnJKzMjsNM05f0ff5 ci: mcgitops --- :toc: diff --git a/content/patterns/rag-llm-cpu/_index.md b/content/patterns/rag-llm-cpu/_index.md index c82eae1e92..6da9c5d3d4 100644 --- a/content/patterns/rag-llm-cpu/_index.md +++ b/content/patterns/rag-llm-cpu/_index.md @@ -21,6 +21,7 @@ links: install: getting-started bugs: https://github.com/validatedpatterns-sandbox/rag-llm-cpu/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: WBiokIqAOZRlk7aXkvuU --- # **CPU-based RAG LLM chatbot** diff --git a/content/patterns/rag-llm-gitops/_index.md b/content/patterns/rag-llm-gitops/_index.md index fd0e622970..56ad9b06c8 100644 --- a/content/patterns/rag-llm-gitops/_index.md +++ b/content/patterns/rag-llm-gitops/_index.md @@ -24,6 +24,7 @@ links: install: getting-started bugs: https://github.com/validatedpatterns/rag-llm-gitops/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: drMY04qRCqQuq2BkZWpn ci: ragllm --- diff --git a/content/patterns/rag-quickstart/_index.adoc b/content/patterns/rag-quickstart/_index.adoc index 037bd55245..b9ea2b3e69 100644 --- a/content/patterns/rag-quickstart/_index.adoc +++ b/content/patterns/rag-quickstart/_index.adoc @@ -15,6 +15,7 @@ links: install: getting-started bugs: https://github.com/validatedpatterns-sandbox/ai-quickstart-rag/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: drMY04qRCqQuq2BkZWpn --- :toc: :imagesdir: /images diff --git a/content/patterns/ramendr-starter-kit/_index.adoc b/content/patterns/ramendr-starter-kit/_index.adoc index 2cc09257a7..d0d02b004d 100644 --- a/content/patterns/ramendr-starter-kit/_index.adoc +++ b/content/patterns/ramendr-starter-kit/_index.adoc @@ -23,6 +23,7 @@ links: install: getting-started bugs: https://github.com/validatedpatterns/ramendr-starter-kit/issues feedback: https://docs.google.com/forms/d/e/1FAIpQLScI76b6tD1WyPu2-d_9CCVDr3Fu5jYERthqLKJDUGwqBg7Vcg/viewform + demo: Qla3IzaQVM9yQP27TWDU ci: ramendr-starter-kit --- diff --git a/layouts/blog/list.html b/layouts/blog/list.html index e659986d4c..ba155a2680 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -32,6 +32,6 @@

{{ partial "paginator.html" . }} - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} \ No newline at end of file diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 19605bbf1e..cb5a467fd6 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -49,6 +49,6 @@

- {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/blog_tags/list.html b/layouts/blog_tags/list.html index 0bb2545b78..35d96c92ab 100644 --- a/layouts/blog_tags/list.html +++ b/layouts/blog_tags/list.html @@ -35,6 +35,6 @@

{{ partial "paginator.html" . }} - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/ci/single.html b/layouts/ci/single.html index 53456caddd..d10c7244f0 100644 --- a/layouts/ci/single.html +++ b/layouts/ci/single.html @@ -26,6 +26,6 @@

{{- .Title -}}

- {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/contribute/list.html b/layouts/contribute/list.html index 58a2e50091..776b6e5a14 100644 --- a/layouts/contribute/list.html +++ b/layouts/contribute/list.html @@ -34,6 +34,6 @@

- {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/contribute/single.html b/layouts/contribute/single.html index 65eaa303ed..3333274b7f 100644 --- a/layouts/contribute/single.html +++ b/layouts/contribute/single.html @@ -16,6 +16,6 @@ - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/demos/list.html b/layouts/demos/list.html new file mode 100644 index 0000000000..28376cde0a --- /dev/null +++ b/layouts/demos/list.html @@ -0,0 +1,70 @@ +{{ define "main" }} +{{ $demos := .Params.demos }} +{{ $heroMain := index $demos 0 }} +
+
+
+
+
+

{{ .Title }}

+ {{ with .Description }} +

{{ . }}

+ {{ end }} +
+
+
+
+ +
+
+
+ {{ if $demos }} +
+
+ {{ partial "arcade-embed.html" (dict "id" $heroMain.id "title" $heroMain.title "eager" true) }} +
+ + + +
+

{{ $heroMain.title }}

+

{{ $heroMain.description }}

+ {{ if $heroMain.pattern_link }} +

+ For more information, see: {{ $heroMain.pattern_label | default "View pattern" }} +

+ {{ else }} + + {{ end }} +
+
+ {{ end }} + + {{ with .Params.next_steps }} +
+

Next steps

+
    + {{ range . }} +
  • {{ .label }} — {{ .text }}
    • + {{ end }} +
+
+ {{ end }} +
+
+
+ + {{ partialCached "footer.html" . }} +
+ + +{{ end }} diff --git a/layouts/index.html b/layouts/index.html index fc147f344a..6124f21a8d 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -16,6 +16,40 @@ + +
+
+
+
+
+
+ + +
+
+

Interactive demo: disaster recovery with RamenDR and Dell PowerStore

+

+ See how regional failover works for OpenShift Virtualization workloads using RamenDR and Dell PowerStore. +

+
+ Explore all demos + View RamenDR pattern +
+
+
+
+
@@ -549,7 +583,7 @@

Deploy with conf

- {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} diff --git a/layouts/learn/list.html b/layouts/learn/list.html index 0c383aa225..37c3f8ed2f 100644 --- a/layouts/learn/list.html +++ b/layouts/learn/list.html @@ -30,6 +30,6 @@

{{ partial "paginator.html" . }} - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/learn/single.html b/layouts/learn/single.html index 0396a3878a..0f50e24052 100644 --- a/layouts/learn/single.html +++ b/layouts/learn/single.html @@ -43,6 +43,6 @@ - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/partials/arcade-embed.html b/layouts/partials/arcade-embed.html new file mode 100644 index 0000000000..0b2c47c27a --- /dev/null +++ b/layouts/partials/arcade-embed.html @@ -0,0 +1,21 @@ +{{- /* + Arcade iframe with skeleton placeholder. + Params: id (required), title, eager (bool), compact (bool) +*/ -}} +{{- $id := .id -}} +{{- $title := .title | default "Interactive demo" -}} +{{- $eager := .eager | default false -}} +{{- $compact := .compact | default false -}} +{{- $src := printf "https://demo.arcade.software/%s?embed&embed_mobile=tab&embed_desktop=inline&squared=true&show_copy_link=true" $id -}} +
+ + +
diff --git a/layouts/partials/demo-select-card.html b/layouts/partials/demo-select-card.html new file mode 100644 index 0000000000..cc850ecf0f --- /dev/null +++ b/layouts/partials/demo-select-card.html @@ -0,0 +1,28 @@ +{{- /* + Clickable demo thumbnail (loads in main player via demos.js). + dict: demo, variant (sidebar|grid), active (bool) +*/ -}} +{{- $d := .demo -}} +{{- $variant := .variant | default "sidebar" -}} +{{- $active := .active | default false -}} +
+ + {{ partial "demo-thumbnail.html" (dict "id" $d.id "title" $d.title "thumbnail" $d.thumbnail) }} + Now playing + + + {{ if eq $variant "grid" }} +

{{ $d.title }}

+ {{ end }} +
diff --git a/layouts/partials/demo-thumbnail.html b/layouts/partials/demo-thumbnail.html new file mode 100644 index 0000000000..dab08d9deb --- /dev/null +++ b/layouts/partials/demo-thumbnail.html @@ -0,0 +1,13 @@ +{{- /* + Thumbnail for a demo card. Pass dict: title, thumbnail (required image path). +*/ -}} +{{- $title := .title | default "Demo" -}} +{{- $src := .thumbnail -}} +{{ $title }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 2bdb939d1c..6de2a56e02 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -71,5 +71,4 @@ - {{ partial "search-index.html" . }} diff --git a/layouts/partials/links.html b/layouts/partials/links.html index e4cc85dada..92a8682b1d 100644 --- a/layouts/partials/links.html +++ b/layouts/partials/links.html @@ -41,4 +41,59 @@ Share Feedback {{ end }} +{{ if (isset .Params.links "demo") }} +{{ $demoId := .Params.links.demo }} +
  • + + + + View demo +
    • + +{{ end }} diff --git a/layouts/partials/patterns-browser.html b/layouts/partials/patterns-browser.html index 1f31b0fd1f..c1a925eb31 100644 --- a/layouts/partials/patterns-browser.html +++ b/layouts/partials/patterns-browser.html @@ -60,5 +60,5 @@

    - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} diff --git a/layouts/partials/patterns-index.html b/layouts/partials/patterns-index.html index 515034b8c5..ad8e0fde53 100644 --- a/layouts/partials/patterns-index.html +++ b/layouts/partials/patterns-index.html @@ -142,5 +142,5 @@

    {{ .Title }}

    - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} diff --git a/layouts/patterns/single.html b/layouts/patterns/single.html index 387db3d1e7..8674c53c29 100644 --- a/layouts/patterns/single.html +++ b/layouts/patterns/single.html @@ -43,6 +43,6 @@ - {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ end }} diff --git a/layouts/search/list.html b/layouts/search/list.html index bed9e6ca97..41e346e676 100644 --- a/layouts/search/list.html +++ b/layouts/search/list.html @@ -18,7 +18,8 @@

    - {{ partial "footer.html" . }} + {{ partial "search-index.html" . }} + {{ partialCached "footer.html" . }} {{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/arcade.html b/layouts/shortcodes/arcade.html new file mode 100644 index 0000000000..13a1a84a22 --- /dev/null +++ b/layouts/shortcodes/arcade.html @@ -0,0 +1,15 @@ +{{- $url := .Get "url" -}} +{{- $title := .Get "title" | default "Interactive Demo" -}} +
    + +
    diff --git a/static/css/custom.css b/static/css/custom.css index 2528552527..d23109f4fe 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -3583,3 +3583,57 @@ a.ci-status-unavailable-link:hover { min-width: 180px; } } + +/* Homepage featured demo shell */ +.homepage-featured-demo__wrap { + max-width: 1120px; + margin: 0 auto var(--pf-global--spacer--lg); +} + +.homepage-featured-demo__shell { + position: relative; + width: 100%; + height: 0; + padding-bottom: calc(62.793% + 41px); + border-radius: 10px; + overflow: hidden; + background: radial-gradient(circle at 25% 25%, rgba(0, 102, 204, 0.22), transparent 45%), + radial-gradient(circle at 80% 20%, rgba(115, 89, 253, 0.24), transparent 42%), + linear-gradient(120deg, #0f1218 0%, #151922 50%, #10131a 100%); + box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45); +} + +.homepage-featured-demo__ambient { + position: absolute; + inset: 0; + z-index: 1; + background: linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.14) 50%, transparent 88%); + background-size: 240% 100%; + animation: homepage-demo-sheen 2.8s ease-in-out infinite; + opacity: 1; + transition: opacity 0.35s ease; +} + +.homepage-featured-demo__shell.is-loaded .homepage-featured-demo__ambient { + opacity: 0; + pointer-events: none; +} + +.homepage-featured-demo__iframe { + position: absolute; + inset: 0; + z-index: 2; + width: 100%; + height: 100%; + border: 0; + color-scheme: light; +} + +@keyframes homepage-demo-sheen { + 0% { + background-position: 210% 0; + } + 100% { + background-position: -160% 0; + } +} diff --git a/static/css/demos.css b/static/css/demos.css new file mode 100644 index 0000000000..75b43fe825 --- /dev/null +++ b/static/css/demos.css @@ -0,0 +1,309 @@ +/* Interactive demos page */ + +.demos-page { + --demos-sidebar-width: min(360px, 36%); +} + +/* Hero: player + scrollable playlist (row 1), meta under player (row 2) */ +.demos-hero { + display: grid; + gap: var(--pf-global--spacer--lg); + margin-bottom: var(--pf-global--spacer--3xl); +} + +.demos-player { + min-width: 0; + scroll-margin-top: 5rem; +} + +.demos-hero__sidebar { + min-width: 0; +} + +.demos-sidebar__scroll { + display: flex; + flex-direction: column; + gap: var(--pf-global--spacer--md); +} + +.demos-sidebar-item { + flex-shrink: 0; + min-width: 0; +} + +/* Desktop: playlist matches player height; clip next item; scroll wheel stays in list */ +@media (min-width: 993px) { + .demos-hero { + grid-template-columns: minmax(0, 1fr) var(--demos-sidebar-width); + grid-template-rows: auto auto; + align-items: stretch; + } + + .demos-player { + grid-column: 1; + grid-row: 1; + } + + .demos-hero__sidebar { + grid-column: 2; + grid-row: 1; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; + } + + .demos-sidebar__scroll { + flex: 1; + min-height: 0; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; + scrollbar-width: none; + -ms-overflow-style: none; + outline: none; + } + + .demos-sidebar__scroll::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + } + + .demos-hero__meta-main { + grid-column: 1; + grid-row: 2; + margin-top: 0; + } +} + +.demos-sidebar-item__title { + margin: var(--pf-global--spacer--sm) 0 0; + font-size: var(--pf-global--FontSize--sm); + font-weight: var(--pf-global--FontWeight--bold); + line-height: var(--pf-global--LineHeight--sm); + color: var(--pf-global--Color--100); + pointer-events: none; +} + +.demos-hero__meta-main { + margin-top: var(--pf-global--spacer--md); + min-width: 0; +} + +.demos-hero__title { + margin: 0 0 var(--pf-global--spacer--sm); + font-size: var(--pf-global--FontSize--2xl); + font-weight: var(--pf-global--FontWeight--bold); + line-height: var(--pf-global--LineHeight--md); +} + +.demos-hero__desc { + margin: 0 0 var(--pf-global--spacer--sm); + color: var(--pf-global--Color--200); + font-size: var(--pf-global--FontSize--md); + line-height: var(--pf-global--LineHeight--md); +} + +/* Clickable thumbnail cards — no iframes, YouTube-style selection */ +.demos-select { + display: block; + width: 100%; + border: 2px solid var(--pf-global--BorderColor--100); + border-radius: var(--pf-global--BorderRadius--sm); + overflow: hidden; + cursor: pointer; + background: #1a1a1a; + transition: border-color 0.15s ease, box-shadow 0.15s ease; + user-select: none; +} + +.demos-select:hover, +.demos-select:focus-visible { + border-color: var(--pf-global--primary-color--100); + box-shadow: var(--pf-global--BoxShadow--md); + outline: none; +} + +.demos-select--active { + border-color: var(--pf-global--primary-color--100); + box-shadow: 0 0 0 1px var(--pf-global--primary-color--100); +} + +.demos-select--active .demos-select__play { + opacity: 0; +} + +.demos-select__now-playing { + position: absolute; + top: var(--pf-global--spacer--sm); + left: var(--pf-global--spacer--sm); + z-index: 2; + padding: 0.15rem 0.5rem; + font-size: var(--pf-global--FontSize--xs); + font-weight: var(--pf-global--FontWeight--bold); + line-height: 1.2; + text-transform: uppercase; + letter-spacing: 0.03em; + color: #fff; + background: var(--pf-global--primary-color--100, #0066cc); + border-radius: var(--pf-global--BorderRadius--sm); + pointer-events: none; +} + +.demos-select__now-playing[hidden] { + display: none; +} + +.demos-select__media { + position: relative; + display: block; + aspect-ratio: 16 / 9; + overflow: hidden; + background: #1a1a1a; +} + +.demos-thumb__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.demos-select__play { + position: absolute; + inset: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.35); + color: #fff; + font-size: 2.25rem; + transition: background 0.15s ease; + pointer-events: none; +} + +.demos-select:hover .demos-select__play { + background: rgba(0, 0, 0, 0.5); +} + +.demos-select--grid .demos-select__title { + margin: 0; + padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md); + font-size: var(--pf-global--FontSize--md); + font-weight: var(--pf-global--FontWeight--bold); + line-height: var(--pf-global--LineHeight--sm); + color: var(--pf-global--Color--100); + background: var(--pf-global--BackgroundColor--100); + pointer-events: none; +} + +/* Single Arcade player (main area only) */ +.arcade-embed { + position: relative; + width: 100%; + padding-bottom: calc(62.793% + 41px); + height: 0; + overflow: hidden; + border-radius: var(--pf-global--BorderRadius--sm); + background: #e8e8e8; +} + +.arcade-embed__skeleton { + position: absolute; + inset: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%); + background-size: 200% 100%; + animation: demos-shimmer 1.4s ease-in-out infinite; +} + +.arcade-embed__skeleton::after { + content: ""; + width: 2.5rem; + height: 2.5rem; + border: 3px solid #d2d2d2; + border-top-color: var(--pf-global--primary-color--100, #0066cc); + border-radius: 50%; + animation: demos-spin 0.8s linear infinite; +} + +.arcade-embed--loaded .arcade-embed__skeleton { + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease; +} + +.arcade-embed__iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + color-scheme: light; + opacity: 0; + transition: opacity 0.25s ease; +} + +.arcade-embed--loaded .arcade-embed__iframe { + opacity: 1; +} + +@keyframes demos-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +@keyframes demos-spin { + to { transform: rotate(360deg); } +} + +.demos-next-steps { + padding-top: var(--pf-global--spacer--xl); + border-top: 1px solid var(--pf-global--BorderColor--100); +} + +.demos-next-steps ul { + margin: 0; + padding-left: 1.25rem; +} + +@media (max-width: 992px) { + .demos-hero { + grid-template-columns: 1fr; + } + + .demos-player, + .demos-hero__sidebar, + .demos-hero__meta-main { + grid-column: auto; + grid-row: auto; + } + + .demos-sidebar__scroll { + flex-direction: row; + flex-wrap: wrap; + overflow: visible; + } + + .demos-sidebar-item { + flex: 1 1 calc(50% - var(--pf-global--spacer--md)); + min-width: 200px; + } +} + +@media (max-width: 576px) { + .demos-sidebar__scroll { + flex-direction: column; + } + + .demos-sidebar-item { + flex: 1 1 100%; + } +} diff --git a/static/images/demos/deploy-pattern-on-rhdp.png b/static/images/demos/deploy-pattern-on-rhdp.png new file mode 100644 index 0000000000..2613dd53c6 Binary files /dev/null and b/static/images/demos/deploy-pattern-on-rhdp.png differ diff --git a/static/images/demos/placeholder.svg b/static/images/demos/placeholder.svg new file mode 100644 index 0000000000..92dbf4ba54 --- /dev/null +++ b/static/images/demos/placeholder.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/images/demos/rag-ai-application.png b/static/images/demos/rag-ai-application.png new file mode 100644 index 0000000000..19a9efa305 Binary files /dev/null and b/static/images/demos/rag-ai-application.png differ diff --git a/static/images/demos/rag-llm-gitops-azure.png b/static/images/demos/rag-llm-gitops-azure.png new file mode 100644 index 0000000000..663b3a8ed8 Binary files /dev/null and b/static/images/demos/rag-llm-gitops-azure.png differ diff --git a/static/images/demos/rag-llm-lenovo-sno.png b/static/images/demos/rag-llm-lenovo-sno.png new file mode 100644 index 0000000000..e2a97a3ef9 Binary files /dev/null and b/static/images/demos/rag-llm-lenovo-sno.png differ diff --git a/static/images/demos/rag-vp-ui-summit-2026.png b/static/images/demos/rag-vp-ui-summit-2026.png new file mode 100644 index 0000000000..a0648fe9d0 Binary files /dev/null and b/static/images/demos/rag-vp-ui-summit-2026.png differ diff --git a/static/images/demos/ramendr-dell-powerstore-dr.png b/static/images/demos/ramendr-dell-powerstore-dr.png new file mode 100644 index 0000000000..40bd2be12f Binary files /dev/null and b/static/images/demos/ramendr-dell-powerstore-dr.png differ diff --git a/static/images/demos/validated-patterns-ui.png b/static/images/demos/validated-patterns-ui.png new file mode 100644 index 0000000000..1d47b8c3ba Binary files /dev/null and b/static/images/demos/validated-patterns-ui.png differ diff --git a/static/js/demos.js b/static/js/demos.js new file mode 100644 index 0000000000..93426cf87f --- /dev/null +++ b/static/js/demos.js @@ -0,0 +1,175 @@ +(function () { + 'use strict'; + + var embedQuery = '[data-arcade-embed]'; + var embedBase = + 'https://demo.arcade.software/{id}?embed&embed_mobile=tab&embed_desktop=inline&squared=true&show_copy_link=true'; + + function markLoaded(iframe) { + var wrap = iframe.closest(embedQuery); + if (wrap) wrap.classList.add('arcade-embed--loaded'); + } + + function bindIframe(iframe, onLoad) { + iframe.addEventListener( + 'load', + function () { + markLoaded(iframe); + if (onLoad) onLoad(); + }, + { once: true } + ); + } + + function initSidebarScroll() { + var hero = document.querySelector('[data-demos-hero]'); + var player = document.querySelector('[data-demos-player]'); + var scrollEl = document.querySelector('[data-demos-sidebar-scroll]'); + var desktop = window.matchMedia('(min-width: 993px)'); + + if (!hero || !player || !scrollEl) return; + + function syncHeight() { + if (!desktop.matches) { + scrollEl.style.maxHeight = ''; + return; + } + var embed = player.querySelector('[data-arcade-embed]'); + if (!embed) return; + scrollEl.style.maxHeight = embed.offsetHeight + 'px'; + } + + syncHeight(); + + if ('ResizeObserver' in window) { + var ro = new ResizeObserver(syncHeight); + var embed = player.querySelector('[data-arcade-embed]'); + if (embed) ro.observe(embed); + } else { + window.addEventListener('resize', syncHeight); + } + + desktop.addEventListener('change', syncHeight); + } + + var mobileLayout = window.matchMedia('(max-width: 992px)'); + + function scrollToPlayer(player, instant) { + if (!mobileLayout.matches || !player) return; + player.scrollIntoView({ + behavior: instant ? 'auto' : 'smooth', + block: 'start', + }); + } + + function scrollToPlayerAfterLayout(player) { + if (!mobileLayout.matches || !player) return; + scrollToPlayer(player, true); + requestAnimationFrame(function () { + requestAnimationFrame(function () { + scrollToPlayer(player, true); + }); + }); + } + + function initPlayer() { + var page = document.querySelector('.demos-page'); + var hero = document.querySelector('[data-demos-hero]'); + if (!page || !hero) return; + + var player = page.querySelector('[data-demos-player]'); + var mainEmbed = player && player.querySelector(embedQuery); + var mainIframe = player && player.querySelector('iframe'); + var mainTitle = hero.querySelector('[data-demos-main-title]'); + var mainDesc = hero.querySelector('[data-demos-main-desc]'); + var mainPattern = hero.querySelector('[data-demos-main-pattern]'); + var selects = page.querySelectorAll('[data-demo-select]'); + + if (!mainIframe || !selects.length) return; + + var currentId = mainIframe.src.match(/demo\.arcade\.software\/([^?]+)/); + currentId = currentId ? currentId[1] : null; + + function setNowPlaying(demoId) { + selects.forEach(function (el) { + var match = el.getAttribute('data-demo-id') === demoId; + el.classList.toggle('demos-select--active', match); + var badge = el.querySelector('[data-demo-now-playing]'); + if (badge) badge.hidden = !match; + }); + } + + function playDemo(el) { + var id = el.getAttribute('data-demo-id'); + if (!id) return; + + var alreadyPlaying = id === currentId && mainIframe.src.indexOf(id) !== -1; + if (alreadyPlaying) { + scrollToPlayer(player, false); + return; + } + + /* Scroll before iframe reload so the first tap reaches the player on mobile */ + scrollToPlayerAfterLayout(player); + + if (mainEmbed) mainEmbed.classList.remove('arcade-embed--loaded'); + + mainIframe.title = el.getAttribute('data-demo-title') || 'Interactive demo'; + mainIframe.src = embedBase.replace('{id}', id); + bindIframe(mainIframe, function () { + scrollToPlayer(player, true); + }); + currentId = id; + + if (mainTitle) mainTitle.textContent = el.getAttribute('data-demo-title') || ''; + if (mainDesc) mainDesc.textContent = el.getAttribute('data-demo-desc') || ''; + + if (mainPattern) { + var link = el.getAttribute('data-demo-pattern-link'); + var label = el.getAttribute('data-demo-pattern-label'); + if (link && label) { + mainPattern.innerHTML = + 'For more information, see: ' + label + ''; + mainPattern.hidden = false; + } else { + mainPattern.hidden = true; + mainPattern.innerHTML = ''; + } + } + + setNowPlaying(id); + } + + selects.forEach(function (el) { + el.addEventListener('click', function (e) { + e.preventDefault(); + e.stopPropagation(); + playDemo(el); + }); + + el.addEventListener('keydown', function (e) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + playDemo(el); + } + }); + }); + + if (currentId) { + setNowPlaying(currentId); + } + + bindIframe(mainIframe); + } + + function init() { + initPlayer(); + initSidebarScroll(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})();