new style and new post

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

.eleventy.js

@@ -2,77 +2,76 @@ const { DateTime } = require("luxon");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
-module.exports = function(eleventyConfig) {
-  eleventyConfig.addPlugin(pluginRss);
-  eleventyConfig.addPlugin(pluginSyntaxHighlight);
-  eleventyConfig.setDataDeepMerge(true);
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(pluginRss);
+    eleventyConfig.addPlugin(pluginSyntaxHighlight);
+    eleventyConfig.setDataDeepMerge(true);
 
-  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
+    eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
 
-  eleventyConfig.addFilter("readableDate", dateObj => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
-  });
+    eleventyConfig.addFilter("readableDate", (dateObj) => {
+        return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
+            "d LLL yyyy"
+        );
+    });
 
-  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toFormat('yyyy-LL-dd');
-  });
+    // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+    eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+        return DateTime.fromJSDate(dateObj).toFormat("yyyy-LL-dd");
+    });
 
-  // Get the first `n` elements of a collection.
-  eleventyConfig.addFilter("head", (array, n) => {
-    if( n < 0 ) {
-      return array.slice(n);
-    }
+    // Get the first `n` elements of a collection.
+    eleventyConfig.addFilter("head", (array, n) => {
+        if (n < 0) {
+            return array.slice(n);
+        }
 
-    return array.slice(0, n);
-  });
+        return array.slice(0, n);
+    });
 
-  eleventyConfig.addCollection("tagList", require("./_11ty/getTagList"));
+    eleventyConfig.addCollection("tagList", require("./_11ty/getTagList"));
 
-  eleventyConfig.addPassthroughCopy("img");
-  eleventyConfig.addPassthroughCopy("css");
+    eleventyConfig.addPassthroughCopy("img");
+    eleventyConfig.addPassthroughCopy("css");
+    eleventyConfig.addPassthroughCopy("js");
 
-  /* Markdown Plugins */
-  let markdownIt = require("markdown-it");
-  let markdownItAnchor = require("markdown-it-anchor");
-  let options = {
-    html: true,
-    breaks: true,
-    linkify: true
-  };
-  let opts = {
-    permalink: true,
-    permalinkClass: "direct-link",
-    permalinkSymbol: "#"
-  };
+    /* Markdown Plugins */
+    let markdownIt = require("markdown-it");
+    let markdownItAnchor = require("markdown-it-anchor");
+    let options = {
+        html: true,
+        breaks: true,
+        linkify: true,
+    };
+    let opts = {
+        permalink: true,
+        permalinkClass: "direct-link",
+        permalinkSymbol: "#",
+    };
 
-  eleventyConfig.setLibrary("md", markdownIt(options)
-    .use(markdownItAnchor, opts)
-  );
+    eleventyConfig.setLibrary(
+        "md",
+        markdownIt(options).use(markdownItAnchor, opts)
+    );
 
-  return {
-    templateFormats: [
-      "md",
-      "njk",
-      "html",
-      "liquid"
-    ],
+    return {
+        templateFormats: ["md", "njk", "html", "liquid"],
 
-    // If your site lives in a different subdirectory, change this.
-    // Leading or trailing slashes are all normalized away, so don’t worry about it.
-    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
-    // This is only used for URLs (it does not affect your file structure)
-    pathPrefix: "/",
+        // If your site lives in a different subdirectory, change this.
+        // Leading or trailing slashes are all normalized away, so don’t worry about it.
+        // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+        // This is only used for URLs (it does not affect your file structure)
+        pathPrefix: "/",
 
-    markdownTemplateEngine: "liquid",
-    htmlTemplateEngine: "njk",
-    dataTemplateEngine: "njk",
-    passthroughFileCopy: true,
-    dir: {
-      input: ".",
-      includes: "_includes",
-      data: "_data",
-      output: "_site"
-    }
-  };
+        markdownTemplateEngine: "liquid",
+        htmlTemplateEngine: "njk",
+        dataTemplateEngine: "njk",
+        passthroughFileCopy: true,
+        dir: {
+            input: ".",
+            includes: "_includes",
+            data: "_data",
+            output: "_site",
+        },
+    };
 };

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.root": "/_site/"
+}

_includes/layouts/base.njk

@@ -5,8 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ renderData.title or title or metadata.title }}</title>
     <meta name="Description" content="{{ renderData.description or description or metadata.description }}">
-    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&amp;display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
   </head>
   <body>

_includes/layouts/post.njk

@@ -2,8 +2,15 @@
 layout: layouts/base.njk
 templateClass: tmpl-post
 ---
+{% if (jsFiles.length) > 0 %}
+    {% for src in jsFiles %}
+        <script src="{{ src }}"></script>
+    {% endfor %}
+{% endif %}
 <h1>{{ title }}</h1>
 
+<img class="head-image" src="{{ image }}" />
+
 {{ content | safe }}
 
 <p><a href="{{ '/' | url }}">← Home</a></p>

_includes/postslist.njk

@@ -1,14 +1,19 @@
-<ol reversed class="postlist" style="counter-reset: start-from {{ postslist.length + 1 }}">
+<div class="postlist">
 {% for post in postslist | reverse %}
-  <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
-    <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
-    <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+  <a href="{{ post.url }}"
+    title="{{ post.data.description }}"
+    class="postitem{% if post.url == url %} postitem--active{% endif %}"
+    style="background-image: url({{ post.data.image }})">
+    <h1 class="postitem__title">{{ post.data.title }}</h1>
+    <time class="postitem__date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+    {#
     {% for tag in post.data.tags %}
       {%- if tag != "posts" -%}
       {% set tagUrl %}/tags/{{ tag }}/{% endset %}
       <a href="{{ tagUrl | url }}" class="tag">{{ tag }}</a>
       {%- endif -%}
     {% endfor %}
-  </li>
+    #}
+  </a>
 {% endfor %}
-</ol>
+</div>

about/index.md

@@ -2,7 +2,8 @@
 layout: layouts/post.njk
 title: About Me
 tags:
-  - about
+    - nav
+    - about
 navtitle: About
 templateClass: tmpl-post
 ---
@@ -11,9 +12,10 @@ My name is Sébastien Roch and I am a software developer based in Zürich, Swite
 I focus mainly on frontend and single page applications, sometimes using frameworks, sometimes not.
 
 I am the author of the following projects:
-- <a href="https://www.turbogist.com">Turbogist</a>, a tool to manage your gists
-- <a href="https://www.senior-shop.ch">Senior Shop</a>, a swiss online shop for elderly
-- <a href="https://play.google.com/store/apps/details?id=com.offline_locator.free&hl=fr">Offline Locator</a>, an android app to retrieve a location when you have no internet (abroad for example)
-- <a href="https://www.personaldisplay.net">Personal Display</a>, an application for tablet targeted at people suffering from Alzheimer disease and Dementia
+
+-   <a href="https://www.turbogist.com">Turbogist</a>, a tool to manage your gists
+-   <a href="https://www.senior-shop.ch">Senior Shop</a>, a swiss online shop for elderly
+-   <a href="https://play.google.com/store/apps/details?id=com.offline_locator.free&hl=fr">Offline Locator</a>, an android app to retrieve a location when you have no internet (abroad for example)
+-   <a href="https://www.personaldisplay.net">Personal Display</a>, an application for tablet targeted at people suffering from Alzheimer disease and Dementia
 
 You can read about my professional experience on <a href="https://www.linkedin.com/in/sebastienroch">LinkedIn</a>.