mirror of
https://github.com/LukeHagar/skeleton.git
synced 2025-12-10 12:47:45 +00:00
Links, GH, package refs change except Trey
This commit is contained in:
Nik
2
.github/FUNDING.yml
vendored
2
.github/FUNDING.yml
vendored
@@ -1,6 +1,6 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [Brain-Bones]
|
||||
github: [skeletonlabs]
|
||||
patreon: # Replace with a single Patreon username
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/config.yml
vendored
2
.github/ISSUE_TEMPLATE/config.yml
vendored
@@ -4,5 +4,5 @@ contact_links:
|
||||
url: https://discord.com/channels/1003691521280856084/1003691521721245792
|
||||
about: Get help from the maintainers on Discord
|
||||
- name: Ask a question, give feedback, share your project
|
||||
url: https://github.com/Brain-Bones/skeleton/discussions
|
||||
url: https://github.com/skeletonlabs/skeleton/discussions
|
||||
about: Connect with other community members with GitHub discussions
|
||||
|
||||
2
.github/pull_request_template.md
vendored
2
.github/pull_request_template.md
vendored
@@ -1,5 +1,5 @@
|
||||
## Before submitting the PR:
|
||||
- [ ] Does your PR reference an issue? If not, please [chat to the team on Discord](https://discord.gg/EXqV7W8MtY) or [GitHub](https://github.com/Brain-Bones/skeleton/discussions) before submission.
|
||||
- [ ] Does your PR reference an issue? If not, please [chat to the team on Discord](https://discord.gg/EXqV7W8MtY) or [GitHub](https://github.com/skeletonlabs/skeleton/discussions) before submission.
|
||||
- [ ] Did you update and run tests before submission using `npm run test`?
|
||||
- [ ] Does your branch follow our [naming convention](https://www.skeleton.dev/docs/contributions)? If not, please amend the branch name using `branch -m new-branch-name`
|
||||
- [ ] Did you update documentation related to your new feature or changes?
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 Brain & Bones, LLC
|
||||
Copyright (c) 2022 Skeleton Labs, LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
10
README.md
10
README.md
@@ -1,9 +1,9 @@
|
||||
[](https://www.skeleton.dev/)
|
||||
|
||||
[](https://www.npmjs.com/package/@brainandbones/skeleton)
|
||||
[](https://www.npmjs.com/package/@skeletonlabs/skeleton)
|
||||
[](https://discord.gg/EXqV7W8MtY)
|
||||
[](https://twitter.com/SkeletonUI)
|
||||
[](https://github.com/Brain-Bones/skeleton/blob/master/LICENSE)
|
||||
[](https://github.com/skeletonlabs/skeleton/blob/master/LICENSE)
|
||||
|
||||
# 💀 Skeleton
|
||||
|
||||
@@ -13,7 +13,7 @@ A fully featured Svelte UI toolkit for Svelte + Tailwind. Skeleton allows you to
|
||||
|
||||
- [Documentation](https://skeleton.dev/)
|
||||
- [Contribution Guide](https://skeleton.dev/docs/contributions)
|
||||
- [Project Roadmap](https://github.com/Brain-Bones/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap)
|
||||
- [Project Roadmap](https://github.com/skeletonlabs/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap)
|
||||
|
||||
## 👋 Community
|
||||
|
||||
@@ -22,11 +22,11 @@ A fully featured Svelte UI toolkit for Svelte + Tailwind. Skeleton allows you to
|
||||
|
||||
## 🐞 Report an Issue
|
||||
|
||||
- [Submit Issue](https://github.com/Brain-Bones/skeleton/issues/new/choose)
|
||||
- [Submit Issue](https://github.com/skeletonlabs/skeleton/issues/new/choose)
|
||||
|
||||
## 🛠️ Contributions
|
||||
|
||||
We've provided a detailed [contribution guide](https://skeleton.dev/docs/contributions) to help you get started. Pull requests are highly encouraged. [Pick an open issue](https://github.com/Brain-Bones/skeleton/issues), review requirements with contributors, then send a PR!
|
||||
We've provided a detailed [contribution guide](https://www.skeleton.dev/docs/contributions) to help you get started. Pull requests are highly encouraged. [Pick an open issue](https://github.com/skeletonlabs/skeleton/issues), review requirements with contributors, then send a PR!
|
||||
|
||||
## Core Maintainer
|
||||
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "@brainandbones/skeleton",
|
||||
"name": "@skeletonlabs/skeleton",
|
||||
"version": "0.76.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@brainandbones/skeleton",
|
||||
"name": "@skeletonlabs/skeleton",
|
||||
"version": "0.76.0",
|
||||
"devDependencies": {
|
||||
"@bobthered/tailwindcss-palette-generator": "^3.0.0",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "@brainandbones/skeleton",
|
||||
"name": "@skeletonlabs/skeleton",
|
||||
"version": "0.76.0",
|
||||
"description": "A SvelteKit component library.",
|
||||
"author": "endigo9740 <csimmons@brainandbonesllc.com>",
|
||||
"author": "endigo9740 <chris@skeletonlabs.dev>",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* Reference: https://skeleton.brainandbonesllc.com/guides/styling */
|
||||
/* Reference: https://www.skeleton.dev/guides/styling */
|
||||
|
||||
html,
|
||||
body {
|
||||
@@ -12,7 +12,7 @@ body {
|
||||
|
||||
/*
|
||||
Global overrides to buttons styles, provided by:
|
||||
https://skeleton.brainandbonesllc.com/tailwind/buttons
|
||||
https://www.skeleton.dev/elements/buttons
|
||||
*/
|
||||
.btn,
|
||||
.btn-icon {
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
<a class="btn btn-sm" href="https://twitter.com/SkeletonUI" target="_blank" rel="noreferrer" aria-label="Twitter">
|
||||
<SvgIcon name="twitter" />
|
||||
</a>
|
||||
<a class="btn btn-sm" href="https://github.com/Brain-Bones/skeleton" target="_blank" rel="noreferrer" aria-label="GitHub">
|
||||
<a class="btn btn-sm" href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer" aria-label="GitHub">
|
||||
<SvgIcon name="github" />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
@@ -38,15 +38,15 @@
|
||||
<ul class="space-y-2">
|
||||
<li><a href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="noreferrer">Join Discord Community</a></li>
|
||||
<li><a href="https://twitter.com/SkeletonUI" target="_blank" rel="noreferrer">Follow on Twitter</a></li>
|
||||
<li><a href="https://github.com/Brain-Bones/skeleton" target="_blank" rel="noreferrer">View Github</a></li>
|
||||
<li><a href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer">View Github</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h6>Project</h6>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="https://github.com/Brain-Bones" target="_blank" rel="noreferrer">Github Organization</a></li>
|
||||
<li><a href="https://www.npmjs.com/org/brainandbones" target="_blank" rel="noreferrer">NPM Organization</a></li>
|
||||
<li><a href="https://www.npmjs.com/package/@brainandbones/skeleton" target="_blank" rel="noreferrer">NPM Package</a></li>
|
||||
<li><a href="https://github.com/skeletonlabs" target="_blank" rel="noreferrer">Github Organization</a></li>
|
||||
<li><a href="https://www.npmjs.com/org/skeletonlabs" target="_blank" rel="noreferrer">NPM Organization</a></li>
|
||||
<li><a href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer">NPM Package</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,9 +57,9 @@
|
||||
<!-- Row 2 -->
|
||||
<section class={cRowTwo}>
|
||||
<p class="text-xs">
|
||||
<a href="https://github.com/Brain-Bones/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer">MIT License</a>
|
||||
<a href="https://github.com/skeletonlabs/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer">MIT License</a>
|
||||
<span class="opacity-10 mx-2">|</span>
|
||||
<a href="https://github.com/Brain-Bones/skeleton/graphs/contributors" target="_blank" rel="noreferrer">Contributors</a>
|
||||
<a href="https://github.com/skeletonlabs/skeleton/graphs/contributors" target="_blank" rel="noreferrer">Contributors</a>
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a class="btn bg-[#7289da] text-white" href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="noreferrer">
|
||||
@@ -70,7 +70,7 @@
|
||||
<SvgIcon name="twitter" fill="fill-white" />
|
||||
<span class="hidden md:inline-block ml-2">Twitter</span>
|
||||
</a>
|
||||
<a class="btn bg-[#6e5494] text-white" href="https://github.com/Brain-Bones/skeleton" target="_blank" rel="noreferrer">
|
||||
<a class="btn bg-[#6e5494] text-white" href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer">
|
||||
<SvgIcon name="github" fill="fill-white" />
|
||||
<span class="hidden md:inline-block ml-2">Github</span>
|
||||
</a>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
let storeActiveTab: Writable<string> = writable('usage');
|
||||
|
||||
// Local
|
||||
const githubSourcePath: string = 'https://github.com/Brain-Bones/skeleton/tree/master/src'; // FIXME: hardcoded path
|
||||
const githubSourcePath: string = 'https://github.com/skeletonlabs/skeleton/tree/master/src'; // FIXME: hardcoded path
|
||||
const defaultSettings: DocsShellSettings = {
|
||||
// Heading
|
||||
feature: DocsFeature.Component,
|
||||
@@ -43,7 +43,7 @@
|
||||
types: [],
|
||||
stylesheetIncludes: [],
|
||||
stylesheets: [],
|
||||
package: { name: '@brainandbones/skeleton', url: 'https://www.npmjs.com/package/@brainandbones/skeleton' },
|
||||
package: { name: '@skeletonlabs/skeleton', url: 'https://www.npmjs.com/package/@skeletonlabs/skeleton' },
|
||||
source: '',
|
||||
docsPath: $page.url.pathname,
|
||||
aria: undefined,
|
||||
@@ -201,7 +201,8 @@
|
||||
<p class="hidden md:inline-block w-32">Docs</p>
|
||||
<div class="flex items-end space-x-2">
|
||||
<SvgIcon width="w-4" height="h-4" class="!mr-1" name="book" />
|
||||
<a href={`${githubSourcePath}/routes/(inner)${pageSettings.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">Doc Source</a>
|
||||
<a href={`${githubSourcePath}/routes/(inner)${pageSettings.docsPath}/+page.svelte`} target="_blank" rel="noreferrer">Doc Source</a
|
||||
>
|
||||
</div>
|
||||
<!-- Dependencies -->
|
||||
{#if pageSettings.dependencies?.length}
|
||||
@@ -272,7 +273,12 @@
|
||||
<!-- Supports restProps -->
|
||||
{#if pageSettings.restProps}
|
||||
<p>
|
||||
This component makes use of <a href="https://svelte.dev/docs#template-syntax-attributes-and-props" target="_blank" rel="noreferrer">restProps</a> for the
|
||||
This component makes use of <a
|
||||
href="https://svelte.dev/docs#template-syntax-attributes-and-props"
|
||||
target="_blank"
|
||||
rel="noreferrer">restProps</a
|
||||
>
|
||||
for the
|
||||
<code>{pageSettings.restProps}</code> element.
|
||||
</p>
|
||||
{/if}
|
||||
@@ -285,7 +291,9 @@
|
||||
{#if comp.label}<h2>{comp.label}</h2>{/if}
|
||||
{#if comp.descProps}<div>{@html comp.descProps}</div>{/if}
|
||||
{#if tableSource.body.length > 0}<Table source={tableSource} />{/if}
|
||||
{#if comp.overrideProps}<div><em>{comp.label} can override: <span class="text-primary-500">{comp.overrideProps.join(', ')}</span>.</em></div>{/if}
|
||||
{#if comp.overrideProps}<div>
|
||||
<em>{comp.label} can override: <span class="text-primary-500">{comp.overrideProps.join(', ')}</span>.</em>
|
||||
</div>{/if}
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// This file defines the short path imports for the package (ex: @brainandbones/skeleton/*)
|
||||
// This file defines the short path imports for the package (ex: @skeletonlabs/skeleton/*)
|
||||
|
||||
// Types ---
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest. =~= */
|
||||
/* https://github.com/Brain-Bones/skeleton/discussions/401 */
|
||||
/* https://github.com/skeletonlabs/skeleton/discussions/401 */
|
||||
|
||||
:root {
|
||||
/* =~= Theme Styles =~= */
|
||||
--theme-border-base: 1px;
|
||||
--theme-font-family-heading: system-ui;
|
||||
--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-color-base: var(--color-surface-900);
|
||||
--theme-font-color-dark: var(--color-surface-50);
|
||||
--theme-rounded-base: 24px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* =~= Gold Nouveau - made by GitHub user @Sarenor for the Skeleton community theme contest. =~= */
|
||||
/* https://github.com/Brain-Bones/skeleton/discussions/401 */
|
||||
/* https://github.com/skeletonlabs/skeleton/discussions/401 */
|
||||
|
||||
/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* =~= Hamlindigo Theme - made by GitHub user @rcgy for the Skeleton community. Go watch Better Call Saul. =~= */
|
||||
/* https://github.com/Brain-Bones/skeleton/discussions/401 */
|
||||
/* https://github.com/skeletonlabs/skeleton/discussions/401 */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
/* =~= Hamlindigo Theme | Custom =~= */
|
||||
--theme-border-base: 2px;
|
||||
--theme-font-family-heading: 'Playfair Display', serif;
|
||||
--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--theme-font-color-base: 0 0 0;
|
||||
--theme-font-color-dark: 255 255 255;
|
||||
--theme-rounded-base: 0px;
|
||||
|
||||
@@ -93,8 +93,11 @@
|
||||
<svelte:fragment slot="usage">
|
||||
<section class="space-y-4">
|
||||
<h2>Import SVG Filters</h2>
|
||||
<p>Add within scope of your filtered element. For global scope, add the following to your app's root component. Only import the filters you plan to use.</p>
|
||||
<CodeBlock language="javascript" code={`import { Emerald, BlueNight, /* ... */ } from '@brainandbones/skeleton';`} />
|
||||
<p>
|
||||
Add within scope of your filtered element. For global scope, add the following to your app's root component. Only import the filters
|
||||
you plan to use.
|
||||
</p>
|
||||
<CodeBlock language="javascript" code={`import { Emerald, BlueNight, /* ... */ } from '@skeletonlabs/skeleton';`} />
|
||||
<CodeBlock language="html" code={`<Emerald />\n<BlueNight />`} />
|
||||
</section>
|
||||
<section class="space-y-4">
|
||||
@@ -113,7 +116,11 @@
|
||||
<section class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
|
||||
<div class="space-y-2">
|
||||
<h2>Create a Filter</h2>
|
||||
<p>Easily generate your own filters using this tool by <a href="https://twitter.com/rikschennink/" target="_blank" rel="noreferrer">Rik Schennink</a>.</p>
|
||||
<p>
|
||||
Easily generate your own filters using this tool by <a href="https://twitter.com/rikschennink/" target="_blank" rel="noreferrer"
|
||||
>Rik Schennink</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn btn-filled-accent" href="https://fecolormatrix.com/" target="_blank" rel="noreferrer">Create Filter</a>
|
||||
</section>
|
||||
@@ -121,8 +128,9 @@
|
||||
<section class="space-y-4">
|
||||
<h2>Browser Support</h2>
|
||||
<p>
|
||||
Please be aware that <a href="https://caniuse.com/css-filters" target="_blank" rel="noreferrer">browser support</a> varies. Some filters are not functional in Safari, while Firefox is not supported
|
||||
at all. We recommend using progressive enhancement when using filters in non-supported browsers.
|
||||
Please be aware that <a href="https://caniuse.com/css-filters" target="_blank" rel="noreferrer">browser support</a> varies. Some filters
|
||||
are not functional in Safari, while Firefox is not supported at all. We recommend using progressive enhancement when using filters in
|
||||
non-supported browsers.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="card card-body !bg-emerald-500 text-white text-center">
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
<p>
|
||||
See <a href="/actions/filters">Filters</a> to learn how to import and configure the filters action and SVG filter components.
|
||||
</p>
|
||||
<CodeBlock language="ts" code={`import { filter, Apollo, /* ... */ } from '@brainandbones/skeleton';`} />
|
||||
<CodeBlock language="ts" code={`import { filter, Apollo, /* ... */ } from '@skeletonlabs/skeleton';`} />
|
||||
<p>Import the filter action reference using <code>action</code> and set <code>actionParams</code> to the desired filter id.</p>
|
||||
<CodeBlock language="html" code={`<Avatar src="https://i.pravatar.cc/" action={filter} actionParams="Apollo" />`} />
|
||||
</div>
|
||||
|
||||
@@ -63,11 +63,14 @@
|
||||
<!-- Slot: Usage -->
|
||||
<svelte:fragment slot="usage">
|
||||
<div class="space-y-4">
|
||||
<p>Provide one or more color stops that start at <em>0%</em> and end at <em>100%</em>. The data set below will create a half red/green conic gradient.</p>
|
||||
<p>
|
||||
Provide one or more color stops that start at <em>0%</em> and end at <em>100%</em>. The data set below will create a half red/green
|
||||
conic gradient.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="ts"
|
||||
code={`
|
||||
import type { ConicStop } from '@brainandbones/skeleton';
|
||||
import type { ConicStop } from '@skeletonlabs/skeleton';
|
||||
|
||||
const conicStops: ConicStop[] = [
|
||||
{ color: 'red', start: 0, end: 50 },
|
||||
@@ -123,8 +126,9 @@ const conicStops: ConicStop[] = [
|
||||
<div class="space-y-4">
|
||||
<h3>Via Custom Colors</h3>
|
||||
<p>
|
||||
You can provide <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noreferrer">standard CSS color values</a> as a string, including: color names, hex, rgba,
|
||||
HSL, or similar.
|
||||
You can provide <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noreferrer"
|
||||
>standard CSS color values</a
|
||||
> as a string, including: color names, hex, rgba, HSL, or similar.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="ts"
|
||||
@@ -140,7 +144,8 @@ const conicStops: ConicStop[] = [
|
||||
<div class="space-y-4">
|
||||
<h2>Spinner Gradient</h2>
|
||||
<p>
|
||||
To create a spinner, set <code>spin</code> to <em>true</em>, and created a smooth gradient transition between transparent and filled color stops. Note the numeric gap between stops.
|
||||
To create a spinner, set <code>spin</code> to <em>true</em>, and created a smooth gradient transition between transparent and filled
|
||||
color stops. Note the numeric gap between stops.
|
||||
</p>
|
||||
<CodeBlock language="html" code={`<ConicGradient stops={conicStops} spin={true} width="w-8" />`} />
|
||||
<CodeBlock
|
||||
|
||||
@@ -138,7 +138,7 @@ const tableSimple: TableSource = {
|
||||
<Tab value="tableSourceValues">Source Values</Tab>
|
||||
<!-- <Tab value="tableCellFormatter">Cell Formatter</Tab> -->
|
||||
</TabGroup>
|
||||
<CodeBlock language="ts" code={`import { ${$storeService} } from '@brainandbones/skeleton';>`} />
|
||||
<CodeBlock language="ts" code={`import { ${$storeService} } from '@skeletonlabs/skeleton';>`} />
|
||||
{#if $storeService === 'tableMapperValues'}
|
||||
<!-- Table Mapper Values -->
|
||||
<p>
|
||||
|
||||
@@ -174,7 +174,7 @@ dispatch('dragover', event);`}
|
||||
</div>
|
||||
<a
|
||||
class="btn btn-filled-accent"
|
||||
href="https://github.com/Brain-Bones/skeleton/blob/dev/src/docs/DocsShell/types.ts#L42"
|
||||
href="https://github.com/skeletonlabs/skeleton/blob/dev/src/docs/DocsShell/types.ts#L42"
|
||||
target="_blank"
|
||||
rel="noreferrer">View Available Settings</a
|
||||
>
|
||||
|
||||
@@ -65,14 +65,14 @@
|
||||
<h2>Contribution Workflow</h2>
|
||||
<ol class="list-decimal list-inside space-y-1">
|
||||
<li>
|
||||
<a href="https://github.com/Brain-Bones/skeleton/issues" target="_blank" rel="noreferrer">Select an issue</a>
|
||||
<a href="https://github.com/skeletonlabs/skeleton/issues" target="_blank" rel="noreferrer">Select an issue</a>
|
||||
or
|
||||
<a href="https://github.com/Brain-Bones/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap" target="_blank" rel="noreferrer"
|
||||
<a href="https://github.com/skeletonlabs/skeleton/wiki/%F0%9F%9B%A3%EF%B8%8F-The-Skeleton-Roadmap" target="_blank" rel="noreferrer"
|
||||
>roadmap task</a
|
||||
> you wish to contribute to.
|
||||
</li>
|
||||
<li>
|
||||
Leave a comment, join the <a href="https://github.com/Brain-Bones/skeleton/discussions/79" target="_blank" rel="noreferrer"
|
||||
Leave a comment, join the <a href="https://github.com/skeletonlabs/skeleton/discussions/79" target="_blank" rel="noreferrer"
|
||||
>roadmap discussion</a
|
||||
>, or
|
||||
<a href="https://discord.gg/EXqV7W8MtY" target="_blank" rel="noreferrer">give us a heads up on Discord</a>.
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<section class="space-y-4">
|
||||
<h2>Do you have a project roadmap?</h2>
|
||||
<p>
|
||||
Yes, <a href="https://github.com/Brain-Bones/skeleton/discussions/503" target="_blank" rel="noreferrer">view our roadmap</a>. This
|
||||
Yes, <a href="https://github.com/skeletonlabs/skeleton/discussions/503" target="_blank" rel="noreferrer">view our roadmap</a>. This
|
||||
covers major milestones leading up to the v1.0 release.
|
||||
</p>
|
||||
</section>
|
||||
@@ -79,10 +79,10 @@
|
||||
<section class="text-center space-y-4">
|
||||
<p>Need additional support? Reach out.</p>
|
||||
<div class="flex justify-center space-x-2">
|
||||
<a class="btn btn-ghost-surface" href="https://github.com/Brain-Bones/skeleton/issues" target="_blank" rel="noreferrer"
|
||||
<a class="btn btn-ghost-surface" href="https://github.com/skeletonlabs/skeleton/issues" target="_blank" rel="noreferrer"
|
||||
>GitHub Support</a
|
||||
>
|
||||
<a class="btn btn-ghost-surface" href="https://github.com/Brain-Bones/skeleton" target="_blank" rel="noreferrer">Discord Support</a>
|
||||
<a class="btn btn-ghost-surface" href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer">Discord Support</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -151,7 +151,7 @@
|
||||
<p>Are we missing something useful?</p>
|
||||
<a
|
||||
class="btn btn-ghost-surface"
|
||||
href="https://github.com/Brain-Bones/skeleton/issues/new?assignees=&labels=feature-request&template=feature_request.yml"
|
||||
href="https://github.com/skeletonlabs/skeleton/issues/new?assignees=&labels=feature-request&template=feature_request.yml"
|
||||
target="_blank"
|
||||
rel="noreferrer">Suggest a Package</a
|
||||
>
|
||||
|
||||
@@ -64,11 +64,11 @@
|
||||
<section class="space-y-4">
|
||||
<h2>Free and Open Source</h2>
|
||||
<p>
|
||||
Skeleton is available as <a href="https://github.com/Brain-Bones/skeleton" target="_blank" rel="noreferrer"
|
||||
Skeleton is available as <a href="https://github.com/skeletonlabs/skeleton" target="_blank" rel="noreferrer"
|
||||
>free and open-source software (FOSS)</a
|
||||
>
|
||||
provided under the
|
||||
<a href="https://github.com/Brain-Bones/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer">MIT License</a>.
|
||||
<a href="https://github.com/skeletonlabs/skeleton/blob/master/LICENSE" target="_blank" rel="noreferrer">MIT License</a>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<!-- Minimal -->
|
||||
<div class="md:col-span-2 card card-body flex justify-center items-center"><span>Minimal</span></div>
|
||||
<!-- Detailed -->
|
||||
<a class="md:col-span-2 card overflow-hidden" href="https://skeleton.brainandbonesllc.com/">
|
||||
<a class="md:col-span-2 card overflow-hidden" href="https://www.skeleton.dev/">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<img src="https://source.unsplash.com/random/1280x540?skeleton" class="bg-black/50 w-full aspect-[21/9]" alt="Post" />
|
||||
|
||||
@@ -26,7 +26,12 @@
|
||||
<strong>TIP:</strong> Consider pairing this with a <strong>CSS Mesh Gradient</strong> background image.
|
||||
<svelte:fragment slot="trail">
|
||||
<!-- FIXME: hardcoded path -->
|
||||
<a class="btn btn-ghost" href="https://github.com/Brain-Bones/skeleton/blob/master/src/lib/themes/theme-skeleton.css#L80" target="_blank" rel="noreferrer">Reference</a>
|
||||
<a
|
||||
class="btn btn-ghost"
|
||||
href="https://github.com/skeletonlabs/skeleton/blob/master/src/lib/themes/theme-skeleton.css#L80"
|
||||
target="_blank"
|
||||
rel="noreferrer">Reference</a
|
||||
>
|
||||
<a class="btn btn-filled" href="https://csshero.org/mesher/" target="_blank" rel="noreferrer">Mesh Generator</a>
|
||||
</svelte:fragment>
|
||||
</Alert>
|
||||
@@ -38,29 +43,38 @@
|
||||
<div class="card card-body max-h-[200px] overflow-auto space-y-4">
|
||||
<h3>Test Scrolling Here</h3>
|
||||
<p>
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis
|
||||
totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto
|
||||
modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor.
|
||||
Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur
|
||||
adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni
|
||||
harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae
|
||||
reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti
|
||||
architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto
|
||||
dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet
|
||||
consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam
|
||||
necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos
|
||||
ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam
|
||||
eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum,
|
||||
dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi
|
||||
veniam necessitatibus, magni harum.
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti
|
||||
architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit
|
||||
amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus,
|
||||
quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur
|
||||
adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus!
|
||||
Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis
|
||||
totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto
|
||||
dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam
|
||||
necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique
|
||||
quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus,
|
||||
magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet
|
||||
quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem
|
||||
ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti
|
||||
architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit
|
||||
amet consectetur adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus,
|
||||
quos ducimus! Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur
|
||||
adipisicing elit. Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus!
|
||||
Repudiandae reiciendis totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
||||
Culpa corrupti iusto dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis
|
||||
totam sequi veniam necessitatibus, magni harum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa corrupti iusto
|
||||
dolor. Similique quibusdam eveniet quae deleniti architecto modi natus, quos ducimus! Repudiandae reiciendis totam sequi veniam
|
||||
necessitatibus, magni harum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Horizontal Rules -->
|
||||
<div class="space-y-4">
|
||||
<h2>Horizontal Rules</h2>
|
||||
<p>Applies styling to the native horizontal rule element. See the <a href="/components/dividers">Dividers</a> component for more options.</p>
|
||||
<p>
|
||||
Applies styling to the native horizontal rule element. See the <a href="/components/dividers">Dividers</a> component for more options.
|
||||
</p>
|
||||
<CodeBlock language="html" code={`<hr />`} />
|
||||
<div class="card card-body space-y-4 text-center">
|
||||
<p>Above the horizontal rule.</p>
|
||||
|
||||
@@ -21,7 +21,12 @@
|
||||
<div class="flex items-center">
|
||||
<p>While we formalize this feature, please see the stylesheet directly as a source reference.</p>
|
||||
</div>
|
||||
<a class="btn btn-filled-accent place-self-center" href="https://github.com/Brain-Bones/skeleton/tree/master/src/lib/styles/tokens.css" target="_blank" rel="noreferrer">View Source →</a>
|
||||
<a
|
||||
class="btn btn-filled-accent place-self-center"
|
||||
href="https://github.com/skeletonlabs/skeleton/tree/master/src/lib/styles/tokens.css"
|
||||
target="_blank"
|
||||
rel="noreferrer">View Source →</a
|
||||
>
|
||||
</section>
|
||||
</svelte:fragment>
|
||||
|
||||
@@ -36,9 +41,15 @@
|
||||
<hr />
|
||||
<section class="space-y-4">
|
||||
<p>Tokens are avialable to use anywhere in your project. Here's a few examples:</p>
|
||||
<CodeBlock language="html" code={`<!-- Apply your theme's border radius value -->\n<div class="w-10 h-10 bg-primary-500 rounded-token">Rounded</div>`} />
|
||||
<CodeBlock
|
||||
language="html"
|
||||
code={`<!-- Apply your theme's border radius value -->\n<div class="w-10 h-10 bg-primary-500 rounded-token">Rounded</div>`}
|
||||
/>
|
||||
<CodeBlock language="html" code={`<!-- Apply your theme's heading font -->\n<span class="font-heading-token">Font Family</span>`} />
|
||||
<CodeBlock language="html" code={`<!-- Set the text color, which auto adjusts for light/dark modes -->\n<span class="text-token">Skeleton</span>`} />
|
||||
<CodeBlock
|
||||
language="html"
|
||||
code={`<!-- Set the text color, which auto adjusts for light/dark modes -->\n<span class="text-token">Skeleton</span>`}
|
||||
/>
|
||||
</section>
|
||||
</svelte:fragment>
|
||||
</DocsShell>
|
||||
|
||||
@@ -57,11 +57,11 @@
|
||||
language="html"
|
||||
code={`
|
||||
---
|
||||
import '@brainandbones/skeleton/themes/theme-skeleton.css';
|
||||
import '@brainandbones/skeleton/styles/all.css';
|
||||
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
|
||||
import '@skeletonlabs/skeleton/styles/all.css';
|
||||
import '../styles/global.css';
|
||||
|
||||
import { AppShell, AppBar } from '@brainandbones/skeleton';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
---
|
||||
|
||||
<!-- NOTE: we have set the .dark class to enable Dark Mode -->
|
||||
@@ -150,7 +150,7 @@ import { AppShell, AppBar } from '@brainandbones/skeleton';
|
||||
code={`
|
||||
---
|
||||
import LayoutRoot from './layouts/LayoutRoot.astro';
|
||||
import { GradientHeading } from '@brainandbones/skeleton';
|
||||
import { GradientHeading } from '@skeletonlabs/skeleton';
|
||||
---
|
||||
<LayoutRoot>
|
||||
<h1>Hello Skeleton</h1>
|
||||
@@ -222,7 +222,7 @@ import { GradientHeading } from '@brainandbones/skeleton';
|
||||
language="html"
|
||||
code={`
|
||||
---
|
||||
import { Breadcrumb, Crumb } from '@brainandbones/skeleton';
|
||||
import { Breadcrumb, Crumb } from '@skeletonlabs/skeleton';
|
||||
---
|
||||
<Breadcrumb>
|
||||
<Crumb href='/'>Home</Crumb>
|
||||
|
||||
@@ -68,11 +68,11 @@
|
||||
language="html"
|
||||
code={`
|
||||
<script>
|
||||
import '@brainandbones/skeleton/themes/theme-skeleton.css';
|
||||
import '@brainandbones/skeleton/styles/all.css';
|
||||
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
|
||||
import '@skeletonlabs/skeleton/styles/all.css';
|
||||
import '../app.postcss';
|
||||
|
||||
import { AppShell, AppBar } from '@brainandbones/skeleton';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
</script\>
|
||||
|
||||
<AppShell>
|
||||
@@ -171,7 +171,7 @@
|
||||
language="html"
|
||||
code={`
|
||||
<script>
|
||||
import { GradientHeading } from '@brainandbones/skeleton';
|
||||
import { GradientHeading } from '@skeletonlabs/skeleton';
|
||||
</script\>
|
||||
|
||||
<GradientHeading tag="h1" direction="bg-gradient-to-br" from="from-primary-500" to="to-accent-500">
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
language="html"
|
||||
code={`
|
||||
\<script\>
|
||||
import { AppShell, AppBar } from '@brainandbones/skeleton';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
\</script\>
|
||||
|
||||
<AppShell>
|
||||
@@ -159,7 +159,7 @@
|
||||
language="html"
|
||||
code={`
|
||||
\<script\>
|
||||
import { GradientHeading } from '@brainandbones/skeleton';
|
||||
import { GradientHeading } from '@skeletonlabs/skeleton';
|
||||
\</script\>
|
||||
|
||||
<GradientHeading tag="h1" direction="bg-gradient-to-br" from="from-primary-500" to="to-accent-500">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { storeFramework } from '$docs/stores';
|
||||
import { Divider, TabGroup, Tab } from '@brainandbones/skeleton';
|
||||
import { Divider, TabGroup, Tab } from '@skeletonlabs/skeleton';
|
||||
import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
|
||||
</script>
|
||||
|
||||
@@ -87,13 +87,11 @@ cd astro-skeleton-app
|
||||
<section class="space-y-4">
|
||||
<h2>Install Skeleton</h2>
|
||||
<p>
|
||||
Install the core Skeleton package from <a
|
||||
href="https://www.npmjs.com/package/@brainandbones/skeleton"
|
||||
target="_blank"
|
||||
rel="noreferrer">NPM</a
|
||||
Install the core Skeleton package from <a href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer"
|
||||
>NPM</a
|
||||
>.
|
||||
</p>
|
||||
<CodeBlock language="console" code={`npm i @brainandbones/skeleton --save-dev`} />
|
||||
<CodeBlock language="console" code={`npm i @skeletonlabs/skeleton --save-dev`} />
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
export const storeStylesheetElements: Writable<string> = writable('combined');
|
||||
|
||||
// Local
|
||||
const ghLibPathMaster: string = 'https://github.com/Brain-Bones/skeleton/tree/master/src/lib'; // master branch
|
||||
const ghLibPathMaster: string = 'https://github.com/skeletonlabs/skeleton/tree/master/src/lib'; // master branch
|
||||
|
||||
// Tables
|
||||
const tableStyleAll: TableSource = {
|
||||
@@ -186,7 +186,7 @@
|
||||
<CodeBlock
|
||||
language="typescript"
|
||||
code={`
|
||||
import '@brainandbones/skeleton/styles/${$storeStylesheets === 'recommended' ? 'all' : '{stylehsheets}'}.css';
|
||||
import '@skeletonlabs/skeleton/styles/${$storeStylesheets === 'recommended' ? 'all' : '{stylehsheets}'}.css';
|
||||
`}
|
||||
/>
|
||||
<TabGroup selected={storeStylesheets}>
|
||||
|
||||
@@ -82,7 +82,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
// ...
|
||||
content: [
|
||||
// Keep existing values and append the following:
|
||||
require('path').join(require.resolve('@brainandbones/skeleton'), '../**/*.{html,js,svelte,ts}')
|
||||
require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
|
||||
],
|
||||
// ...
|
||||
}
|
||||
@@ -102,7 +102,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
// ...
|
||||
plugins: [
|
||||
// Keep any existing plugins present and append the following:
|
||||
require('@brainandbones/skeleton/tailwind/theme.cjs')
|
||||
require('@skeletonlabs/skeleton/tailwind/theme.cjs')
|
||||
]
|
||||
}
|
||||
`}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
import type { ToastSettings } from '$lib/utilities/Toast/types';
|
||||
|
||||
// Presets
|
||||
const presetUrl: string = 'https://github.com/Brain-Bones/skeleton/blob/master/src/themes';
|
||||
const presetUrl: string = 'https://github.com/skeletonlabs/skeleton/blob/master/src/themes';
|
||||
// prettier-ignore
|
||||
const presets: any[] = [
|
||||
{ name: 'Skeleton', colors: ['#10b981', '#6366f1', '#f43f5e'], surface: '#111827', url: `${presetUrl}/theme-skeleton.css` },
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
// Copy Theme Import to Clipboard
|
||||
function copyThemeToClipboard(name: string): void {
|
||||
navigator.clipboard.writeText(`import '@brainandbones/skeleton/themes/theme-${name.toLowerCase()}.css';`).then(
|
||||
navigator.clipboard.writeText(`import '@skeletonlabs/skeleton/themes/theme-${name.toLowerCase()}.css';`).then(
|
||||
// Success
|
||||
() => {
|
||||
const t: ToastSettings = { message: 'Import statement copied to clipboard.' };
|
||||
@@ -107,19 +107,19 @@
|
||||
<p>Import your desired preset into <code>src/routes/+layout.svelte</code> before your global stylesheet.</p>
|
||||
<CodeBlock
|
||||
language="typescript"
|
||||
code={`import '@brainandbones/skeleton/themes/theme-skeleton.css'; // <--\nimport '../app.postcss';\n`}
|
||||
code={`import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // <--\nimport '../app.postcss';\n`}
|
||||
/>
|
||||
<!-- Framework: Vite (Svelte) -->
|
||||
{:else if $storeFramework === 'vite'}
|
||||
<p>Import your desired preset into <code>/src/main.js</code> before your global stylesheet.</p>
|
||||
<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.css';\n`} />
|
||||
<CodeBlock language="typescript" code={`import '@skeletonlabs/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.css';\n`} />
|
||||
<!-- Framework: Astro -->
|
||||
{:else if $storeFramework === 'astro'}
|
||||
<p>
|
||||
Astro does not provide a root layout by default, but we recommend creating <code>/src/layouts/LayoutRoot.astro</code>. See our
|
||||
<a href="/guides/frameworks/astro">See our Astro walkthrough</a> for assistance.
|
||||
</p>
|
||||
<CodeBlock language="typescript" code={`import '@brainandbones/skeleton/themes/theme-{name}.css'; // <--`} />
|
||||
<CodeBlock language="typescript" code={`import '@skeletonlabs/skeleton/themes/theme-{name}.css'; // <--`} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
const settings: DocsShellSettings = {
|
||||
feature: DocsFeature.Utility,
|
||||
name: 'Code Blocks',
|
||||
description: 'Displays pre-formatted source code, with optional support for <a href="https://highlightjs.org/" target="_blank" rel="noreferrer">Highlight.js</a> syntax highlighting.',
|
||||
description:
|
||||
'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',
|
||||
@@ -34,7 +35,9 @@
|
||||
<svelte:fragment slot="usage">
|
||||
<section class="space-y-4">
|
||||
<h2>Install Highlight.js</h2>
|
||||
<p><a href="https://highlightjs.org/" target="_blank" rel="noreferrer">Highlight.js</a> is a required depedency to enable syntax highlighting.</p>
|
||||
<p>
|
||||
<a href="https://highlightjs.org/" target="_blank" rel="noreferrer">Highlight.js</a> is a required depedency to enable syntax highlighting.
|
||||
</p>
|
||||
<CodeBlock language="console" code={`npm install highlight.js`} />
|
||||
</section>
|
||||
<section class="space-y-4">
|
||||
@@ -42,18 +45,23 @@
|
||||
<p>Apply the following changes to your app's root component (ex: <code>/src/routes/+layout.svelte</code> for SvelteKit).</p>
|
||||
<CodeBlock language="typescript" code={`import hljs from 'highlight.js';`} />
|
||||
<p>
|
||||
Import any <a href="https://github.com/highlightjs/highlight.js/tree/main/src/styles" target="_blank" rel="noreferrer">Highlight.js CSS theme</a> of your choice. Skeleton has provided our custom
|
||||
theme near the top of this page.
|
||||
Import any <a href="https://github.com/highlightjs/highlight.js/tree/main/src/styles" target="_blank" rel="noreferrer"
|
||||
>Highlight.js CSS theme</a
|
||||
> of your choice. Skeleton has provided our custom theme near the top of this page.
|
||||
</p>
|
||||
<CodeBlock language="typescript" code={`import 'highlight.js/styles/github-dark.css';`} />
|
||||
<p>Finally, import the CodeBlock's writable store and pass a referenced to Highlight.js.</p>
|
||||
<CodeBlock language="typescript" code={`import { storeHighlightJs } from '@brainandbones/skeleton';\n\nstoreHighlightJs.set(hljs);`} />
|
||||
<CodeBlock language="typescript" code={`import { storeHighlightJs } from '@skeletonlabs/skeleton';\n\nstoreHighlightJs.set(hljs);`} />
|
||||
</section>
|
||||
<section class="space-y-4">
|
||||
<h2>Create a Code Block</h2>
|
||||
<p>
|
||||
Syntax highlighting will appear when a valid <a href="https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md" target="_blank" rel="noreferrer">language alias</a> is
|
||||
provided to the CodeBlock's
|
||||
Syntax highlighting will appear when a valid <a
|
||||
href="https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md"
|
||||
target="_blank"
|
||||
rel="noreferrer">language alias</a
|
||||
>
|
||||
is provided to the CodeBlock's
|
||||
<code>language</code> prop.
|
||||
</p>
|
||||
<CodeBlock code={'<CodeBlock language="html" code={`<div>This is meta</div>`}></CodeBlock>'} />
|
||||
@@ -61,7 +69,8 @@
|
||||
<section class="space-y-4">
|
||||
<h2>Accessibility</h2>
|
||||
<p>
|
||||
Uses <code>pre-wrap</code> by default to support keyboard-only navigation. Be mindful of color contrast ratios when customizing the design of this component.
|
||||
Uses <code>pre-wrap</code> by default to support keyboard-only navigation. Be mindful of color contrast ratios when customizing the design
|
||||
of this component.
|
||||
</p>
|
||||
</section>
|
||||
</svelte:fragment>
|
||||
|
||||
@@ -147,7 +147,7 @@ import {
|
||||
// Svelte Actions
|
||||
tableInteraction,
|
||||
tableA11y
|
||||
} from '@brainandbones/skeleton';`}
|
||||
} from '@skeletonlabs/skeleton';`}
|
||||
/>
|
||||
<p>
|
||||
We need data to populate the table. For simplicity, let's create this locally. In a real world app you might fetch this from an
|
||||
|
||||
@@ -34,7 +34,8 @@
|
||||
<section class="space-y-8">
|
||||
<section class="space-y-4">
|
||||
<p>
|
||||
See Tailwind's official <a href="https://tailwindcss.com/docs/dark-mode" target="_blank" rel="noreferrer">dark mode</a> documentation for full instructions. Ensure you've added
|
||||
See Tailwind's official <a href="https://tailwindcss.com/docs/dark-mode" target="_blank" rel="noreferrer">dark mode</a>
|
||||
documentation for full instructions. Ensure you've added
|
||||
<code>darkMode: 'class'</code>
|
||||
to your <a href="/guides/tailwind">Tailwind config</a>.
|
||||
</p>
|
||||
@@ -43,15 +44,20 @@
|
||||
<div class="space-y-4">
|
||||
<h2>How It Works</h2>
|
||||
<p>
|
||||
By default this will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noreferrer">prefers-color-scheme</a> setting in your
|
||||
device's operating system settings. However, when toggled, the following will occur.
|
||||
By default this will match the <a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"
|
||||
target="_blank"
|
||||
rel="noreferrer">prefers-color-scheme</a
|
||||
> setting in your device's operating system settings. However, when toggled, the following will occur.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>If dark mode is enabled, a <code>dark</code> class will be applied to your <em>HTML</em> page element.</li>
|
||||
<li>All instances of the Light Switch share state and will update accordingly.</li>
|
||||
<li>
|
||||
A value of <code>mode: 'light | dark'</code> will persist in
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer">window.localStorage</a>.
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank" rel="noreferrer"
|
||||
>window.localStorage</a
|
||||
>.
|
||||
</li>
|
||||
</ul>
|
||||
<CodeBlock language="html" code={`<!-- Light Mode -->\n<html>`} />
|
||||
@@ -59,11 +65,19 @@
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h2>Utility Stores</h2>
|
||||
<p>To check either the user's <em>operating system preferred color</em> scheme or the <em>current lightswitch value</em>, use the following Svelte store values.</p>
|
||||
<CodeBlock language="ts" code={`import { storePrefersDarkScheme, storeLightSwitch } from '@brainandbones/skeleton';`} />
|
||||
<p>
|
||||
To check either the user's <em>operating system preferred color</em> scheme or the <em>current lightswitch value</em>, use the
|
||||
following Svelte store values.
|
||||
</p>
|
||||
<CodeBlock language="ts" code={`import { storePrefersDarkScheme, storeLightSwitch } from '@skeletonlabs/skeleton';`} />
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li><code>storePrefersDarkScheme</code> - The operating system preference. Value will be <em>true</em> for dark, <em>false</em> for light.</li>
|
||||
<li><code>storeLightSwitch</code> - <em>true</em> for dark, <em>false</em> for light. If <em>undefined</em>, use the operating system preference.</li>
|
||||
<li>
|
||||
<code>storePrefersDarkScheme</code> - The operating system preference. Value will be <em>true</em> for dark, <em>false</em> for light.
|
||||
</li>
|
||||
<li>
|
||||
<code>storeLightSwitch</code> - <em>true</em> for dark, <em>false</em> for light. If <em>undefined</em>, use the operating
|
||||
system preference.
|
||||
</li>
|
||||
</ul>
|
||||
<p>Note this may not be accurate if the LightSwitch component has not yet been initialized.</p>
|
||||
</div>
|
||||
|
||||
@@ -164,7 +164,7 @@
|
||||
<section class="space-y-4">
|
||||
<h2>Modal Store</h2>
|
||||
<p>When you wish to trigger a modal, import the <code>modalStore</code>, which acts as the modal queue.</p>
|
||||
<CodeBlock language="ts" code={`import { modalStore } from '@brainandbones/skeleton';`} />
|
||||
<CodeBlock language="ts" code={`import { modalStore } from '@skeletonlabs/skeleton';`} />
|
||||
<h3>Trigger</h3>
|
||||
<p>Note that <code>title</code>, <code>body</code>, and <code>image</code> are optional for <u>all</u> modal types.</p>
|
||||
<TabGroup selected={storeModalStandard}>
|
||||
@@ -283,12 +283,12 @@ function triggerCustomModal(): void {
|
||||
`}
|
||||
/>
|
||||
<p>
|
||||
When constructing custom modals, you are responsible for implementing close/submit buttons, as well as triggering the
|
||||
response method as needed. To make this process easier to understand, we have provided a few examples to demonstrate the process.
|
||||
When constructing custom modals, you are responsible for implementing close/submit buttons, as well as triggering the response
|
||||
method as needed. To make this process easier to understand, we have provided a few examples to demonstrate the process.
|
||||
</p>
|
||||
<a
|
||||
class="btn btn-filled-accent"
|
||||
href="https://github.com/Brain-Bones/skeleton/tree/master/src/lib/utilities/Modal/examples"
|
||||
href="https://github.com/skeletonlabs/skeleton/tree/master/src/lib/utilities/Modal/examples"
|
||||
target="_blank"
|
||||
rel="noreferrer">View Example Modals</a
|
||||
>
|
||||
@@ -303,7 +303,7 @@ function triggerCustomModal(): void {
|
||||
</li>
|
||||
<li>
|
||||
You can inspect the full list of <a
|
||||
href="https://github.com/Brain-Bones/skeleton/blob/master/src/lib/utilities/Modal/Modal.svelte#L95"
|
||||
href="https://github.com/skeletonlabs/skeleton/blob/master/src/lib/utilities/Modal/Modal.svelte#L95"
|
||||
target="_blank"
|
||||
rel="noreferrer">available parent prop values</a
|
||||
> in the source code.
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
<p>The Modal Store acts as a queue for your toast messages.</p>
|
||||
<CodeBlock
|
||||
language="ts"
|
||||
code={`import { toastStore } from '@brainandbones/skeleton';
|
||||
code={`import { toastStore } from '@skeletonlabs/skeleton';
|
||||
`}
|
||||
/>
|
||||
<!-- Trigger -->
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
// Lifecycle Events
|
||||
onMount(() => {
|
||||
// TEMPORARY FIX FOR: https://github.com/Brain-Bones/skeleton/issues/489
|
||||
// TEMPORARY FIX FOR: https://github.com/skeletonlabs/skeleton/issues/489
|
||||
const lsTailwindPallete = window.localStorage.getItem('storeTailwindPalette');
|
||||
if (lsTailwindPallete?.includes('ternary')) {
|
||||
console.log('TEMP FIX: LocalStorage Values Cleared. This should only ever run once!');
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
throw new Error(res);
|
||||
}
|
||||
}
|
||||
let contributors: Promise<any> = fetchHttpData('https://api.github.com/repos/Brain-Bones/skeleton/contributors');
|
||||
let contributors: Promise<any> = fetchHttpData('https://api.github.com/repos/skeletonlabs/skeleton/contributors');
|
||||
// https://github.com/filiptronicek/gh-sponsors-api
|
||||
let sponsors: Promise<any> = fetchHttpData('https://ghs.vercel.app/sponsors/Brain-Bones', 'sponsors');
|
||||
let sponsors: Promise<any> = fetchHttpData('https://ghs.vercel.app/sponsors/skeletonlabs', 'sponsors');
|
||||
</script>
|
||||
|
||||
<div>
|
||||
@@ -56,7 +56,7 @@
|
||||
<svelte:fragment slot="lead">🚧</svelte:fragment>
|
||||
<span>Skeleton is currently in beta. Expect breaking changes prior to v1.0. Please report bugs on GitHub.</span>
|
||||
<svelte:fragment slot="trail">
|
||||
<a href="https://github.com/Brain-Bones/skeleton/issues" target="_blank" rel="noreferrer" class="btn btn-filled">Report Issue</a>
|
||||
<a href="https://github.com/skeletonlabs/skeleton/issues" target="_blank" rel="noreferrer" class="btn btn-filled">Report Issue</a>
|
||||
</svelte:fragment>
|
||||
</Alert>
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/await}
|
||||
<a class="btn btn-filled-primary" href="https://github.com/sponsors/Brain-Bones" target="_blank" rel="noreferrer">
|
||||
<a class="btn btn-filled-primary" href="https://github.com/sponsors/skeletonlabs" target="_blank" rel="noreferrer">
|
||||
<span>Become a Sponsor</span>
|
||||
<span>→</span>
|
||||
</a>
|
||||
|
||||
@@ -15,7 +15,7 @@ const config = {
|
||||
adapter: adapter(),
|
||||
// https://kit.svelte.dev/docs/configuration#alias
|
||||
alias: {
|
||||
'@brainandbones/skeleton': path.resolve('./src/lib/index.ts'),
|
||||
'@skeletonlabs/skeleton': path.resolve('./src/lib/index.ts'),
|
||||
$docs: path.resolve('./src/docs')
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user