mirror of
https://github.com/LukeHagar/skeleton.git
synced 2025-12-06 04:21:15 +00:00
Update DocShell and feature doc source links (#1960)
This commit is contained in:
@@ -10,8 +10,9 @@
|
||||
const cChip = 'chip variant-soft hover:variant-filled';
|
||||
|
||||
// Local
|
||||
const githubSourcePath = 'https://github.com/skeletonlabs/skeleton/tree/master/packages/skeleton/src';
|
||||
const githubDocSourcePath = 'https://github.com/skeletonlabs/skeleton/blob/master/sites/skeleton.dev/src';
|
||||
const githubBranch = 'master'; // IMPORTANT: for testing only, keep as 'master'
|
||||
const githubFeatureSourcePath = `https://github.com/skeletonlabs/skeleton/blob/${githubBranch}`;
|
||||
const githubPageSourcePath = `https://github.com/skeletonlabs/skeleton/blob/${githubBranch}/sites/skeleton.dev/src`;
|
||||
|
||||
function formatImportSnippet(): string {
|
||||
let snippet = ``;
|
||||
@@ -53,14 +54,14 @@
|
||||
{/if} -->
|
||||
<!-- Source -->
|
||||
{#if pageData.source}
|
||||
<a class={cChip} href={`${githubSourcePath}/lib/${pageData.source}`} target="_blank" rel="noreferrer">
|
||||
<a class={cChip} href={`${githubFeatureSourcePath}/${pageData.source}`} target="_blank" rel="noreferrer">
|
||||
<i class="fa-brands fa-github text-[16px]" />
|
||||
<span>Source</span>
|
||||
</a>
|
||||
{/if}
|
||||
<!-- Doc Source -->
|
||||
{#if pageData.docsPath}
|
||||
<a class={cChip} href={`${githubDocSourcePath}/routes/(inner)${pageData.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">
|
||||
<a class={cChip} href={`${githubPageSourcePath}/routes/(inner)${pageData.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">
|
||||
<i class="fa-solid fa-code" />
|
||||
<span>Page Source</span>
|
||||
</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
name: 'Clipboard',
|
||||
description: 'Allows you to quickly copy data to the clipboard.',
|
||||
imports: ['clipboard'],
|
||||
source: 'actions/Clipboard',
|
||||
source: 'packages/skeleton/src/lib/actions/Clipboard',
|
||||
parameters: [
|
||||
['<code class="code">element</code>', 'string', '-', '-', `HTML element's <em>data-clipboard</em> ID value.`],
|
||||
['<code class="code">input</code>', 'string', '-', '-', `Input element's <em>data-clipboard</em> ID value.`]
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
name: 'Filters',
|
||||
description: 'Apply Instagram-like filter effects to images.',
|
||||
imports: ['filter'],
|
||||
source: 'actions/Filters',
|
||||
source: 'packages/skeleton/src/lib/actions/Filters',
|
||||
parameters: [['<code class="code">(default)</code>', 'string', '-', '-', 'The name of the filter, such as "Apollo".']]
|
||||
};
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
name: 'Focus Trap',
|
||||
description: 'Allows you to contain tab focus within a target element on-demand.',
|
||||
imports: ['focusTrap'],
|
||||
source: 'actions/FocusTrap',
|
||||
source: 'packages/skeleton/src/lib/actions/FocusTrap',
|
||||
parameters: [['<code class="code">(default)</code>', 'boolean', '-', '-', `When TRUE, enables focus capture.`]]
|
||||
};
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
name: 'Accordions',
|
||||
description: 'Divide content into collapsible sections.',
|
||||
imports: ['Accordion', 'AccordionItem'],
|
||||
source: 'components/Accordion',
|
||||
source: 'packages/skeleton/src/lib/components/Accordion',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/accordion/',
|
||||
components: [
|
||||
{ label: 'Accordion', sveld: sveldAccordion },
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
description:
|
||||
'A header element for the top of your page layout. Pairs well with the <a class="anchor" href="/components/app-shell">App Shell</a>.',
|
||||
imports: ['AppBar'],
|
||||
source: 'components/AppBar',
|
||||
source: 'packages/skeleton/src/lib/components/AppBar',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/',
|
||||
components: [{ sveld: sveldAppBar }]
|
||||
};
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
name: 'App Rail',
|
||||
description: 'A side navigation rail component',
|
||||
imports: ['AppRail', 'AppRailTile', 'AppRailAnchor'],
|
||||
source: 'components/AppRail',
|
||||
source: 'packages/skeleton/src/lib/components/AppRail',
|
||||
// aria: 'https://www.w3.org/WAI/ARIA/apg/',
|
||||
components: [
|
||||
{ label: 'AppRail', sveld: sveldAppRail },
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name: 'App Shell',
|
||||
description: 'Responsive shell for controlling application layout.',
|
||||
imports: ['AppShell'],
|
||||
source: 'components/AppShell',
|
||||
source: 'packages/skeleton/src/lib/components/AppShell',
|
||||
components: [{ sveld: sveldAppShell }]
|
||||
};
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
description: 'Displays a list of suggested options.',
|
||||
imports: ['Autocomplete'],
|
||||
types: ['AutocompleteOption'],
|
||||
source: 'components/Autocomplete',
|
||||
source: 'packages/skeleton/src/lib/components/Autocomplete',
|
||||
// aria: 'https://www.w3.org/WAI/ARIA/apg/',
|
||||
components: [{ sveld: sveldAutocomplete }],
|
||||
keyboard: [
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
name: 'Avatars',
|
||||
description: 'Display user avatars with an image or initials.',
|
||||
imports: ['Avatar'],
|
||||
source: 'components/Avatar',
|
||||
source: 'packages/skeleton/src/lib/components/Avatar',
|
||||
components: [{ sveld: sveldAvatar }]
|
||||
};
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
description: 'Create conic gradient data visualizations for pie charts, loading spinners, and more.',
|
||||
imports: ['ConicGradient'],
|
||||
types: ['ConicStop'],
|
||||
source: 'components/ConicGradient',
|
||||
source: 'packages/skeleton/src/lib/components/ConicGradient',
|
||||
components: [{ sveld: sveldConicGradient }]
|
||||
};
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'File Buttons',
|
||||
description: 'Allows you to select files with a single click.',
|
||||
imports: ['FileButton'],
|
||||
source: 'components/FileButton',
|
||||
source: 'packages/skeleton/src/lib/components/FileButton',
|
||||
components: [{ sveld: sveldFileButton }],
|
||||
restProps: 'input'
|
||||
};
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'File Dropzone',
|
||||
description: 'Allow upload of files with drag and drop.',
|
||||
imports: ['FileDropzone'],
|
||||
source: 'components/FileDropzone',
|
||||
source: 'packages/skeleton/src/lib/components/FileDropzone',
|
||||
components: [{ sveld: sveldFileDropzone }],
|
||||
restProps: 'input'
|
||||
};
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
imports: ['InputChip'],
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/forms', 'elements/chips'],
|
||||
source: 'components/InputChip',
|
||||
source: 'packages/skeleton/src/lib/components/InputChip',
|
||||
components: [{ sveld: sveldInputChip }],
|
||||
// aria: 'https://www.w3.org/WAI/ARIA/apg/',
|
||||
restProps: 'input',
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name: 'Listboxes',
|
||||
description: 'Interactive listboxes that maintain selection state.',
|
||||
imports: ['ListBox', 'ListBoxItem'],
|
||||
source: 'components/ListBox',
|
||||
source: 'packages/skeleton/src/lib/components/ListBox',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/',
|
||||
components: [
|
||||
{ label: 'ListBox', sveld: sveldListBox },
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
name: 'Paginators',
|
||||
description: 'Navigate between multiple pages of content.',
|
||||
imports: ['Paginator'],
|
||||
source: 'components/Paginator',
|
||||
source: 'packages/skeleton/src/lib/components/Paginator',
|
||||
components: [{ sveld: sveldPaginator }]
|
||||
};
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
name: 'Progress Bars',
|
||||
description: 'An indicator showing the progress or completion of a task.',
|
||||
imports: ['ProgressBar'],
|
||||
source: 'components/ProgressBar',
|
||||
source: 'packages/skeleton/src/lib/components/ProgressBar',
|
||||
aria: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role',
|
||||
components: [{ sveld: sveldProgressBar }]
|
||||
};
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Progress Radials',
|
||||
description: 'Displays a radial indicator showing the progress or completion of a task.',
|
||||
imports: ['ProgressRadial'],
|
||||
source: 'components/ProgressRadial',
|
||||
source: 'packages/skeleton/src/lib/components/ProgressRadial',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/meter/',
|
||||
components: [{ sveld: sveldProgressRadial }]
|
||||
};
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name: 'Radio Groups',
|
||||
description: 'Capture feedback limited to a small set of options.',
|
||||
imports: ['RadioGroup', 'RadioItem'],
|
||||
source: 'components/Radio',
|
||||
source: 'packages/skeleton/src/lib/components/Radio',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/',
|
||||
restProps: 'RadioItem input',
|
||||
components: [
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Range Sliders',
|
||||
description: 'Capture input from a range of values, including optional ticks.',
|
||||
imports: ['RangeSlider'],
|
||||
source: 'components/RangeSlider',
|
||||
source: 'packages/skeleton/src/lib/components/RangeSlider',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/',
|
||||
components: [{ sveld: sveldRangeSlider }],
|
||||
restProps: 'input',
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name: 'Ratings',
|
||||
description: 'Create an visual representation of a numeric range.',
|
||||
imports: ['Ratings'],
|
||||
source: 'components/Ratings',
|
||||
source: 'packages/skeleton/src/lib/components/Ratings',
|
||||
components: [{ label: 'Ratings', sveld: sveldRatings }]
|
||||
};
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Slide Toggles',
|
||||
description: 'A sliding toggle element that can capture input from a user.',
|
||||
imports: ['SlideToggle'],
|
||||
source: 'components/SlideToggle',
|
||||
source: 'packages/skeleton/src/lib/components/SlideToggle',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/',
|
||||
components: [{ sveld: sveldSlideToggle }],
|
||||
restProps: 'input'
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name: 'Steppers',
|
||||
description: 'Divide and present content in sequenced steps.',
|
||||
imports: ['Stepper', 'Step'],
|
||||
source: 'components/Stepper',
|
||||
source: 'packages/skeleton/src/lib/components/Stepper',
|
||||
components: [
|
||||
{ label: 'Stepper', sveld: sveldStepper },
|
||||
{
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
description: 'Utilize a data-driven model to create simple presentational tables.',
|
||||
imports: ['Table'],
|
||||
types: ['TableSource'],
|
||||
source: 'components/Table',
|
||||
source: 'packages/skeleton/src/lib/components/Table',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/grid/',
|
||||
components: [{ sveld: sveldTable }],
|
||||
keyboard: [
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
name: 'Tabs',
|
||||
description: 'Use tabs to quickly switch between different views and pages.',
|
||||
imports: ['TabGroup', 'Tab', 'TabAnchor'],
|
||||
source: 'components/Tab',
|
||||
source: 'packages/skeleton/src/lib/components/Tab',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/',
|
||||
components: [
|
||||
{ label: 'TabGroup', sveld: sveldTabGroup },
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
name: 'Tree Views',
|
||||
description: 'Display information in a hierarchical structure using collapsible nodes.',
|
||||
imports: ['TreeView', 'TreeViewItem', 'type TreeViewNode'],
|
||||
source: 'components/TreeView',
|
||||
source: 'packages/skeleton/src/lib/components/TreeView',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/treeview/',
|
||||
components: [
|
||||
{ label: 'TreeView', sveld: sveldTreeView },
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
name: 'Design Tokens',
|
||||
description: 'The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.',
|
||||
// stylesheetIncludes: ['all', 'tokens'],
|
||||
source: 'tailwind/tokens'
|
||||
source: 'packages/plugin/src/tailwind/tokens'
|
||||
};
|
||||
|
||||
// Local
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
feature: DocsFeature.Element,
|
||||
name: 'Variants',
|
||||
description: 'Canned styles available to easily customize elements, components, and more.',
|
||||
source: 'tailwind/tokens'
|
||||
source: 'packages/plugin/src/styles/components/variants.css'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
description: 'Displays customizable alerts to attract attention and provide critical actions.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/alerts'],
|
||||
source: 'styles/elements/alerts.css',
|
||||
source: 'packages/plugin/src/styles/components/alerts.css',
|
||||
classes: [
|
||||
['<code class="code">alert</code>', '', 'Provide basic alert styles to a block element.'],
|
||||
['<code class="code">alert-message</code>', '', 'The message body styles. Contains a title and message.'],
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
description: 'Provides a robust set of non-interactive badge styles.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/badges'],
|
||||
source: 'styles/elements/badges.css',
|
||||
source: 'packages/plugin/src/styles/components/badges.css',
|
||||
classes: [
|
||||
['<code class="code">badge</code>', '-', 'Provides the standard Badge style.'],
|
||||
['<code class="code">badge-icon</code>', '-', 'Provides the Icon Badge style.']
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
description: 'Displays the current navigation hierarchy.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/breadcrumbs'],
|
||||
source: 'styles/elements/breadcrumbs.css',
|
||||
source: 'packages/plugin/src/styles/components/breadcrumbs.css',
|
||||
classes: [
|
||||
['<code class="code">breadcrumb</code>', '-', 'Add to an <em>ol</em> tag element.'],
|
||||
['<code class="code">breadcrumb-nonresponsive</code>', '-', 'Shows all crumbs on small mobile breakpoints.'],
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
description: 'Provides a robust set of button styles, including preset variants.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/buttons'],
|
||||
source: 'styles/elements/buttons.css',
|
||||
source: 'packages/plugin/src/styles/components/buttons.css',
|
||||
classes: [
|
||||
['<code class="code">.btn</code>', '-', 'Creates a text button using a button or anchor.'],
|
||||
['<code class="code">.btn-icon</code>', '-', 'Creates a text icon button using a button or anchor.'],
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
description: 'Provides container elements that wrap and separate content',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/cards'],
|
||||
source: 'styles/elements/cards.css',
|
||||
source: 'packages/plugin/src/styles/components/cards.css',
|
||||
classes: [
|
||||
['<code class="code">.card</code>', '-', 'Adds basic card styling to any block element.'],
|
||||
['<code class="code">.card-header</code>', '-', 'The header region of the card.'],
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
description: 'Interactive elements for actions, selection, or filtering.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/chips'],
|
||||
source: 'styles/elements/chips.css',
|
||||
source: 'packages/plugin/src/styles/components/chips.css',
|
||||
classes: [
|
||||
['<code class="code">chip</code>', '', 'Provides the standard chip style.'],
|
||||
['<code class="code">chip-[color]</code>', '<a class="anchor" href="/docs/colors">Any theme color.</a>', 'Applies a variant style.'],
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
name: 'Core',
|
||||
description: 'Provides a variety of globally scoped styles.',
|
||||
stylesheetIncludes: ['skeleton', 'core'],
|
||||
source: 'styles/partials/core.css'
|
||||
source: 'packages/plugin/src/styles/base/core.css'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Forms',
|
||||
description: 'Pair with the Tailwind Forms plugin to style various input fields.',
|
||||
stylesheetIncludes: ['all', 'forms'],
|
||||
source: 'styles/elements/forms.css',
|
||||
source: 'packages/plugin/src/styles/base/forms.css',
|
||||
dependencies: [{ label: 'Tailwind Forms Plugin', url: 'https://github.com/tailwindlabs/tailwindcss-forms' }],
|
||||
classes: [
|
||||
['<code class="code">.legend</code>', '', 'Provides theme styles to legend elements.'],
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Gradient Headings',
|
||||
description: 'Create gradient-colored heading styles.',
|
||||
// imports: ['GradientHeading'],
|
||||
// source: 'components/GradientHeading'
|
||||
// source: 'packages/skeleton/src/lib/components/GradientHeading'
|
||||
dependencies: [{ label: 'Tailwind Gradients', url: 'https://tailwindcss.com/docs/gradient-color-stops' }]
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
// types: ['Template'],
|
||||
// stylesheetIncludes: ['all', 'elements'],
|
||||
// stylesheets: ['elements/template'],
|
||||
// source: 'components/Template',
|
||||
// source: 'packages/skeleton/src/lib/components/Template',
|
||||
// aria: 'https://www.w3.org/WAI/ARIA/apg/'
|
||||
// dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }],
|
||||
// components: [{sveld: sveldComp}],
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
description: 'Provides styles for static list elements.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/lists'],
|
||||
source: 'styles/elements/lists.css',
|
||||
source: 'packages/plugin/src/styles/components/lists.css',
|
||||
classes: [
|
||||
['<code class="code">.list</code>', '-', 'Class for defining an unordered or ordered list.'],
|
||||
['<code class="code">.list-dl</code>', '-', 'Class for defining a description list.'],
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
description: 'Provides a grid for presenting a set of logos, brands, or sponsors.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/logo-clouds'],
|
||||
source: 'styles/elements/logo-clouds.css',
|
||||
source: 'packages/plugin/src/styles/components/logo-clouds.css',
|
||||
classes: [
|
||||
['<code class="code">.logo-cloud</code>', '-', 'Apply to a wrapping block element around a set of logos.'],
|
||||
['<code class="code">.logo-item</code>', '-', 'Apply to each logo child element.']
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
description: 'Provides "skeleton" placeholders that can display while content loads.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/placeholders'],
|
||||
source: 'styles/elements/placeholders.css',
|
||||
source: 'packages/plugin/src/styles/components/placeholders.css',
|
||||
classes: [
|
||||
['<code class="code">placeholder</code>', '-', 'Applies the default placeholder style.'],
|
||||
['<code class="code">placeholder-circle</code>', '-', 'Applies the circular placeholder style.']
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
description: 'Provides a set of styles for native HTML table elements.',
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/tables'],
|
||||
source: 'styles/elements/tables.css',
|
||||
source: 'packages/plugin/src/styles/components/tables.css',
|
||||
classes: [
|
||||
['<code class="code">.table-container</code>', '-', 'Apply to a wrapping parent element to enable responsive scrolling.'],
|
||||
['<code class="code">.table</code>', '-', 'Apply to a native HTML table element to add table styles.'],
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
name: 'Typography',
|
||||
description: 'Provides a variety of globally scoped typographic styles. Keeps common tags styled consistently throughout an app.',
|
||||
stylesheetIncludes: ['skeleton', 'typography'],
|
||||
source: 'styles/partials/typography.css'
|
||||
source: 'packages/plugin/src/styles/components/typography.css'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
types: ['Template'],
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/template'],
|
||||
source: 'components/Template',
|
||||
source: 'packages/skeleton/src/lib/components/Template',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/'
|
||||
// dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }],
|
||||
// components: [{sveld: sveldComp}],
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
'Displays pre-formatted source code, with optional support for <a href="https://highlightjs.org/" target="_blank" rel="noreferrer">Highlight.js</a> syntax highlighting.',
|
||||
imports: ['CodeBlock'],
|
||||
stylesheets: ['highlight-js'],
|
||||
source: 'utilities/CodeBlock',
|
||||
source: 'packages/skeleton/src/lib/utilities/CodeBlock',
|
||||
components: [{ sveld: sveldCodeBlock }],
|
||||
dependencies: [{ label: 'Highlight.js', url: 'https://highlightjs.org/' }]
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
description: 'Displays an overlay panel that attaches to any side of the screen.',
|
||||
imports: ['Drawer', 'getDrawerStore'],
|
||||
types: ['DrawerSettings', 'DrawerStore'],
|
||||
source: 'utilities/Drawer',
|
||||
source: 'packages/skeleton/src/lib/utilities/Drawer',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/',
|
||||
components: [{ sveld: sveldDrawer }],
|
||||
keyboard: [['<kbd class="kbd">Esc</kbd>', ' Closes the drawer.']]
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Lightswitch',
|
||||
description: `Components and utilities to toggle <a class="anchor" href="https://tailwindcss.com/docs/dark-mode" target="_blank" rel="noreferrer">Tailwind's dark mode</a>.`,
|
||||
imports: ['LightSwitch'],
|
||||
source: 'utilities/LightSwitch',
|
||||
source: 'packages/skeleton/src/lib/utilities/LightSwitch',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/switch/',
|
||||
components: [{ sveld: sveldLightSwitch }],
|
||||
keyboard: [['<kbd class="kbd">Space</kbd> or <kbd class="kbd">Enter</kbd>', 'Toggle the switch state.']]
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
description:
|
||||
'An extended version of the <a class="anchor" href="https://svelte.dev/tutorial/writable-stores" target="_blank" rel="noreferrer">Svelte writable store</a> that includes pub/sub to local storage.',
|
||||
imports: ['localStorageStore'],
|
||||
source: 'utilities/LocalStorageStore'
|
||||
source: 'packages/skeleton/src/lib/utilities/LocalStorageStore'
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
description: 'High priority dialogs and modals using a dynamic queue system.',
|
||||
imports: ['Modal', 'getModalStore'],
|
||||
types: ['ModalSettings', 'ModalComponent', 'ModalStore'],
|
||||
source: 'utilities/Modal',
|
||||
source: 'packages/skeleton/src/lib/utilities/Modal',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/',
|
||||
components: [{ sveld: sveldModal }],
|
||||
keyboard: [['<kbd class="kbd">Esc</kbd>', ' Dismisses the foremost modal.']],
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
types: ['PopupSettings'],
|
||||
stylesheetIncludes: ['all', 'elements'],
|
||||
stylesheets: ['elements/popups'],
|
||||
source: 'utilities/Popup',
|
||||
source: 'packages/skeleton/src/lib/utilities/Popup',
|
||||
aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/menu/',
|
||||
classes: [
|
||||
['<code class="code">[data-popup]</code>', '', `Follows Floating UI's best practices. Sets hidden by default.`],
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
name: 'Table of Contents',
|
||||
description: 'Allows you to quickly navigate the hierarchy of headings for the current page.',
|
||||
imports: ['TableOfContents', 'tocCrawler'],
|
||||
source: 'components/TableOfContents',
|
||||
source: 'packages/skeleton/src/lib/utilities/TableOfContents',
|
||||
components: [{ sveld: sveldTableOfContents }]
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
description: 'Simple notifications utilizing a dynamic queue system.',
|
||||
imports: ['Toast', 'getToastStore'],
|
||||
types: ['ToastSettings', 'ToastStore'],
|
||||
source: 'utilities/Toast',
|
||||
source: 'packages/skeleton/src/lib/utilities/Toast',
|
||||
components: [{ sveld: sveldToast }],
|
||||
transitionIn: 'fly',
|
||||
transitionOut: 'fly'
|
||||
|
||||
Reference in New Issue
Block a user