Redesign

bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "oncletom.io",
+  "version": "3.3.0",
+  "homepage": "https:://oncletom.io",
+  "authors": [
+    "Thomas Parisot (https://oncletom.io)"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "bootstrap": "~3.1.1"
+  }
+}

package.json

@@ -1,17 +1,18 @@
 {
   "name": "oncletom.io",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "private": true,
   "engines": {
     "node": ">= 0.10.0",
     "npm": ">= 1.3.0"
   },
   "scripts": {
     "start": "hexo server",
-    "deploy": "hexo deploy --generate"
+    "deploy": "hexo deploy --generate --debug"
   },
   "dependencies": {
-    "hexo": "^2.5.2"
+    "hexo": "^2.5.2",
+    "hexo-renderer-less": "0.0.3"
   },
   "devDependencies": {
     "grunt-shell": "~0.3.0",
@@ -21,4 +22,4 @@
     "grunt-contrib-less": "~0.6.4",
     "grunt-contrib-watch": "~0.5.1"
   }
-}
+}

themes/oncletom/_config.yml

@@ -4,7 +4,7 @@ menu:
   Projets Web: /projects
 
 links:
-  RSS: /feed/
-  Twitter: https://twitter.com/oncletom
-  Code: https://github.com/oncletom
-  Photos: http://flickr.com/photos/the-jedi/
+  Photos: /photos/
+  @oncletom: https://twitter.com/oncletom
+  GitHub: https://github.com/oncletom
+  RSS Feed: /feed/

themes/oncletom/layout/_blog/comments.ejs

@@ -1,6 +1,6 @@
 <% if (config.disqus_shortname && page.comments){ %>
-<section id="comments" class="article fluid-height">
-  <header class="header">
+<section id="comments">
+  <header class="comments-header">
     <h2>Vos réactions</h2>
   </header>
 

themes/oncletom/layout/_blog/post-condensed.ejs

@@ -1,9 +1,16 @@
-<div class="span10">
-  <article lang="<%= post.lang || 'fr' %>" data-type="post" class="post-condensed">
-    <header>
-      <h1>
-        <a class="icon-bookmark" href="<%= config.root %><%= post.path %>" title="<%= post.title %>" rel="bookmark"><%= post.title %></a>
-      </h1>
-    </header>
-  </article>
-</div>
+<article lang="<%= post.lang || 'fr' %>" class="post post-abstract">
+  <header class="post-header">
+    <h2>
+      <a href="<%= config.root %><%= post.path %>" title="<%= post.title %>" rel="bookmark"><%= post.title %></a>
+      <small><time datetime="<%= post.date.format('YYYY-MM-DDTHH:mm:ss.SSS') %>"><%= post.date.format('MM.YYYY') %></time></small>
+    </h2>
+  </header>
+
+  <div class="excerpt"><%- post.excerpt %></div>
+
+  <p>
+    <a href="<%= config.root+post.path %>" lang="<%= post.lang || "fr" %>" class="btn btn-primary">
+      <%= (post.lang || "fr") === "fr" ? "Lire la suite" : "Read more" %>
+    </a>
+  </p>
+</article>

themes/oncletom/layout/_blog/post-cover.ejs

@@ -1,7 +1,4 @@
 <% if (post.cover){ %>
-<div class="post-cover">
-  <% if (post.cover.hasOwnProperty("link")){ -%><a href="<% if(typeof href !== 'undefined') { %><%= href %><% } else { %><%= post.cover.link %><% } %>" rel="external"><% } %>
-  <img src="<%= partial('../_cover_url', {post: post}) %>" alt="">
-  <% if (post.cover.hasOwnProperty("link")){ %></a><% } %>
+<div class="post-cover" style="background-image: url(<%= partial('../_cover_url', {post: post}) %>);">
 </div>
 <% } %>

themes/oncletom/layout/_blog/post-full.ejs

@@ -0,0 +1,39 @@
+<article lang="<%= post.lang || 'fr' %>" class="post post-full">
+  <header class="post-header">
+    <h1><%= post.title %></h1>
+  </header>
+
+  <div class="row">
+    <div class="content col-lg-10">
+      <%- post.content %>
+    </div>
+  </div>
+
+  <% if(typeof footer === 'undefined' || !!footer){ -%>
+  <footer class="post-footer row">
+    <div class="col-sm-4">
+      <ul class="list-unstyled post-actions">
+        <li class="icon-calendar-empty">
+          <time datetime="<%= date(post.date, 'YYYY-MM-DDTHH:mm:ss.SSS')%>"><%= post.date.format(config.date_format) %></time></li>
+        <li class="icon-pencil-squared">
+          <a href="https://github.com/oncletom/oncletom.io/tree/master/source/<%= post.source %>">Contribuer</a>
+        </li>
+        <li class="icon-chat">
+          <a href="#comments">Commenter</a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-sm-4 nav nav-prev"><% if(post.prev){ -%>
+      <a href="<%= post.prev.permalink %>" rel="bookmark">
+        <span class="icon-left-open">&nbsp;</span><%= post.prev.title %>
+      </a>
+    <% } -%></div>
+
+    <div class="col-sm-4 nav nav-next"><% if(post.next){ -%>
+      <a href="<%= post.next.permalink %>" rel="bookmark">
+        <%= post.next.title %>&nbsp;<span class="icon-right-open">
+      </a>
+    <% } -%></div>
+  </footer><% } -%>
+</article>

