[Playground] Code links #1167
[Playground] Code links #1167
Conversation
✅ Deploy Preview for sass-lang ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
The functionality looks great, but I'm not sure about the styles. A few considerations that occur to me:
All that makes me think that something like this:
or even potentially like this:
would be a better fit. As prior art here, this is what it looks like in the TypeScript documentation:
...where the "Try" button only shows up when the code is being hovered. I'd be fine with just copying that design as well. |
| @@ -1,3 +1,3 @@ | |||
| <li class="ui-tabs-tab{% if syntax == 'css' %} css-tab{% endif %}{% if enabled %} ui-tabs-active{% endif %}"> | |||
| <li class="ui-tabs-tab{% if syntax == 'css' %} css-tab{% endif %}{% if enabled %} ui-tabs-active{% endif %}" data-syntax="{{ syntax }}"> | |||
There was a problem hiding this comment.
What is this data attribute for?
There was a problem hiding this comment.
Outdated -- removed in 4612ff1
| scss: string[]; | ||
| sass: string[]; |
There was a problem hiding this comment.
These should both be | false to match the current semantics, although honestly I think null would be a better fit. I'm surprised tsc isn't complaining about this.
There was a problem hiding this comment.
This is the type def for the input args, not the return value. Changed to null in 4612ff1
There was a problem hiding this comment.
Oh I see. In that case, this should have a return type 🙂
* main: Re-enable eslint for source/assets/js (sass#1168)
@nex3 I made a few updates here:
|
| scss: string[]; | ||
| sass: string[]; |
There was a problem hiding this comment.
Oh I see. In that case, this should have a return type 🙂
* main: (23 commits) [Playground] Click to Copy (sass#1177) Cut a release for a new Dart Sass version [Playground] Debug links (sass#1179) Add breaking change page for legacy-js-api (sass#1193) [Playground] Autocomplete (sass#1166) Add a breaking change page for color functions (sass#1192) Remove nonexisting `color.saturate()` function (sass#1190) Fix unprefixed `color.adjust()` name (sass#1188) Sort color functions alphabetically (sass#1187) Document color migrator (sass#1186) Cut a release for a new Dart Sass version Document new color spaces (sass#1055) (sass#1115) Cut a release for a new Dart Sass version Bump date-fns from 3.6.0 to 4.0.0 (sass#1181) Bump rollup from 4.21.2 to 4.21.3 (sass#1182) Bump @codemirror/autocomplete from 6.18.0 to 6.18.1 (sass#1183) Bump @typescript-eslint/eslint-plugin from 8.5.0 to 8.6.0 (sass#1185) Bump markdown-it-anchor from 9.1.0 to 9.2.0 (sass#1184) Fix footer not showing the latest versions. (sass#1178) [Playground] Code links (sass#1167) ...
Adds "Edit in Playground" link to each code example in the documentation. The link will reflect the selected syntax.
If there are multiple sections in the example, for instance in the Modules section, no link is shown. Those examples require importing and a file system, which isn't supported. I'm open to other behavior here if preferred.