diff --git a/.changeset/cool-grapes-decide.md b/.changeset/cool-grapes-decide.md new file mode 100644 index 000000000..12d212f84 --- /dev/null +++ b/.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)). diff --git a/.gitignore b/.gitignore index 3b0efdb3b..955f515fb 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,6 @@ yalc.lock # backup *# *~ + +# vim swap files +*.swp diff --git a/docs/_site/primary_sidebar_footer.md b/docs/_site/primary_sidebar_footer.md index 73b1b844f..95ba4a5a9 100644 --- a/docs/_site/primary_sidebar_footer.md +++ b/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) diff --git a/docs/myst.yml b/docs/myst.yml index 7b4c31b99..fa6c6b540 100644 --- a/docs/myst.yml +++ b/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: [] diff --git a/docs/reference/icons.md b/docs/reference/icons.md new file mode 100644 index 000000000..d96bffe1b --- /dev/null +++ b/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. diff --git a/package-lock.json b/package-lock.json index e5841a4a5..e29bee7d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11427,6 +11427,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@scienceicons/myst": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@scienceicons/myst/-/myst-1.0.4.tgz", + "integrity": "sha512-jlDC4m7k9qoGmEUqgbP2528Jzz/mm+7ZJE2aIpwPe3aawsj6Z8KxeJRxRNEu8NWyPPPTmJoClGxLhn6GzvsS2Q==", + "peerDependencies": { + "@scienceicons/react": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@scienceicons/react": { "version": "0.0.13", "resolved": "https://registry.npmjs.org/@scienceicons/react/-/react-0.0.13.tgz", @@ -30660,6 +30670,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.562.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz", + "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -43924,9 +43942,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", diff --git a/packages/myst-to-react/package.json b/packages/myst-to-react/package.json index 4e573b44b..57ef01b56 100644 --- a/packages/myst-to-react/package.json +++ b/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", diff --git a/packages/myst-to-react/src/index.tsx b/packages/myst-to-react/src/index.tsx index d790ed2d9..ba390dda3 100644 --- a/packages/myst-to-react/src/index.tsx +++ b/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, ); diff --git a/packages/myst-to-react/src/scienceicon.tsx b/packages/myst-to-react/src/scienceicon.tsx new file mode 100644 index 000000000..9c90460d8 --- /dev/null +++ b/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 ( + + + + ); +}; + +const SCIENCEICON_CLASS_RENDERERS = { + // Override the "scienceicon" node renderer key with our class-attached wrapper. + scienceicon: ScienceIconWithClass, +}; + +export default SCIENCEICON_CLASS_RENDERERS; diff --git a/styles/app.css b/styles/app.css index 6d7009654..2d7e3f7d7 100644 --- a/styles/app.css +++ b/styles/app.css @@ -1,4 +1,5 @@ @import './typography.css'; +@import './scienceicons.css'; @import './grid-system.css'; @import './details.css'; @import './citations.css'; diff --git a/styles/scienceicons.css b/styles/scienceicons.css new file mode 100644 index 000000000..74561d07f --- /dev/null +++ b/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; + } +} diff --git a/themes/article/remix.config.dev.js b/themes/article/remix.config.dev.js index 99d3fb810..b3a82be29 100644 --- a/themes/article/remix.config.dev.js +++ b/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', diff --git a/themes/book/remix.config.dev.js b/themes/book/remix.config.dev.js index 99d3fb810..b3a82be29 100644 --- a/themes/book/remix.config.dev.js +++ b/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',