From 4ffd6f598cfd324bc181782868a783ff700fb64a Mon Sep 17 00:00:00 2001 From: David Pine <7679720+IEvangelist@users.noreply.github.com> Date: Thu, 16 Jul 2026 13:38:39 -0500 Subject: [PATCH 1/2] Fix Open dropdown to show brand icons instead of generic sparkle The starlight-page-actions plugin renders a real brand icon for each built-in action but forces the generic 'AI' sparkle glyph on every custom action. Because the ChatGPT, Claude, and GitHub Copilot entries were configured as custom actions, all three showed the same sparkle. Switch to the plugin's built-in chatgpt/claude/githubCopilot actions (the hrefs and labels are identical) so ChatGPT and Claude get their brand marks, then restyle the built-in GitHub Copilot glyph to the site's GitHub octocat logo via a masked icon override in PageTitle.astro. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 4379a930-b6fb-4a65-8c6f-57a63b780087 --- src/frontend/astro.config.mjs | 25 +++++++------------ .../src/components/starlight/PageTitle.astro | 22 ++++++++++++++++ 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/frontend/astro.config.mjs b/src/frontend/astro.config.mjs index 215da4507..21a61b541 100644 --- a/src/frontend/astro.config.mjs +++ b/src/frontend/astro.config.mjs @@ -92,23 +92,16 @@ export default defineConfig({ plugins: [ starlightPageActions({ share: true, + // Use the plugin's built-in actions so each entry renders its real + // brand icon. Custom actions are always given the plugin's generic + // "AI" sparkle glyph, which is why every "Open in …" item previously + // showed the same icon. The built-in hrefs match what we want, and + // the GitHub Copilot mark is restyled to the site's GitHub logo in + // src/components/starlight/PageTitle.astro. actions: { - chatgpt: false, - claude: false, - custom: { - copilot: { - label: 'Open in GitHub Copilot', - href: 'https://github.com/copilot/?prompt=', - }, - claude: { - label: 'Open in Claude', - href: 'https://claude.ai/new?q=', - }, - chatGpt: { - label: 'Open in ChatGPT', - href: 'https://chatgpt.com/?q=', - }, - }, + chatgpt: true, + claude: true, + githubCopilot: true, }, }), lunaria({ diff --git a/src/frontend/src/components/starlight/PageTitle.astro b/src/frontend/src/components/starlight/PageTitle.astro index 08f52a65c..0395c8924 100644 --- a/src/frontend/src/components/starlight/PageTitle.astro +++ b/src/frontend/src/components/starlight/PageTitle.astro @@ -38,6 +38,28 @@ const isApiSubpage = currentPath.startsWith('reference/api/'); font-weight: 600; color: var(--sl-color-white); } + + /* The starlight-page-actions plugin ships its own GitHub Copilot mark for the + built-in "Open in GitHub Copilot" action. Replace it with the GitHub logo + used elsewhere on the site (Starlight's `github` octocat glyph) by hiding + the bundled artwork and masking the icon box with the octocat path. The + `#dropdown-menu` prefix keeps this ahead of the plugin's own icon styles. */ + :global(#dropdown-menu .dropdown-item .action-icon[data-action-icon='githubCopilot'] > *) { + display: none; + } + + :global(#dropdown-menu .dropdown-item .action-icon[data-action-icon='githubCopilot']) { + transform: none; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z'/%3E%3C/svg%3E"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; + }