Skip to content

Commit 5cb79c8

Browse files
hughskhughsk
committed
hooray content
1 parent cd64c31 commit 5cb79c8

File tree

10 files changed

+220
-5
lines changed

10 files changed

+220
-5
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules/*
33
node_modules/splash-*/node_modules
44
node_modules/splash-*/.gitignore
55
node_modules/splash-*/.npmignore
6+
build/*.json

‎build/.gitkeep

Whitespace-only changes.

‎data/examples.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Examples
2+
3+
To add a new example:
4+
5+
* Create a new level-two heading (`##`) in this file.
6+
* The heading should be a link pointing to the example.
7+
* Optionally, include a description of the example below the heading. This
8+
will be used if the example is featured.
9+
* Include the example's thumbnail as an image somewhere in the description.
10+
* To mark an example as *featured*, simply make its header italic (`*[like](this)*`).
11+
There should only be only featured example at any one time.
12+
13+
## *[shader-school](http://github.com/gl-modules/shader-school)*
14+
15+
![shader-school](http://imgur.com/hegi9dZ.png)
16+
17+
An introduction to GLSL shaders and graphics programming that runs in your
18+
browser. **shader-school** is a [NodeSchool workshop](http://nodeschool.io/)
19+
originally created for [NodeConf 2014](http://nodeconf.com/). Everything is
20+
powered by browserify, glslify and modules from the stackgl ecosystem under
21+
the hood.
22+
23+
## [run.south.im](http://run.south.im/)
24+
25+
![run.south.im](http://imgur.com/kZjW5QD.png)
26+
27+
## [nodesource.com](http://nodesource.com/)
28+
29+
![nodesource.com](http://imgur.com/tCKuJfx.png)
30+
31+
## [voxel-mipmap-demo](https://github.com/mikolalysenko/voxel-mipmap-demo/)
32+
33+
![voxel-mipmap-demo](http://imgur.com/9eUBmfB.png)
34+
35+
## [raymarch](https://github.com/mikolalysenko/raymarch/)
36+
37+
![raymarch](http://imgur.com/NpvsXIH.png)
38+
39+
## [particle-excess-demo](https://github.com/hughsk/particle-excess-demo/)
40+
41+
![particle-excess-demo](http://imgur.com/YyrtLqM.png)
42+
43+
## [web-audio-analyser](https://github.com/hughsk/web-audio-analyser/)
44+
45+
![web-audio-analyser](http://imgur.com/xhPfMFP.png)

‎data/regenerate.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var tree = require('markdown-tree')
2+
var cheerio = require('cheerio')
3+
var marked = require('marked')
4+
var path = require('path')
5+
var fs = require('fs')
6+
7+
var examples = tree(
8+
fs.readFileSync(path.join(__dirname, 'examples.md'), 'utf8')
9+
).children[0]
10+
.children
11+
.map(function(example, i) {
12+
var tokens = example.tokens.slice()
13+
tokens.links = {}
14+
15+
var thumb = null
16+
var $ = cheerio.load(
17+
marked.Parser.parse(tokens)
18+
)
19+
20+
$('img').each(function(i, img) {
21+
var $img = $(img)
22+
thumb = $img.attr('src')
23+
$img.parent().remove()
24+
})
25+
26+
var html = $.html()
27+
var head = cheerio.load(marked(example.text))
28+
var link = head('a')
29+
var feat = !!head('em').length
30+
31+
return {
32+
name: link.text()
33+
, link: link.attr('href')
34+
, desc: feat && html.trim() || ''
35+
, thumb: thumb
36+
, featured: feat
37+
, i: i
38+
}
39+
})
40+
.sort(function(a, b) {
41+
if (a.featured) return -1
42+
if (b.featured) return +1
43+
return a.i - b.i
44+
})
45+
46+
fs.writeFileSync(__dirname + '/../build/examples.json'
47+
, JSON.stringify(examples, null, 2)
48+
)

‎index.css

+59
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q
44
dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px
55
solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
66

7+
.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}
8+
79
/**
810
* General
911
*/
@@ -30,6 +32,7 @@ h1, h2, h3, h4, h5, h6 {
3032
}
3133

