List of shortcut features to provide:

• bg-gradient-(direction)-(from)-(via)-(to)
• cards
  • with a solid color: cards-bg-(base) <- do we need those or should they just be class="card bg-primary-500"?
  • gradient background: cards-bg-(direction)
• button
• chips
• text
• rounded

Convenience Shortcuts

• attributify but inside class="...". Example text-[red,2xl] font-[bold,mono] turns into text-red text-2xl font-bold font-mono
• https://unocss.dev/play/?html=DwEwlgbgBAFgtAMwK4BsVQC4FMAeG4DGWAdtgE5QIq5QDOW1B%2BxA9sVlAIZoBcGZnYrTAYwbOABYADFIB8AKChRQkKAFtOCpUpXQCKTrVoBeAETY8cANpksIADQBWHCgC6prdqUBVVgGEAZQDFbWAAenAITx1IqBYABwBmKUxcfBQAc0oAd2SUtQBGaO0AFRgOMCEMQQw44jgQLA1iECgAQQwWNTACKECAqBIMyqwAOhCdCMhPcMiFWen5XS4AI1oWFCRsKBWWDE61OEcoMjAMmHwU6gRL1MsiUiwKBOScvM9xRubWgHaoSto1VIUD%2ByDQAE8oAQkICumAAF6cFbUJZTKJAA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcEWSIUB1PGkoBfOFigQQcAORcVEunVNIkGAB6RY6bAEMuAG3iYc%2BIiTApAAUyKhQXvQAXHAA2lSosaYSXHQwxgC0EZ4YpuSIcFKe0DGmtGimcLoAulTVsnQAFtAwKTB0MfGoicmp6SAZTS1teWYwjjAZnqRw4w6T0G64pBhwzQBuGFBRc5Pjbp6m9QlxJ6gA9AB6wQA6AO4A1ACUGTexwQB0AFRPN9UAJOd8sFYgB9fISNzjUjQQRwNLsZYAURyIAwuBg1SecAAvAA%2BRBnbpSXBpOBuKBQNz8XHwth4UgojBojEfOhgTzAGDBPKmJ4AbiJqBy8FoMC4UFwBE8bmstNMpkF3WV5Mp1I%2BWGgSLcEkawWC62x%2BLgYolUplcoeOLgAAN-ghIdDYboMvb1h96SBgk99DaBULCtIIDkPsUQmVGGbpbKOqNTZLo9Z-SruvHcCbIwmLXQlSrdCdaqhjsJ5IwOqdlepGMoIN7ZCXRMxWOxuLwBHWTlWYJJpKEiXRITkYgBGD4AJnrxLQuFKjVYYA653O9BAbMa51syt0T0nXa0uDQ3rqSG3SCAA&css=Q&options=N4XyA

TODOs:

• add discord link
• add documentation link
• link to code of conduct
• link to contribution guide
• "PRs are welcome. Before creating one make sure to read the contribution guide, then find an issue you want to work on and come discuss it with us on discord."

Maybe add activity stats:

• https://repobeats.axiom.co/
• https://github.com//InhiblabCore/vue-hooks-plus

Other examples:

• https://github.com/onu-ui/onu-ui

Things to mention

• branch naming convention
• discussing contributions on discord
• use pnpm not npm

Inspiration:

• https://primevue.org/tieredmenu

Chips should be a style but maybe should also be a radio button to support proper keyboard controls?

Features

• one colour
• gradient
• glass

Examples

• https://mantine.dev/core/chip/
• https://tailwindcomponents.com/component/chips
• https://tailwind-elements.com/docs/standard/components/chips/
• https://unaui.com/elements/badge

Resources:

• https://svelte.dev/repl/a3f724e24df54b9695402576ffd68fe3?version=3.23.2
• Filter nested array of objects: https://stackoverflow.com/questions/72145230/how-to-filter-array-of-nested-objects-with-unknown-depth-based-on-given-search-t

Examples:

• https://github.com/riophae/vue-treeselect
• https://vue-multiselect.js.org/

Sections

• Environment / Browser
• Description
• Reproduction
• Type (bug / enhancement / documentation / ...)

Feature Request

• description
• examples
• type (action, enhancement, component, etc.)

Bug

• description
• reproduction steps
• annoyance level

Resources

