Skip to content

Commit d2453ba

Browse files
committed
Narrower docs-section, inline asides
1 parent 5688c41 commit d2453ba

File tree

7 files changed

+58
-38
lines changed

7 files changed

+58
-38
lines changed

addon/components/docs-viewer/x-main/template.hbs

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
<div class="docs-viewer__page-header docs-container">
2-
<a class='docs-viewer__page-header-link' href={{editCurrentPageUrl}}>
3-
<span class="docs-viewer__page-header-link-icon">
4-
{{docs-svg-icon 'pencil'}}
5-
</span>
6-
Edit this page
7-
</a>
8-
</div>
1+
<div class="docs-container">
2+
<div class="docs-section">
3+
<div class="docs-viewer__page-header">
4+
<a class='docs-viewer__page-header-link' href={{editCurrentPageUrl}}>
5+
<span class="docs-viewer__page-header-link-icon">
6+
{{docs-svg-icon 'pencil'}}
7+
</span>
8+
Edit this page
9+
</a>
10+
</div>
911

10-
{{yield}}
12+
{{yield}}
13+
</div>
14+
</div>
1115

1216
{{#if docsRoutes.previousRoute}}
1317
{{#link-to params=docsRoutes.previousRoute class='docs-viewer__page-nav'}}

addon/services/docs-routes.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@ export default Service.extend({
4040
let router = this.get('router.router');
4141
let currentURL = router.get('rootURL') + router.get('url');
4242
currentURL = currentURL
43-
.replace("//", "/") // dedup slashes
44-
.replace(/\/$/, ""); // remove trailing slash
43+
.replace("//", "/") // dedup slashes
44+
.replace(/\/$/, "") // remove trailing slash
45+
.replace(/#.+$/, ''); // remove # anchor links
4546
let index = this.get('routeUrls').indexOf(currentURL);
4647
assert(`DocsRoutes wasn't able to correctly detect the current route. The current url is ${currentURL}`, index > -1);
4748
return index;

addon/styles/addon.scss

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,17 @@ button {
4747
&--fluid {
4848
max-width: none;
4949
}
50+
&--small {
51+
max-width: 760px;
52+
}
5053
}
5154
.docs-section {
5255
position: relative;
53-
max-width: 720px;
54-
margin-bottom: 80px;
56+
max-width: 760px;
57+
margin: 0 auto 80px;
58+
}
59+
.docs-section--left {
60+
margin-left: 0;
5561
}
5662
.docs-snippet {
5763
font-size: 14px;
@@ -91,17 +97,17 @@ button {
9197

9298
aside {
9399
// right side version
94-
font-size: small;
95-
width: 180px;
96-
position: absolute;
97-
left: 780px;
98-
line-height: 1.4;
100+
// font-size: small;
101+
// width: 180px;
102+
// position: absolute;
103+
// left: 780px;
104+
// line-height: 1.4;
99105

100106
// inline version
101-
// background: #fafafa;
102-
// padding: 5px 20px;
103-
// margin-top: 20px;
104-
// font-style: italic;
107+
background: #fafafa;
108+
padding: 10px 20px;
109+
margin-top: 20px;
110+
font-style: italic;
105111
}
106112

107113
// Applied to fenced code in compiled markdown

tests/dummy/app/pods/docs/patterns/template.md

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Here's a summary of the patterns we encourage addon authors to follow when docum
44

55
{{! FIXME these links don't work with the 'hash' locationType}}
66
- [Document your addon using its dummy app](#document-your-addon-using-its-dummy-app)
7-
- [Author in Markdown when possible](#author-in-markdown-when-possible)
7+
- [Author in Markdown](#author-in-markdown)
88
- [Design for your audience](#design-for-your-audience)
99
- [Write versioned guides](#write-versioned-guides)
1010
- [Write versioned API references](#write-versioned-api-references)
@@ -25,22 +25,30 @@ Every addon comes with a fully bootstrapped Ember application that can be found
2525

2626
Once you document the new behavior on your doc site, you can now write an acceptance test against it, ensuring (1) that your code is functioning correctly, and (2) that your docs are accurate and up-to-date. Win-win!
2727

28-
## Author in Markdown when possible
28+
## Author in Markdown
2929

30-
In general it is good to author your docs pages as Markdown documents. This helps you focus on content and makes it easy for contributors to make edits and improvements to your docs. For functionality-rich docs pages you can always fall back to `template.hbs` files.
30+
Authoring your docs pages in Markdown makes it easy for you and your contributors to read and edit your site.
3131

32-
We automatically set up a template preprocessor so that you can opt-in to authoring any page you'd like as a Markdown file — just create a `template.md` file wherever you'd normally create a `template.hbs` file. [The file you're reading](#) is an example.
32+
To make a route a Markdown document, simply create a `template.md` file instead of a `template.hbs`.
3333

34-
Whenever you author a template as a Markdown file, we wrap it in a div with the class `.docs-md`. You can view our [predefined styles here](#) — feel free to overwrite these in your own app if you'd like.
34+
To show additional functionality, create route-specific components and render them from your `template.md` files:
35+
36+
```md
37+
## My Component demo
38+
39+
Here's a demo of it working:
40+
41+
{{docs/my-component/demo1}}
42+
```
3543

3644
In addition to authoring normal Markdown content, you can
3745

46+
- Use an `<aside>` element. This is good for calling out important info or long-standing bug fixes that were part of a release.
47+
3848
<aside>
3949
Here's an example of an aside.
4050
</aside>
4151

42-
- Use an `<aside>` element. This is good for calling out important info or long-standing bug fixes that were part of a release.
43-
4452
- Use Handlebars helpers. For example, you can use `link-to` to render a link to {{link-to 'the home page' 'index'}}, or you can even render a component.
4553

4654
## Design for your audience

tests/dummy/app/pods/docs/template.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,7 @@
1818
{{/viewer.nav}}
1919

2020
{{#viewer.main}}
21-
<div class="docs-container">
22-
<div class="docs-section">
23-
{{outlet}}
24-
</div>
25-
</div>
21+
{{outlet}}
2622
{{/viewer.main}}
2723

2824
{{/docs-viewer}}

tests/dummy/app/pods/index/styles.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
.docs-dummy {
22
&__header {
3+
display: flex;
4+
align-items: center;
5+
margin-top: 70px !important;
6+
}
7+
&__header-icon {
38
float: left;
49
margin-right: 10px;
5-
margin-top: 8px;
610
}
711
&__btn-area {
812
margin-top: 40px;

tests/dummy/app/pods/index/template.hbs

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88

99
<div class='docs-container docs-md'>
1010
<section class='docs-section'>
11+
<h2 class='docs-dummy__header'>
12+
{{svg-jar 'logo-horizontal' class='docs-dummy__header-icon' width=40 height=16}}
13+
Motivation
14+
</h2>
1115

12-
{{svg-jar "logo-horizontal" class='docs-dummy__header' width="50px" height="24px"}}
13-
14-
<h2>Motivation</h2>
1516
<aside>Looking for the quickstart? {{link-to 'Click here' 'docs.quickstart'}}.</aside>
1617
<p>Documenting software libraries has gotten easier. We have nicely-formatted README.md files, the ability to host custom sites for free on GitHub Pages, and even dedicated tools like <a href="#">GitBook</a> and <a href="#">ReadTheDocs</a>. But even though these tools have come a long way, modern developers have high expectations, and library authors can quickly find themselves juggling more tasks than they can manage.</p>
1718
<p>Ember addons occupy a unique space here. Besides everything that's expected of any modern JavaScript library, there's even more that goes into authoring a library that plays nicely with an ecosystem as mature as Ember's. And too often addon authors with limited time must choose between being a better community citizen, or focusing on the core problem their library was created to solve in the first place.</p>

0 commit comments

Comments
 (0)