docs v2

[techniq]

Goals

• Provide complete / standalone / isolated examples with easy copy and paste and ability to open in Svelte REPL/Playground or Stackblitz
• New Examples browse page with filtering
• Automatically find related examples for all components
• Expose APIs (generated from $prop() types)
• Improved search (sub-section)
• Improved design
• Better separation of library and docs dependencies

Closes #620

PR also

• Adds settings (default layer type and debug)
• Layer improvements
  • respects layer setting (default)
  • integrates debug setting (overall and padding bounds)

---

• PR preview
  • comment
• pkg.pr.new

TODO

Existing

• Create new docs projects at {project_root}/docs}
• Setup content-collections
• Setup mdsx
• Setup Tailwind / Theme select
• Setup unplugin-icons
• Setup Svelte UX
• Table of Contents
• Analytics
• Integrate renderContext (svg/canvas/html) setting
• Integrate debug setting
• Setup CI (build)
• Deploy new site to Cloudflare (new directory)
• Identify pattern to define examples
  • preprocess markdown code blocks
    • Pro
      • Faster to migrate
      • Quick to iterate
    • Con
      • More difficult to implement (find old preprocessor)
  • Separate page per example (almost 700)
    • Pro
      • Better tooling (prettier, errors)
      • Easier to implement (?raw for source)
      • Full examples (<script>)
      • Easier to open in REPL
    • Con
      • More intensive (almost 700)
      • Each needs distinct name
• Migrate all examples
• Search
• Responsive layout
• light/dark shiki themes
• Remove old site (after migrated)
• Update Getting Started
  • New examples, simplified Tailwind integration, shadcn-svelte Charts, etc
• Fix screenshots (show full examples (multi-chart), hide controls)
• Fix data warning (box value in object)

New

• Front page
• Restore API section (related)
  • https://github.com/vega/ts-json-schema-generator
  • https://github.com/YousefED/typescript-json-schema
• Improved search (include sub subsections)
  • discussion
• Navigation between pages
• llms.txt
  • How difficult would it be to create llms.txt from docs? svelte-ux#534
  • https://bits-ui.com/docs/llms
  • https://github.com/huntabyte/bits-ui/blob/8bb7605696fa28b000f8041c28ed14b99f0710da/docs/svelte.config.js#L21
  • https://github.com/huntabyte/bits-ui/blob/main/docs/other/build-llms-txt.ts
• Replace <Layer type={shared.renderContext}}> with set value (ex. <Layer type="svg"}>
  • settings now integrated (not visible in code examples) so no longer needed
• Docs version select
• Open example in Stackblitz (example)
• Open example in Svelte REPL (example)
• Support opening example directly (useful for development / investigation)
• Examples
  • Integration examples #150
  • https://github.com/techniq/layerchart/tree/next/examples
  • https://github.com/techniq/layerchart/network/dependents
  • Discord showcase
• Social / OG images
  • https://geoffrich.net/posts/svelte-social-image/
  • feat(seo): dynamic OG images WarningImHack3r/svelte-changelog#101
  • https://github.com/huntabyte/bits-ui/blob/main/docs/src/lib/components/metadata.svelte
  • https://github.com/etherCorps/sveltekit-og
• Type hovering
  • twoslash-svelte PR
    • Usage: https://svelte.dev/docs/kit/load

---

Structure

I'm also thinking we have the following sections (not rigid, but general ideas):

• Homepage
• Guides / Features
  • Getting started (including linked to the new integration examples
  • Concept explanations
  • I have a start on some of this concept, but could use some help building it out / polish.
  • This would including explaining simplified charts and pro/cons (but see note below)
• Showcase
  • Sites using LayerChart (open and closed source)
  • Github Analysis, Strava Analysis, Zipline AI, posts to Discord showcases, callout some bigger ones in github dependents, possibly form to submit yours (would like to keep them high quality)
• Examples
  • show more built out examples (can be tricky to draw the line with some of the docs examples)
  • screenshots / previews
    • https://observablehq.com/@observablehq/plot-gallery
    • https://svelteplot.dev/examples
• Docs / APIs
  • show/explain more concepts, but tricky sometimes to draw the line with examples
  • component previews / screenshots on listing page
    • https://lunarui.dev/components
    • https://ant.design/components/overview
    • https://chakra-ui.com/docs/components/concepts/overview
    • https://atlassian.design/components
    • https://charts.carbondesignsystem.com/introduction

possibly

• Updates (News / Blog)

---

Issues

• http://localhost:3002/examples/Bars/grouped-stacked-or-both-transition
  • locks up browser changing mode
• Document click events (tooltip, etc) #161
• What's the best way to use locally? #61

[changeset-bot]

🦋 Changeset detected

Latest commit: fccec09

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
layerchart	Minor
shadcn-svelte-1	Patch
svelteux-2	Patch
skeleton-3	Patch
skeleton4	Patch
standalone	Patch
daisyui-5	Patch
docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	fccec09

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@659

commit: fccec09