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:

• deploy to vercel?
• domain: svelte-put.vnphanquang.com?
• use MDSvex => yes
• import code as raw string for showing code in examples & documentations (solution: use vite's ?raw import query)
• how to include the extracted api to site automatically (API Reference sections)? ❌❌ -> for now just include link to api on github.
• embedded svelte repl? but what about typescript? -> let's not embed, link through badge or implement dedicated playground in site
• full set of favicons
• manifest.json and full support for PWA
• 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).

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

[vnphanquang]

package docs:

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

link to docs page from github

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

[vnphanquang]

• "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
• 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

c4118c8

[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]

• Responsive support (tablet / mobile)

[vnphanquang]

• Add a edit this page on github button somewhere on each page

[vnphanquang]

• setup vercel analytics

[vnphanquang]

• error page

[vnphanquang]

• fix _blank anchors

[vnphanquang]

• humans.txt

resources:

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