@stackql/docusaurus-plugin-aeo 0.1.0

package/src/theme/AskAiButton/icons.js

@@ -0,0 +1,55 @@
+// Hand-rolled minimal SVGs for the four supported AI providers. Glyphs only;
+// outer wrapper supplies size and color. Using `currentColor` so the icon
+// inherits theme colors via CSS.
+
+const React = require('react');
+
+function svg(children, viewBox = '0 0 24 24') {
+  return React.createElement(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '1em',
+      height: '1em',
+      viewBox,
+      fill: 'currentColor',
+      'aria-hidden': 'true',
+    },
+    children,
+  );
+}
+
+const ClaudeIcon = () =>
+  svg(
+    React.createElement('path', {
+      d: 'M5.5 17.5 9.6 6.6h2.6l4.1 10.9h-2.4l-.9-2.5h-3.9l-.9 2.5H5.5Zm4.6-4.5h2.8l-1.4-4-1.4 4Zm6.4 4.5V6.6h2.2v10.9h-2.2Z',
+    }),
+  );
+
+const ChatGptIcon = () =>
+  svg(
+    React.createElement('path', {
+      d: 'M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.6 12.4-3.9 2.3a1.5 1.5 0 0 1-1.4 0L7.4 14.4a1.5 1.5 0 0 1-.7-1.3V8.6a1.5 1.5 0 0 1 .7-1.3l3.9-2.3a1.5 1.5 0 0 1 1.4 0l3.9 2.3a1.5 1.5 0 0 1 .7 1.3v4.5a1.5 1.5 0 0 1-.7 1.3ZM12 8.5l-3.2 1.8v3.4L12 15.5l3.2-1.8v-3.4Z',
+    }),
+  );
+
+const PerplexityIcon = () =>
+  svg(
+    React.createElement('path', {
+      d: 'M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.3 6.7 3.7L12 11.7 5.3 8 12 4.3ZM5 9.7l6 3.3v6.6l-6-3.3V9.7Zm14 0v6.6l-6 3.3V13l6-3.3Z',
+    }),
+  );
+
+const GeminiIcon = () =>
+  svg(
+    React.createElement('path', {
+      d: 'M12 2 9.5 9.5 2 12l7.5 2.5L12 22l2.5-7.5L22 12l-7.5-2.5L12 2Z',
+    }),
+  );
+
+module.exports = {
+  claude: ClaudeIcon,
+  chatgpt: ChatGptIcon,
+  perplexity: PerplexityIcon,
+  gemini: GeminiIcon,
+};

package/src/theme/AskAiButton/index.jsx

@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import icons from './icons.js';
+import styles from './styles.module.css';
+
+const PROVIDER_LABELS = {
+  claude: 'Ask Claude',
+  chatgpt: 'Ask ChatGPT',
+  perplexity: 'Ask Perplexity',
+  gemini: 'Ask Gemini',
+};
+
+const PROVIDER_URLS = {
+  claude: 'https://claude.ai/new?q=',
+  chatgpt: 'https://chatgpt.com/?q=',
+  perplexity: 'https://www.perplexity.ai/search?q=',
+  gemini: 'https://gemini.google.com/app?q=',
+};
+
+function buildPrompt(template, pageUrl) {
+  return template.replace('{pageUrl}', pageUrl);
+}
+
+export default function AskAiButton(props) {
+  const { siteConfig } = useDocusaurusContext();
+  const data = usePluginData('@stackql/docusaurus-plugin-aeo') || {};
+  const cfg = data.askAi || {};
+  const location = useLocation();
+
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    function onDocClick(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onEsc(e) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    if (open) {
+      document.addEventListener('mousedown', onDocClick);
+      document.addEventListener('keydown', onEsc);
+    }
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onEsc);
+    };
+  }, [open]);
+
+  const toggle = useCallback(() => setOpen((v) => !v), []);
+
+  if (cfg.enabled === false) return null;
+
+  const baseUrl = (siteConfig.url || '').replace(/\/$/, '');
+  const pageUrl = `${baseUrl}${location.pathname.replace(/\/$/, '') || ''}`;
+  const promptTemplate =
+    cfg.promptTemplate ||
+    'Read {pageUrl}.md and help me with the following question about it: ';
+  const targetUrl = cfg.companionsEnabled === false
+    ? pageUrl
+    : pageUrl; // template controls .md suffix; pageUrl is the HTML route
+  const prompt = buildPrompt(promptTemplate, targetUrl);
+  const encoded = encodeURIComponent(prompt);
+
+  const order =
+    Array.isArray(cfg.providerOrder) && cfg.providerOrder.length > 0
+      ? cfg.providerOrder
+      : ['claude', 'chatgpt', 'perplexity', 'gemini'];
+
+  return (
+    <div className={styles.wrapper} ref={wrapperRef}>
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={toggle}
+      >
+        <span>Ask AI about this page</span>
+        <span className={styles.caret}>{open ? '▲' : '▼'}</span>
+      </button>
+      {open && (
+        <ul className={styles.menu} role="menu">
+          {order.map((key) => {
+            const Icon = icons[key];
+            const label = PROVIDER_LABELS[key] || key;
+            const base = PROVIDER_URLS[key];
+            if (!base || !Icon) return null;
+            const href = `${base}${encoded}`;
+            return (
+              <li key={key} className={styles.item} role="none">
+                <a
+                  role="menuitem"
+                  className={styles.itemLink}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className={styles.icon}>
+                    <Icon />
+                  </span>
+                  <span>{label}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/theme/AskAiButton/styles.module.css

@@ -0,0 +1,74 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+  margin: 1.5rem 0;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-contrast-foreground, #fff);
+  border: 1px solid var(--ifm-color-primary-dark);
+  border-radius: var(--ifm-button-border-radius, 0.4rem);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.05s ease;
+}
+
+.trigger:hover {
+  background: var(--ifm-color-primary-dark);
+}
+
+.trigger:active {
+  transform: translateY(1px);
+}
+
+.caret {
+  font-size: 0.7em;
+  opacity: 0.85;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 50;
+  min-width: 12rem;
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style: none;
+  background: var(--ifm-background-surface-color, var(--ifm-background-color));
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-button-border-radius, 0.4rem);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.item {
+  margin: 0;
+}
+
+.itemLink {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.85rem;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  font-size: 0.95em;
+}
+
+.itemLink:hover {
+  background: var(--ifm-color-emphasis-100);
+  text-decoration: none;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.1em;
+  color: var(--ifm-color-primary);
+}

package/src/theme/BlogPostItem/Footer/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Footer from '@theme-original/BlogPostItem/Footer';
+import AskAiButton from '@theme/AskAiButton';
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <AskAiButton />
+      <Footer {...props} />
+    </>
+  );
+}

package/src/theme/DocItem/Footer/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+import AskAiButton from '@theme/AskAiButton';
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <AskAiButton />
+      <Footer {...props} />
+    </>
+  );
+}