Svelte 4 + Docs Update

[bennymi]

Issues

• Closes #22
• Closes #105
• Closes #116
• Closes #61
• Closes #8

Changes

• upgrade to svelte 4

TODOs

• [x] Update header tags to new component -> clicking should copy the url to that section of the docs
• [x] "Edit page" link
• [x] update Air theme (primary and background colour are too similar)
• [x] "Source code" link
• [ ] changesets
• [x] remove old un-used dependencies
• [x] update why page
• [x] "Dependencies" tags
• [x] construction banner on installation page
• [x] update README (text + image)
• [x] image for each component if it exists else a standard logo image
• [x] update landing page
• [x] make tabs mobile friendly
• [x] update designer to not use old toggle switch component and remove it from the index.ts file
• [x] update navbar theme menu dropdown with Melt UI one and add the theme colour palette to each item
• [x] icon button spacing (remove margin due to two spans -> instead of sr-only use aria- attribute to label it)
• [ ] docs page for headless components should have a table at the bottom listing the relevant tokens that should be used and for what (maybe...)
• [x] update API tables look
  • [ ] for style props be able to click on classes and see the CSS output
  • [x] transition prop filter
  • [x] be able to re-name the automatically generated component names
  • [x] be able to change the order of how the components are listed
  • [x] for special Types be able to click on it and show the corresponding types.ts file
  • sometimes we have something like ToCScrollFn | null in which case maybe we can split the string and check each type individually
  • [x] be able to document events dispatched by components (example in dialog -> clicking on overlay)
• [x] project structure
• [x] previous and next buttons should have more contrast on the text so it's readable
• [x] update mdsvex files and add mdsvex layout
• [x] remove sveld and global mdsvex files preprocessor
• [x] update code block component look
  • https://rehype-pretty-code.netlify.app/
• [x] +error.svelte
• [x] move preview components into separate folders as svelte files (not in markdown) and load those as different tabs inside +page.ts
• [x] make palette opener mobile friendly and use menu instead for it so it hovers over everything else
• [ ] search (Ctrl + K)
• [x] Update docs
  • [x] avatar
  • [x] accordion
  • [x] background
  • [x] border
  • [x] buttons
  • [x] combobox
  • [x] dialog
  • [x] forms
  • [x] menu (2 options: 1 with items in a list and 1 with a separate item component)
  • [ ] popover (optional)
  • [x] radio group
  • [x] spinners
  • [x] SVGs
  • [x] switch
  • [ ] tabs (maybe add slider at bottom)
  • [x] table of contents
  • [x] text
  • [ ] tooltip (optional)

Resources:

• Compiler: https://svelte.dev/docs/svelte-compiler#parse
• pretty code: https://github.com/atomiks/rehype-pretty-code/blob/master/src/index.ts
• mdsvex: https://github.com/pngwn/MDsveX/blob/26591be63e088f57c78108553813ef18cc8ca5b1/packages/mdsvex/src/transformers/index.ts#L54
• https://github.com/search?q=repo%3Apngwn%2FMDsveX+svelte%2Fcompiler&type=code
• rehype in js: https://unifiedjs.com/explore/package/rehype-parse/#use
• Svelte docs search: https://github.com/sveltejs/kit/blob/a6fe5fcb1c7258281b4bf53b94543272e6e6c6d8/sites/kit.svelte.dev/src/routes/content.json/content.server.js
• perhaps for search: https://github.com/syntax-tree/mdast-util-from-markdown

Inspiration:

• Radix look: https://www.radix-ui.com/docs/primitives/components/checkbox
• Threlte: https://threlte.xyz/docs/reference/extras/portal

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ato-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2023 6:56pm