Skip to content

Conversation

@techniq
Copy link
Owner

@techniq techniq commented Oct 16, 2025

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)

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
  • Fix screenshots (show full examples (multi-chart), hide controls)
  • Fix data warning (box value in object)

New


Structure

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

possibly

  • Updates (News / Blog)

Issues

@changeset-bot
Copy link

changeset-bot bot commented Oct 16, 2025

🦋 Changeset detected

Latest commit: c8d2d98

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
Copy link
Contributor

github-actions bot commented Oct 16, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 16, 2025

Open in StackBlitz

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

commit: c8d2d98

Replace import.meta.glob with dynamic imports for example loading to
prevent Vite from pre-transforming all 709 example files on every page.

- Add $lib/examples.ts with loadExample() and loadExamples() functions that use dynamic imports to load examples on-demand
- Add $lib/examples-glob.ts for screenshot generation which still needs to iterate all examples
- Update loadExamplesFromMarkdown() to use dynamic imports instead of requiring glob parameters
- Simplify layout files to use new loading approach
- Add +page.ts for /examples route to load catalog examples on-demand
- Update layout.svelte to merge page-level examples into context

This significantly reduces network requests when loading component documentation pages by only loading the examples actually referenced in the markdown content.
…utions (800px (full), 400px (half) and 240 (30%) and load based on container width. Fix showing resize handle in screenshots. Regenerate all screenshots
* Styles - 2nd pass

* Fix Example (leftover `path`)

* Improve indention and some style attributes

* fix link

* Slightly simplify css variable example

* Fix loading examples with `path` (`:example{ path="./color-schemes.svelte" }`)

* Refine some content

* Support `showLineNumbers` and `highlight` when using `:example { ... }` / `<Example>`, and `<Code>`

* Cleanup example

* Fix legend padding handling

* Adjust padding example

---------

Co-authored-by: Sean Lynch <techniq35@gmail.com>
- hopefully the last of the padding updates to axis not cut off for canvas.
- for legends switched to padding={defaultChartPadding({legend: true}}
* waiting for tools fix

* more-markdown-examples
* view-transitions

- supports user-prefers-reduced motion
- seen on clicking image link to load chart example.

* Add page transitions from home page as well

* Simplify viewTransitionName

* Improve initial highlighter loading (fix "Loading..." always showing on first use)

* Use `github-light-default` instead of  `github-light` for markdown code blocks to match Code

---------

Co-authored-by: Sean Lynch <techniq35@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants