Add scienceicon renderers

.changeset/cool-grapes-decide.md

@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+On static builds, fix sidebar menu not expanding for current page (closes [#635](https://github.com/jupyter-book/mystmd/issues/2288)).

.gitignore

@@ -43,3 +43,6 @@ yalc.lock
 # backup
 *#
 *~
+
+# vim swap files
+*.swp

docs/_site/primary_sidebar_footer.md

@@ -1 +1 @@
-**Custom Footer** | [GitHub](https://github.com/jupyter-book/myst-theme)
+[{scienceicon}`github`](https://github.com/jupyter-book/myst-theme) [{scienceicon}`website`](https://mystmd.org) [{scienceicon}`mastodon`](https://bsky.app/profile/mystmd.org)

docs/myst.yml

@@ -3,6 +3,8 @@ version: 1
 project:
   id: b19ac145-d09e-4dcc-bd37-28fbba0f9e8e
   title: myst-theme documentation
+  plugins:
+    - https://unpkg.com/@scienceicons/myst@1.0.4/dist/scienceicons.mjs
 
   # description:
   # keywords: []

docs/reference/icons.md

@@ -0,0 +1,51 @@
+---
+title: Icons
+---
+
+# ScienceIcons
+
+[scienceicons](https://github.com/continuous-foundation/scienceicons) is a collection of icons that are relevant to the scientific community.
+It offers a plugin that you can use to create a `{scienceicon}` role.
+The MyST themes know how to render the nodes that this role creates.
+
+## Enable the Plugin
+
+First enable the scienceicons plugin.
+Add this to `myst.yml`:
+
+```yaml
+project:
+  plugins:
+    - https://unpkg.com/@scienceicons/myst@1.0.4/dist/scienceicons.mjs
+```
+
+This enables the role described below:
+
+## Science Icons Role
+
+Inline:
+
+```
+{scienceicon}`jupyter` {scienceicon}`github` {scienceicon}`orcid`
+```
+{scienceicon}`jupyter` {scienceicon}`github` {scienceicon}`orcid`
+
+These are useful if you want to create an **icon link**:
+
+```
+[{scienceicon}`github`](https://github.com/jupyter-book/myst-theme)
+```
+
+[{scienceicon}`github`](https://github.com/jupyter-book/myst-theme)
+
+The `scicon` alias is a helpful short-hand for the same thing:
+
+```
+{scicon}`jupyter-book`
+```
+{scicon}`jupyter-book`
+
+
+## All Supported Icon Names
+
+See the [list of supported icons](https://app.unpkg.com/@scienceicons/myst@1.0.4/files/src/names.json) for a list of the names available.

packages/myst-to-react/package.json

@@ -29,9 +29,11 @@
     "@heroicons/react": "^2.0.18",
     "@myst-theme/providers": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.0.6",
+    "@scienceicons/myst": "^1.0.4",
     "@scienceicons/react": "^0.0.13",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
+    "lucide-react": "^0.562.0",
     "myst-common": "^1.8.1",
     "myst-config": "^1.8.1",
     "myst-migrate": "^1.7.0",

packages/myst-to-react/src/index.tsx

@@ -22,6 +22,8 @@ import PROOF_RENDERERS from './proof.js';
 import EXERCISE_RENDERERS from './exercise.js';
 import ASIDE_RENDERERS from './aside.js';
 import UNKNOWN_MYST_RENDERERS from './unknown.js';
+import SCIENCEICON_RENDERERS from '@scienceicons/myst/react';
+import SCIENCEICON_CLASS_RENDERERS from './scienceicon.js';
 
 export { Block } from './block.js';
 export { CopyIcon, HoverPopover, Tooltip, LinkCard } from './components/index.js';
@@ -59,6 +61,8 @@ export const DEFAULT_RENDERERS = mergeRenderers(
     PROOF_RENDERERS,
     EXERCISE_RENDERERS,
     ASIDE_RENDERERS,
+    SCIENCEICON_RENDERERS,
+    SCIENCEICON_CLASS_RENDERERS,
   ],
   true,
 );

packages/myst-to-react/src/scienceicon.tsx

@@ -0,0 +1,23 @@
+/**
+ * A small wrapper component around scienceicons so that we can add a .scienceicon class to style.
+ */
+import type { NodeRenderer } from '@myst-theme/providers';
+import { ScienceIconRenderer } from '@scienceicons/myst/react';
+import classNames from 'classnames';
+
+// Wrap upstream renderer output with a class so our theme CSS can target it
+// If scienceicons starts shipping with a class then we can delete this!
+export const ScienceIconWithClass: NodeRenderer = ({ node, className }) => {
+  return (
+    <span className={classNames('scienceicon', className)}>
+      <ScienceIconRenderer node={node} />
+    </span>
+  );
+};
+
+const SCIENCEICON_CLASS_RENDERERS = {
+  // Override the "scienceicon" node renderer key with our class-attached wrapper.
+  scienceicon: ScienceIconWithClass,
+};
+
+export default SCIENCEICON_CLASS_RENDERERS;

styles/app.css

@@ -1,4 +1,5 @@
 @import './typography.css';
+@import './scienceicons.css';
 @import './grid-system.css';
 @import './details.css';
 @import './citations.css';

styles/scienceicons.css

@@ -0,0 +1,15 @@
+@layer components {
+  /* Scienceicon output wrapper */
+  a.link > .scienceicon {
+    @apply align-middle;
+  }
+
+  .scienceicon > span.inline-flex {
+    @apply align-middle;
+  }
+
+  /* Hide appended external/download link icon when link content is a scienceicon */
+  a.link > .scienceicon + .link-icon {
+    display: none !important;
+  }
+}

themes/article/remix.config.dev.js

@@ -48,6 +48,7 @@ module.exports = {
     'credit-roles',
     'tex-to-typst',
     'jats-tags',
+    /^@scienceicons\/.*/,
     /^@myst-theme\/.*/,
     /react-syntax-highlighter.*/,
     'markdown-it-myst-extras',

themes/book/remix.config.dev.js

@@ -48,6 +48,7 @@ module.exports = {
     'credit-roles',
     'tex-to-typst',
     'jats-tags',
+    /^@scienceicons\/.*/,
     /^@myst-theme\/.*/,
     /react-syntax-highlighter.*/,
     'markdown-it-myst-extras',