Skip to content

Commit 6ce732f

Browse files
author
mrmrs
committed
Dynamically generate main docs page.
1 parent 437ea19 commit 6ce732f

File tree

21 files changed

+569
-891
lines changed

21 files changed

+569
-891
lines changed

‎lib/docs.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var _ = require('lodash')
2+
var fs = require('fs')
3+
var gzip = require('gzip-size')
4+
var filesize = require('filesize')
5+
var postcss = require('postcss')
6+
7+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
8+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
9+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
10+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
11+
12+
var template = fs.readFileSync('./src/templates/docs/index.html', 'utf8')
13+
var tpl = _.template(template)
14+
var html = tpl({
15+
navDocs: navDocs,
16+
siteFooter: siteFooter,
17+
googleAnalytics: googleAnalytics,
18+
siteHeader: siteHeader
19+
})
20+
21+
fs.writeFileSync('./docs/index.html', html)

‎src/templates/docs/box-sizing/index.html

+44-85
Original file line numberDiff line numberDiff line change
@@ -6,121 +6,80 @@
66
<title>
77
Box Sizing / Layout / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mrmrs">
9+
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
<header class="bg-dark-gray white pbl">
16-
<div class="bb b--mid-gray phm phl-ns pvl">
17-
<h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
18-
<h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
19-
<span class="thin white-40">/</span>
20-
<h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#layout">Layout</a></h3>
21-
<span class="thin white-40">/</span>
22-
<h4 class="f4 mvn semibold dib">Box Sizing</h4>
23-
<div class="mtl">
24-
<dl class="white-60 prm light dib mrm">
25-
<dt class="db">Version</dt>
26-
<dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
27-
</dl>
28-
<dl class="white-60 light dib mrm">
29-
<dt class="db">Filesize</dt>
30-
<dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
31-
</dl>
32-
<div class="cf">
33-
<dl class="white-60 dib mrm mtn">
34-
<dt class="db">Declarations </dt>
35-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
15+
16+
<%= siteHeader %>
17+
<main class="">
18+
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
19+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
20+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
21+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
22+
<div>
23+
<dl class="dib mr4 mt0">
24+
<dt class="f6 db">Declarations </dt>
25+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></span></dd>
3626
</dl>
37-
<dl class="white-60 dib mrm">
38-
<dt class="db prs">Selectors </dt>
39-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
27+
<dl class="dib mr4">
28+
<dt class="f6 db pr2">Selectors </dt>
29+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
4030
</dl>
41-
<dl class="white-60 dib mrm">
42-
<dt class="db prs">Max. Specificity Score </dt>
43-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
31+
<dl class="dib mr4">
32+
<dt class="f6 db pr2">Max. Specificity Score </dt>
33+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
4434
</dl>
45-
<dl class="white-60 dib mrm">
46-
<dt class="db prs">Size of Avg. Rule </dt>
47-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
35+
<dl class="dib mr4">
36+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
37+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
4838
</dl>
49-
</div>
5039
</div>
51-
</div>
52-
<div class="phm phl-ns pvm">
53-
<p class="measure f3 lh-copy">
54-
The box model has been known to trip up a few people. This module should make things a bit easier.
55-
</p>
56-
<p class="measure f4 lh-copy">
57-
While many people make fun of Microsoft's 'Internet Explorer' browser - the one thing that most css authors
58-
agree on is that it's the most favorable box model. Fortunately the box-sizing property is well supported
59-
now so we can fix the atrocity that is the box model that chrome, firefox, safari, and others have implemented in modern browsers.
60-
</p>
61-
<p class="measure f4 lh-copy">
62-
While the * { box-sizing: border-box; } hack has become quite popular - not all elements (think form inputs)
63-
benefit from this box model. This module only applies the border-box model to certain elements as listed below.
64-
There is also a .border-box class you can apply to elements as needed.
65-
</p>
66-
<p class="measure f4 lh-copy">
67-
The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.
68-
</p>
69-
</div>
70-
</header>
71-
<main class="">
72-
<div class="phm phl-ns ptl pbxl">
40+
</article>
41+
<div class="ph3 ph5-ns pt4 pb5">
7342
<h2 class="f3 bold">Examples</h2>
74-
<h3 class="f5 book ptl caps">Default Content Box</h3>
75-
<div class="phm mw5 ba bw4 phxl pvm bg-lightest-red" style="box-sizing: content-box;">
43+
<h3 class="f5 book pt4 caps">Default Content Box</h3>
44+
<div class="ph3 mw5 ba bw4 phxl pvm bg-lightest-red" style="box-sizing: content-box;">
7645
This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
7746
</div>
78-
<h3 class="f5 book ptl caps">Border Box</h3>
79-
<div class="phm mw5 ba bw4 phxl pvm bg-lightest-red">
47+
<h3 class="f5 book pt4 caps">Border Box</h3>
48+
<div class="ph3 mw5 ba bw4 phxl pvm bg-lightest-red">
8049
This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
8150
</div>
82-
<h3 class="f5 book ptl caps">Border Box with no padding or border</h3>
83-
<div class="phm mw5 bg-lightest-red">
51+
<h3 class="f5 book pt4 caps">Border Box with no padding or border</h3>
52+
<div class="ph3 mw5 bg-lightest-red">
8453
This element has no border, a max-width class of mw5 and no padding. Notice which example it has the same width as.
8554
</div>
86-
<div class="mtxl cf">
87-
<div class="dib mrl">
88-
<h1 class="f4 ttu tracked semibold">Previous</h1>
89-
<a href="/docs/typography/white-space/" class="link semibold blue dim">White Space</a>
55+
<div class="mt5 cf">
56+
<div class="dib mr4">
57+
<h1 class="f4 ttu tracked fw6">Previous</h1>
58+
<a href="/docs/typography/white-space/" class="link fw6 blue dim">White Space</a>
9059
</div>
9160
<div class="dib">
92-
<h1 class="f4 ttu tracked semibold">Next</h1>
93-
<a href="/docs/layout/spacing/" class="link semibold blue dim">Spacing</a>
61+
<h1 class="f4 ttu tracked fw6">Next</h1>
62+
<a href="/docs/layout/spacing/" class="link fw6 blue dim">Spacing</a>
9463
</div>
9564
</div>
96-
<div class="mtxl">
97-
<h1 class="f4 ttu tracked semibold">Reference</h1>
98-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" class="link semibold blue dim">MDN - Box Sizing</a>
65+
<div class="mt5">
66+
<h1 class="f4 ttu tracked fw6">Reference</h1>
67+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" class="link fw6 blue dim">MDN - Box Sizing</a>
9968
</div>
10069
</div>
101-
<section class="bg-dark-gray white ptl pbxl">
102-
<header class="phm phl-ns ptl">
70+
<section class="bg-near-white black-70 pt4 pb5">
71+
<header class="ph3 ph5-ns pt4">
10372
<kbd class="yellow">src/_box-sizing.css</kbd>
10473
</header>
105-
<pre class="phm phl-ns">
106-
<code class="small">
74+
<pre class="ph3 ph5-ns">
75+
<code class="code" style="font-size: .75rem;">
10776
<%= srcCSS %>
10877
</code>
10978
</pre>
11079
</section>
11180
<%= navDocs %>
11281
</main>
113-
<%= siteFooter %>
114-
115-
<script>
116-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
117-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
118-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
119-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
120-
121-
ga('create', 'UA-55773803-1', 'auto');
122-
ga('send', 'pageview');
123-
124-
</script>
82+
<%= siteFooter %>
83+
<%= googleAnalytics %>
12584
</body>
12685
</html>

