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?

Aperta
#453 18 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
172
Fork
142
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 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/

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione collegata e i relativi passaggi nel README, quindi esamina tests/dummy/app/templates/application.hbs e tests/dummy/app/templates/index.hbs per riprodurre gli stili mancanti. Confronta il comportamento dell'aggiornamento a Tailwind v1 e determina come gli stili predefiniti dovrebbero essere opt-out. Il lavoro è completato quando HTML e Markdown recuperano uno stile predefinito utile senza impedire agli utenti di rinunciarvi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, tailwindcss
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.