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?

Open
#453 18 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
172
Forks
142
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.