layerchart icon indicating copy to clipboard operation
layerchart copied to clipboard

docs v2

Open techniq opened this issue 3 months ago • 3 comments

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
  • Automatic 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)

TODO

Existing

  • [x] Create new docs projects at {project_root}/docs}
  • [x] Setup content-collections
  • [x] Setup mdsx
  • [x] Setup Tailwind / Theme select
  • [x] Setup unplugin-icons
  • [x] Setup Svelte UX
  • [x] Table of Contents
  • [x] Analytics
  • [x] Integrate renderContext (svg/canvas/html) setting
  • [x] Integrate debug setting
  • [x] Setup CI (build)
  • [x] Deploy new site to Cloudflare (new directory)
  • [x] Identify pattern to define examples
    • [x] preprocess markdown code blocks
      • Pro
        • Faster to migrate
        • Quick to iterate
      • Con
        • More difficult to implement (find old preprocessor)
    • [x] 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
  • [x] Migrate all examples
  • [ ] Search
  • [ ] Responsive layout
  • [ ] light/dark shiki themes
  • [ ] Remove old site (after migrated)
  • [ ] Update Getting Started
  • [x] 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)
  • [ ] Navigation between pages
  • [ ] llms.txt
    • https://github.com/techniq/svelte-ux/issues/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
  • [x] Replace <Layer type={shared.renderContext}}> with set value (ex. <Layer type="svg"}>
    • [x] 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)
  • [x] Support opening example directly (useful for development / investigation)
  • [ ] Examples
    • https://github.com/techniq/layerchart/issues/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/
    • https://github.com/WarningImHack3r/svelte-changelog/pull/101
    • https://github.com/huntabyte/bits-ui/blob/main/docs/src/lib/components/metadata.svelte
  • [ ] Type hovering

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

techniq avatar Oct 16 '25 22:10 techniq

🦋 Changeset detected

Latest commit: 5002cd49d412822857df645268ff70d31c04ff9f

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

changeset-bot[bot] avatar Oct 16 '25 22:10 changeset-bot[bot]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

github-actions[bot] avatar Oct 16 '25 22:10 github-actions[bot]

Open in StackBlitz

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

commit: 5002cd4

pkg-pr-new[bot] avatar Oct 16 '25 22:10 pkg-pr-new[bot]