Skip to content
This repository was archived by the owner on Feb 17, 2024. It is now read-only.

Commit 99c62e4

Browse files
Travis UekiTravis Ueki
Travis Ueki
authored and
Travis Ueki
committed
Added markdown index page support, Markdown styles
1 parent 1588345 commit 99c62e4

File tree

10 files changed

+259
-18
lines changed

10 files changed

+259
-18
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,14 @@
5858
"@types/chalk": "^0.4.31",
5959
"@types/commander": "^2.9.0",
6060
"@types/html-webpack-plugin": "^2.28.0",
61+
"@types/marked": "^0.0.28",
6162
"angular-prism": "^0.1.20",
6263
"angular2-highlight-js": "^5.0.0",
6364
"chalk": "^1.1.3",
6465
"commander": "^2.9.0",
6566
"css-loader": "^0.28.1",
6667
"lodash.flatten": "^4.4.0",
68+
"marked": "^0.3.6",
6769
"postcss-loader": "^2.0.5",
6870
"prismjs": "^1.6.0",
6971
"sass-loader": "^6.0.5",

‎src/boostrap.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
55
import { provideUIGuides } from './services/ui-guide.service'
66
import { provideResolvedSandbox } from './services/sandbox.service'
77
import { NgModuleRef } from '@angular/core'
8+
import { ENTRY_MARKDOWN } from './services'
89

