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", "site": "samhuri.net",
"author": "Sami Samhuri", "author": "Sami Samhuri",
"email": "sami@samhuri.net", "email": "sami@samhuri.net",
"url": "http://samhuri.net", "url": "http://samhuri.net"
"styles": [],
"scripts": []
} }
} }

View file

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

View file

@ -1,22 +1,61 @@
<!doctype html> <!doctype html>
<html lang="en"> <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> <head>
<% if (typeof title != 'undefined') { %> <% if (typeof title != 'undefined') { -%>
<title><%= title %> - <%= site %></title> <title><%= title %> - <%= site %></title>
<% } else { %> <% } else { -%>
<title><%= site %></title> <title><%= site %></title>
<% } %> <% } -%>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="icon" type="image/gif" href="/images/s.gif"> <link rel="icon" type="image/gif" href="/images/s.gif">
<link rel="stylesheet" href="/css/style.css">
<% for (var i in styles) { %> <% for (var i in allStyles) { -%>
<link rel="stylesheet" href="/css/<%= styles[i] %>.css"> <link rel="stylesheet" href="<%= allStyles[i] %>">
<% } %> <% } -%>
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="<%= site %>"> <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> </head>
<body> <body>
@ -26,10 +65,10 @@
</header> </header>
<nav> <nav>
<a href="/archive">posts</a> <a href="/archive">archive</a>
<a href="/projects">projects</a> <a href="/projects">projects</a>
<a href="/feed.xml">rss feed</a>
<a href="https://twitter.com/_sjs">twitter</a> <a href="https://twitter.com/_sjs">twitter</a>
<a href="mailto:<%= email %>"><%= email %></a>
</nav> </nav>
<%- yield %> <%- yield %>
@ -38,9 +77,9 @@
Copyright &copy; 2006 - <%= new Date().getFullYear() %> <a href="mailto:<%= email %>"><%= author %></a> Copyright &copy; 2006 - <%= new Date().getFullYear() %> <a href="mailto:<%= email %>"><%= author %></a>
</footer> </footer>
<% for (var i in scripts) { %> <% for (var i in allScripts) { -%>
<script src="/js/<%= scripts[i] %>.js"></script> <script src="<%= allScripts[i] %>"></script>
<% } %> <% } -%>
<script> <script>
var _gaq = _gaq || [] var _gaq = _gaq || []

View file

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

View file

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

View file

@ -49,3 +49,17 @@ h4 { margin: 0.5em 0 0.7em }
#info > br.clear { clear: both } #info > br.clear { clear: both }
#contributors-box a { line-height: 1.8em } #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,19 +1,13 @@
;(function() { ;(function() {
if (typeof console === 'undefined') {
console = {log:function(){}} if (SJS.projectName) {
SJS.ready(initProject)
} }
var global = this function initProject() {
global.SJS = {
proj: function(name) { var data = createObjectStore(SJS.projectName)
SJS.projName = name
var data = createObjectStore(name)
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', ready, false)
} else if (window.attachEvent) {
window.attachEvent('onload', ready)
}
function ready() {
function addClass(el, name) { function addClass(el, name) {
var c = el.className || name var c = el.className || name
if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
@ -74,21 +68,21 @@
} }
function updateN(name, things) { function updateN(name, things) {
textHighlight('n' + name, things.length) var pluralized = things.length == 1 ? name.replace(/s$/, '') : name
if (things.length === 1) hide(name.charAt(0) + 'plural') textHighlight('n' + name, things.length + ' ' + name)
} }
var t = data.get('t-' + name) var t = data.get('t-' + SJS.projectName)
if (!t || +new Date() - t > 3600 * 1000) { if (!t || +new Date() - t > 3600 * 1000) {
console.log('stale ' + String(t)) console.log('stale ' + String(t))
data.set('t-' + name, +new Date()) data.set('t-' + SJS.projectName, +new Date())
GITR.repo('samsonjs', name) GITR.repo('samsonjs', SJS.projectName)
.fetchBranches(function(err, branches) { .fetchBranches(function(err, branches) {
if (err) { if (err) {
text('branches', '(oops)') text('branches', '(oops)')
} else { } else {
data.set('branches', branches) data.set('branches', branches)
updateBranches(name, branches) updateBranches(SJS.projectName, branches)
} }
}) })
.fetchLanguages(function(err, langs) { .fetchLanguages(function(err, langs) {
@ -125,13 +119,13 @@
}) })
} else { } else {
console.log('hit ' + t + ' (' + (+new Date() - t) + ')') console.log('hit ' + t + ' (' + (+new Date() - t) + ')')
updateBranches(name, data.get('branches')) updateBranches(SJS.projectName, data.get('branches'))
updateLangs(data.get('langs')) updateLangs(data.get('langs'))
updateContributors(data.get('contributors')) updateContributors(data.get('contributors'))
updateN('watchers', data.get('watchers')) updateN('watchers', data.get('watchers'))
updateN('forks', data.get('forks')) updateN('forks', data.get('forks'))
} }
} }
}
}
}()); }());

View file

