svelte-ux icon indicating copy to clipboard operation
svelte-ux copied to clipboard

Improve docs

Open techniq opened this issue 1 year ago • 0 comments

  • [x] Move ToC to right side (and sticky) instead of top
    • See content quicker, especially on long pages
    • Always see ToC to allow jumping easier
  • [x] Show active toc item
  • [x] Handle links to headers (Examples, APIs). Add missing links
  • [x] Simplify building ToC (no svelte preprocessor)
  • [x] Simplify getting name and source/doc urls, and description (no svelte preprocessor)
    • Use page.js load?
  • [x] Handle Preview as svelte preprocessor instead of remark plugin
    • Enable usage on non-markdown pages (further goal)
    • Should fix passing props to Preview (class, etc)
    • Should fix showing in some layout use cases (ex. Badge placement)
  • [ ] Parse docs/function signatures for actions and stores
    • https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#using-the-type-checker
    • https://github.com/buehler/node-typescript-parser#readme
    • https://stackoverflow.com/questions/39588436/how-to-parse-typescript-definition-to-json
    • https://medium.com/leopards-lab/parsing-d-ts-files-using-typescript-compiler-week-1-gsoc21-8f9e794b9c63
    • https://github.com/mattjennings/vite-plugin-sveld/blob/main/index.js
    • https://github.com/asakusuma/json-typescript-docs
    • tsdoc
      • https://microsoft.github.io/tsdoc/
      • https://github.com/microsoft/tsdoc/blob/main/api-demo/src/simpleDemo.ts
    • https://github.com/TyrealHu/acorn-typescript
    • typedoc
      • typedoc-json-parser
      • https://github.com/grail-ui/grail-ui/tree/master/apps/docs/src/lib/api-documenter
  • [x] Consider removing markdown
    • Pros
      • Type checking
      • Better prettier formatting
      • Better errors
      • Allow for quickfix (imports, etc) and highlighting unused imports
      • Allow blank lines in Preview examples
    • Cons
      • Headers (# Something, lists (`- Something), and code blocks (```js) would be less ergonomic
        • Adding components could get close (but would require imports and still less ergonomic)
      • Code examples (```js) not as ergonomic as <Code>
        • https://www.skeleton.dev/utilities/codeblocks
        • https://github.com/ScriptRaccoon/codeblocks/
        • https://rodneylab.com/sveltekit-shiki-syntax-highlighting/
      • Explicit paragraphs
  • [x] Add search / quick jump
    • https://vitejs.dev/guide/features.html#glob-import
  • [ ] Improve design
    • https://tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template
    • https://observablehq.com/plot/
    • https://kitdocs.vercel.app/docs/getting-started/introduction
    • https://www.radix-ui.com/
    • https://ui.shadcn.com/docs/components/accordion
    • https://atlassian.design/components
    • https://www.tremor.so/components
    • https://vaniersel.com/
    • https://lunarui.dev/
  • [ ] Update front page (considering listing all components with previews)
    • https://www.radix-svelte.com/
    • https://ui.mantine.dev/
    • https://nextui.org/
    • https://ant.design/components/overview
    • https://chakra-ui.com/docs/components
    • https://lunarui.dev/components
    • https://mantine.dev/
    • https://typehero.dev/
  • [ ] Add component to edit enabled Logger (localStorage.logger = 'MyComponent:INFO,OtherComponent')
  • [ ] Allow headers to be clickable links
    • If switching away from markdown, using <Header id="...">...</Header> would be easy
    • If not, doing it as a remark/etc plugin
  • [ ] For each component, add
    • [ ] Description
    • [ ] Features list
    • [ ] Related (actions, components)
  • [ ] Consider switching from PrismJS to Shiki to code highlighting
  • [ ] Add jsdoc comments to all props to improve sveld api docs
    • classes: /** @type {{root?: string, icon?: string, loading?: string}} */

techniq avatar Apr 30 '23 00:04 techniq