Rebuild the page actions row: Copy as markdown and Open in Claude

src/components/Button.astro

@@ -10,10 +10,12 @@ type SharedProps = {
   disabled?: boolean;
 };
 
-// Extend the native button attributes, or the anchor ones when an href is given
+// Extend the native button attributes, the anchor ones when an href is given,
+// or the summary ones when the button is a `<details>` disclosure trigger
 type Props =
-  | (HTMLAttributes<'button'> & SharedProps & { href?: never })
-  | (HTMLAttributes<'a'> & SharedProps & { href: string | URL });
+  | (HTMLAttributes<'button'> & SharedProps & { href?: never; as?: 'button' })
+  | (HTMLAttributes<'a'> & SharedProps & { href: string | URL; as?: never })
+  | (HTMLAttributes<'summary'> & SharedProps & { href?: never; as: 'summary' });
 
 const {
   label,
@@ -23,6 +25,7 @@ const {
   importance = 'default',
   disabled = false,
   href,
+  as = 'button',
   type = 'button',
   class: className,
   ...rest
@@ -41,7 +44,9 @@ const tagSpecificProps = href
       'aria-disabled': disabled ? 'true' : undefined,
       tabindex: disabled ? -1 : undefined,
     }
-  : { type, disabled };
+  : as === 'summary'
+    ? { 'aria-disabled': disabled ? 'true' : undefined }
+    : { type, disabled };
 
 const iconDetails = (name: string | undefined) => {
   if (!name) return null;
@@ -55,7 +60,7 @@ const endIcon = iconDetails(iconEnd);
 const StartIconTag = startIcon?.tag;
 const EndIconTag = endIcon?.tag;
 
-const Tag = href ? 'a' : 'button';
+const Tag = href ? 'a' : as;
 ---
 
 <Tag class={classes} {...tagSpecificProps} {...rest}>

src/components/CopyMarkdown.astro

@@ -1,7 +1,7 @@
 ---
-import { SITE } from '@config';
 import { Lang, Translations } from '@util/Languages';
-import { getEligibleSlugs } from '@util/mdxContent';
+import { pageMarkdownUrl } from '@util/mdxContent';
+import Button from './Button.astro';
 
 type Props = {
   lang: string;
@@ -10,78 +10,29 @@ const { lang } = Astro.props satisfies Props;
 
 const _ = Lang(lang);
 
-const docsPath = Astro.url.pathname.replace(/\/$/, '');
-const subfolderPrefix = SITE.subfolder.replace(/\/$/, '') + '/';
-const docsSlug = docsPath.startsWith(subfolderPrefix)
-  ? docsPath.slice(subfolderPrefix.length)
-  : null;
-const eligibleSlugs = getEligibleSlugs();
-const pageMdUrl =
-  docsSlug && eligibleSlugs.has(docsSlug) ? docsPath + '.md' : null;
-const allDocsUrl = SITE.subfolder.replace(/\/$/, '') + '/llms-full.txt';
+const pageMdUrl = pageMarkdownUrl(Astro.url.pathname);
 ---
 
 {
   pageMdUrl && (
-    <div class="octo-copy-md">
-      <details class="octo-copy-md__menu" data-copy-md-menu>
-        <summary class="octo-copy-md__trigger" data-copy-md-trigger>
-          <span class="octo-copy-md__trigger-icon" aria-hidden="true" />
-          <span class="octo-copy-md__trigger-label">
-            {_(Translations.octopus_copy_md.label)}
-          </span>
-          <span class="octo-copy-md__trigger-caret" aria-hidden="true" />
-        </summary>
-        <ul class="octo-copy-md__options">
-          <li>
-            <button
-              type="button"
-              class="octo-copy-md__option octo-copy-md__option--copy"
-              data-copy-md-option
-              data-copy-md-action="copy"
-              data-copy-md-url={pageMdUrl}
-              data-copy-md-label={_(Translations.octopus_copy_md.copy)}
-              data-copy-md-success={_(Translations.octopus_copy_md.copied)}
-              data-copy-md-error={_(Translations.octopus_copy_md.error)}
-            >
-              <span class="octo-copy-md__option-label" data-copy-md-text>
-                {_(Translations.octopus_copy_md.copy)}
-              </span>
-            </button>
-          </li>
-          <li>
-            <a
-              class="octo-copy-md__option octo-copy-md__option--view"
-              data-copy-md-option
-              href={pageMdUrl}
-              target="_blank"
-              rel="noopener"
-            >
-              <span class="octo-copy-md__option-label">
-                {_(Translations.octopus_copy_md.view_raw)}
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="octo-copy-md__option octo-copy-md__option--all"
-              data-copy-md-option
-              href={allDocsUrl}
-              target="_blank"
-              rel="noopener"
-            >
-              <span class="octo-copy-md__option-label">
-                {_(Translations.octopus_copy_md.download_all)}
-              </span>
-            </a>
-          </li>
-        </ul>
-        <div
-          class="octo-copy-md__sr-status"
-          aria-live="polite"
-          data-copy-md-live
-        />
-      </details>
-    </div>
+    <Button
+      class="octo-copy-md"
+      icon="octo-copy-md__icon"
+      label={_(Translations.octopus_copy_md.copy)}
+      size="small"
+      data-copy-md-url={pageMdUrl}
+    />
   )
 }
+
+<style>
+  /* `:global()` crosses into Button's scope */
+  :global(.octo-copy-md__icon) {
+    background-color: var(--colorIconPrimary);
+    mask: url('../assets/icons/copy.svg') center / contain no-repeat;
+  }
+
+  :global(.octo-copy-md[data-copied] .octo-copy-md__icon) {
+    mask: url('../assets/icons/check.svg') center / contain no-repeat;
+  }
+</style>

src/components/OpenInLlm.astro

@@ -0,0 +1,90 @@
+---
+import { SITE } from '@config';
+import { Lang, Translations } from '@util/Languages';
+import { pageMarkdownUrl } from '@util/mdxContent';
+import SplitButton from './SplitButton.astro';
+
+type Props = {
+  lang: string;
+};
+const { lang } = Astro.props satisfies Props;
+
+const _ = Lang(lang);
+
+const pageMdUrl = pageMarkdownUrl(Astro.url.pathname);
+
+// The assistant fetches the page itself, so the prompt carries an absolute URL
+// rather than the site-relative one the rest of the site links with.
+const prompt = pageMdUrl
+  ? _(Translations.octopus_open_in_llm.prompt).replace(
+      '{url}',
+      new URL(pageMdUrl, SITE.url).href
+    )
+  : '';
+
+const assistants = [
+  {
+    label: _(Translations.octopus_open_in_llm.open_in_claude),
+    href: 'https://claude.ai/new?q=' + encodeURIComponent(prompt),
+    icon: 'octo-llm__icon octo-llm__icon--claude',
+    iconEnd: 'octo-llm__icon octo-llm__icon--external',
+  },
+  {
+    label: _(Translations.octopus_open_in_llm.open_in_chatgpt),
+    href: 'https://chatgpt.com/?hints=search&q=' + encodeURIComponent(prompt),
+    icon: 'octo-llm__icon octo-llm__icon--chatgpt',
+    iconEnd: 'octo-llm__icon octo-llm__icon--external',
+  },
+];
+
+const [primary] = assistants;
+---
+
+{
+  pageMdUrl && (
+    <SplitButton
+      class="octo-llm"
+      label={primary.label}
+      href={primary.href}
+      icon={primary.icon}
+      size="small"
+      items={assistants}
+      menuLabel={_(Translations.octopus_open_in_llm.more_assistants)}
+      target="_blank"
+      rel="noopener"
+    />
+  )
+}
+
+<style>
+  /* `:global()` crosses into SplitButton's scope, which renders every element
+     these land on; the `.octo-llm` prefix keeps them contained. */
+  .octo-llm :global(.octo-llm__icon) {
+    background-color: currentColor;
+  }
+
+  /* The exported glyphs sit inside a box 25% wider than themselves, so the mask
+     is sized rather than left to fill. */
+  .octo-llm :global(.btn .octo-llm__icon) {
+    --octo-llm-glyph-size: 1rem;
+  }
+
+  .octo-llm :global(.split-btn__option-icon) {
+    --octo-llm-glyph-size: 0.8rem;
+  }
+
+  .octo-llm :global(.octo-llm__icon--claude) {
+    mask: url('../assets/icons/claude.svg') center / var(--octo-llm-glyph-size)
+      no-repeat;
+  }
+
+  .octo-llm :global(.octo-llm__icon--chatgpt) {
+    mask: url('../assets/icons/chatgpt.svg') center / var(--octo-llm-glyph-size)
+      no-repeat;
+  }
+
+  .octo-llm :global(.octo-llm__icon--external) {
+    mask: url('../assets/icons/external-link.svg') center /
+      var(--octo-llm-glyph-size) no-repeat;
+  }
+</style>