🔌 sidebar mount point POC

[stevejpurves]

This PR shows a way for a theme to provide artibrary but contained JS mount points outside of the main MyST content flow that can be configured at build time.

for example, saving this ESM module content to a file sidebar.mjs in the myst folder.

# sidebar.mjs

/**
 * Sidebar widget ESM. The theme loads this and calls renderSidebar(container)
 * with the container DOM element. Use plain DOM APIs on container.
 */
export function renderSidebar(container) {
  const div = document.createElement('div');
  div.textContent = 'I <3 Javascript';
  div.setAttribute('style', [
    'margin: 0.5em 0;',
    'font-size: 1.25rem;',
    'font-weight: bold;',
    'color: #ff00ff;',
    'font-family: Comic Sans MS, cursive;',
    'border: 1px dashed #ff00ff;',
    'padding: 0.5em;',
    'border-radius: 0.5em;',
    'text-align: center;',
  ].join(' '));
  container.appendChild(div);
}

Then add this in your myst.yml

# myst.yml#site.sidebar_mount_js

site:
  options:
    logo_text: Plots
    style: ./style.css
    sidebar_mount_js: ./sidebar.mjs

[changeset-bot]

🦋 Changeset detected

Latest commit: c836757

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@myst-theme/common	Patch
@myst-theme/site	Patch
@myst-theme/book	Patch
@myst-theme/providers	Patch
@myst-theme/frontmatter	Patch
@myst-theme/diagrams	Patch
@myst-theme/jupyter	Patch
@myst-theme/styles	Patch
@myst-theme/icons	Patch
@myst-theme/search	Patch
@myst-theme/search-minisearch	Patch
@myst-theme/landing-pages	Patch
@myst-theme/article	Patch
myst-to-react	Patch
myst-demo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for myst-theme ready!

Name	Link
🔨 Latest commit	c836757
🔍 Latest deploy log	https://app.netlify.com/projects/myst-theme/deploys/697a418e2d10030008898dc5
😎 Deploy Preview	https://deploy-preview-784--myst-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.