@5mts/canopy 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Five Mountains
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,172 @@
-# Temporary Holding Version
+# Canopy: A Grove styling & design toolkit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A library to assist in custom designs for sites using the NPR Grove CMS. 
+
+**This project is not affiliated with NPR, Grove, Brightspot, or other vendors.** This is a completely independent project of [Five Mountains](https://5mts.com), a private, independent consultancy supporting public media and local news. While we will try to keep this library updated as a community resource, this project is provided purely "as is" and we can't guarantee it will work or continue working for your needs. 
+
+We encourage questions, issues, and submissions — and if you need support with Grove or other digital projects, we take a limited number of paid projects each year (which help support work on this and other community projects). 
+
+## Quick start
+
+Download the starter into a new theme directory, install its dependencies, and start the local development server:
+
+```bash
+npx degit 5mts/canopy/starter my-grove-theme
+cd my-grove-theme
+npm install
+npm run dev
+```
+
+The starter pins the audio player to the bottom of the screen and gives the home page a cream background. It rebuilds your CSS when you save changes.
+
+To preview it on your site, add this stylesheet link to the page `<head>` using your browser's local overrides or our [Local Script Testing](https://chromewebstore.google.com/detail/local-script-testing/jmgdaokiiafjphaomnmecgeldnpddebe) extension for Chromium browsers:
+
+```html
+<link rel="stylesheet" href="http://localhost:3000/dist/theme.css">
+```
+
+See the [starter instructions](https://github.com/5mts/canopy/tree/main/starter#readme) for customization and production builds.
+
+
+## Install in a theme
+
+```bash
+npm install @5mts/canopy
+```
+
+Requires Dart Sass 1.78+ with `--pkg-importer=node` to use the `pkg:` imports below. Put Sass examples in your theme's `.scss` files and JavaScript imports in its `.js` files.
+
+## Style Grove elements
+
+Canopy gives short names to complex Grove selectors.
+
+```scss
+@use 'pkg:@5mts/canopy' as *;
+
+@include grove-selector('promo-title') {
+  color: teal;
+}
+```
+
+This styles Grove promo titles. Find available names in the [selector map](_selectors.scss). For a simple class such as `.SocialBar`, use ordinary CSS.
+
+To limit a rule to part of the page, nest it:
+
+```scss
+aside {
+  @include grove-selector('promo-title') {
+    font-size: 1rem;
+  }
+}
+```
+
+### Style pages by program, section, or tag
+
+```scss
+#{grove-page-is('program', 'Morning Show')} {
+  @include grove-selector('nav-bar') {
+    background: teal;
+  }
+}
+```
+
+Use `program`, `category` (Grove Section), `keywords` (Grove Tags), `pageType`, or `series`. Values must match the page's metadata. Pass a list to match any listed value: `grove-page-is('program', ('Morning Show', 'Weekend Talk'))`.
+
+### Change a layout
+
+```scss
+@use 'pkg:@5mts/canopy/patterns' as *;
+
+.ListE-items {
+  @include three-column-list;
+}
+
+@include audio-player-bottom($offset: 0, $reserve-footer: 50px);
+```
+
+The list uses two columns from 768px and three from 1240px. It also hides bylines and adjusts tile spacing. Use `two-column-list` to stop at two columns.
+
+The player stays at the bottom of the screen. Set `$reserve-footer` to its height to keep footer content clear; that padding applies from 768px by default.
+
+Imports alone add no CSS. Each `@include` adds the styles you request.
+
+| Task | Example |
+|---|---|
+| Put the sidebar on the left | [Sidebar](examples/sidebar-left.md) |
+| Add a dropdown or accordion | [Show and hide content](examples/disclosure.md) |
+| Move an element | [Relocation](examples/relocate.md) |
+| Mark the current section link or add a section menu | [Section navigation](examples/subnav.md) |
+
+## Run JavaScript when Grove adds content
+
+Grove can load page content after your script runs and replace it during navigation. Use `onGroveElement` to handle each matching element when it appears:
+
+```js
+import { onGroveElement } from '@5mts/canopy/ready.js';
+
+onGroveElement('.EplB-header-title', el => {
+  el.textContent = 'Latest episodes';
+});
+```
+
+This runs once per element, including new elements added during navigation.
+
+Two other helpers are available from `ready.js`:
+
+- `onGroveRender(callback)` runs when the page is ready, content is added or removed, and navigation occurs. **Check before changing text or adding elements**: repeated changes can trigger an endless loop.
+- `onGroveNavigate(callback)` passes the current path and query, such as `/news?page=2`, at load and when they change. Returning to a URL runs it again; `#hash` changes do not. Content may still be loading, so use `onGroveElement` for element changes.
+
+Each helper returns a function you can call to stop its callback. Importing `ready.js` alone does not start watching the page.
+
+### Find Grove elements
+
+```js
+import { grove, groveAll, groveOne } from '@5mts/canopy/selectors.js';
+
+grove('promo-title');    // CSS selector
+groveOne('promo-title'); // First matching element, or null
+groveAll('promo-title'); // Array of matching elements
+```
+
+Use these inside a ready callback when content may not have loaded yet. The JavaScript selector list is in [selectors.js](selectors.js); Sass-only groups are not included.
+
+### Move an element
+
+```js
+import { grove } from '@5mts/canopy/selectors.js';
+import { relocate } from '@5mts/canopy/relocate.js';
+
+relocate({ source: grove('podcast-subscribe'), dest: '#subscribe-slot' });
+```
+
+Add an element with `id="subscribe-slot"` where you want the links. This moves all matching elements into it and handles new content after navigation. See [relocation](examples/relocate.md) for other positions and how to hide elements until they move.
+
+### Add menus and show/hide buttons
+
+- [`disclosure()`](examples/disclosure.md) adds a button that opens and closes content. Pair it with the Sass example to control visibility.
+- [`subnav()`](examples/subnav.md) labels section navigation for screen readers and marks the current page's link. The example also shows how to make it a dropdown.
+- [`global.js`](examples/inline-snippets.md) lets scripts pasted into the CMS use the ready helpers through `canopy.on()`.
+
+## Maintain the library
+
+Edit selectors in `_selectors.scss`, then regenerate `selectors.js`:
+
+```bash
+npm run build:selectors
+```
+
+Do not edit `selectors.js` directly. Publishing runs this build automatically.
+
+In Sass, a selector group can reference other keys: `show-container: ('podcast-container', 'radio-container')`. These groups follow changes to their members and are not included in the generated JavaScript. Keep site-specific groups in your theme.
+
+Version policy:
+
+- **Patch:** docs and internal changes; selectors unchanged.
+- **Minor:** new selectors, patterns, or JavaScript features that preserve existing behavior.
+- **Major:** removed or renamed keys, or selector changes that may change theme styles.
+
+A dependency range such as `^0.3.0` allows `0.3.x` updates. Review release changes before updating beyond that range.
+
+## License
+
+MIT

package/_index.scss

@@ -0,0 +1,2 @@
+@forward 'selectors';
+@forward 'layout';

package/_layout.scss

@@ -0,0 +1,26 @@
+// Grove breakpoints. Use these widths to match Grove's layout changes.
+// CSS variables don't work in media queries; use grove-bp() instead.
+//
+// Usage:
+//   @use 'pkg:@5mts/canopy' as *;
+//
+//   @media (min-width: grove-bp('lg')) { .my-heading { font-size: 2rem; } }
+
+@use 'sass:map';
+
+// Keep site-specific breakpoints in your theme.
+$grove-breakpoints-base: (
+  md: 768px,
+  md-lg: 1024px,
+  lg: 1240px,
+) !default;
+
+$grove-breakpoints: $grove-breakpoints-base;
+
+@function grove-bp($key) {
+  $value: map.get($grove-breakpoints, $key);
+  @if $value == null {
+    @error "No Grove breakpoint found for key: '#{$key}'. Check $grove-breakpoints-base — theme-specific breakpoints belong in your own tokens.";
+  }
+  @return $value;
+}

package/_selectors.scss

@@ -0,0 +1,269 @@
+// Grove selectors by name. Use grove-selector() to style a component:
+//   @use 'pkg:@5mts/canopy' as *;
+//
+//   @include grove-selector('promo') {
+//     background: white;
+//   }
+//
+// Nest the include to limit it to certain pages:
+//   html.ArtP {
+//     @include grove-selector('main-content') { padding: 1rem; }
+//   }
+//
+// Write simple selectors such as .SocialBar or .Image directly in your CSS.
+// Keep site-specific selector groups in your theme.
+
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+
+// Update this map when Grove changes its class names.
+$grove-selectors-base: (
+  // Layout containers
+
+  container-columns: '.FourColumnContainer, .OneColumnContainer, .ThreeColumnContainer, .TwoColumnContainer3070, .TwoColumnContainer5050, .TwoColumnContainer7030',
+
+  // Page types
+  page-is-show: '.PodcastPage, .RadioShowPage',
+  page-is-episode: '.PCEP, .RSEP',
+  page-is-archive: '.SectionPage, .TagPage',
+
+  // Content components
+  // Skip promos inside tabs and EplB episode lists.
+  promo:         'ps-promo:not(:where(ps-tabs,.EplB) ps-promo)',
+  promo-media:    '[class^="Promo"][class$="-media"]',
+  promo-content:    '[class^="Promo"][class$="-content"]',
+  audio-player:  '.PH-persistent-player',
+  promo-audio-label: '[class^="Promo"][class$="-audio-label"]',
+  button: 'button, button.Button, button.Link',
+
+  episode-list:        '.EplB, .EplA',
+  episode-list-wrapper: '.EplB-items, .EplA-items',
+  episode-list-header: '.EplB-header, .EplA-header',
+  episode-list-title:  '.EplB-header-title, .EplA-header-title',
+  episode-list-item:   '.EplB-items-item, .EplA-items-item',
+
+  // Typography
+  promo-title:   '[class^="Promo"][class$="-title"]',
+  // Grove uses both -header and -heading for component headings.
+  heading: '[class$="-header"], [class$="-heading"]',
+  heading-title: '[class$="-header-title"]',
+
+  // Page regions
+  sidebar:        'main > aside, [class$="-wrapper"] > aside',
+  sidebar-content: 'aside > [class$="-aside-content"]',
+  main-content:   '[class$="-mainContent"]',
+  main-headline:   'h1[class$="-headline"]',
+  byline:          '[class$="-byline"]',
+  // Byline and timestamp below an article headline.
+  content-meta:  '[class$="-contentInfo"]',
+
+  page-lead:      'main [class$="-lead"]',
+  breadcrumbs:    '[class$="-breadcrumbs-wrapper"]',
+  // Byline in a people promo.
+  people-byline: '.PromoPeople-content',
+  article-body: 'article [class$="-articleBody"]',
+  article-subhead: 'article h2[class$="-subheadline"]',
+  post-article-tags: '[class$="-tags"]',
+  post-article-bio: '[class$="-bottomByline"]',
+  page-description: '[class$="-pageDescription-content"]',
+  series-banner: '.SeriesBanner',
+
+  page-container: '[class$="Page-wrapper"]',
+  page-header: '[class$="Page-head"]',
+  page-head-text: '[class$="Page-head-text"]',
+
+
+  // Match whether main contains an aside or has an aside sibling.
+  main-without-aside: 'main:not(:has(~ aside, aside), aside ~ main)',
+  main-with-aside: 'main:has(~ aside, aside), aside ~ main',
+
+  // Links below the headline that JS can move to the sidebar.
+  // Check which links this matches before moving them.
+  metadata-relocatable-links: '[class$="-contentInfo"] a',
+
+  content-image:   'figure .Image, .PromoXS-media .Image',
+  caption: '.Figure-caption, .CarouselSlide-infoDescription, .Figure-credit, .CarouselSlide-infoAttribution, [class$="-credit-container"] [class$="-credit"], [class$="-credit-container"] [class$="-divider"], [class$="-credit-container"] [class$="-source"]',
+  title-text: '[class$="-title"]',
+  description: '[class$="-description"]',
+
+  // Content types
+  news-story:     '.ArtP:not(.aside)',
+
+  // Podcast
+  podcast-container: '.PodcastPage-main, .PCEP-content .PCEP-wrapper',
+  podcast-aside: '.PodcastPage-aside, .PCEP-aside',
+  podcast-cover-and-title: '.PodcastPage-top',
+  podcast-byline: '.PodcastPage-byline',
+  podcast-description: '.PodcastPage-byline + *',
+  podcast-subscribe: '.PodcastActionBar',
+  // Subscribe link label.
+  podcast-subscribe-label: '.PodcastLink-provider',
+  podcast-social-bar: '.PodcastPage-social',
+  podcast-icon-headings: '.PodcastActionBar-heading, .PodcastPage-social .SocialBar-heading',
+  podcast-hostname: '.PodcastPage-hostName',
+  episode-series-header: '[class$="EP-parentInfo"]',
+  podcast-header: '.PodcastPage-info',
+
+  // Radio show
+  radio-container: '.RadioShowPage-main, .RSEP-content .RSEP-wrapper',
+  radio-aside:    '.RadioShowPage-aside, .RSEP-aside',
+  radio-cover-and-title: '.RadioShowPage-top',
+  radio-byline: '.RadioShowPage-byline',
+  radio-description: '.RadioShowPage-byline + *',
+  radio-social-bar: '.RadioShowPage-social',
+  // Radio pages have social headings but no podcast subscribe bar.
+  radio-icon-headings: '.RadioShowPage-social .SocialBar-heading',
+  radio-hostname: '.RadioShowPage-hostName',
+  radio-header: '.RadioShowPage-info',
+
+  // Shared podcast/radio selectors. Lists combine the named keys above.
+  // Subscribe selectors are podcast-only.
+  show-container: ('podcast-container', 'radio-container'),
+  // Show pages put the sidebar beside content at md; episode pages at md-lg.
+  show-landing-container: '.PodcastPage-main, .RadioShowPage-main',
+  episode-container: '.PCEP-content .PCEP-wrapper, .RSEP-content .RSEP-wrapper',
+  show-aside: ('podcast-aside', 'radio-aside'),
+  show-main: '[class$="Page-wrapper"], [class$="EP-main"]',
+  show-cover-and-title: ('podcast-cover-and-title', 'radio-cover-and-title', 'episode-series-header'),
+  show-byline: ('podcast-byline', 'radio-byline'),
+  show-description: ('podcast-description', 'radio-description'),
+  show-social-bar: ('podcast-social-bar', 'radio-social-bar'),
+  show-icon-headings: ('podcast-icon-headings', 'radio-icon-headings'),
+  sidebar-headings: 'aside h2, aside h3, aside h4',
+  
+  show-hostname: ('podcast-hostname', 'radio-hostname'),
+  show-header: ('podcast-header', 'radio-header'),
+  episode-meta: '.PCEP-contentInfo, .RSEP-contentInfo',
+  episode-player: '.PCEP-audioPlayer, .RSEP-audioPlayer',
+  show-schedule-info: '.RadioShowPage-mediaSchedule, .PodcastPage-podcastSchedule',
+
+  // News tile
+  news-tile:     'ps-promo[data-content-type="news-story"]',
+
+  // Category links above titles. :has() skips elements without a link.
+  eyebrow:       '[class$="-category"]:has(> a), [class$="-breadcrumbs"]:has(a)',
+  author-info:   '[class$="-authorName"], [class$="-contributors"], [class$="-hostName"]',
+  author-position: '[class$="-authorTitle"]',
+  timestamp:     '[class$="-timestamp"], [class$="-timestamp"] > *',
+
+  // The selected tab has data-active="true".
+  tab:           'ps-tabs .Tabs-tabs-tab',
+  tab-active:    'ps-tabs [role="tab"][data-active="true"], ps-tabs .Tabs-tabs-tab[data-active="true"]',
+
+  // Social links in the action bar.
+  social-action:   '.ActionLink[data-social-service]',
+
+  // Navigation
+  nav-bar:           '.PH-nav-bar',
+  nav-item:          '.NavI',
+  nav-item-list:     '.NavI-items',
+  nav-item-text:     '.NavI-text',
+  dropdown-nav-items: '.DropdownNavigation-items, .NavI .NavLink',
+
+  // Streaming / players
+  stream-pill-highlighted: '.StreamPill:hover, [playing] .StreamPill',
+);
+
+$grove-selectors: $grove-selectors-base;
+
+// Return the selector for a key, such as grove('promo'). Unknown keys stop
+// compilation. A list in the map combines other keys; these combined entries
+// are available in Sass only, not selectors.js.
+@function grove($key, $seen: ()) {
+  @if list.index($seen, $key) {
+    @error "Circular Grove selector reference: #{list.append($seen, $key, comma)}";
+  }
+  $value: map.get($grove-selectors, $key);
+  @if $value == null {
+    @error "No Grove selector found for key: '#{$key}'. Check $grove-selectors-base — or write the raw selector if the class is plainly readable.";
+  }
+  @if meta.type-of($value) == 'list' {
+    $result: ();
+    @each $ref in $value {
+      $resolved: grove($ref, list.append($seen, $key));
+      // Skip duplicate selectors.
+      @if not list.index($result, $resolved) {
+        $result: list.append($result, $resolved, comma);
+      }
+    }
+    @return $result;
+  }
+  @return $value;
+}
+
+// Style one key or a list of keys. Nest the include to limit where it applies.
+//   @include grove-selector('promo') { margin: 0; }
+//   @include grove-selector(('news-tile', 'tab')) { color: navy; }
+@mixin grove-selector($keys) {
+  $selector-list: ();
+  @each $key in $keys {
+    $selector-list: list.append($selector-list, grove($key), comma);
+  }
+  #{$selector-list} {
+    @content;
+  }
+}
+
+// Build selectors for component variants. Match the case of Grove's classes.
+//   #{grove-variants('Promo', '-title', A B)} { margin-top: 0; }
+// Produces .PromoA-title, .PromoB-title { margin-top: 0; }
+@function grove-variants($prefix, $suffix, $letters) {
+  $result: ();
+  @each $letter in $letters {
+    $class: '.' + $prefix + $letter + $suffix;
+    $result: list.append($result, $class, comma);
+  }
+  @return $result;
+}
+
+// Match a value in <meta name="brightspot-dataLayer">. Keys include program,
+// category (Grove Section), keywords (Grove Tags), pageType, and series.
+@function grove-page-match($key, $value) {
+  @return "meta[name='brightspot-dataLayer'][content*='\"#{$key}\" : \"#{$value}\"']";
+}
+
+// Limit styles to pages with a matching value. A list matches any listed value.
+//   #{grove-page-is('program', 'Morning Show')} { .my-heading { color: navy; } }
+@function grove-page-is($key, $values) {
+  $matches: ();
+  @each $value in $values {
+    $matches: list.append($matches, grove-page-match($key, $value), comma);
+  }
+  @return "html:has(#{$matches})";
+}
+
+
+// Content types and header elements
+$grove-content-types: 'ArtP', 'RSEP' !default;
+$grove-news-story-type: 'ArtP';
+$grove-head-suffixes: '-breadcrumbs-wrapper', '-headline', '-contentInfo', '-audioPlayer', '-parentInfo' !default;
+
+// List variants covered by list-header and list-header-title.
+// Add letters here if Grove adds variants.
+$grove-list-prefix:  'List' !default;
+$grove-list-letters: A B C D E F G H !default;
+
+// Include EplA episode lists in those header selectors. EplB is excluded.
+$grove-epl-prefix:  'Epl' !default;
+$grove-epl-letters: A !default;
+
+// Add selectors built from the variants above. These are Sass-only keys.
+// Store selectors as quoted strings: grove() treats lists as key references.
+$_list-header: list.join(
+  grove-variants($grove-list-prefix, '-header', $grove-list-letters),
+  grove-variants($grove-epl-prefix,  '-header', $grove-epl-letters),
+  comma
+);
+$_list-header-title: list.join(
+  grove-variants($grove-list-prefix, '-header-title', $grove-list-letters),
+  grove-variants($grove-epl-prefix,  '-header-title', $grove-epl-letters),
+  comma
+);
+$grove-selectors: map.merge($grove-selectors, (
+  list-header:       '#{$_list-header}',
+  list-header-title: '#{$_list-header-title}',
+
+  news-story-head-meta: "#{grove-variants($grove-news-story-type, '', $grove-head-suffixes)}, #{grove('series-banner')}",
+));

package/disclosure.js

@@ -0,0 +1,92 @@
+// Add a button that switches aria-expanded between "true" and "false".
+// Use CSS to show or hide content based on that attribute.
+// Safe to call from onGroveRender; repeat calls only update the button text.
+//
+//   disclosure(container, {
+//     label: 'Menu',
+//     panel: 'ul',
+//   });
+//
+// panel can be a selector within the container or an element. If a selector
+// finds nothing, return null. Otherwise return the button.
+// Optional: toggleClass sets its class (default: canopy-disclosure-toggle).
+// Set closeOnOutsideClick or closeOnEscape to true when creating the button
+// to enable either. Both default to false. Escape also focuses the button.
+
+let uid = 0;
+
+// Share one outside-click listener; drop removed containers on the next click.
+const watched = new Set();
+let listenerBound = false;
+
+function handleOutsideClick(event) {
+  for (const entry of watched) {
+    if (!entry.container.isConnected) { watched.delete(entry); continue; }
+    if (
+      entry.button.getAttribute("aria-expanded") === "true" &&
+      !entry.container.contains(event.target)
+    ) {
+      entry.button.setAttribute("aria-expanded", "false");
+    }
+  }
+}
+
+export function disclosure(container, options = {}) {
+  const {
+    label,
+    toggleClass = "canopy-disclosure-toggle",
+    panel,
+    closeOnOutsideClick = false,
+    closeOnEscape = false,
+  } = options;
+
+  // Reuse the button if this container already has one.
+  let button = container.querySelector(`.${toggleClass}`);
+  if (!button) {
+    let panelEl = null;
+    if (panel instanceof Element) {
+      panelEl = panel;
+    } else if (typeof panel === "string") {
+      panelEl = container.querySelector(panel);
+      if (!panelEl) return null; // no panel, no toggle
+    }
+
+    button = document.createElement("button");
+    button.type = "button";
+    button.className = toggleClass;
+    button.setAttribute("aria-expanded", "false");
+    if (panelEl) {
+      if (!panelEl.id) panelEl.id = `canopy-disclosure-${++uid}`;
+      button.setAttribute("aria-controls", panelEl.id);
+    }
+    button.addEventListener("click", () => {
+      const open = button.getAttribute("aria-expanded") === "true";
+      button.setAttribute("aria-expanded", String(!open));
+    });
+    container.prepend(button);
+
+    if (closeOnOutsideClick) {
+      watched.add({ container, button });
+      if (!listenerBound) {
+        listenerBound = true;
+        document.addEventListener("click", handleOutsideClick);
+      }
+    }
+
+    if (closeOnEscape) {
+      // Keep the listener on the container so it leaves with the page content.
+      container.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && button.getAttribute("aria-expanded") === "true") {
+          button.setAttribute("aria-expanded", "false");
+          button.focus();
+        }
+      });
+    }
+  }
+
+  // Only write changed text; repeated writes would keep triggering onGroveRender.
+  if (typeof label === "string" && button.textContent !== label) {
+    button.textContent = label;
+  }
+  return button;
+}

package/examples/README.md

@@ -0,0 +1,11 @@
+# canopy examples
+
+Copy an example, then change its selectors, labels, and styles for your site.
+SCSS and imported JavaScript go in your theme. For code pasted into the CMS,
+start with inline snippets.
+
+- [Inline snippets](inline-snippets.md) — run JavaScript pasted into the CMS.
+- [Dropdowns and accordions](disclosure.md) — add a button to show or hide content.
+- [Section navigation](subnav.md) — mark the current page and add a mobile menu.
+- [Move content](relocate.md) — move elements when a page loads or changes.
+- [Left sidebar](sidebar-left.md) — place the sidebar on the left or above the page.