910
/** boostrap the UI guide app */
1011
export function bootstrap(sandBox: UIGuideSandbox): Promise<NgModuleRef<UIGuideModule>> {
1112
/** grab all the ui guides */
1213
const uiGuides = sandBox.loadUIGuides()
1314
/** resolve all the ui guide components and ng module */
1415
const resolved = getModuleForUIGuides(sandBox.ngModule, uiGuides)
16+
/** this is the markdown used in your index page */
17+
const entryMarkdown = sandBox.entryMarkdown
1518

1619
/** add in the extra providers to the app */
1720
const platform = platformBrowserDynamic([
1821
provideUIGuides(uiGuides),
19-
provideResolvedSandbox(resolved)
22+
provideResolvedSandbox(resolved),
23+
{provide: ENTRY_MARKDOWN, useValue: entryMarkdown}
2024
])
2125

2226
/** boostrap the app */

‎src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export * from './ui-example.component'
33
export * from './guides-list.component'
44
export * from './ui-api.component'
55
export * from './prism.component'
6+
export * from './markdown.component'

‎src/components/markdown.component.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, Input, ViewEncapsulation } from '@angular/core'
2+
import * as marked from 'marked';
3+
4+
@Component({
5+
selector: 'dope-docs-markdown',
6+
template: `
7+
<div [innerHTML]="parsedMarkdown">
8+
</div>
9+
`,
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class MarkdownParser {
13+
@Input() markdown: string = ''
14+
parsedMarkdown: string;
15+
16+
ngOnChanges() {
17+
const md = marked.setOptions({
18+
gfm: true,
19+
tables: true,
20+
breaks: false,
21+
pedantic: false,
22+
sanitize: true,
23+
smartLists: true,
24+
smartypants: false
25+
});
26+
this.parsedMarkdown = md.parse(this.markdown || '');
27+
}
28+
}

‎src/interfaces.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface CompiledUIGuide {
3838

3939
export interface UIGuideSandbox {
4040
module?: NodeModule
41+
entryMarkdown: string
4142
ngModule: Type<any> | ModuleWithProviders
4243
loadUIGuides(): UIGuide[]
4344
};

‎src/services/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
1+
import { OpaqueToken } from '@angular/core'
12
export * from './ui-guide.service'
23
export * from './sandbox.service'
4+
export const ENTRY_MARKDOWN = new OpaqueToken('entry_markdown')

‎src/ui-guide.module.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core'
22
import {BrowserModule} from '@angular/platform-browser'
33
import { CommonModule } from '@angular/common'
44
import { UIGuideSandboxService, UIGuideSerivce } from './services'
5-
import { UIExampleComponent, UIGuideComponent, UIGudiesListComponent, UIApiComponent, PrismComponent } from './components'
5+
import { UIExampleComponent, UIGuideComponent, UIGudiesListComponent, UIApiComponent, PrismComponent, MarkdownParser } from './components'
66
import { ComponentsView, UIGuidePreviewView, UIGuideRootView, UIGuideRouterEntryView } from './views'
77
import { Routing } from './routes'
88
import 'prismjs/prism';
@@ -28,7 +28,8 @@ import 'prismjs/components/prism-typescript';
2828
UIGuideRootView,
2929
UIGuidePreviewView,
3030
ComponentsView,
31-
UIApiComponent
31+
UIApiComponent,
32+
MarkdownParser
3233
],
3334
entryComponents: [
3435
UIGuidePreviewView,

‎src/views/components.component.ts

+206-13
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,213 @@
1-
import { Component } from '@angular/core'
1+
import { Component, Inject, ViewEncapsulation } from '@angular/core'
2+
import { ENTRY_MARKDOWN } from '../services'
23
@Component({
34
selector: 'ui-guide-components-view',
45
template: `
5-
<div class="components-view">
6-
<h3>Components</h3>
7-
8-
<p>
9-
Describe the library here. Need to make this dynamic from user and not hard coded
10-
</p>
11-
</div>
6+
7+
<dope-docs-markdown [markdown]="entryMarkdown"></dope-docs-markdown>
128
`,
9+
encapsulation: ViewEncapsulation.None,
1310
styles: [`
14-
h3 {
15-
font-weight: 300;
16-
font-size: 3rem;
17-
}
11+
@media print {
12+
*,
13+
*:before,
14+
*:after {
15+
background: transparent !important;
16+
color: #000 !important;
17+
box-shadow: none !important;
18+
text-shadow: none !important;
19+
}
20+
21+
a,
22+
a:visited {
23+
text-decoration: underline;
24+
}
25+
26+
a[href]:after {
27+
content: " (" attr(href) ")";
28+
}
29+
30+
abbr[title]:after {
31+
content: " (" attr(title) ")";
32+
}
33+
34+
a[href^="#"]:after,
35+
a[href^="javascript:"]:after {
36+
content: "";
37+
}
38+
39+
pre,
40+
blockquote {
41+
border: 1px solid #999;
42+
page-break-inside: avoid;
43+
}
44+
45+
thead {
46+
display: table-header-group;
47+
}
48+
49+
tr,
50+
img {
51+
page-break-inside: avoid;
52+
}
53+
54+
img {
55+
max-width: 100% !important;
56+
}
57+
58+
p,
59+
h2,
60+
h3 {
61+
orphans: 3;
62+
widows: 3;
63+
}
64+
65+
h2,
66+
h3 {
67+
page-break-after: avoid;
68+
}
69+
}
70+
71+
html {
72+
font-size: 12px;
73+
}
74+
75+
@media screen and (min-width: 32rem) and (max-width: 48rem) {
76+
html {
77+
font-size: 15px;
78+
}
79+
}
80+
81+
@media screen and (min-width: 48rem) {
82+
html {
83+
font-size: 16px;
84+
}
85+
}
86+
87+
body {
88+
line-height: 1.85;
89+
}
90+
91+
p,
92+
.air-p {
93+
font-size: 1rem;
94+
margin-bottom: 1.3rem;
95+
}
96+
97+
h1,
98+
.air-h1,
99+
h2,
100+
.air-h2,
101+
h3,
102+
.air-h3,
103+
h4,
104+
.air-h4 {
105+
margin: 1.414rem 0 .5rem;
106+
font-weight: inherit;
107+
line-height: 1.42;
108+
}
109+
110+
h1,
111+
.air-h1 {
112+
margin-top: 0;
113+
font-size: 3.998rem;
114+
}
115+
116+
h2,
117+
.air-h2 {
118+
font-size: 2.827rem;
119+
}
120+
121+
h3,
122+
.air-h3 {
123+
font-size: 1.999rem;
124+
}
125+
126+
h4,
127+
.air-h4 {
128+
font-size: 1.414rem;
129+
}
130+
131+
h5,
132+
.air-h5 {
133+
font-size: 1.121rem;
134+
}
135+
136+
h6,
137+
.air-h6 {
138+
font-size: .88rem;
139+
}
140+
141+
small,
142+
.air-small {
143+
font-size: .707em;
144+
}
145+
146+
/* https://github.com/mrmrs/fluidity */
147+
148+
img,
149+
canvas,
150+
iframe,
151+
video,
152+
svg,
153+
select,
154+
textarea {
155+
max-width: 100%;
156+
}
157+
158+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300);
159+
160+
body {
161+
color: #444;
162+
font-family: 'Open Sans', Helvetica, sans-serif;
163+
font-weight: 300;
164+
margin: 6rem auto 1rem;
165+
text-align: center;
166+
}
167+
168+
img {
169+
border-radius: 50%;
170+
height: 200px;
171+
margin: 0 auto;
172+
width: 200px;
173+
}
174+
175+
a,
176+
a:visited {
177+
color: #3498db;
178+
}
179+
180+
a:hover,
181+
a:focus,
182+
a:active {
183+
color: #2980b9;
184+
}
185+
186+
pre {
187+
background-color: #fafafa;
188+
padding: 1rem;
189+
text-align: left;
190+
}
191+
192+
blockquote {
193+
margin: 0;
194+
border-left: 5px solid #7a7a7a;
195+
font-style: italic;
196+
padding: 1.33em;
197+
text-align: left;
198+
}
199+
200+
ul,
201+
ol,
202+
li {
203+
text-align: left;
204+
}
205+
206+
p {
207+
color: #777;
208+
}
18209
`]
19210
})
20-
export class ComponentsView {}
211+
export class ComponentsView {
212+
constructor(@Inject(ENTRY_MARKDOWN) public entryMarkdown: string) { }
213+
}

‎src/webpack/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
margin: 0;
3939
padding: 0;
4040
border: 0;
41-
font-size: 100%;
42-
font: inherit;
41+
/*font-size: 100%;*/
42+
/*font: inherit;*/
4343
vertical-align: baseline;
4444
}
4545
/* HTML5 display-role reset for older browsers */
@@ -68,6 +68,7 @@
6868

6969
body * {
7070
font-family: 'Open Sans', sans-serif;
71+
line-height: 1.5;
7172
}
7273
pre * {
7374
font-family: 'Roboto Mono', monospace;

‎yarn.lock

+8
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
"@types/html-minifier" "*"
9595
"@types/webpack" "*"
9696

97+
"@types/marked@^0.0.28":
98+
version "0.0.28"
99+
resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.0.28.tgz#44ba754e9fa51432583e8eb30a7c4dd249b52faa"
100+
97101
"@types/mime@*":
98102
version "0.0.29"
99103
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-0.0.29.tgz#fbcfd330573b912ef59eeee14602bface630754b"
@@ -2100,6 +2104,10 @@ macaddress@^0.2.8:
21002104
version "0.2.8"
21012105
resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
21022106

2107+
marked@^0.3.6:
2108+
version "0.3.6"
2109+
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
2110+
21032111
math-expression-evaluator@^1.2.14:
21042112
version "1.2.17"
21052113
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"

0 commit comments

Comments
 (0)