Bootstrap a Documentation Site - Master Issue

[vnphanquang]

Create a dedicated doc site for all documentation and examples, as docs through markdowns in github seems hard to follow

Sites to steal from:

• https://xstate.js.org
• https://daisyui.com/
• https://kit.svelte.dev/
• https://tailwindcss.com/
• https://tanstack.com/table/v8/
• https://docs.astro.build/
• https://turbo.build/repo/docs
• vue/vite eco:
  • https://vitest.dev/
  • https://vuejs.org/
  • https://histoire.dev/
  • https://vitejs.dev/

Todos:

• [x] deploy to vercel?
• [x] domain: svelte-put.vnphanquang.com?
• [x] use MDSvex => yes
• [x] import code as raw string for showing code in examples & documentations (solution: use vite's ?raw import query)
• [x] how to include the extracted api to site automatically (API Reference sections)? ❌❌ -> for now just include link to api on github.
• [x] embedded svelte repl? but what about typescript? -> let's not embed, link through badge or implement dedicated playground in site
• [x] full set of favicons
• [x] manifest.json and full support for PWA
• [x] code block syntax highlighting with svelte-highlight
• [ ] reorganize components into atomic design pattern structure

Landing animation inspiration:

• https://codepen.io/jh3y/pen/XWaGEgO?editors=1100
• https://codepen.io/desandro/pen/KRWjzm

[vnphanquang]

Improve Code component following pattern from vercel docs (example here).

• [x] add top bar with an optional file name as prop
• [x] move copy icon to the top bar
• [x] add shadow?

[vnphanquang]

package docs:

• [x] introduction (/docs page)
• [x] svelte-put/avatar
• [x] svelte-put/clickoutside
• [x] svelte-put/copy
• [x] svelte-put/intersect
• [x] svelte-put/modal
• [x] svelte-put/movable
• [x] svelte-put/preprocess-auto-slug
• ~svelte-put/select~ <- later
• [x] svelte-put/shortcut
• [ ] svelte-put/toc

link to docs page from github

• [x] introduction (/docs page)
• [x] svelte-put/avatar
• [x] svelte-put/clickoutside
• [x] svelte-put/copy
• [x] svelte-put/intersect
• [x] svelte-put/modal
• [x] svelte-put/movable
• [x] svelte-put/preprocess-auto-slug
• ~svelte-put/select~ <- later
• [x] svelte-put/shortcut
• [ ] svelte-put/toc

[vnphanquang]

• [x] "On this page" automatically nav section

Resources:

• svelteness/kit-docs/OnThisPage.svelte
• sveltejs/kit/OnThisPage.svelte

[vnphanquang]

dynamic OG image: https://github.com/vercel/og-image

• [ ] https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images
• [ ] https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation
• [ ] https://geoffrich.net/posts/svelte-social-image/#heading-wiring-this-up-to-a-svelte-component
• [x] image 3d card elevated like hero of this: https://automate.io/ or this https://github.com/vercel/satori

inspiration pool:

• https://codepen.io/nicolaspavlotsky/pen/zjRpbE?editors=1100
• https://codepen.io/avstorm/pen/ERLpLy?editors=1100

---

Settled on having static images because design requires 3D transform in html, which is not supported by satori yet. Maybe save for future improvement

https://github.com/vnphanquang/svelte-put/commit/c4118c8ccd228ec610e2e45a75e6dba62ad0602c

[vnphanquang]

• [ ] algolia search integration???

If use algolia, apply for DocsSearch.

Separate issue in backlog created for this

[vnphanquang]

• [ ] tooltip to explain badge on sidebar (dev, new, beta, flux)

[vnphanquang]

• [x] Responsive support (tablet / mobile)

[vnphanquang]

• [x] Add a edit this page on github button somewhere on each page

[vnphanquang]

• [x] setup vercel analytics

[vnphanquang]

• [x] error page

[vnphanquang]

• [x] fix _blank anchors

[vnphanquang]

• [x] humans.txt

resources:

• https://codeburst.io/all-about-humans-humans-txt-actually-f571d37f92d2
• https://humanstxt.org/Standard.html