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?

Offen
#453 18 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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.

![image](https://user-images.githubusercontent.com/199018/74091408-2af49800-4a85-11ea-97c0-401e9bc12d78.png)

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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.