@ -1,7 +1,6 @@
;(function() { ;(function() {
var global = this
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
global.createObjectStore = function(namespace) { window.createObjectStore = function(namespace) {
function makeKey(k) { function makeKey(k) {
return '--' + namespace + '-' + (k || '') return '--' + namespace + '-' + (k || '')
} }
@ -34,10 +33,10 @@
} }
} }
} }
global.ObjectStore = createObjectStore('default') window.ObjectStore = createObjectStore('default')
} else { } else {
// Create an in-memory store, should probably fall back to cookies // Create an in-memory store, should probably fall back to cookies
global.createObjectStore = function() { window.createObjectStore = function() {
var store = {} var store = {}
return { return {
clear: function() { store = {} }, clear: function() { store = {} },
@ -46,6 +45,6 @@
remove: function(key) { delete store[key] } 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": { "strftime": {
"title": "strftime", "title": "strftime",
"description": "strftime for JavaScript" "description": "strftime for JavaScript"
@ -27,6 +36,11 @@
"title": "samhuri.net", "title": "samhuri.net",
"description": "this site" "description": "this site"
}, },
"samhuri": {
"hidden": true,
"title": "samhuri.net",
"description": "this site"
},
"ThePusher": { "ThePusher": {
"title": "ThePusher", "title": "ThePusher",
"description": "Github post receive hook router" "description": "Github post receive hook router"
@ -39,6 +53,11 @@
"title": "mojo.el", "title": "mojo.el",
"description": "turn emacs into a sweet mojo editor" "description": "turn emacs into a sweet mojo editor"
}, },
"mojo": {
"hidden": true,
"title": "mojo.el",
"description": "turn emacs into a sweet mojo editor"
},
"NorthWatcher": { "NorthWatcher": {
"title": "NorthWatcher", "title": "NorthWatcher",
"description": "cron for filesystem changes" "description": "cron for filesystem changes"
@ -54,5 +73,10 @@
"cheat.el": { "cheat.el": {
"title": "cheat.el", "title": "cheat.el",
"description": "cheat from emacs" "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> <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> <h1><%= title %></h1>
<h2><%= description %></h2> <h2><%= description %></h2>
<table align="center" id="stats"> <table align="center" id="stats">
<tr> <tr>
<td align="right"> <td align="right">
<span id="nwatchers"></span> watcher<span id="wplural">s</span> <span id="nwatchers"></span>
</td> </td>
<td>&mdash;</td> <td>&mdash;</td>
<td align="left"> <td align="left">
<a href="https://github.com/samsonjs/<%= title %>/network/members"> <a href="https://github.com/samsonjs/<%= title %>/network/members">
<span id="nforks"></span> fork<span id="fplural">s</span> <span id="nforks"></span>
</a> </a>
</td> </td>
</tr> </tr>
@ -38,11 +35,6 @@
<script src="/js/storage-polyfill.js"></script> <script src="/js/storage-polyfill.js"></script>
<![endif]--> <![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> <script>
SJS.proj('<%= title %>') SJS.projectName = '<%= title %>'
</script> </script>

View file

@ -1,5 +1,3 @@
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/projects.css">
<!--[if IE 6]> <!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css"> <link rel="stylesheet" href="/css/ie6.css">
<![endif]--> <![endif]-->
@ -8,20 +6,6 @@
<script src="http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js"></script> <script src="http://d1eqzjbvoh1rux.cloudfront.net/json2.min.js"></script>
<script src="/js/storage-polyfill.js"></script> <script src="/js/storage-polyfill.js"></script>
<![endif]--> <![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> <a href="https://github.com/samsonjs"><img id="forkme" src="/images/forkme@2x.png" width="140" height="140" alt="Fork me on GitHub"></a>
@ -61,30 +45,22 @@
<nav> <nav>
<ul class="nav" id="projects"> <ul class="nav" id="projects">
<% for (var name in public.projects._data) { %> <% for (var name in public.projects._data) { %>
<% var proj = public.projects._data[name]; %> <% var project = public.projects._data[name] %>
<% if (name == 'index' || name[0] == '_' || project.hidden) continue %>
<li> <li>
<p class="title"><a href="<%= name %>"><%= name %></a></p> <p class="title"><a href="<%= name %>"><%= name %></a></p>
<p class="description"><%= proj.description %></p> <p class="description"><%= project.description %></p>
</li> </li>
<% } %> <% } %>
</ul> </ul>
</nav> </nav>
<script src="/js/gitter.js"></script>
<script src="/js/store.js"></script>
<script> <script>
if (typeof console === 'undefined') {
console = { log: function() {} }
}
;(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) { function addClass(el, name) {
var c = el.className || name var c = el.className || name
if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name if (!c.match(new RegExp('\b' + name + '\b', 'i'))) c += ' ' + name
@ -113,13 +89,13 @@
textHighlight('n' + name, things) textHighlight('n' + name, things)
} }
var data = createObjectStore('proj') var data = createObjectStore('projects')
, t = data.get('t-proj') , t = data.get('t-projects')
, user = GITR.user('samsonjs') , user = GITR.user('samsonjs')
, names = ['followers', 'following', 'publicRepos', 'publicGists'] , names = ['followers', 'following', 'publicRepos', 'publicGists']
if (!t || +new Date() - t > 3600 * 1000) { if (!t || +new Date() - t > 3600 * 1000) {
console.log('stale ' + String(t)) console.log('stale ' + String(t))
data.set('t-proj', +new Date()) data.set('t-projects', +new Date())
user.fetch(function(err, user) { user.fetch(function(err, user) {
if (user) { if (user) {
data.set('user', user) data.set('user', user)