‎src/templates/docs/clearfix/index.html

+41-70
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,39 @@
66
<title>
77
Clearfix / Layout / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mrmrs">
9+
<meta name="author" content="@mr3rs">
1010
<meta name="description" content="CSS">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
<header class="bg-dark-gray white pbl">
16-
<div class="bb b--mid-gray phm phl-ns pvl">
17-
<h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
18-
<h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
19-
<span class="thin white-40">/</span>
20-
<h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#layout">Layout</a></h3>
21-
<span class="thin white-40">/</span>
22-
<h4 class="f4 mvn semibold dib">Clearfix</h4>
23-
<div class="mtl">
24-
<dl class="white-60 prm light dib mrm">
25-
<dt class="db">Version</dt>
26-
<dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
27-
</dl>
28-
<dl class="white-60 light dib mrm">
29-
<dt class="db">Filesize</dt>
30-
<dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
31-
</dl>
32-
<div class="cf">
33-
<dl class="white-60 dib mrm mtn">
34-
<dt class="db">Declarations </dt>
35-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
15+
16+
<%= siteHeader %>
17+
<main class="">
18+
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
19+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
20+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
21+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
22+
<div>
23+
<dl class="dib mr4 mt0">
24+
<dt class="f6 db">Declarations </dt>
25+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></span></dd>
3626
</dl>
37-
<dl class="white-60 dib mrm">
38-
<dt class="db prs">Selectors </dt>
39-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
27+
<dl class="dib mr4">
28+
<dt class="f6 db pr2">Selectors </dt>
29+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
4030
</dl>
41-
<dl class="white-60 dib mrm">
42-
<dt class="db prs">Max. Specificity Score </dt>
43-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
31+
<dl class="dib mr4">
32+
<dt class="f6 db pr2">Max. Specificity Score </dt>
33+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
4434
</dl>
45-
<dl class="white-60 dib mrm">
46-
<dt class="db prs">Size of Avg. Rule </dt>
47-
<dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
35+
<dl class="dib mr4">
36+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
37+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
4838
</dl>
49-
</div>
5039
</div>
51-
</div>
52-
<div class="phm phl-ns pvm">
53-
<p class="measure f3 lh-copy">
54-
When floats are used for layouts - they need a clearfix solution. This helps prevent
55-
layout problems caused by the elements being removed from the block context of the
56-
surrounding elements.
57-
</p>
58-
</div>
59-
</header>
60-
<main class="">
61-
<div class="phm phl-ns ptl pbxl">
40+
</article>
41+
<div class="ph3 ph5-ns pt4 pb5">
6242
<h2 class="f3 bold">Examples</h2>
6343
<h3 class="f4">Cleared Floats</h3>
6444
<p>
@@ -68,53 +48,44 @@ <h3 class="f4">Cleared Floats</h3>
6848
It should be noted you don't have to clear floated elements that are inside another floated element.
6949
</p>
7050
<div class="cf" style="outline: 8px solid red;">
71-
<div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
72-
<div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
51+
<div class="fl w-50 pv4" style="background: rgba(0,20,120,.6)"></div>
52+
<div class="fl w-50 pv4" style="background: rgba(0,50,80,.6)"></div>
7353
</div>
7454
<h3 class="f4">UnCleared Floats</h3>
7555
<div style="outline: 8px solid red;">
76-
<div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
77-
<div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
56+
<div class="fl w-50 pv4" style="background: rgba(0,20,120,.6)"></div>
57+
<div class="fl w-50 pv4" style="background: rgba(0,50,80,.6)"></div>
7858
</div>
7959

