layerchart
layerchart copied to clipboard
docs v2
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
layertype anddebug) - Layer improvements
- respects
layersetting (default) - integrates
debugsetting (overall and padding bounds)
- respects
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
debugsetting - [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)
- Pro
- [x] Separate page per example (almost 700)
- Pro
- Better tooling (prettier, errors)
- Easier to implement (
?rawfor source) - Full examples (
<script>) - Easier to open in REPL
- Con
- More intensive (almost 700)
- Each needs distinct name
- Pro
- [x] preprocess markdown code blocks
- [x] 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
- [x] Fix screenshots (show full examples (multi-chart), hide controls)
- [ ] Fix
datawarning (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
-
twoslash-svelte PR
- Usage: https://svelte.dev/docs/kit/load
-
twoslash-svelte PR
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
🦋 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
built with Refined Cloudflare Pages Action
⚡ Cloudflare Pages Deployment
| Name | Status | Preview | Last Commit |
|---|---|---|---|
| layerchart | ✅ Ready (View Log) | Visit Preview | 5002cd49d412822857df645268ff70d31c04ff9f |