3234
h1 { font-size: 2.5em; }
35+
h2 { font-size: 2.2em; }
3336
h1 .lighter {
3437
color: #A9B0C2;
3538
}
@@ -70,3 +73,59 @@ h1 .lighter {
7073
#splash canvas {
7174
z-index: 1;
7275
}
76+
77+
/**
78+
* Section Layout
79+
*/
80+
.section {
81+
padding: 2em;
82+
color: #A9B0C2;
83+
}
84+
85+
.section h2 {
86+
color: #4A4F5E;
87+
border-bottom: 1px dotted #DEE7FF;
88+
margin-bottom: 16px;
89+
line-height: 2em;
90+
}
91+
92+
.thumb-list {
93+
list-style-type: none;
94+
margin-left: -1em;
95+
}
96+
97+
.thumb h1 {
98+
font-size: 1em;
99+
font-weight: 300;
100+
padding-top: 1em;
101+
padding-bottom: 0.5em;
102+
color: #4A4F5E;
103+
}
104+
105+
.thumb-image {
106+
width: 100%;
107+
height: 175px;
108+
border-radius: 3px;
109+
background-size: cover;
110+
background-position: 50% 50%;
111+
}
112+
113+
.featured .thumb-image {
114+
height: 383px;
115+
height: 422px;
116+
}
117+
118+
.thumb {
119+
width: 175px;
120+
margin: 1em;
121+
float: left;
122+
}
123+
124+
.thumb.featured {
125+
width: 383px;
126+
}
127+
128+
.thumb.featured .desc {
129+
font-size: 0.8em;
130+
line-height: 1.5em;
131+
}

‎index.html

+19-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ <h1>#stack<span class="lighter">gl</span></h1>
1717
<ul><!--
1818
--><li><a href="#examples">examples</a> / </li><!--
1919
--><li><a href="#modules">modules</a> / </li><!--
20-
--><li><a href="#">community</a></li><!--
20+
--><li><a href="#community">community</a> / </li><!--
21+
--><li><a href="#getting-started">getting started</a></li><!--
2122
--></ul>
2223
</header>
2324

@@ -32,6 +33,23 @@ <h1>#stack<span class="lighter">gl</span></h1>
3233

3334
<canvas></canvas>
3435
</section>
36+
37+
<section id="examples" class="section cf">
38+
<h2>examples &amp; demos</h2>
39+
<ul class="thumb-list"></ul>
40+
</section>
41+
42+
<section id="modules" class="section cf">
43+
<h2>modules</h2>
44+
</section>
45+
46+
<section id="community" class="section cf">
47+
<h2>community</h2>
48+
</section>
49+
50+
<section id="getting-started" class="section cf">
51+
<h2>getting-started</h2>
52+
</section>
3553
</div>
3654
<script charset="utf-8" src="/bundle.js"></script>
3755
</body>

‎index.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
1-
var slice = require('sliced')
2-
var splash = document.getElementById('splash')
3-
var canvas = splash.querySelector('canvas')
1+
var splash = document.getElementById('splash')
2+
var canvas = splash.querySelector('canvas')
3+
var minstache = require('minstache')
4+
var domify = require('domify')
5+
var slice = require('sliced')
6+
var fs = require('fs')
47

58
require('./lib/fill')(document.querySelectorAll('[data-fill]'))
69
require('splash-grid')(canvas)
10+
11+
var thumb = minstache.compile(fs.readFileSync(
12+
__dirname + '/lib/thumb.html'
13+
, 'utf8'))
14+
15+
var examples = require('./build/examples.json').map(function(meta) {
16+
return thumb(meta)
17+
}).join('\n')
18+
19+
document
20+
.getElementById('examples')
21+
.querySelector('ul')
22+
.appendChild(domify(examples))

‎lib/fill.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function fill(elements) {
1616
for (var i = 0; i < elements.length; i++) {
1717
var s = elements[i].style
1818
s.width = width
19-
s.height = height
19+
s.minHeight = height
2020
}
2121
}
2222
}

‎lib/thumb.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<li class="thumb {{#featured}}featured{{/featured}}">
2+
<figure>
3+
<a href="{{link}}" title="{{name}}" target="_blank">
4+
<div class="thumb-image" style="background-image:url(http://github.com/%7B%7Bthumb%7D%7D)"></div>
5+
</a>
6+
<figcaption>
7+
<a href="{{link}}" title="{{name}}" target="_blank">
8+
<h1>{{name}}</h1>
9+
</a>
10+
<div class="desc">
11+
{{#featured}}
12+
{{!desc}}
13+
{{/featured}}
14+
</div>
15+
</figcaption>
16+
</figure>
17+
</li>

‎package.json

+11
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,20 @@
55
"main": "index.js",
66
"private": true,
77
"dependencies": {
8+
"brfs": "^1.1.2",
9+
"cheerio": "^0.17.0",
10+
"domify": "^1.3.0",
811
"frame-debounce": "0.0.0",
12+
"markdown-tree": "0.0.0",
13+
"marked": "^0.3.2",
14+
"minstache": "^1.2.0",
915
"sliced": "0.0.5"
1016
},
17+
"browserify": {
18+
"transform": [
19+
"brfs"
20+
]
21+
},
1122
"bundledDependencies": [
1223
"splash-grid"
1324
],

0 commit comments

Comments
 (0)