Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/README.md

Last active August 29, 2015 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/0227f7c8edb663989e96 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/0227f7c8edb663989e96 to your computer and use it in GitHub Desktop.
Download ZIP
Creating styled, classed, and id'ed containers for Webpage using a YAML manifest that d3 iterates over
Raw
README.md

What do you know about your webpage?

Often webpages are built with an initial idea, but we start from coding from naught.

This gist allows a webpage to be written as a yaml manifest. d3 tree structures inspire the manifest syntax.

Keywords

root

type: document
script: # Load external scripts
- underscore.min.js
- bootstrap.min.js
stylesheet: # Load style sheets
- bootstrap.min.css
children: ....

children

Still need to add templating

templates

children:
- type: text
  template: # null template will not show content or children
  {content}/{children}: 
  - ...
  
- type: text
  template:
  # Execute javascript on content or children
  - type: 'application/javascript'
  - src: 'main.js'
  {content}/{children}: 
  - ...
Raw
index.html
<head>
<script src="//cdn.jsdelivr.net/g/d3js,coffeescript,handlebarsjs(handlebars.min.js)">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.2.6/js-yaml.min.js"></script>
</head>
<body>
<script type="text/coffeescript">
autofill = ( d, s) ->
#{ autofill class, attr, and style from a yaml list }
if d.hasOwnProperty('class')
d['class'].forEach (c) ->
s.classed c, true
if d.hasOwnProperty('id')
s.attr 'id', d['id']
if d.hasOwnProperty('style')
d['style'].forEach (d) ->
if typeof d == 'object'
s.style d3.keys(d)[0], d3.values(d)[0]
if d.hasOwnProperty('attr')
d['attr'].forEach (d) ->
if typeof d == 'object'
s.attr d3.keys(d)[0], d3.values(d)[0]
d3.text 'manifest.yaml', (yml) ->
yml = jsyaml.load yml
traverse = (a) ->
#{ Allows d3 to bind tree indices instead of entire child element }
a.reduce (p,n,i) ->
if (i == 0)
p[n]
else
p['children'][n]
, yml
init = () ->
if yml[0]['stylesheet']
yml[0]['stylesheet'].forEach (url) ->
d3.select 'head'
.append 'link'
.attr 'rel', 'stylesheet'
.attr 'type', 'text/css'
.attr 'href', url
if yml[0]['script']
yml[0]['script'].forEach (url) ->
d3.select 'head'
.append 'script'
.attr 'src', url
templater = ( d, $el) ->
d['template'].forEach (_d,i) ->
if _d['type'] == 'text/x-handlebars-template'
template = d3.select _d['selector']
.html()
template = Handlebars.compile(template)
d3.select $el
.append 'div'
.call (s) ->
autofill( _d, s)
.html () ->
template d
create = ( $el, i , depth) ->
d = traverse( i )
n = d3
.select $el
.append 'div' #{add a new container}
.datum i
.call (s) ->
autofill d, s
n.call (s) ->
if d.hasOwnProperty( 'template' ) && d['template'] == null
#{ don't do anything }
console.log d, ' has been ignored'
else if d.hasOwnProperty( 'template' )
#{ custom template }
templater( d, s.node() )
else
if d.hasOwnProperty( 'children' )
#{ temporary template }
s.append 'h' + ( depth + 1 )
.text d.heading
d3.range d['children'].length
.forEach (_i) ->
create s.node(), d3.merge( [i, [_i]] ) , depth++
else
s.append 'h' + ( depth + 1 )
.text d.heading
s.append 'p'
.text d.content
init()
create 'body', [0], 0
</script>
</body>
<script id="template" type="text/x-handlebars-template">
<div class="panel-heading">This is a template</div>
<div class="panel-body">{{heading}}</div>
<ul>
{{#each content}}
<li>{{heading}}</li>
{{/each}}
</ul>
</script>
<script id="template2" type="text/x-handlebars-template">
<div class="panel-heading">This is a template</div>
<div class="panel-body">{{heading}}</div>
<ul>
{{#each content}}
<li>{{content}}</li>
{{/each}}
</ul>
</script>
Raw
manifest.yaml
- heading: document
stylesheet:
- 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'
class:
- main
children:
- heading: HEAD
children:
# If the first entry is a template then use a custom thin
- heading: Authors
type: text
id: Authors
template:
- type: text/x-handlebars-template
selector: '#template'
class:
- panel
- panel-primary
- type: text/x-handlebars-template
selector: '#template2'
class:
- panel
- panel-warning
content:
- heading: tonyfast
content: stuff
- heading: rebelyellow
content: stuff
- heading: lildirty
content: stuff
- heading: Title of the Article
type: text
content: |
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
id: abstract
- heading: BODY
class:
- coarse
children:
- heading: Section 1
type: text
content: |
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
- heading: Section 2
type: text
content: |
Eu sed molestie signiferumque, quo ei odio deleniti adolescens, eu eligendi mnesarchum est. Vide homero putant id vis, his te nihil suavitate. Cum an maiorum iudicabit imperdiet, saepe indoctum sea ne. Et nonumes sensibus eum, mel habeo everti in. Ea audire prompta fabellas per. An ornatus scaevola patrioque sit, his ullum suscipiantur id.
- heading: Section 3
type: text
content: |
Est dolore offendit qualisque te, vivendo officiis iudicabit usu et, ex munere partem propriae nec. Ad duo movet mundi. Pri mucius noluisse mediocritatem id. No tincidunt voluptatum est, suas euripidis est an. Ex malis tritani dissentias pri, integre mentitum prodesset an his.
- heading: Picture 1
type: image
content:
url: 'blank.jpg'
caption: Caption
- heading: Section 4
type: text
content: |
Lorem Ipsums
- heading: FOOTER
class:
- coarse
children:
- heading: References
type: array
content:
- type: link
content:
- type: article
- type: repository
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment