ember-learn / ember-learn/ember-cli-addon-docs
Default styles were removed with the Tailwind v1 upgrade. Add default styles for a good first time experience?
- Vorherrschende Sprache
- JavaScript
- Sterne
- 172
- Forks
- 142
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
### Update 2 (after this comment: https://github.com/ember-learn/ember-cli-addon-docs/issues/453#issuecomment-583858157)
"Default styles" were removed in Tailwind V1 (i.e: Tailwind's reset stylesheet sets all elements to look the exact same), resulting in:
- plain html tags were stripped of their default browser styles, making everything look like it was in a `
` tag.
- consequentially, markdown syntax has no effect on anything / became meaningless, and is also just `
` tags (visually).
The solution:
- have opt-out default styles for a better first time experience.
-------------------------------------------
### Update 1 (after checking previous versions):
Looks like this release broke the default styles: https://github.com/ember-learn/ember-cli-addon-docs/releases/tag/v0.6.16
--------------------------------------------
### Original Issue Report
Info / Debug Session / me being very confused: https://discordapp.com/channels/480462759797063690/484421898210377729/675606201077202954
Reproduction: https://github.com/NullVoxPopuli/AddonDocsBrokenCssReproduction
it looks like all elements have been stripped of all styles.

Steps in readme copied here:
# Reproduction
```
npx ember-cli addon ec-addon-docs-repro --yarn
cd ec-addon-docs-repro
yarn
```
## [https://ember-learn.github.io/ember-cli-addon-docs/docs/quickstart](https://ember-learn.github.io/ember-cli-addon-docs/docs/quickstart)
```
ember install ember-cli-addon-docs
# choose ESDoc or install below
ember install ember-cli-addon-docs-esdoc
```
following the rest of the quickstart, ignoring template linting errors.
during the `ember generate docs-page usage` step,
fix the router:
```js
Router.map(function() {
docsRoute(this, function() { /* Your docs routes go here */ });
this.route('usage');
});
```
should be
```js
Router.map(function() {
docsRoute(this, function() {
/* Your docs routes go here */
this.route('usage');
});
});
```
Because Octane no longer has the application-template-wrapper,
the `tests/dummy/app/templates/application.hbs` must be wrapped with
```hbs
{{docs-header}}
{{outlet}}
{{docs-keyboard-shortcuts}}
```
Now, to add a header and list:
in `tests/dummy/app/templates/index.hbs`, replace
```hbs
{{#docs-demo as |demo|}}
{{#demo.example name="my-demo.hbs"}}
Make sure to read up on the DocsDemo component before building out this page.
{{/demo.example}}
{{/docs-demo}}
```
with
```hbs
h2
paragraph text
- item 1
- item 2
- item 3
{{#docs-link "docs"}}
Get started →
{{/docs-link}}
```
where did I get this structure / classes from? here: https://github.com/alexdiliberto/ember-transformicons/blob/master/tests/dummy/app/templates/index.hbs#L4
and the h2 looks correct https://alexdiliberto.com/ember-transformicons/
Beitragsleitfaden
Rechercherichtung
Beginne mit der verlinkten Reproduktion und den darin beschriebenen README-Schritten. Untersuche anschließend tests/dummy/app/templates/application.hbs und tests/dummy/app/templates/index.hbs, um die fehlenden Styles zu reproduzieren. Vergleiche das Upgrade-Verhalten von Tailwind v1 und ermittle, wie Standard-Styles standardmäßig opt-out sein sollten. Als erledigt gilt die Aufgabe, wenn HTML und Markdown wieder eine nützliche Standardformatierung erhalten, ohne Benutzer daran zu hindern, sich dagegen zu entscheiden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, tailwindcss
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100