• https://www.youtube.com/watch?v=qQE1BUkf2-s
• https://www.youtube.com/watch?v=cCO0OkDUGCs
• https://github.com/CodingGarden/listd/tree/main/.github/ISSUE_TEMPLATE
• https://github.com/unocss/unocss/tree/main/.github/ISSUE_TEMPLATE

Reference: https://github.com/unocss/unocss/blob/main/packages/preset-uno/src/index.ts

Idea:

• Have a headless and styled option for each component
• put functionality of components into actions
• provide a Svelte component that is already styled
• additionally provide templates for how to create the component using the actions
• in the documentation have different templates already created (professional, playful, etc)

Actions

• With events: https://svelte.dev/examples/actions-pannable

• https://captaincodeman.github.io/svelte-headlessui/dialog/
• https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

Resources

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Features

• with image
• initials
• automatically shorten text that is too long
• badges
• numbers on badges (for notifications)
• icons for badges
• hover on badge notification (be able to set a message for example)
• badge position
• writing animation / loading animation (three dots spinner)
• groups

Examples:

• https://vuesax.com/docs/components/Avatar.html#badge
• https://stackoverflow.com/questions/40319228/zoom-on-image-inside-div-without-div-moving
• https://stackoverflow.com/questions/62782440/how-to-scale-images-with-transform-scale-inside-box-using-css
• https://github.com/lusaxweb/vuesax-next/blob/master/packages/vuesax/src/components/vsAvatar/Base/style.sass

Resources:

• https://tailwindcomponents.com/component/tailwind-cards-stack
• https://daisyui.com/components/stack/
• https://codepen.io/nzbin/pen/GGrXbp
• https://cssloaders.github.io/

TODOs

• modal (dialog)
• chips
• cards
• landing page
• use transition API across documentation
  • https://www.youtube.com/watch?v=MJHO6FSioPI
  • PR 9605 in sveltekit repo
