mirror of
https://github.com/samsonjs/samhuri.net.git
synced 2026-04-09 11:15:54 +00:00
add blog archive, tweak styles
This commit is contained in:
Sami Samhuri
parent
36b3ae5b9d
commit
63fdb8b3f9
10 changed files with 163 additions and 107 deletions
|
|
@ -1,5 +1,5 @@
|
|||
body { margin: 0
|
||||
; padding: 0
|
||||
; padding: 0 0 3em
|
||||
}
|
||||
|
||||
h1 { margin: 0
|
||||
|
|
@ -17,6 +17,8 @@ h1 { margin: 0
|
|||
|
||||
.hidden { display: none }
|
||||
|
||||
#archive { text-align: center }
|
||||
|
||||
#index { width: 80%
|
||||
; min-width: 300px
|
||||
; max-width: 800px
|
||||
|
|
@ -26,13 +28,12 @@ h1 { margin: 0
|
|||
; border-radius: 10px
|
||||
; background-color: #eee
|
||||
; margin: 1em auto
|
||||
; padding: 1em
|
||||
; font-size: 1.2em
|
||||
; line-height: 1.5em
|
||||
; list-style-type: none
|
||||
}
|
||||
|
||||
#index ul { padding: 0 1em
|
||||
; list-style-type: none
|
||||
}
|
||||
|
||||
.date { float: right }
|
||||
|
||||
article { width: 80%
|
||||
|
|
@ -65,6 +66,7 @@ article h1 a:hover { text-shadow: #cc0 1px 1px 8px
|
|||
|
||||
article h2 { font-size: 1.8em
|
||||
; font-weight: normal
|
||||
; text-align: left
|
||||
; margin: 1em 0
|
||||
; padding: 0
|
||||
; color: #222
|
||||
|
|
@ -78,26 +80,10 @@ time { color: #444
|
|||
; font-size: 1.2em
|
||||
}
|
||||
|
||||
#permalink { font-size: 1em }
|
||||
|
||||
.gist { font-size: 0.8em }
|
||||
|
||||
#around { width: 80%
|
||||
; min-width: 400px
|
||||
; max-width: 800px
|
||||
; margin: 1em auto
|
||||
; padding: 0 3em 1em
|
||||
; font-size: 1.2em
|
||||
}
|
||||
|
||||
#prev { float: left }
|
||||
#next { float: right }
|
||||
#around br { clear: both }
|
||||
|
||||
.sep { text-align: center
|
||||
; font-size: 2em
|
||||
; color: #666
|
||||
; display: none
|
||||
}
|
||||
|
||||
/* show discussion */
|
||||
#sd-container { margin: 3em 0 }
|
||||
|
||||
|
|
@ -174,14 +160,19 @@ input[type=submit] { font-size: 1.1em
|
|||
}
|
||||
|
||||
footer { margin: 0
|
||||
; padding: 1em 0
|
||||
; background-color: #cdf
|
||||
; padding: 0.2em 0
|
||||
; background-color: #def
|
||||
; border-top: solid 1px #bbb
|
||||
; clear: both
|
||||
; position: fixed
|
||||
; width: 100%
|
||||
; bottom: 0
|
||||
}
|
||||
|
||||
footer p { margin: 0.5em }
|
||||
|
||||
footer a { border-bottom: none
|
||||
; color: #25c
|
||||
; font-size: 1.3em
|
||||
; font-size: 1.2em
|
||||
; text-decoration: none
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,15 +37,6 @@
|
|||
|
||||
jQuery(function($) {
|
||||
|
||||
var hidden = true
|
||||
, index = $('#index')
|
||||
|
||||
$('#index-toggle').click(function() {
|
||||
index.toggle()
|
||||
hidden = !hidden
|
||||
$(this).html(hidden ? '↓ show posts ↓' : '↑ hide posts ↑')
|
||||
})
|
||||
|
||||
$('#need-js').remove()
|
||||
|
||||
SJS.request({uri: countCommentsURL(SJS.filename)}, function(err, request, body) {
|
||||
|
|
@ -65,7 +56,6 @@
|
|||
$('#sd-container').remove()
|
||||
$('#comment-stuff').slideDown(1.5, function() { this.scrollIntoView(true) })
|
||||
getComments()
|
||||
return false
|
||||
})
|
||||
|
||||
var showdown = new Showdown.converter()
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@
|
|||
{
|
||||
/* common */
|
||||
|
||||
body { padding-bottom: 0 }
|
||||
|
||||
h1 { font-size: 2em
|
||||
; margin-top: 1em
|
||||
}
|
||||
|
|
@ -50,18 +52,14 @@
|
|||
|
||||
#blog img { max-width: 100% }
|
||||
|
||||
nav#index { width: 90%
|
||||
; min-width: 310px
|
||||
; margin: 0.3em auto
|
||||
; padding-bottom: 0.3em
|
||||
}
|
||||
#index { width: 90%
|
||||
; min-width: 200px
|
||||
; margin: 0.3em auto 1em
|
||||
; padding: 0.5em
|
||||
; font-size: 1em
|
||||
}
|
||||
|
||||
nav#index ul { font-size: 0.8em
|
||||
; padding-left: 2em
|
||||
}
|
||||
|
||||
nav#index li { list-style-type: disc }
|
||||
nav#index li > span.date { display: none }
|
||||
#index li > span.date { display: none }
|
||||
|
||||
#blog article h1 { font-size: 1.6em
|
||||
; margin-top: 0
|
||||
|
|
@ -77,18 +75,6 @@
|
|||
|
||||
pre, .gist { font-size: 0.8em }
|
||||
|
||||
.sep { font-size: 1em }
|
||||
|
||||
#around { min-width: 310px
|
||||
; margin: 0
|
||||
; padding: 0 0.2em
|
||||
; font-size: 0.8em
|
||||
}
|
||||
|
||||
#prev, #next { padding: 0.3em 0
|
||||
; font-size: 0.95em
|
||||
}
|
||||
|
||||
#comment-stuff { padding: 0
|
||||
; margin-top: 2em
|
||||
}
|
||||
|
|
@ -123,6 +109,7 @@
|
|||
|
||||
footer { margin: 0
|
||||
; padding: 0.5em 0
|
||||
; position: relative
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
17
blog.rb
17
blog.rb
|
|
@ -44,6 +44,7 @@ class Blag
|
|||
generate_index
|
||||
generate_rss
|
||||
generate_posts_json
|
||||
generate_archive
|
||||
end
|
||||
|
||||
def generate_index
|
||||
|
|
@ -51,8 +52,7 @@ class Blag
|
|||
index_template = File.read(File.join('templates', 'blog', 'index.html'))
|
||||
post = posts.first
|
||||
template = post[:link] ? link_template : post_template
|
||||
values = { :posts => posts,
|
||||
:post => post,
|
||||
values = { :post => post,
|
||||
:article => Mustache.render(template, post),
|
||||
:previous => posts[1],
|
||||
:filename => post[:filename],
|
||||
|
|
@ -66,8 +66,7 @@ class Blag
|
|||
page_template = File.read(File.join('templates', 'blog', 'post.html'))
|
||||
posts.each_with_index do |post, i|
|
||||
template = post[:link] ? link_template : post_template
|
||||
values = { :posts => posts,
|
||||
:title => post[:title],
|
||||
values = { :title => post[:title],
|
||||
:link => post[:link],
|
||||
:article => Mustache.render(template, post),
|
||||
:previous => i < posts.length - 1 && posts[i + 1],
|
||||
|
|
@ -86,6 +85,12 @@ class Blag
|
|||
File.open(File.join(@dest, 'posts.json'), 'w') { |f| f.puts(json) }
|
||||
end
|
||||
|
||||
def generate_archive
|
||||
archive_template = File.read(File.join('templates', 'blog', 'archive.html'))
|
||||
html = Mustache.render(archive_template, :posts => posts)
|
||||
File.open(File.join(@dest, 'archive.html'), 'w') { |f| f.puts(html) }
|
||||
end
|
||||
|
||||
def generate_rss
|
||||
# posts rss
|
||||
File.open(rss_file, 'w') { |f| f.puts(rss.target!) }
|
||||
|
|
@ -170,14 +175,14 @@ class Blag
|
|||
xml.instruct! 'xml-stylesheet', :href => 'http://samhuri.net/assets/blog-all.min.css', :type => 'text/css'
|
||||
xml.rss :version => '2.0' do
|
||||
xml.channel do
|
||||
xml.title post[:link] ? "→ #{title}" : title
|
||||
xml.title title
|
||||
xml.description subtitle
|
||||
xml.link url
|
||||
xml.pubDate posts.first[:rfc822]
|
||||
|
||||
posts.each do |post|
|
||||
xml.item do
|
||||
xml.title post[:title]
|
||||
xml.title post[:link] ? "→ #{post[:title]}" : post[:title]
|
||||
xml.description post[:rss_html]
|
||||
xml.pubDate post[:rfc822]
|
||||
xml.author post[:author]
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>currentDocument</key>
|
||||
<string>assets/mobile.css</string>
|
||||
<string>blog.rb</string>
|
||||
<key>documents</key>
|
||||
<array>
|
||||
<dict>
|
||||
|
|
@ -86,12 +86,12 @@
|
|||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>73</integer>
|
||||
<integer>172</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>33</integer>
|
||||
<integer>140</integer>
|
||||
</dict>
|
||||
<key>combine.sh</key>
|
||||
<dict>
|
||||
|
|
@ -107,6 +107,34 @@
|
|||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
<key>templates/blog/link.mustache</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>9</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
<key>templates/blog/link.rss.html</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>10</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
<key>templates/blog/post.html</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
|
|
@ -121,6 +149,50 @@
|
|||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
<key>templates/blog/post.mustache</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>7</integer>
|
||||
</dict>
|
||||
<key>columnSelection</key>
|
||||
<false/>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
<key>selectFrom</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>8</integer>
|
||||
</dict>
|
||||
<key>selectTo</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>7</integer>
|
||||
</dict>
|
||||
</dict>
|
||||
<key>templates/blog/post.rss.html</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
<dict>
|
||||
<key>column</key>
|
||||
<integer>0</integer>
|
||||
<key>line</key>
|
||||
<integer>9</integer>
|
||||
</dict>
|
||||
<key>firstVisibleColumn</key>
|
||||
<integer>0</integer>
|
||||
<key>firstVisibleLine</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
<key>templates/proj/index.html</key>
|
||||
<dict>
|
||||
<key>caret</key>
|
||||
|
|
@ -139,6 +211,10 @@
|
|||
<key>openDocuments</key>
|
||||
<array>
|
||||
<string>assets/mobile.css</string>
|
||||
<string>templates/blog/link.rss.html</string>
|
||||
<string>templates/blog/post.mustache</string>
|
||||
<string>templates/blog/link.mustache</string>
|
||||
<string>templates/blog/post.rss.html</string>
|
||||
<string>templates/proj/index.html</string>
|
||||
<string>assets/request.js</string>
|
||||
<string>templates/blog/post.html</string>
|
||||
|
|
|
|||
41
templates/blog/archive.html
Normal file
41
templates/blog/archive.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>archive :: sjs' blog</title>
|
||||
<meta name="keywords" content="{{keywords}}">
|
||||
<link rel="icon" type="image/gif" href="../assets/s.gif">
|
||||
<link rel="stylesheet" href="../assets/blog-all.min.css">
|
||||
<link rel="stylesheet" media="screen" href="../assets/mobile.min.css">
|
||||
<link rel="alternate" type="application/rss+xml" href="http://samhuri.net/blog/sjs.rss" title="sjs' blog">
|
||||
<body id="blog">
|
||||
<nav id="breadcrumbs"><a href="../">samhuri.net</a></nav>
|
||||
<header>
|
||||
<h1><a href="index.html">sjs' blog</a></h1>
|
||||
</header>
|
||||
<ul id="index">
|
||||
{{#posts}}
|
||||
<li><a href="{{filename}}">{{title}}</a> <span class="date">{{date}}</span></li>
|
||||
{{/posts}}
|
||||
</ul>
|
||||
<footer>
|
||||
<p><a href="https://twitter.com/_sjs">@_sjs</a></p>
|
||||
<p><a href="mailto:sami.samhuri@gmail.com">sami.samhuri@gmail.com</a></p>
|
||||
</footer>
|
||||
<script>
|
||||
var _gaq = _gaq || []
|
||||
_gaq.push( ['_setAccount', 'UA-214054-5']
|
||||
, ['_trackPageview']
|
||||
)
|
||||
|
||||
;(function() {
|
||||
var ga = document.createElement('script')
|
||||
ga.type = 'text/javascript'
|
||||
ga.async = true
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'
|
||||
var s = document.getElementsByTagName('script')[0]
|
||||
s.parentNode.insertBefore(ga, s)
|
||||
}())
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,24 +12,8 @@
|
|||
<header>
|
||||
<h1><a href="index.html">sjs' blog</a></h1>
|
||||
</header>
|
||||
<div id="show-posts" class="center"><a id="index-toggle" href="#">↓ show posts ↓</a></div>
|
||||
<nav id="index" class="hidden">
|
||||
<ul>
|
||||
{{#posts}}
|
||||
<li><a href="{{url}}">{{title}}</a> <span class="date">{{date}}</span></li>
|
||||
{{/posts}}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="archive"><a href="archive.html">archive</a></nav>
|
||||
{{{article}}}
|
||||
<div id="around">
|
||||
{{#previous}}
|
||||
<a id="prev" href="{{filename}}">← {{title}}</a>
|
||||
{{/previous}}
|
||||
{{#next}}
|
||||
<a id="next" href="{{filename}}">{{title}} →</a>
|
||||
{{/next}}
|
||||
<br>
|
||||
</div>
|
||||
{{#comments}}
|
||||
<p id="need-js" align="center"><strong>(discussion requires JavaScript)</strong></p>
|
||||
<div class="center" id="sd-container"><a id="sd" href="#comment-stuff">show the discussion</a></div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<article>
|
||||
<header>
|
||||
<h1><a href="{{link}}">→ {{title}}</a></h1>
|
||||
<h2><a href="{{link}}">→ {{title}}</a></h2>
|
||||
<time>{{date}}</time>
|
||||
</header>
|
||||
{{{body}}}
|
||||
<p><a href="{{filename}}">∞</a></p>
|
||||
<p><a id="permalink" href="{{filename}}">∞</a></p>
|
||||
</article>
|
||||
<p class="sep">༄</p>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,12 @@
|
|||
<link rel="stylesheet" media="screen" href="../assets/mobile.min.css">
|
||||
<link rel="alternate" type="application/rss+xml" href="http://samhuri.net/blog/sjs.rss" title="sjs' blog">
|
||||
<body id="blog">
|
||||
<nav id="breadcrumbs"><a href="../">samhuri.net</a> • <a href="index.html">blog</a></nav>
|
||||
<nav id="breadcrumbs"><a href="../">samhuri.net</a></nav>
|
||||
<header>
|
||||
<h1><a href="index.html">sjs' blog</a></h1>
|
||||
</header>
|
||||
<div id="show-posts" class="center"><a id="index-toggle" href="#">↓ show posts ↓</a></div>
|
||||
<nav id="index" class="hidden">
|
||||
<ul>
|
||||
{{#posts}}
|
||||
<li><a href="{{url}}">{{title}}</a> <span class="date">{{date}}</span></li>
|
||||
{{/posts}}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="archive"><a href="archive.html">archive</a></nav>
|
||||
{{{article}}}
|
||||
<div id="around">
|
||||
{{#previous}}
|
||||
<a id="prev" href="{{filename}}">← {{title}}</a>
|
||||
{{/previous}}
|
||||
{{#next}}
|
||||
<a id="next" href="{{filename}}">{{title}} →</a>
|
||||
{{/next}}
|
||||
<br>
|
||||
</div>
|
||||
{{#comments}}
|
||||
<p id="need-js" align="center"><strong>(discussion requires JavaScript)</strong></p>
|
||||
<div class="center" id="sd-container"><a id="sd" href="#comment-stuff">show the discussion</a></div>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,3 @@
|
|||
</header>
|
||||
{{{body}}}
|
||||
</article>
|
||||
<p class="sep">༄</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue