My goal wasn’t to generate SVG’s with Jekyll, but apparently you can. I did an example over at the Tuesday Sweep. Nothing fancy yet, but I enjoyed the cross polination. When I pull in data here, I’ll try to do it from similarly formatted YAML files.

Step 1: Create a YML file for the list

this should be in _data directory in the jekyll source folder.

group_title: Basic Weekly Checklist
bwc:

- title: Thing 1
short_description: description 1

- title: Thing 2
short_description: description 2

- title: Thing N
short_description: description N

Step 2: Create a layout

Called checklist.html in the _layouts folder.

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" viewBox="0 0 2500 3300" xmlns="http://www.w3.org/2000/svg">
<g id="checklist" transform="translate(300, 300)" style="font-family:'Helvetica';font-size:75px;fill:rgb(102,102,102);">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

<header class="post-header">
<h1 class="post-title" itemprop="name headline">Basic Node Startup</h1>
<p class="post-meta">
<time datetime="2018-01-03T14:07:01+00:00" itemprop="datePublished">

Jan 3, 2018
</time>
</p>
</header>

<div class="post-content" itemprop="articleBody">

<figure class="highlight"><pre><code class="language-shell" data-lang="shell">mkdir weekly_grid<br data-jekyll-commonmark-ghpages="" /><span class="nb">cd </span>weekly_grid/<br data-jekyll-commonmark-ghpages="" />npm init <span class="nt">-y</span><br data-jekyll-commonmark-ghpages="" />npm install moment <span class="nt">--save</span><br data-jekyll-commonmark-ghpages="" /><span class="nb">ls<br data-jekyll-commonmark-ghpages="" /></span>node weekly_grid.js</code></pre></figure>


</div>


</article>

</g>
</svg>
</body>
</html>

Step 3: Create a post

The math for the for loop was found at the Liquid official Math docs and a HowTo posted by a community member.

Keep in mind the date below will be the date Jekyll generates the HTML, not the date the HTML file is being displayed to the user.

---
collection: sweep
layout: checklist
navexclude: true
name: my_checklist.md
title: Basic Checklist
---
<text x="0" y="0">Using Jekyll to generate SVG To-Do lists for Feb 09, 18</text>
<g id="list" transform="translate(0, 150)">


</g>