From 26b2aa78a6517b48ae7b54111c99d895c3cafedc Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Oct 2026 18:30:39 +0300 Subject: [PATCH 1/3] Show YouTube quickstart parts as a sidebar drop-down Replaces the single sidebar link with a collapsible group (Overview plus the five parts). The group opens automatically on the overview and on any part page. Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01JjqwehnVjXiJM42zoC7Kea --- astro.config.mjs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index 08bace4..5ba1aeb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -242,7 +242,14 @@ export default defineConfig({ { label: 'Install and connect', slug: 'selive/getting-started' }, ] }, { label: 'Guides', items: [ - { label: 'YouTube quickstart', slug: 'selive/guides/youtube-quickstart', badge: { text: '5 parts', variant: 'note' } }, + { label: 'YouTube quickstart', collapsed: true, badge: { text: '5 parts', variant: 'note' }, items: [ + { label: 'Overview', slug: 'selive/guides/youtube-quickstart' }, + { slug: 'selive/guides/youtube-quickstart/create-your-account' }, + { slug: 'selive/guides/youtube-quickstart/dashboard-tour' }, + { slug: 'selive/guides/youtube-quickstart/build-your-overlay' }, + { slug: 'selive/guides/youtube-quickstart/connect-obs-and-go-live' }, + { slug: 'selive/guides/youtube-quickstart/set-up-your-chatbot' }, + ] }, { label: 'Add overlays and alerts', slug: 'selive/guides/overlays-and-alerts' }, { label: 'Create a vertical canvas', slug: 'selive/guides/canvas' }, { label: 'Manage scenes and sources', slug: 'selive/guides/scenes-and-sources' }, From fce59f6031974fd21503f1a3a42bda10a7666f9e Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Oct 2026 18:45:47 +0300 Subject: [PATCH 2/3] Remove the "5 parts" badge from the quickstart sidebar group Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01JjqwehnVjXiJM42zoC7Kea --- astro.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index 5ba1aeb..6945016 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -242,7 +242,7 @@ export default defineConfig({ { label: 'Install and connect', slug: 'selive/getting-started' }, ] }, { label: 'Guides', items: [ - { label: 'YouTube quickstart', collapsed: true, badge: { text: '5 parts', variant: 'note' }, items: [ + { label: 'YouTube quickstart', collapsed: true, items: [ { label: 'Overview', slug: 'selive/guides/youtube-quickstart' }, { slug: 'selive/guides/youtube-quickstart/create-your-account' }, { slug: 'selive/guides/youtube-quickstart/dashboard-tour' }, From 7180a015bc54d9ba07dca079fb5cc3c939187a8a Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Oct 2026 18:57:51 +0300 Subject: [PATCH 3/3] Match the Beta sidebar badge to the @frontend/ui Beta badge Uses the default badge variant for Beta and restyles it as a translucent purple pill (values read from ui.streamelements.dev, same in light and dark). The amber 'In dev' badge is unchanged. Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01JjqwehnVjXiJM42zoC7Kea --- astro.config.mjs | 2 +- src/styles/custom.css | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index 6945016..43e7aa5 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -255,7 +255,7 @@ export default defineConfig({ { label: 'Manage scenes and sources', slug: 'selive/guides/scenes-and-sources' }, { label: 'Set up multistreaming', slug: 'selive/guides/multistreaming' }, { label: 'Twitch dual format', slug: 'selive/guides/twitch-dual-format' }, - { label: 'YouTube dual stream', slug: 'selive/guides/youtube-dual-stream', badge: { text: 'Beta', variant: 'caution' } }, + { label: 'YouTube dual stream', slug: 'selive/guides/youtube-dual-stream', badge: { text: 'Beta', variant: 'default' } }, { label: 'Save replays with Backtrack', slug: 'selive/guides/backtrack' }, { label: 'YouTube setup', slug: 'selive/guides/youtube-setup' }, { label: 'All guides', slug: 'selive/guides' }, diff --git a/src/styles/custom.css b/src/styles/custom.css index da52c86..3b7df34 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -293,3 +293,17 @@ } .hero .actions a { justify-content: center; } } + +/* "Beta" sidebar badge: matches the Beta badge in @frontend/ui (purple + translucent pill, 12px/500 text; same values in light and dark). */ +.sidebar-content .sl-badge.default { + --se-beta: rgb(123 62 254); + background-color: color-mix(in srgb, var(--se-beta) 16%, transparent); + border: 0; + border-radius: 8px; + color: var(--se-beta); + font-size: 12px; + font-weight: 500; + line-height: 16px; + padding: 0 6px; +}