put page specific styles and scripts in _data.json files

This commit is contained in:
Sami Samhuri 2014-02-15 21:09:30 -08:00
parent 9558ee8f91
commit 7479e8f13d
11 changed files with 249 additions and 206 deletions

View file

@ -3,8 +3,6 @@
"site": "samhuri.net",
"author": "Sami Samhuri",
"email": "sami@samhuri.net",
"url": "http://samhuri.net",
"styles": [],
"scripts": []
"url": "http://samhuri.net"
}
}

View file

@ -2,6 +2,12 @@
"title": "samhuri.net",
"subtitle": "words mean things",
"url": "http://samhuri.net",
"styles": [
"/css/style.css"
],
"scripts": [
],
"latest": {
"title": "Structure of an Ember app",
"date": "February 3, 2014",

View file

@ -1,22 +1,61 @@
<!doctype html>
<html lang="en">
<% allScripts = [] -%>
<% allStyles = [] -%>
<% var ctx = public -%>
<% var n = current.path.length -%>
<% for (var i in current.path) { -%>
<% var path = current.path[i] -%>
<% if (ctx._data) { -%>
<% if (ctx._data.scripts || ctx._data._scripts) { -%>
<% allScripts = allScripts.concat(ctx._data.scripts || ctx._data._scripts) -%>
<% } -%>
<% if (ctx._data.styles || ctx._data._styles) { -%>
<% allStyles = allStyles.concat(ctx._data.styles || ctx._data._styles) -%>
<% } -%>
<% if (ctx._data[path] && ctx._data[path].scripts) { -%>
<% allScripts = allScripts.concat(ctx._data[path].scripts) -%>
<% } -%>
<% if (ctx._data[path] && ctx._data[path].styles) { -%>
<% allStyles = allStyles.concat(ctx._data[path].styles) -%>
<% } -%>
<% } -%>
<% ctx = ctx[path] -%>
<% } -%>
<head>
<% if (typeof title != 'undefined') { %>
<title><%= title %> - <%= site %></title>
<% } else { %>
<title><%= site %></title>
<% } %>
<% if (typeof title != 'undefined') { -%>
<title><%= title %> - <%= site %></title>
<% } else { -%>
<title><%= site %></title>
<% } -%>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/gif" href="/images/s.gif">
<link rel="stylesheet" href="/css/style.css">
<% for (var i in styles) { %>
<link rel="stylesheet" href="/css/<%= styles[i] %>.css">
<% } %>
<% for (var i in allStyles) { -%>
<link rel="stylesheet" href="<%= allStyles[i] %>">
<% } -%>
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="<%= site %>">
<script>
if (typeof console === 'undefined') {
console = { log: function() {} }
}
window.SJS = {
ready: function(fn) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn, false)
} else if (window.attachEvent) {
window.attachEvent('onload', fn)
}
}
}
</script>
</head>
<body>
@ -26,10 +65,10 @@
</header>
<nav>
<a href="/archive">posts</a>
<a href="/archive">archive</a>
<a href="/projects">projects</a>
<a href="/feed.xml">rss feed</a>
<a href="https://twitter.com/_sjs">twitter</a>
<a href="mailto:<%= email %>"><%= email %></a>
</nav>
<%- yield %>
@ -38,9 +77,9 @@
Copyright &copy; 2006 - <%= new Date().getFullYear() %> <a href="mailto:<%= email %>"><%= author %></a>
</footer>
<% for (var i in scripts) { %>
<script src="/js/<%= scripts[i] %>.js"></script>
<% } %>
<% for (var i in allScripts) { -%>
<script src="<%= allScripts[i] %>"></script>
<% } -%>
<script>
var _gaq = _gaq || []

View file

@ -1,9 +1,10 @@
<ul id="index">
<% for (var slug in public.posts._data) { %>
<% var post = public.posts._data[slug]; %>
<li>
<span class="date"><%= post.date %></span>
<a href="<%= post.url %>"><%= post.title %></a>
</li>
<% } %>
<% for (var slug in public.posts._data) { %>
<% var post = public.posts._data[slug] %>
<% if (slug == 'index' || slug[0] == '_' || post.hidden) continue %>
<li>
<span class="date"><%= post.date %></span>
<a href="<%= post.url %>"><%= post.title %></a>
</li>
<% } %>
</ul>