• edit on github link
• version and link to changelog and contribution instructions in navbar
• last updated date time (https://docs.github.com/en/rest/commits/commits?apiVersion=2022-11-28#list-commits-on-a-repository)

Getting Started

• installation
• setup: presets, tailwind reset, import uno.css file (serves as a file that the css will be loaded into), etc.
• template
• transferring from Tailwind
• VSCode set up (install UnoCSS extension, disable other extensions, etc)

Shortcut Search

• search bar
• filter buttons (button, gradient, spinners, background, light / dark, etc.)
• explanation window

Buttons

• regular (one color)
• gradients (2 & 3) (mention opacity values and optional shades and so on)
• glass
• group (regular & outline)

Spinners

• mention how they can be customized

Inspiration

• https://github.com/nuxt-themes/docus
• https://unocss.dev/
• https://vitepress.dev/

Code Blocks

• see if we can add highlight lines to code blocks
• add shiki-twoslash (https://github.com/shikijs/twoslash)
• #74

Resources

• https://github.com/vuejs/vitepress/tree/481a6e9cbd84068cc976db1e9adbc466b6e81ad9/src/client/theme-default/components
• Components to help create our own:
  • https://www.shadcn-svelte.com/docs/components/accordion

Themes

• Ato - default
• Water
• Earth
• Fire
• Air

There's a bug that we can't change the opacity of theme colors. Possible solution might be #16 since this then should definitely use the Tailwind and Windi shortcuts once we simply extend that theme, but I was also thinking that the current configuration should already do that.

Used in btn-glass for example

Release notes should also be integrated into the documentation website

For automatic release notes
https://github.com/changesets/changesets

Dependabot:

• https://github.com/dependabot

Information:

• https://www.youtube.com/watch?v=Ob9llA_QhQY
• https://www.youtube.com/watch?v=vO80X5zM8_Y
• https://davistobias.com/articles/adding-changeset/
• https://blog.logrocket.com/version-management-changesets/

Install form preset and create documentation site with examples.

• https://github.com/Julien-R44/unocss-preset-forms
• https://tailwindcss.com/docs/caret-color

TODOs

• spinners
• descriptions

Examples:

• https://vuesax.com/docs/components/Loading.html#default
• https://github.com/lusaxweb/vuesax-next/tree/master/packages/vuesax/src/functions/vsLoading/Base
• https://cssloaders.github.io/
• https://uiverse.io/loaders
• https://codepen.io/prathameshkoshti/pen/OJJRaRo
• https://codepen.io/aaroniker/pen/MWgRBdV
• https://freefrontend.com/css-loaders/
• https://codepen.io/avstorm/pen/xJbdbw
• https://codepen.io/prvnbist/pen/qydBgM
• https://codepen.io/havardob/pen/VjjJey/
• https://codepen.io/nikhil8krishnan/pen/dMEzGx/
• https://codepen.io/alexanderkwright/pen/xbKqPQ
• https://codepen.io/izmaelmag/pen/jVqzbJ

Maybe add spinners as rules so they can simply be added with a css variable: s-loader-circle

It's because we're using @apply in a rule, which won't get picked up by Uno.

Probably have to re-write it as pure CSS.

Resources

• https://tailwind-to-css.vercel.app/

Playwright or vitest?

Resources:

• https://www.youtube.com/watch?v=FDEf3iWEgFI&list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx&t=7s
• https://www.learnwithjason.dev/fast-unit-testing-with-vitest

To get started quickly

Have a themer component that people can implement on their website. They can bind to a string variable with all the css variables. The string could for example be stored in a database for each user or tenant, so that each tenant has their own look and feel.

TODOs

• select theme colors (primary, secondary, tertiary, success, error, warning, surface, neutral)
  • have main colors shown right next to each other (https://www.creatopy.com/blog/color-combinations-in-display-ads/) as well as gradients between the primary secondary and tertiary colors (maybe in a circle) and then the entire row of shades below
  • gradient div should be animated (https://codepen.io/P1N2O/pen/pyBNzX)
  • mesh gradient as background
  • add aria attributes to sidebar collapse groups
  • add aria current page to current page in sidebar
• select text colors on theme colors
  • automatically create on-colors for all shades
  • show contrast grid (https://codepen.io/MrGrigri/pen/yqbyzK)
• show all shades for each theme color
• show components as examples
• copy button
• be able to open the designer on any page (maybe through a modal?)
• be able to change base and container roundedness
• button sizes:
  • radius
  • font size
  • padding in x and y
  • border size?
• be able to change fonts
• same color picker tool across all browsers (check which libraries there are for this... needs to be accessible)
• mobile friendly
• be able to store and delete themes into local storage
• save user's preferences of theme and dark/light in local storage
• randomize colour feature
  • a lock button for colours that the user likes
• have a list of best background colours for each shade (if used on text), along with the contrast ratio
• shuffle button in navbar dropdown?
• maybe make button tokens with descriptive names for theme generator since some of these button names are super long and difficult to remember
  • something like btn-main, btn-accent, btn-submit btn-unique btn-cancel (maybe we need like 5-8?)
  • surface-content/main, surface-nav, surface-card, surface-overlay, ...
  • provide the code for it that can be copied into the unocss.config.ts shortcuts

Create designer page:

• Radix theme playground: https://www.radix-ui.com/themes/playground
• color swatch: https://mantine.dev/core/color-swatch/
• https://tailwind.ink/context
• https://uicolors.app/create
• https://www.tints.dev/blue/3B82F6
• https://designer.primeng.org/#/
• https://hypercolor.dev/
• https://daisyui.com/theme-generator/
• https://www.skeleton.dev/docs/generator
• https://themes.ionevolve.com/
• animated gradient shadows: https://codepen.io/ahmad_hania/pen/rRPKbZ

Readability / Contrast

• https://github.com/bgrins/TinyColor
• https://codepen.io/MrGrigri/pen/yqbyzK
• https://github.com/Qix-/color
• https://github.com/gka/chroma.js/

Resources

• Coloris: https://www.npmjs.com/package/@melloware/coloris?activeTab=dependencies
• Pickr: https://www.npmjs.com/package/@simonwep/pickr
• Palettes: https://hookagency.com/blog/website-color-schemes-2020/
• Shades: https://github.com/javisperez/tailwindcolorshades
• https://github.blog/2023-05-11-unlocking-inclusive-design-how-primers-color-system-is-making-github-com-more-inclusive/
• https://www.creatopy.com/blog/color-combinations-in-display-ads/
• https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color
• https://www.rainbowkit.com/

Add examples:

• only icons
• active states (button becomes a bit lighter when clicked and stays that way until a different button is clicked)

I need this for the Shortcut search anyway, so it could be turned into a component.

Input data should be arbitrary. The fields that should be searchable can be passed through an array.

Resources:

• https://github.com/unocss/unocss/blob/main/interactive/components/details/Rule.vue
• https://github.com/unocss/unocss/blob/main/interactive/composables/state.ts
• https://github.com/unocss/unocss/blob/main/packages/shared-docs/src/search.ts
• https://github.com/unocss/unocss/blob/main/packages/shared-docs/src/utils.ts

• Relates to #35.
• Relates to #74
• Relates to #76

TODOs

• Navbar
• Nav sidebar
• table of contents for page (#67)
• dark/light toggle (https://codepen.io/gvissing/pen/OJvxoJq)
• themes
• make sidebar groups hideable
• bottom navigation (last and next page)
• edit on github link
• last updated date time (https://docs.github.com/en/rest/commits/commits?apiVersion=2022-11-28#list-commits-on-a-repository)
• import BROWSER instead of browser in ToC: https://kit.svelte.dev/docs/packaging
• clean up the svelte ToC component
• ToC should have similar structure as in vitepress
• fix issues with children not being highlighted in ToC
• properly place ToC in documentation
• update documentation pages to be able to have both a headless and styled page
• make sure there is no horizontal scroll bar
• mobile friendly:
  • sidebar and ToC should be hidden on smaller screens but still be available through buttons

Examples

• https://vitepress.dev/guide/what-is-vitepress#use-cases

Hamburger menu animations

• https://codepen.io/Zaku/pen/ejLNJL
• https://codepen.io/ainalem/pen/LJYRxz
• https://codepen.io/designcouch/pen/ExvwPY

Resources

• https://www.youtube.com/results?search_query=typescript+define+return+type+of+function
• https://stackoverflow.com/questions/29404093/css-outline-left-and-right
• https://svelte.dev/repl/dac9457f4e2a4ad082347ccf32d860b5?version=3.29.4
• https://github.com/vuejs/vitepress/tree/481a6e9cbd84068cc976db1e9adbc466b6e81ad9/src/client/theme-default/components
• https://github.com/vuejs/vitepress/blob/481a6e9cbd84068cc976db1e9adbc466b6e81ad9/docs/.vitepress/config.ts
• https://github.com/CaptainCodeman/svelte-headlessui/blob/master/packages/lib/src/lib/dialog.ts

Inspiration:

• Github blog: https://github.blog/changelog/

I want to get rid of prettier and simply have everything defined in ESLint.

TODOs

• Setup eslint for Svelte plugin mentioned in Resources
• set up airbnb eslint style guide
• changes should be made when file is saved (for contributors as well, so if a VSCode extension is needed it should be mentioned in the contributors guide)
• also set up tsconfig (check this video https://www.youtube.com/watch?v=cCO0OkDUGCs)
• setup .vscode folder with recommendation for extensions that should be installed
  • UnoCSS
  • Tailwind CSS
  • WindiCSS
• set up lint-staged

Resources:

• https://github.com/sveltejs/eslint-plugin-svelte
• https://www.youtube.com/watch?v=cCO0OkDUGCs
• https://github.com/CodingGarden/listd
• use airbnb/base and airbnb-typescript/base: https://github.com/airbnb/javascript
• https://github.com/okonet/lint-staged
• Coding Garden lint-staged: https://www.youtube.com/watch?v=Rf9Z_arma4o
• https://stackoverflow.com/questions/62277286/eslint-in-vscode-not-fixing-on-save
• https://typescript-eslint.io/rules/naming-convention/

https://captaincodeman.github.io/svelte-headlessui/disclosure/

TODOs

• horizontal
• vertical (?)

Examples:

• https://www.youtube.com/watch?v=WJERnXiFFug

A 4th color... could be named accent or neutral. People can use it if they want to have more than 3 available colors.

Another idea, have the 3 main color, but allow users to add extra colors with the click of a button. They could then be passed to the preset as an option.

Edit: Add an info color. 3 main colors plus info, success, warning, error should be enough.

Things to mention

• Required branch naming
• Contribution guide
• Changes made
• Does the PR address any issues

TODOs

• particle effect for each theme
  • ato
  • water - https://codepen.io/mweslander/pen/JreNPj
  • earth
  • fire
  • air - https://codepen.io/ksenia-k/pen/yLvVzzd
• Code typing window with result showing: https://sli.dev/

Sections

• Meet the Team
• Sponsors
• Features section
• components showcase (example: https://www.radix-svelte.com/)

Particles should transition smoothly from one to the other when theme is changed and change colors accordingly.

Inspiration

• slidev type animation:
  • https://github.com/slidevjs/docs/blob/7acc3394a2458462d04fe918c5d45c5414a749e6/.vitepress/theme/components/demo/Demo.vue#L4
  • https://sli.dev/
  • https://github.com/alexmacarthur/typeit
• https://threlte.xyz/examples/terrain
• https://threlte.xyz/
• https://threejs-journey.com/
• Cool particle effects and glowing gradients: https://inhiblabcore.github.io/docs/hooks/en/index.html
• Cool feature showcase on hover: https://directions-sheet.citymapper.com/
• Interactive 3D object: https://nuxt.com/
• Particle Wave: https://codepen.io/stufreen/pen/KOWKBw
• https://inhiblabcore.github.io/docs/hooks/
• https://codepen.io/kevinsturf/pen/ExLdPZ
• https://codepen.io/deathfang/pen/WxNVoq
• This one!!! https://codepen.io/mweslander/pen/JreNPj
• https://github.com/mrdoob/three.js/blob/dev/examples/webgl_points_waves.html
• https://gist.github.com/chibaye/153009d6195f9aea7ce3e50d99a8577e
• https://codepen.io/prisoner849/pen/rNJexaX
• https://codepen.io/zadvorsky/pen/qOYqGv

Color Themes:

• https://dribbble.com/shots/15469417-Dark-Landing-UI
• https://dribbble.com/shots/15543862-Finance-Dashboard-Dark-theme
• https://dribbble.com/shots/17863149-Dashboard-UI
• https://dribbble.com/shots/14842477-Exploration-Smart-Home-Dark-Mode
• https://dribbble.com/shots/14802495--Hoxye-Dark

Resources:

• atom: https://www.aaron-gray.com/three-js-tutorial-building-an-atom/
• waves: https://www.youtube.com/watch?v=wRmeFtRkF-8
• waves: https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_waves.html
• Shader tutorial: https://www.youtube.com/watch?v=f4s1h2YETNY
• tornado: https://sharpcoderblog.com/blog/unity-3d-tornado-physics
• https://www.youtube.com/watch?v=xvV90kdBCPQ
• https://www.youtube.com/watch?v=Q7AOvWpIVHU
• https://www.youtube.com/watch?v=0bCbLY7s3zQ
• https://www.youtube.com/watch?v=ID5JzxQOjnE
• https://www.youtube.com/watch?v=Qyh9RPxeKcA
• https://www.jotform.com/blog/particles-animation-codepen-97659/
  • https://codepen.io/natewiley/pen/QWGdZJ
  • https://codepen.io/kenjiSpecial/pen/wavooR
  • https://codepen.io/Gthibaud/pen/pyeNKj
  • https://codepen.io/natewiley/pen/GgONKy
  • https://codepen.io/deanwagman/pen/EjLBdQ
  • https://codepen.io/sschepis/pen/ExvexL
  • https://codepen.io/prayushS/pen/nzzYmo

Inverse tokens use different color for light and dark mode. You can create some dynamic shortcuts for these. For example:

'text-inverse-primary(-<num>)-secondary(-<num>)': 'text-primary-500 dark:text-secondary-500'

TODOs

• inverse tokens
• theme classes that set both the background and the text color
  • Example: primary-500 = bg-primary-500 text-on-primary-500 (https://youtu.be/RhScu3uqGd0?t=1272)
• text on color should be used in most cases to make sure accessibility is always the best it can be automatically
• update gradient background tokens to start with bg-gradient-... (consistent naming across all tokens)
• think about what should be supported for each token. Do some tokens need opacity for example? It makes it a bit complicated to set the text colors.

Discord discussion on how to publish packages with version 2.0: https://discord.com/channels/457912077277855764/1085932841252163654/1085932841252163654

Things to do

• add keywords
• add github link
• homepage
• link issues

kit/issues/1485

Features

• Be able to change icons
• 3 - 10 stars
• nice animation

Examples

• https://onu.zyob.top/components/rate.html
• https://svelte.dev/repl/672b083a2ce346a6aae6f07d9e3787f4?version=3.57.0

A custom menu that opens on right click in a specified area.

Example:

• https://github.com/stordahl/svelte-right-click

Should be an SVG icon. Just for the letter A or something more general.

Inspiration:

• https://inhiblabcore.github.io/docs/hooks/

So: -on-primary-100 -on-primary-200, etc.

Forgot to update some buttons when I added the opacity option

http://localhost:5173/documentation/buttons

Create CSS shortcuts for it:

• gradient
• ghost / glass
• dashed & dotted
• filled
• disabled
• gradient ring (https://play.tailwindcss.com/9LSkQgkY7p)
• icon buttons
• create descriptions
• button groups (https://stackoverflow.com/questions/67119992/how-to-access-all-the-direct-children-of-a-div-in-tailwindcss)
• add opacity to buttons (btn-r-primary-500/50-secondary-800/50)
  • Use non-capturing groups with ?: like so: ^btn-(primary|secondary)(?:-(100|200|300)(?:\/([1-9][0-9]?|0|100))?)?$
  • or this one is better: btn-(primary|secondary)(?:-(100|200|300))?(?:\/(0|100|[1-9][0-9]?))? because it also allows emitting the shade value, so we can write this as well: btn-primary/25 and shade 500 will be the default
• For the gradient boarders add an option to specify the opacity of the center color. Also update the square shape shift spinner to also have an option for this opacity value so it gives more control over how the spinner looks

Examples

• https://onu.zyob.top/components/button.html
• Gradient button: https://tailwindcss.com/docs/gradient-color-stops

Button Groups

• https://flowbite.com/docs/components/button-group/
• https://tailwind-elements.com/docs/standard/components/button-group/
• https://daisyui.com/components/button-group/

Will be part of the library that others can use. Provides extension of colors for primary, secondary, success, etc... And the tokens that provide easy switching between light and dark mode, rounded corners, fonts, etc.

Markdown is here: https://www.contributor-covenant.org/

Similar to UnoCSS Interactive Docs.

TODOs

• buttons
• chips
• cards
• text
• background
• rounded

Features:

• set different positions (top-left | top-center | top-right | bottom-left | bottom-center | bottom-right)
• close button
• different stylings
• have a way to build custom toasts that add to the same store (different stores for different positions?)

Resources

• https://github.com/jackbsteinberg/std-toast

Examples:

• https://svelte.dev/repl/2254c3b9b9ba4eeda05d81d2816f6276?version=3.32.2
• https://primevue.org/toast
• https://vue.chakra-ui.com/toast
• https://vuesax.com/docs/components/Notification.html#sticky
• With a timer: https://grail-ui.vercel.app/svelte/toast
• stores: https://www.youtube.com/watch?v=jo9osUzHnHY

Examples

• https://anu-vue.netlify.app/guide/components/drawer.html

Example:

• https://github.com/orgs/vidstack/projects/1/views/1?groupedBy%5BcolumnId%5D=Milestone

Features:

• glassy look
• solid look
• background gradients
• gradient border
• moving gradient on hover
• tilting effect (https://www.youtube.com/watch?v=eOJTj_mWJds)
• color borders on hover
• use an enhancement action for tilting effect so we don't need to create a new component for cards (people can just import the action and add it to their card if they want to use it) (https://www.youtube.com/watch?v=Z-3tPXf9a7M)

Tilt effect:

• https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1
• https://atroposjs.com/

Examples:

• https://buildui.com/recipes/gradient-border
• Nuxt hover gradient shifts: https://nuxt.com/
• https://www.youtube.com/watch?v=CqndlPZkjqY
• https://codepen.io/Hyperplexed/pen/qBMYVoq?ref=Hyperplexed
• https://codepen.io/Hyperplexed/pen/poQmrEq?ref=Hyperplexed
• https://shuffle.dev/editor?project=15e6757bd12242c4c793166b55b799a3820de9d9&editor=tailwind
• https://freefrontend.com/css-cards/
• https://codepen.io/georgehastings/pen/xgwxgo
• https://codepen.io/AbubakerSaeed/pen/rNNdvqz

Channels:

• showcase
• welcome page
• support
• contributers
• UnoCSS
• maybe different language channels?

Bots:

• automatically create thread in showcase channel

Resources

• sapphire bot: https://sapph.xyz/