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?
- 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.

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
Assessment
This issue has not been assessed yet.