+
+Sorry, I couldn't find that page. Have you tried pressing / to search?
diff --git a/docs/assets/images/undraw-not-found.svg b/docs/assets/images/undraw-not-found.svg
new file mode 100644
index 00000000..aea1d505
--- /dev/null
+++ b/docs/assets/images/undraw-not-found.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/plugins/search/lunr.min.js b/docs/assets/plugins/search/lunr.min.js
new file mode 100644
index 00000000..d5218778
--- /dev/null
+++ b/docs/assets/plugins/search/lunr.min.js
@@ -0,0 +1,6 @@
+/**
+ * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9
+ * Copyright (C) 2020 Oliver Nightingale
+ * @license MIT
+ */
+ !function(){var e=function(t){var r=new e.Builder;return r.pipeline.add(e.trimmer,e.stopWordFilter,e.stemmer),r.searchPipeline.add(e.stemmer),t.call(r,r),r.build()};e.version="2.3.9",e.utils={},e.utils.warn=function(e){return function(t){e.console&&console.warn&&console.warn(t)}}(this),e.utils.asString=function(e){return void 0===e||null===e?"":e.toString()},e.utils.clone=function(e){if(null===e||void 0===e)return e;for(var t=Object.create(null),r=Object.keys(e),i=0;i
+
+
+
+ `;
+ document.body.append(siteSearch);
+
+ const searchButtons = [...document.querySelectorAll('[data-site-search]')];
+ const overlay = siteSearch.querySelector('.site-search__overlay');
+ const panel = siteSearch.querySelector('.site-search__panel');
+ const input = siteSearch.querySelector('.site-search__input');
+ const results = siteSearch.querySelector('.site-search__results');
+ const animationDuration = 150;
+ const searchDebounce = 250;
+ let isShowing = false;
+ let searchTimeout;
+ let searchIndex;
+ let map;
+
+ // Load search data
+ const searchData = fetch('../../../search.json')
+ .then(res => res.json())
+ .then(data => {
+ searchIndex = lunr.Index.load(data.searchIndex);
+ map = data.map;
+ });
+
+ async function show() {
+ isShowing = true;
+ document.body.classList.add('site-search-visible');
+ siteSearch.hidden = false;
+ input.focus();
+ updateResults();
+
+ await Promise.all([
+ panel.animate(
+ [
+ { opacity: 0, transform: 'scale(.9)' },
+ { opacity: 1, transform: 'scale(1)' }
+ ],
+ { duration: animationDuration }
+ ).finished,
+ overlay.animate([{ opacity: 0 }, { opacity: 1 }], { duration: animationDuration }).finished
+ ]);
+
+ document.addEventListener('mousedown', handleDocumentMouseDown);
+ document.addEventListener('keydown', handleDocumentKeyDown);
+ document.addEventListener('focusin', handleDocumentFocusIn);
+ }
+
+ async function hide() {
+ isShowing = false;
+ document.body.classList.remove('site-search-visible');
+
+ await Promise.all([
+ panel.animate(
+ [
+ { opacity: 1, transform: 'scale(1)' },
+ { opacity: 0, transform: 'scale(.9)' }
+ ],
+ { duration: animationDuration }
+ ).finished,
+ overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: animationDuration }).finished
+ ]);
+
+ siteSearch.hidden = true;
+ input.value = '';
+ updateResults();
+
+ document.removeEventListener('mousedown', handleDocumentMouseDown);
+ document.removeEventListener('keydown', handleDocumentKeyDown);
+ document.removeEventListener('focusin', handleDocumentFocusIn);
+ }
+
+ function handleInput() {
+ // Debounce search queries
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce);
+ }
+
+ function handleDocumentFocusIn(event) {
+ // Close when focus leaves the panel
+ if (event.target.closest('.site-search__panel') !== panel) {
+ hide();
+ }
+ }
+
+ function handleDocumentMouseDown(event) {
+ // Close when clicking outside of the panel
+ if (event.target.closest('.site-search__overlay') === overlay) {
+ hide();
+ }
+ }
+
+ function handleDocumentKeyDown(event) {
+ // Close when pressing escape
+ if (event.key === 'Escape') {
+ event.preventDefault();
+ hide();
+ return;
+ }
+
+ // Handle keyboard selections
+ if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {
+ event.preventDefault();
+
+ const currentEl = results.querySelector('[aria-selected]');
+ const items = [...results.querySelectorAll('a')];
+ let nextEl;
+
+ items.map(item => item.removeAttribute('aria-selected'));
+
+ if (items.length === 0) {
+ return;
+ }
+
+ const index = items.indexOf(currentEl);
+
+ switch (event.key) {
+ case 'ArrowUp':
+ nextEl = items[Math.max(0, index - 1)];
+ break;
+ case 'ArrowDown':
+ nextEl = items[Math.min(items.length - 1, index + 1)];
+ break;
+ case 'Home':
+ nextEl = items[items.length > 0 ? 1 : 0];
+ break;
+ case 'End':
+ nextEl = items[items.length - 1];
+ break;
+ case 'Enter':
+ (currentEl || items[0]).click();
+ break;
+ }
+
+ if (nextEl) {
+ nextEl.setAttribute('aria-selected', 'true');
+ nextEl.scrollIntoView({ block: 'nearest' });
+ }
+
+ return;
+ }
+ }
+
+ async function updateResults(query = '') {
+ try {
+ await searchIndex;
+
+ const hasQuery = query.length > 0;
+ const matches = hasQuery ? searchIndex.search(query) : [];
+ let id = 0;
+
+ let hasResults = hasQuery && matches.length > 0;
+ siteSearch.classList.toggle('site-search--has-results', hasQuery && hasResults);
+ siteSearch.classList.toggle('site-search--no-results', hasQuery && !hasResults);
+ panel.setAttribute('aria-expanded', hasQuery && hasResults ? 'true' : 'false');
+
+ results.innerHTML = '';
+
+ matches.map(match => {
+ const page = map[match.ref];
+ const li = document.createElement('li');
+ const a = document.createElement('a');
+
+ a.href = $docsify.routerMode === 'hash' ? `/#/${page.url}` : `/${page.url}`;
+ a.innerHTML = `
+
+
+ No results found.
+ ${page.title}
+ /${page.url} + `; + + li.setAttribute('id', `search-result-${id++}`); + li.appendChild(a); + results.appendChild(li); + }); + } catch { + // Ignore query errors as the user types + } + } + + // Show the search panel slash is pressed outside of a form element + document.addEventListener('keydown', event => { + if ( + !isShowing && + event.key === '/' && + !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase())) + ) { + event.preventDefault(); + show(); + } + }); + + input.addEventListener('sl-input', handleInput); + + // Close when a result is selected + results.addEventListener('click', event => { + if (event.target.closest('a')) { + hide(); + } + }); + }); +})(); diff --git a/docs/assets/plugins/sidebar/sidebar.js b/docs/assets/plugins/sidebar/sidebar.js deleted file mode 100644 index 1f8c3769..00000000 --- a/docs/assets/plugins/sidebar/sidebar.js +++ /dev/null @@ -1,14 +0,0 @@ -(() => { - if (!window.$docsify) { - throw new Error('Docsify must be loaded before installing this plugin.'); - } - - window.$docsify.plugins.push((hook, vm) => { - hook.mounted(function () { - // Move search below the app name - const appName = document.querySelector('.sidebar .app-name'); - const search = document.querySelector('.sidebar .search'); - appName.insertAdjacentElement('afterend', search); - }); - }); -})(); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 6b1b4dfb..8cb233b1 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -249,6 +249,11 @@ strong { max-width: 22rem; } +.markdown-section .splash-start h1:first-of-type { + font-size: var(--sl-font-size-large); + margin: 0 0 0.5rem 0; +} + @media screen and (max-width: 1040px) { .splash { display: block; @@ -375,12 +380,14 @@ strong { padding: 2px 4px; } +kbd, .markdown-section kbd { font-family: var(--sl-font-mono); font-size: 87.5%; border-radius: var(--sl-border-radius-small); border: solid 1px rgb(var(--sl-color-neutral-200)); - padding: 2px 4px; + box-shadow: var(--sl-shadow-small); + padding: 2px 5px; } /* Code blocks */ @@ -706,3 +713,9 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code { grid-column-start: span 6; } } + +.not-found-image { + display: block; + max-width: 460px; + margin: 2rem 0; +} diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md index 3de995cd..4d85d950 100644 --- a/docs/getting-started/overview.md +++ b/docs/getting-started/overview.md @@ -2,12 +2,12 @@
-**A forward-thinking library of web components.**
+# A forward-thinking library of web components.
- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
-- Includes an official dark theme 🌛
+- Includes a dark theme 🌛
- Built with accessibility in mind ♿️
- First-party [React wrappers](/getting-started/usage#react)
- Open source 😸
diff --git a/docs/index.html b/docs/index.html
index 4c937d72..ac940a5b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,6 +34,7 @@
+
@@ -71,6 +72,7 @@
maxLevel: 3,
subMaxLevel: 2,
name: 'Shoelace',
+ nameLink: '/',
notFoundPage: '404.md',
pagination: {
previousText: 'Previous',
@@ -79,28 +81,20 @@
crossChapterText: false
},
routerMode: 'history',
- search: {
- maxAge: 86400000, // Expiration time, the default one day
- paths: 'auto',
- placeholder: 'Search',
- noData: 'No Results',
- depth: 3,
- namespace: 'shoelace-docs'
- },
themeColor: 'rgb(var(--sl-color-primary-500))'
};
-
-
-
-
+
+
+
+