-
-
Notifications
You must be signed in to change notification settings - Fork 322
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NEXT Implement all Cookbook sections (#2987)
- Loading branch information
1 parent
43a1414
commit 048fea3
Showing
43 changed files
with
1,536 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
153 changes: 153 additions & 0 deletions
153
sites/next.skeleton.dev/src/content/docs/resources/cookbook/chat.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| --- | ||
| layout: '@layouts/LayoutDoc.astro' | ||
| title: Chat | ||
| description: Create a custom chat feed or AI prompt interface. | ||
| showDocsUrl: true | ||
| pubDate: 2024-11-19 | ||
| tags: ['presentation', 'machine learning'] | ||
| --- | ||
|
|
||
| export const components = componentSet; | ||
|
|
||
| import Example from '@examples/resources/cookbook/chat/Example.svelte'; | ||
| import ExampleRaw from '@examples/resources/cookbook/chat/Example.svelte?raw'; | ||
| import ExampleColumns from '@examples/resources/cookbook/chat/ExampleColumns.astro'; | ||
| import ExampleColumnsRaw from '@examples/resources/cookbook/chat/ExampleColumns.astro?raw'; | ||
| import ExampleRows from '@examples/resources/cookbook/chat/ExampleRows.astro'; | ||
| import ExampleRowsRaw from '@examples/resources/cookbook/chat/ExampleRows.astro?raw'; | ||
| import ExampleFeed from '@examples/resources/cookbook/chat/ExampleFeed.astro'; | ||
| import ExampleFeedRaw from '@examples/resources/cookbook/chat/ExampleFeed.astro?raw'; | ||
| import ExampleBubbles from '@examples/resources/cookbook/chat/ExampleBubbles.astro'; | ||
| import ExampleBubblesRaw from '@examples/resources/cookbook/chat/ExampleBubbles.astro?raw'; | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <Example client:visible /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <div class="card preset-outlined-warning-500 p-8 space-y-8 mb-4"> | ||
| <p>The example below has been constructed using <strong>Svelte</strong>. Other frameworks will be available in the future.</p> | ||
| </div> | ||
| <Code code={ExampleRaw} lang="svelte" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Layout Columns | ||
|
|
||
| Use Tailwind's [grid column](https://tailwindcss.com/docs/grid-template-columns) utility classes to define horizontal columns for your layout. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleColumns /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleColumnsRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Layout Rows | ||
|
|
||
| Use Tailwind's [grid row](https://tailwindcss.com/docs/grid-template-rows) utility classes to define vertical layout rows for your layout. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleRows /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleRowsRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Message Feed | ||
|
|
||
| The feed simply loops through the available feed data. Each `<pre>` tag represents a single *bubble* element. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleFeed /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleFeedRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Message Bubbles | ||
|
|
||
| Provide styling to each bubble element. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleBubbles /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleBubblesRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Prompt | ||
|
|
||
| Use Skeleton's [input group](/docs/tailwind/forms#groups) styles to create a custom text prompt. | ||
|
|
||
| --- | ||
|
|
||
| ## Scroll to Bottom | ||
|
|
||
| Bind your scrollable feed panel element reference ([Svelte](https://svelte.dev/docs/svelte/bind) | [React](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)), then use [scrollTo](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) to scroll the panel to the bottom on demand. Scroll behavior can be set via `behavior: 'smooth'`. | ||
|
|
||
| ```ts | ||
| function scrollChatBottom(behavior?: 'auto' | 'instant' | 'smooth' = 'smooth') { | ||
| // `elemChat` represents our scrollable panel element | ||
| elemChat.scrollTo({ top: elemChat.scrollHeight, behavior }); | ||
| } | ||
| ``` | ||
|
|
||
| ## Add a Message | ||
|
|
||
| Below we'll cover how to append the message feed with a new message from the host user. Per our above examples, we'll use the same `messageFeed` data structure. | ||
|
|
||
| ```ts | ||
| let messageFeed = [ /* ...*/ ]; | ||
| ``` | ||
|
|
||
| Then bind to the textarea for your prompt in order to capture any message typed by the user. | ||
|
|
||
| ```ts | ||
| // Svelte Element Reference | ||
| let elemPrompt: HTMLElement; | ||
| // React Element Reference | ||
| let elemPrompt: HTMLElement = useRef(); | ||
| ``` | ||
| ```svelte | ||
| <!-- Svelte Binding ---> | ||
| <textarea bind:value={elemPrompt} ... /> | ||
| <!-- React Binding ---> | ||
| <textarea ref={elemPrompt} ... /> | ||
| ``` | ||
|
|
||
| Here's an example of how we might append a new message to the `messageFeed` array. | ||
|
|
||
| ```ts | ||
| function addMessage(): void { | ||
| const newMessage = { | ||
| id: messageFeed.length, | ||
| host: true, | ||
| avatar: 48, | ||
| name: 'Jane', | ||
| timestamp: new date(), | ||
| message: elemPrompt.value, | ||
| color: 'preset-tonal-primary' | ||
| }; | ||
| // Append the new message to the message feed | ||
| messageFeed = [...messageFeed, newMessage]; | ||
| // Clear the textarea message | ||
| elemPrompt.value = ''; | ||
| // Smoothly scroll to the bottom of the feed | ||
| setTimeout(() => { scrollChatBottom('smooth'); }, 0); | ||
| } | ||
| ``` | ||
|
|
||
| This can be triggered when the prompt's SEND button is clicked. | ||
|
|
||
| ```svelte | ||
| <button ... onclick={addMessage}>Send</button> | ||
| ``` |
42 changes: 42 additions & 0 deletions
42
sites/next.skeleton.dev/src/content/docs/resources/cookbook/clipboard.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| --- | ||
| layout: '@layouts/LayoutDoc.astro' | ||
| title: Clipboard API | ||
| description: Learn how to integrate the native browser clipboard API. | ||
| showDocsUrl: true | ||
| pubDate: 2024-11-19 | ||
| tags: ['native', 'programmatic'] | ||
| --- | ||
|
|
||
| export const components = componentSet; | ||
|
|
||
| import Example from '@examples/resources/cookbook/clipboard/Example.astro'; | ||
| import ExampleRaw from '@examples/resources/cookbook/clipboard/Example.astro?raw'; | ||
| import ExampleInput from '@examples/resources/cookbook/clipboard/ExampleInput.astro'; | ||
| import ExampleInputRaw from '@examples/resources/cookbook/clipboard/ExampleInput.astro?raw'; | ||
|
|
||
| ## How It Works | ||
|
|
||
| Refer to the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) documentation for details. | ||
|
|
||
| ## Programmatic | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <Example /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Using Inputs | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleInput /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleInputRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
39 changes: 39 additions & 0 deletions
39
sites/next.skeleton.dev/src/content/docs/resources/cookbook/dialog.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| --- | ||
| layout: '@layouts/LayoutDoc.astro' | ||
| title: Dialog Element | ||
| description: Implement a simple popup dialog using the native HTML element. | ||
| showDocsUrl: true | ||
| pubDate: 2024-11-19 | ||
| tags: ['native', 'popover'] | ||
| --- | ||
|
|
||
| export const components = componentSet; | ||
|
|
||
| import Example from '@examples/resources/cookbook/dialog/Example.astro'; | ||
| import ExampleRaw from '@examples/resources/cookbook/dialog/Example.astro?raw'; | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <Example /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## How It Works | ||
|
|
||
| This is enabled by the native [Dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element, which includes a dedicated Javascript API for toggling the display. | ||
|
|
||
| ## Animations | ||
|
|
||
| Animating `display: none` with CSS alone has limited browser support. However, per the video below, we can use progressive enchancement our dialog to ensure animations degrade gracefully for unsupported browsers. | ||
|
|
||
| <iframe class="w-full aspect-video" src="https://www.youtube.com/embed/vmDEHAzj2XE?si=GTYFY9dk013lL0Y3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | ||
|
|
||
| ## Alternatives | ||
|
|
||
| If you need finer grain control, consider Skeleton's integration guides for [Floating UI](https://floating-ui.com/). | ||
|
|
||
| - [React Popovers](http://localhost:4321/docs/integrations/popover/react) - powered by Floating UI React. | ||
| - [Svelte Popovers](http://localhost:4321/docs/integrations/popover/svelte) - powered by Floating UI Svelte. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
sites/next.skeleton.dev/src/content/docs/resources/cookbook/scroll-containers.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| layout: '@layouts/LayoutDoc.astro' | ||
| title: Scroll Containers | ||
| description: Create scrolling containers using the scroll snap features from Tailwind. | ||
| showDocsUrl: true | ||
| pubDate: 2024-11-19 | ||
| tags: ['presentation', 'images'] | ||
| --- | ||
|
|
||
| export const components = componentSet; | ||
|
|
||
| import Example from '@examples/resources/cookbook/scroll-containers/Example.astro'; | ||
| import ExampleRaw from '@examples/resources/cookbook/scroll-containers/Example.astro?raw'; | ||
| import ExampleCarousel from '@examples/resources/cookbook/scroll-containers/ExampleCarousel.astro'; | ||
| import ExampleCarouselRaw from '@examples/resources/cookbook/scroll-containers/ExampleCarousel.astro?raw'; | ||
| import ExampleMultiColumn from '@examples/resources/cookbook/scroll-containers/ExampleMultiColumn.astro'; | ||
| import ExampleMultiColumnRaw from '@examples/resources/cookbook/scroll-containers/ExampleMultiColumn.astro?raw'; | ||
|
|
||
| ## Scroll Snap | ||
|
|
||
| Implements Tailwind's [Scroll Snap Aligment](https://tailwindcss.com/docs/scroll-snap-align) utility classes. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <Example /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Carousels | ||
|
|
||
| Using Scroll Containers, we can create a fully functional carousel, complete with thumbnail selection. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleCarousel /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleCarouselRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| ## Multi-Column | ||
|
|
||
| Using Scroll Containers, we can scroll sets of items. | ||
|
|
||
| <Preview client:visible> | ||
| <Fragment slot="preview"> | ||
| <ExampleMultiColumn /> | ||
| </Fragment> | ||
| <Fragment slot="code"> | ||
| <Code code={ExampleMultiColumnRaw} lang="astro" /> | ||
| </Fragment> | ||
| </Preview> | ||
|
|
||
| > Images courtesy of [The Movie Database](https://www.themoviedb.org/) | ||
| ## API Reference | ||
|
|
||
| Learn more about Tailwind's utility classes for scroll behavior and scroll snap. | ||
|
|
||
| | Feature | Description | | ||
| | -- | -- | | ||
| | [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior) | Controls the scroll behavior of an element. | | ||
| | [scroll-margin](https://tailwindcss.com/docs/scroll-margin) | Controls the scroll offset around items in a snap container. | | ||
| | [scroll-padding](https://tailwindcss.com/docs/scroll-padding) | Controls an element's scroll offset within a snap container. | | ||
| | [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align) | Controls the scroll snap alignment of an element. | | ||
| | [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop) | Controls whether you can skip past possible snap positions. | | ||
| | [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type) | Controls how strictly snap points are enforced in a snap container. | |
Oops, something went wrong.