80-
<div class="mtxl cf">
81-
<div class="dib mrl">
82-
<h1 class="f4 ttu tracked semibold">Previous</h1>
83-
<a href="/docs/layout/floats/" class="link semibold blue dim">Floats</a>
60+
<div class="mt5 cf">
61+
<div class="dib mr4">
62+
<h1 class="f4 ttu tracked fw6">Previous</h1>
63+
<a href="/docs/layout/floats/" class="link fw6 blue dim">Floats</a>
8464
</div>
8565
<div class="dib">
86-
<h1 class="f4 ttu tracked semibold">Next</h1>
87-
<a href="/docs/layout/display/" class="link semibold blue dim">Display</a>
66+
<h1 class="f4 ttu tracked fw6">Next</h1>
67+
<a href="/docs/layout/display/" class="link fw6 blue dim">Display</a>
8868
</div>
8969
</div>
90-
<div class="mtxl">
91-
<h1 class="f4 ttu tracked semibold">Reference</h1>
92-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clears" class="link semibold blue dim">MDN - Clears</a>
70+
<div class="mt5">
71+
<h1 class="f4 ttu tracked fw6">Reference</h1>
72+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clears" class="link fw6 blue dim">MDN - Clears</a>
9373
</div>
9474
</div>
95-
<section class="bg-dark-gray white ptl pbxl">
96-
<header class="phm phl-ns ptl">
75+
<section class="bg-near-white black-70 pt4 pb5">
76+
<header class="ph3 ph5-ns pt4">
9777
<kbd class="yellow">src/_clearfix.css</kbd>
9878
</header>
99-
<pre class="phm phl-ns">
100-
<code class="small">
79+
<pre class="ph3 ph5-ns">
80+
<code class="code" style="font-size: .75rem;">
10181
<%= srcCSS %>
10282
</code>
10383
</pre>
10484
</section>
10585
<%= navDocs %>
10686
</main>
10787
<%= siteFooter %>
88+
<%= googleAnalytics %>
10889

109-
<script>
110-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
111-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
112-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
113-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
114-
115-
ga('create', 'UA-55773803-1', 'auto');
116-
ga('send', 'pageview');
117-
118-
</script>
11990
</body>
12091
</html>

‎src/templates/docs/display/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
119119
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" class="link fw6 blue dim">MDN - Box Sizing</a>
120120
</div>
121121
</div>
122-
<section class="bg-dark-gray white pt4 pb5">
122+
<section class="bg-near-white black-70 pt4 pb5">
123123
<header class="ph3 ph5-ns pt4">
124124
<kbd class="yellow">src/_display.css</kbd>
125125
</header>

‎src/templates/docs/floats/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
7676
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/floats" class="link fw6 blue dim">MDN - Floats</a>
7777
</div>
7878
</div>
79-
<section class="bg-dark-gray white pt4 pb5">
79+
<section class="bg-near-white black-70 pt4 pb5">
8080
<header class="ph3 ph5-ns pt4">
8181
<kbd class="yellow">src/_floats.css</kbd>
8282
</header>

0 commit comments

Comments
 (0)