@stackql/docusaurus-plugin-aeo 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.4.1
+
+Cosmetic patch. No API, option-shape, behavior, or placement changes.
+
+### Changed
+
+- Provider icons swapped from [simple-icons](https://simpleicons.org) (monochrome) to [@lobehub/icons](https://github.com/lobehub/lobe-icons) (colored brand variants). Resolves the ChatGPT-fallback-glyph issue from v0.3.0-v0.4.0: Claude, Perplexity, and Gemini now render in their brand colors via lobehub's `.Color` variants, and ChatGPT renders the OpenAI mark tinted with ChatGPT green (lobehub does not ship a `.Color` variant for OpenAI as of 5.10.0, so the monochrome mark is tinted inline).
+- `ListItemIcon` now uses `sx={{ minWidth: 32, color: 'inherit' }}` so MUI's default tint does not override the brand colors.
+
+### Removed
+
+- `simple-icons` dependency.
+
+### Added
+
+- `@lobehub/icons` (`^5.10.0`, MIT) as a runtime dependency.
+
 ## 0.4.0
 
 Visual refresh of the Ask AI button (feature 3) to match the look-and-feel of MUI-based dropdown components used elsewhere on consumer sites. No changes to features 1, 2, or 4.

package/README.md

@@ -194,9 +194,9 @@ Read https://your-site.example/path/to/page.md and help me with the following qu
 
 The trailing space is intentional - the cursor lands ready for the user to type.
 
-Provider icons are real brand SVGs sourced from [simple-icons](https://simpleicons.org). Three of four (Claude, Perplexity, Gemini) come from the upstream catalog directly. OpenAI / ChatGPT was removed from simple-icons in 2024 following a takedown, so the ChatGPT row shows a neutral chat-bubble glyph as a placeholder.
+Provider icons are real brand SVGs in each provider's brand color, sourced from [@lobehub/icons](https://github.com/lobehub/lobe-icons). Claude, Perplexity, and Gemini render via their `.Color` variants directly; OpenAI ships only a monochrome mark, so the ChatGPT row uses that mark tinted with the ChatGPT brand green so it visually pairs with the colored icons.
 
-**Trademark note.** Brand logos are trademarks of their respective owners; their inclusion via simple-icons does not imply endorsement. Consumers using the Ask AI button in commercial contexts should review each provider's brand-usage policy.
+**Trademark note.** Brand logos are trademarks of their respective owners; their inclusion via @lobehub/icons does not imply endorsement. Consumers using the Ask AI button in commercial contexts should review each provider's brand-usage policy.
 
 Options:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackql/docusaurus-plugin-aeo",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "AEO (Answer Engine Optimization) helpers for Docusaurus: .md companion files, llms.txt / llms-full.txt, an Ask AI dropdown, and /ai/* route conventions.",
   "main": "src/index.js",
   "exports": {
@@ -21,22 +21,30 @@
   },
   "peerDependencies": {
     "@docusaurus/core": "^3.0.0",
-    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
-    "@mui/material": { "optional": false },
-    "@mui/icons-material": { "optional": false },
-    "@emotion/react": { "optional": false },
-    "@emotion/styled": { "optional": false }
+    "@mui/material": {
+      "optional": false
+    },
+    "@mui/icons-material": {
+      "optional": false
+    },
+    "@emotion/react": {
+      "optional": false
+    },
+    "@emotion/styled": {
+      "optional": false
+    }
   },
   "dependencies": {
-    "gray-matter": "^4.0.3",
-    "simple-icons": "^16.22.0"
+    "@lobehub/icons": "^5.10.0",
+    "gray-matter": "^4.0.3"
   },
   "overrides": {
     "serialize-javascript": "^7.0.5",

package/src/theme/AskAiButton/icons.js

@@ -1,72 +1,45 @@
-// Brand icons for the four supported AI providers.
+// Brand icons for the four supported AI providers, sourced from
+// @lobehub/icons. Each provider's package exports a default Mono
+// component with .Color, .Text, .Combine, .Avatar attached as
+// properties. We prefer .Color (multi-color brand variant) when the
+// provider ships one; OpenAI does not, so we fall back to Mono and
+// tint it with the ChatGPT brand green via inline style.
 //
-// Three of four come from simple-icons (siClaude, siPerplexity,
-// siGooglegemini). OpenAI / ChatGPT was removed from simple-icons in
-// 2024 following a takedown, so for that one we ship a neutral inline
-// chat-bubble glyph. The same fallback path is reused for any future
-// icon that disappears from upstream.
-//
-// All icons render as a 24x24 viewBox SVG with `fill="currentColor"`,
-// so the menu CSS can size them via font-size or width/height and tint
-// them via the surrounding text color. ESM `import` is used so webpack
-// can tree-shake unused simple-icons exports out of the bundle.
+// Deep import paths (@lobehub/icons/es/<Provider>) are used because
+// the package does not declare a subpath exports map; the deep path
+// is stable across the 5.x line and tree-shakes cleanly because each
+// per-provider module's dependency footprint is just React.
 
 import React from 'react';
-import { siClaude, siPerplexity, siGooglegemini } from 'simple-icons';
+import ClaudeIcons from '@lobehub/icons/es/Claude';
+import OpenAIIcons from '@lobehub/icons/es/OpenAI';
+import PerplexityIcons from '@lobehub/icons/es/Perplexity';
+import GeminiIcons from '@lobehub/icons/es/Gemini';
 
-function svg(children) {
-  return React.createElement(
-    'svg',
-    {
-      xmlns: 'http://www.w3.org/2000/svg',
-      width: '1em',
-      height: '1em',
-      viewBox: '0 0 24 24',
-      fill: 'currentColor',
-      role: 'img',
-      'aria-hidden': 'true',
-    },
-    children,
-  );
-}
+const ICON_SIZE = 18;
 
-function fromSimpleIcons(si) {
-  if (!si || typeof si.path !== 'string') {
-    return GenericAiIcon;
-  }
-  return function BrandIcon() {
-    return svg(React.createElement('path', { d: si.path }));
-  };
-}
+// OpenAI ships only the monochrome mark (Color variant absent from
+// @lobehub/icons as of 5.10.0). Use the known ChatGPT brand green so
+// the row visually matches the other three colored marks.
+const CHATGPT_GREEN = '#10A37F';
 
-// Neutral chat-bubble glyph - used when a brand icon isn't available
-// upstream. Not a brand mark, no trademark concerns.
-function GenericAiIcon() {
-  return svg(
-    React.createElement('path', {
-      d: 'M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm3 6h2v2H7v-2Zm4 0h2v2h-2v-2Zm4 0h2v2h-2v-2Z',
-    }),
-  );
+function makeColorIcon(IconNamespace, fallbackColor) {
+  const Component = IconNamespace.Color || IconNamespace;
+  const usingFallback = !IconNamespace.Color;
+  return function Icon() {
+    const props = { size: ICON_SIZE };
+    if (usingFallback && fallbackColor) {
+      props.style = { color: fallbackColor };
+    }
+    return React.createElement(Component, props);
+  };
 }
 
 const icons = {
-  claude: fromSimpleIcons(siClaude),
-  // simple-icons dropped OpenAI/ChatGPT in 2024; fall back to a neutral
-  // chat-bubble glyph rather than failing the build or shipping a guess
-  // at the wordmark.
-  chatgpt: GenericAiIcon,
-  perplexity: fromSimpleIcons(siPerplexity),
-  gemini: fromSimpleIcons(siGooglegemini),
+  claude: makeColorIcon(ClaudeIcons),
+  chatgpt: makeColorIcon(OpenAIIcons, CHATGPT_GREEN),
+  perplexity: makeColorIcon(PerplexityIcons),
+  gemini: makeColorIcon(GeminiIcons),
 };
 
-if (typeof console !== 'undefined') {
-  for (const [name, icon] of Object.entries(icons)) {
-    if (icon === GenericAiIcon && name !== 'chatgpt') {
-      console.warn(
-        `[plugin-aeo] AskAiButton: brand icon for "${name}" missing from simple-icons; using generic AI glyph`,
-      );
-    }
-  }
-}
-
 export default icons;

package/src/theme/AskAiButton/index.jsx

@@ -105,7 +105,7 @@ export default function AskAiButton() {
               rel="noopener noreferrer"
               onClick={handleClose}
             >
-              <ListItemIcon>
+              <ListItemIcon sx={{ minWidth: 32, color: 'inherit' }}>
                 <Icon />
               </ListItemIcon>
               <ListItemText