mirror of
https://github.com/discourse/discourse.git
synced 2026-08-09 21:45:25 +08:00
a8b1606ff8DEV: Keep styleguide samples synchronized with source Styleguide code samples were hand-written strings that could silently drift from the markup they described. This caused the char counter sample to advertise a nonexistent `CharCounter` module while rendering `DCharCounter`. Add a `discourse-source-imports` bundler plugin that imports another module's untranspiled source as a string. `?source=file` returns the complete file, while `?source=template` extracts the contents of the module's single `<template>` block. Imports use normal module resolution and pass the result to `StyleguideExample` through its `@code` argument. Move the spinner and char counter examples into `components/examples/` and source their displayed code through the new plugin. Register the plugin with both the core Rolldown build and the asset processor. Each pipeline injects its own `readSource(id)` implementation: the asset processor reads from its in-memory module map, while core reads from disk and rejects paths outside the project root. --------- Co-authored-by: David Taylor <david@taylorhq.com> |
||
|---|---|---|
| .. | ||
| app/controllers/styleguide | ||
| assets | ||
| config | ||
| db/migrate | ||
| lib/styleguide | ||
| public/images | ||
| spec | ||
| package.json | ||
| plugin.rb | ||
| README.md | ||
| screenshot.png | ||
| tsconfig.json | ||
styleguide
Adds a URL of /styleguide to discourse that renders widgets in various
configurations to aid in styling.
Automatic code examples
Discourse's build pipeline allows adding ?source=file or ?source=template to
a module import. This provides a string of the raw source code for the entire
file, or just for the <template>. Put the example in its own module under
examples/, import it twice, and pass the string to @code:
import StyleguideExample from "discourse/plugins/styleguide/discourse/components/styleguide-example";
import CharCounterExample from "../../examples/char-counter";
import charCounterSource from "../../examples/char-counter.gjs?source=file";
export default <template>
<StyleguideExample @title="<DCharCounter>" @code={{charCounterSource}}>
<CharCounterExample @dummy={{@dummy}} />
</StyleguideExample>
</template>
The import must resolve within the same plugin or theme bundle, and
?source=template requires the module to contain exactly one <template>.
Keep using an explicit @code string for curated samples that intentionally
differ from the rendered implementation.
