Skip to content

Commit ea2d319

Browse files
johnojohno
committed
Dynamically generate component navigation
1 parent c10f885 commit ea2d319

File tree

7 files changed

+125
-6
lines changed

7 files changed

+125
-6
lines changed

‎components/articles/title-text-image/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -130,14 +130,34 @@ <h2 class="f5 mt5">Modules</h2>
130130

131131

132132

133-
134133
<h4 class="mt5">Install these modules via npm</h4>
135134
<code>npm i --save tachyons-line-height tachyons-widths tachyons-spacing tachyons-type-scale tachyons-typography</code>
136135
</section>
137136
</main>
138137

139138

140139

140+
141+
articles<br>
142+
143+
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
144+
145+
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
146+
147+
148+
forms<br>
149+
150+
<a href="/components/forms/sign_in/1/index.html">Forms Sign In 1</a><br>
151+
152+
<a href="/components/forms/sign_up/1/index.html">Forms Sign Up 1</a><br>
153+
154+
155+
layout<br>
156+
157+
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
158+
159+
160+
141161
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
142162
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
143163
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">

‎components/articles/title-text/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,34 @@ <h2 class="f5 mt5">Modules</h2>
112112

113113

114114

115-
116115
<h4 class="mt5">Install these modules via npm</h4>
117116
<code>npm i --save tachyons-line-height tachyons-spacing tachyons-typography</code>
118117
</section>
119118
</main>
120119

121120

122121

122+
123+
articles<br>
124+
125+
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
126+
127+
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
128+
129+
130+
forms<br>
131+
132+
<a href="/components/forms/sign_in/1/index.html">Forms Sign In 1</a><br>
133+
134+
<a href="/components/forms/sign_up/1/index.html">Forms Sign Up 1</a><br>
135+
136+
137+
layout<br>
138+
139+
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
140+
141+
142+
123143
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
124144
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
125145
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">

‎components/forms/sign_in/1/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -380,14 +380,34 @@ <h2 class="f5 mt5">Modules</h2>
380380

381381

382382

383-
384383
<h4 class="mt5">Install these modules via npm</h4>
385384
<code>npm i --save tachyons-borders tachyons-border-colors tachyons-display tachyons-font-weight tachyons-forms tachyons-letter-spacing tachyons-links tachyons-widths tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-utilities tachyons-vertical-align tachyons-hovers tachyons-max-widths</code>
386385
</section>
387386
</main>
388387

389388

390389

390+
391+
articles<br>
392+
393+
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
394+
395+
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
396+
397+
398+
forms<br>
399+
400+
<a href="/components/forms/sign_in/1/index.html">Forms Sign In 1</a><br>
401+
402+
<a href="/components/forms/sign_up/1/index.html">Forms Sign Up 1</a><br>
403+
404+
405+
layout<br>
406+
407+
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
408+
409+
410+
391411
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
392412
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
393413
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">

‎components/forms/sign_up/1/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -321,14 +321,34 @@ <h2 class="f5 mt5">Modules</h2>
321321

322322

323323

324-
325324
<h4 class="mt5">Install these modules via npm</h4>
326325
<code>npm i --save tachyons-borders tachyons-border-colors tachyons-display tachyons-letter-spacing tachyons-line-height tachyons-links tachyons-max-widths tachyons-widths tachyons-skins tachyons-text-transform tachyons-type-scale tachyons-typography tachyons-utilities tachyons-hovers</code>
327326
</section>
328327
</main>
329328

330329

331330

331+
332+
articles<br>
333+
334+
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
335+
336+
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
337+
338+
339+
forms<br>
340+
341+
<a href="/components/forms/sign_in/1/index.html">Forms Sign In 1</a><br>
342+
343+
<a href="/components/forms/sign_up/1/index.html">Forms Sign Up 1</a><br>
344+
345+
346+
layout<br>
347+
348+
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
349+
350+
351+
332352
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
333353
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
334354
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">

‎components/layout/flag-object/index.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -138,14 +138,34 @@ <h2 class="f5 mt5">Modules</h2>
138138

139139

140140

141-
142141
<h4 class="mt5">Install these modules via npm</h4>
143142
<code>npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align</code>
144143
</section>
145144
</main>
146145

147146

148147

148+
149+
articles<br>
150+
151+
<a href="/components/articles/title-text-image/index.html">Articles Title Text Image</a><br>
152+
153+
<a href="/components/articles/title-text/index.html">Articles Title Text</a><br>
154+
155+
156+
forms<br>
157+
158+
<a href="/components/forms/sign_in/1/index.html">Forms Sign In 1</a><br>
159+
160+
<a href="/components/forms/sign_up/1/index.html">Forms Sign Up 1</a><br>
161+
162+
163+
layout<br>
164+
165+
<a href="/components/layout/flag-object/index.html">Layout Flag Object</a><br>
166+
167+
168+
149169
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
150170
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
151171
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">

‎src/components-build.js

+13
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,18 @@ module.exports = function () {
2929

3030
var template = fs.readFileSync('src/templates/components.html', 'utf8')
3131

32+
var componentsForNav = {}
33+
components.map(function (component) {
34+
var componentTokens = component.replace('src/components/', '').split('/')
35+
var category = componentTokens[0]
36+
37+
componentsForNav[category] = componentsForNav[category] || []
38+
componentsForNav[category].push({
39+
href: component.replace('src', '').replace('.html', '') + '/index.html',
40+
name: getTitle(component)
41+
})
42+
})
43+
3244
components.forEach(function (component) {
3345
var newDir = rmHtmlExt(component.replace('src/', ''))
3446
var newFile = newDir + '/index.html'
@@ -47,6 +59,7 @@ module.exports = function () {
4759
frontMatter.footer = fs.readFileSync('src/templates/footer.html', 'utf8')
4860
frontMatter.analytics = fs.readFileSync('src/templates/ga.html', 'utf8')
4961
frontMatter.head = fs.readFileSync('src/templates/head.html', 'utf8')
62+
frontMatter.componentsForNav = componentsForNav
5063

5164
var moduleSrcs = {}
5265
var getModules = postcss.plugin('get-modules', function () {

‎src/templates/components.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ <h2 class="f5 mt5">Modules</h2>
4444
<li class="fl w-100 w-50-m w-33-ns"><a class="f6 link dim blue fw6" href="https://github.com/tachyons-css/<%= module %>"><%= module %></a></li>
4545
<% } %>
4646

47-
4847
<h4 class="mt5">Install these modules via npm</h4>
4948
<code>npm i --save <%= modules.join(' ') %></code>
5049
</section>
@@ -54,6 +53,13 @@ <h4 class="mt5">Install these modules via npm</h4>
5453
<li><%= klass %></li>
5554
<% } %>
5655

56+
<% Object.keys(componentsForNav).map(function(category) { %>
57+
<%= category %><br>
58+
<% componentsForNav[category].map(function(componentForNav) { %>
59+
<a href="<%= componentForNav.href %>"><%= componentForNav.name %></a><br>
60+
<% }) %>
61+
<% }) %>
62+
5763
<%= footer %>
5864
<%= analytics %>
5965
</body>

0 commit comments

Comments
 (0)