View file

@ -100,7 +100,7 @@
input[type=submit] { font-size: 1em }
/* proj */
/* projects */
#info { width: 70%
; padding: 0 1em
}

View file

@ -49,3 +49,17 @@ h4 { margin: 0.5em 0 0.7em }
#info > br.clear { clear: both }
#contributors-box a { line-height: 1.8em }
/* from projects/index, might not apply to projects/foo */
#gh { text-align: center }
#gh img { border: none }
span { padding: 5px }
#forkme { display: none }
#projects li p { margin: 0 }
#projects li p.description
{ font-size: 0.6em
; line-height: 1em
; color: #444
; margin-bottom: 0.5em
}
#stats a { text-decoration: none }

View file

@ -1,137 +1,131 @@
;(function() {
if (typeof console === 'undefined') {
console = {log:function(){}}
if (SJS.projectName) {
SJS.ready(initProject)
}
var global = this
global.SJS = {
proj: function(name) {
SJS.projName = name
var data = createObjectStore(name)
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', ready, false)
} else if (window.attachEvent) {
window.attachEvent('onload', ready)
function initProject() {
var data = createObjectStore(SJS.projectName)
function addClass(el, name) {
var c = el.className || name
if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
}
function html(id, h) {
document.getElementById(id).innerHTML = h
}
var body = document.getElementsByTagName('body')[0]
, text
if ('innerText' in body) {
text = function(id, text) {
document.getElementById(id).innerText = text
}
function ready() {
function addClass(el, name) {
var c = el.className || name
if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
}
function html(id, h) {
document.getElementById(id).innerHTML = h
}
var body = document.getElementsByTagName('body')[0]
, text
if ('innerText' in body) {
text = function(id, text) {
document.getElementById(id).innerText = text
}
} else {
text = function(id, text) {
document.getElementById(id).textContent = text
}
}
function highlight(id) {
document.getElementById(id).style.className = ' highlight'
}
function textHighlight(id, t) {
text(id, t)
document.getElementById(id).className = ' highlight'
}
function hide(id) {
document.getElementById(id).style.display = 'none'
}
function langsByUsage(langs) {
return Object.keys(langs).sort(function(a, b) {
return langs[a] < langs[b] ? -1 : 1
})
}
function listify(things) {
return '<ul><li>' + things.join('</li><li>') + '</li></ul>'
}
function updateBranches(name, branches) {
function branchLink(b) {
return '<a href=https://github.com/samsonjs/' + name + '/tree/' + b.name + '>' + b.name + '</a>'
}
html('branches', listify(branches.map(branchLink)))
}
function updateContributors(contributors) {
function userLink(u) {
return '<a href=https://github.com/' + u.login + '>' + (u.name || u.login) + '</a>'
}
html('contributors', listify(contributors.map(userLink)))
}
function updateLangs(langs) {
html('langs', listify(langsByUsage(langs)))
}
function updateN(name, things) {
textHighlight('n' + name, things.length)
if (things.length === 1) hide(name.charAt(0) + 'plural')
}
var t = data.get('t-' + name)
if (!t || +new Date() - t > 3600 * 1000) {
console.log('stale ' + String(t))
data.set('t-' + name, +new Date())
GITR.repo('samsonjs', name)
.fetchBranches(function(err, branches) {
if (err) {
text('branches', '(oops)')
} else {
data.set('branches', branches)
updateBranches(name, branches)
}
})
.fetchLanguages(function(err, langs) {
if (err) {
text('langs', '(oops)')
return
}
data.set('langs', langs)
updateLangs(langs)
})
.fetchContributors(function(err, users) {
if (err) {
text('contributors', '(oops)')
} else {
data.set('contributors', users)
updateContributors(users)
}
})
.fetchWatchers(function(err, users) {
if (err) {
text('nwatchers', '?')
} else {
data.set('watchers', users)
updateN('watchers', users)
}
})
.fetchForks(function(err, repos) {
if (err) {
text('nforks', '?')
} else {
data.set('forks', repos)
updateN('forks', repos)
}
})
} else {
console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
updateBranches(name, data.get('branches'))
updateLangs(data.get('langs'))
updateContributors(data.get('contributors'))
updateN('watchers', data.get('watchers'))
updateN('forks', data.get('forks'))
}
} else {
text = function(id, text) {
document.getElementById(id).textContent = text
}
}
function highlight(id) {
document.getElementById(id).style.className = ' highlight'
}
function textHighlight(id, t) {
text(id, t)
document.getElementById(id).className = ' highlight'
}
function hide(id) {
document.getElementById(id).style.display = 'none'
}
function langsByUsage(langs) {
return Object.keys(langs).sort(function(a, b) {
return langs[a] < langs[b] ? -1 : 1
})
}
function listify(things) {
return '<ul><li>' + things.join('</li><li>') + '</li></ul>'
}
function updateBranches(name, branches) {
function branchLink(b) {
return '<a href=https://github.com/samsonjs/' + name + '/tree/' + b.name + '>' + b.name + '</a>'
}
html('branches', listify(branches.map(branchLink)))
}
function updateContributors(contributors) {
function userLink(u) {
return '<a href=https://github.com/' + u.login + '>' + (u.name || u.login) + '</a>'
}
html('contributors', listify(contributors.map(userLink)))
}
function updateLangs(langs) {
html('langs', listify(langsByUsage(langs)))
}
function updateN(name, things) {
var pluralized = things.length == 1 ? name.replace(/s$/, '') : name
textHighlight('n' + name, things.length + ' ' + name)
}
var t = data.get('t-' + SJS.projectName)
if (!t || +new Date() - t > 3600 * 1000) {
console.log('stale ' + String(t))
data.set('t-' + SJS.projectName, +new Date())
GITR.repo('samsonjs', SJS.projectName)
.fetchBranches(function(err, branches) {
if (err) {
text('branches', '(oops)')
} else {
data.set('branches', branches)
updateBranches(SJS.projectName, branches)
}
})
.fetchLanguages(function(err, langs) {
if (err) {
text('langs', '(oops)')
return
}
data.set('langs', langs)
updateLangs(langs)
})
.fetchContributors(function(err, users) {
if (err) {
text('contributors', '(oops)')
} else {
data.set('contributors', users)
updateContributors(users)
}
})
.fetchWatchers(function(err, users) {
if (err) {
text('nwatchers', '?')
} else {
data.set('watchers', users)
updateN('watchers', users)
}
})
.fetchForks(function(err, repos) {
if (err) {
text('nforks', '?')
} else {
data.set('forks', repos)
updateN('forks', repos)
}
})
} else {
console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
updateBranches(SJS.projectName, data.get('branches'))
updateLangs(data.get('langs'))
updateContributors(data.get('contributors'))
updateN('watchers', data.get('watchers'))
updateN('forks', data.get('forks'))
}
}
}());

View file

@ -1,7 +1,6 @@
;(function() {
var global = this
if (typeof localStorage !== 'undefined') {
global.createObjectStore = function(namespace) {
window.createObjectStore = function(namespace) {
function makeKey(k) {
return '--' + namespace + '-' + (k || '')
}
@ -34,10 +33,10 @@
}
}
}
global.ObjectStore = createObjectStore('default')
window.ObjectStore = createObjectStore('default')
} else {
// Create an in-memory store, should probably fall back to cookies
global.createObjectStore = function() {
window.createObjectStore = function() {
var store = {}
return {
clear: function() { store = {} },
@ -46,6 +45,6 @@
remove: function(key) { delete store[key] }
}
}
global.ObjectStore = createObjectStore()
window.ObjectStore = createObjectStore()
}
}());
}());

View file

@ -1,4 +1,13 @@
{
"_styles": [
"/css/projects.css"
],
"_scripts": [
"http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js",
"/js/gitter.js",
"/js/store.js",
"/js/projects.js"
],
"strftime": {
"title": "strftime",
"description": "strftime for JavaScript"
@ -27,6 +36,11 @@
"title": "samhuri.net",
"description": "this site"
},
"samhuri": {
"hidden": true,
"title": "samhuri.net",
"description": "this site"
},
"ThePusher": {
"title": "ThePusher",
"description": "Github post receive hook router"
@ -39,6 +53,11 @@
"title": "mojo.el",
"description": "turn emacs into a sweet mojo editor"
},
"mojo": {
"hidden": true,
"title": "mojo.el",
"description": "turn emacs into a sweet mojo editor"
},
"NorthWatcher": {
"title": "NorthWatcher",
"description": "cron for filesystem changes"
@ -54,5 +73,10 @@
"cheat.el": {
"title": "cheat.el",
"description": "cheat from emacs"
},
"cheat": {
"hidden": true,
"title": "cheat.el",
"description": "cheat from emacs"
}
}

View file

@ -1,18 +1,15 @@
<!-- TODO: move to _data.json somehow -->
<link rel="stylesheet" href="/css/projects.css">
<a href="https://github.com/samsonjs/<%= title %>"><img id="forkme" src="/images/forkme@2x.png" width="140" height="140" alt="Fork me on GitHub"></a>
<h1><%= title %></h1>
<h2><%= description %></h2>
<table align="center" id="stats">
<tr>
<td align="right">
<span id="nwatchers"></span> watcher<span id="wplural">s</span>
<span id="nwatchers"></span>
</td>
<td>&mdash;</td>
<td align="left">
<a href="https://github.com/samsonjs/<%= title %>/network/members">
<span id="nforks"></span> fork<span id="fplural">s</span>
<span id="nforks"></span>
</a>
</td>
</tr>
@ -38,11 +35,6 @@
<script src="/js/storage-polyfill.js"></script>
<![endif]-->
<!-- TODO: move to _data.json somehow -->
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script src="/js/gitter.js"></script>
<script src="/js/store.js"></script>
<script src="/js/projects.js"></script>
<script>
SJS.proj('<%= title %>')
SJS.projectName = '<%= title %>'
</script>

View file

@ -1,5 +1,3 @@
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/projects.css">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css">
<![endif]-->
@ -8,20 +6,6 @@
<script src="http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js"></script>
<script src="/js/storage-polyfill.js"></script>
<![endif]-->
<style>
#gh { text-align: center }
#gh img { border: none }
span { padding: 5px }
#forkme { display: none }
#projects li p { margin: 0 }
#projects li p.description
{ font-size: 0.6em
; line-height: 1em
; color: #444
; margin-bottom: 0.5em
}
#stats a { text-decoration: none }
</style>
<a href="https://github.com/samsonjs"><img id="forkme" src="/images/forkme@2x.png" width="140" height="140" alt="Fork me on GitHub"></a>
@ -60,31 +44,23 @@
</table>
<nav>
<ul class="nav" id="projects">
<% for (var name in public.projects._data) { %>
<% var proj = public.projects._data[name]; %>
<% for (var name in public.projects._data) { %>
<% var project = public.projects._data[name] %>
<% if (name == 'index' || name[0] == '_' || project.hidden) continue %>
<li>
<p class="title"><a href="<%= name %>"><%= name %></a></p>
<p class="description"><%= proj.description %></p>
<p class="description"><%= project.description %></p>
</li>
<% } %>
<% } %>
</ul>
</nav>
<script src="/js/gitter.js"></script>
<script src="/js/store.js"></script>
<script>
if (typeof console === 'undefined') {
console = { log: function() {} }
}
;(function() {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', ready, false)
} else if (window.attachEvent) {
window.attachEvent('onload', ready)
}
function ready() {
SJS.ready(initProjects)
function initProjects() {
function addClass(el, name) {
var c = el.className || name
if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
@ -113,13 +89,13 @@
textHighlight('n' + name, things)
}
var data = createObjectStore('proj')
, t = data.get('t-proj')
var data = createObjectStore('projects')
, t = data.get('t-projects')
, user = GITR.user('samsonjs')
, names = ['followers', 'following', 'publicRepos', 'publicGists']
if (!t || +new Date() - t > 3600 * 1000) {
console.log('stale ' + String(t))
data.set('t-proj', +new Date())
data.set('t-projects', +new Date())
user.fetch(function(err, user) {
if (user) {
data.set('user', user)