themes/oncletom/layout/_cover_url.ejs

@@ -8,4 +8,6 @@
   if (url.match(/^\/\//)){
     url = 'https:' + url;
   }
+
+  url = url.replace('_c_d.jpg', '_b_d.jpg');
 } %><%= url %>

themes/oncletom/layout/archive.ejs

@@ -1,10 +1,18 @@
-<% if(page.archive){ -%><h1 class="title">Archives de l'année <span><%= page.year %><span></h1><% } -%>
-<% if(page.category){ -%><h1 class="title"><%= page.category %> <span>&amp; cie.</span></h1><% } -%>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <% if(page.archive){ -%><h1 class="title"><small>/</small><%= page.year %></h1><% } -%>
+            <% if(page.category){ -%><h1 class="title"><small>/</small><%= page.category %></h1><% } -%>
+        </div>
+    </div>
+</div>
 
-<div class="row">
-  <% page.posts.each(function(post){ %>
-    <%- partial("_blog/post-condensed", {post: post})%>
-  <% }); %>
+<%- partial("_blog/post-cover", { post: page.posts.first() }) %>
 
-  <%- partial("_blog/navigation-box") %>
-</div>
+<div class="container">
+    <div class="row">
+        <% page.posts.each(function(post){ %>
+        <div class="col-sm-12"><%- partial("_blog/post-condensed", {post: post})%></div>
+        <% }); %>
+    </div>
+</div>

themes/oncletom/layout/footer.ejs

@@ -0,0 +1,55 @@
+<footer class="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-4">
+                <p>
+                    <a href="/slash-me" rel="me" class="about">
+                        <img src="/assets/avatar.jpg" alt="" class="avatar img-thumbnail">
+                    </a>
+                </p>
+
+                <p>
+                    Hey, I'm <a href="/slash-me/" rel="me">Thomas</a>!
+                    A french <em>web engineer</em> living in <em>London</em>
+                    and working for <a href="http://bbc.co.uk/rd">BBC R&D</a>.
+                </p>
+
+                <ul class="list-unstyled">
+                    <% Object.keys(theme.links).forEach(function(key){ %>
+                        <li class="menu-item">
+                            <a href="<%= theme.links[key] %>"><%= key %></a>
+                        </li>
+                    <% }); %>
+                </ul>
+            </div>
+
+            <div class="col-sm-8">
+                <div class="row">
+                    <div class="col-sm-12">
+                        <form action="https://google.com/search" method="get" class="form" role="search">
+                            <input type="hidden" name="q" value="site:oncletom.io" />
+                            <input type="search" name="q" value="" class="form-control" placeholder="What are you looking for?" required>
+                             <button type="submit" class="btn btn-primary">Search</button>
+                        </form>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-6">
+                        <h3>/categories</h3>
+
+                        <ul class="inline-list">
+                            <% Object.keys(config.category_map).forEach(function(key){ -%>
+                            <li><a href="<%= config.root + config.category_dir + '/' + config.category_map[key] %>" rel="tag"><%= key %></a></li>
+                            <% }) -%>
+                        </ul>
+                    </div>
+                    <div class="col-md-6">
+                        <h3>/years</h3>
+                        <%- list_archives({type: "yearly", order: -1, format: "YYYY", show_count: false}).replace(/\/\//g, '/') %>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

themes/oncletom/layout/header.ejs

@@ -0,0 +1,12 @@
+<header class="header">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <h1 class="site-title"><a href="<%= config.root %>" rel="home"><%- config.title.replace('.io', '<span>.io</span>') %></a></h1>
+            </div>
+            <div class="col-md-4">
+                <blockquote class="description"><%= config.subtitle %></blockquote>
+            </div>
+        </div>
+    </div>
+</header>

themes/oncletom/layout/index.ejs

@@ -1,9 +1,9 @@
-<div class="row">
-  <%- partial("_blog/post-excerpt", {post: page.posts.first()})%>
+<%- partial("_blog/post-cover", { post: page.posts.first() }) %>
 
-  <% page.posts.slice(1, 5).each(function(post){ %>
-  <%- partial("_blog/post-condensed", {post: post})%>
-  <% }); %>
-
-  <%- partial("_blog/navigation-box") %>
+<div class="container">
+  <div class="row">
+    <% page.posts.slice(0, 5).each(function(post){ %>
+    <div class="col-sm-12"><%- partial("_blog/post-condensed", {post: post})%></div>
+    <% }); %>
+  </div>
 </div>