cloudfour · emersonthis · Jul 14, 2020 · Jun 12, 2020 · Jun 12, 2020 · Jun 13, 2020
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,51 @@
+const fs = require("fs");
+
+module.exports = function(eleventyConfig) {
+
+  // aliases for backwards support of jekyll layouts
+  eleventyConfig.addLayoutAlias('blank', 'layouts/blank.html');
+  eleventyConfig.addLayoutAlias('error', 'layouts/error.html');
+  eleventyConfig.addLayoutAlias('default', 'layouts/default.html');
+  eleventyConfig.addLayoutAlias('permalink', 'layouts/permalink.html');
+  eleventyConfig.addLayoutAlias('post', 'layouts/post.html');
+  eleventyConfig.addLayoutAlias('tag', 'layouts/tag.html');
+
+  // configure post collection
+  eleventyConfig.addCollection('post', collection => {
+    return collection.getFilteredByGlob('_posts/*.md');
+  });
+
+  // non-template files that we want to serve
+  eleventyConfig.addPassthroughCopy("images");
+  eleventyConfig.addPassthroughCopy("js");
+  eleventyConfig.addPassthroughCopy("main.css");
+  eleventyConfig.addPassthroughCopy("*.png");
+  eleventyConfig.addPassthroughCopy("favicon.ico");
+  eleventyConfig.addPassthroughCopy("manifest.json");
+  eleventyConfig.addPassthroughCopy("*.svg");
+  eleventyConfig.addPassthroughCopy("sw.js");
+
+  // 404 page for local server
+  eleventyConfig.setBrowserSyncConfig({
+    callbacks: {
+      ready: function(err, bs) {
+        bs.addMiddleware("*", (req, res) => {
+          const content_404 = fs.readFileSync('_site/404.html');
+          // Provides the 404 content without redirect.
+          res.write(content_404);
+          // Add 404 http status code in request header.
+          // res.writeHead(404, { "Content-Type": "text/html" });
+          res.writeHead(404);
+          res.end();
+        });
+      }
+    }
+  });
+
+  return {
+    dir: {
+      input: "./",
+      output: "./_site"
+    }
+  }
+}
diff --git a/.eleventyignore b/.eleventyignore
@@ -0,0 +1,8 @@
+Gemfile
+Gemfile.lock
+package.json
+LICENSE
+README.md
+node_modules
+scripts
+.github
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+14
diff --git a/Gemfile b/Gemfile
diff --git a/Gemfile.lock b/Gemfile.lock
diff --git a/README.md b/README.md
@@ -8,17 +8,17 @@ See [CONTRIBUTING.md](.github/CONTRIBUTING.md)
 
 ## Developing
 
-This site is built with [Jekyll](https://jekyllrb.com/docs/home/).
+This site is built with [Eleventy](https://www.11ty.dev/).
 
 ### Quick start
 
-This project relies on [Ruby](https://www.ruby-lang.org/en/), [Node](https://nodejs.org/), and [npm](https://www.npmjs.com/). Before following these steps you'll need to [set up a Ruby dev environment](https://jekyllrb.com/docs/installation/) as well as [install node and npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm) if you haven't already.
+This project relies on [Node](https://nodejs.org/), and [npm](https://www.npmjs.com/). Before following these steps you'll need to [install node and npm](https://blog.npmjs.org/post/85484771375/how-to-install-npm) if you haven't already.
+
+Installation:
 
 ```sh
 git clone [email protected]:cloudfour/pwastats.git
 cd pwastats
-gem install bundler
-bundle install
 npm install
 ```
 
@@ -27,15 +27,14 @@ For local development:
 ```
 npm start
 ```
+This will compile the site into the \_sites directory and run a local file server where you can preview the site: http://localhost:8080
 
 For a single build:
 
 ```
 npm run build
 ```
 
-View the local site at http://localhost:4000.
-
 ### Fetching an icon for a PWA
 
 ```sh

diff --git a/_data/site.json b/_data/site.json
@@ -0,0 +1,13 @@
+{
+	"title": "PWA Stats",
+	"email": "[email protected]",
+	"description": "A collection of Progressive Web App case studies.",
+	"repository": "cloudfour/pwastats",
+	"baseurl": "",
+	"url": "https://www.pwastats.com",
+	"twitter_username": "cloudfour",
+	"github_username": "cloudfour",
+	"author": "PWA Community",
+	"timezone": "America/Los_Angeles",
+	"permalink": "/:year/:month/:title/"
+}
diff --git a/_layouts/.keep → _includes/layouts/.keep b/_layouts/.keep → _includes/layouts/.keep
diff --git a/_layouts/blank.html → _includes/layouts/blank.html b/_layouts/blank.html → _includes/layouts/blank.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
-  {% include head.html title=page.title %}
-  <body{% if layout.body_class %} class="{{ layout.body_class }}"{% endif %}>
+  {% include head.html, title: page.title %}
+  <body{% if body_class %} class="{{ body_class }}"{% endif %}>
     {{ content }}
     {% include svg-icons.html %}
     <script>

diff --git a/_layouts/default.html → _includes/layouts/default.html b/_layouts/default.html → _includes/layouts/default.html
diff --git a/_layouts/error.html → _includes/layouts/error.html b/_layouts/error.html → _includes/layouts/error.html
diff --git a/_includes/layouts/permalink.html b/_includes/layouts/permalink.html
@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+<div class="u-containProse u-md-textGrow1">
+  {% include resource-item.html, 
+        title: title, 
+        content: content, 
+        date: page.date, 
+        permalink: page.url, 
+        slug: page.fileSlug, 
+        tags: tags, 
+        sourceURL: sourceURL, 
+        imageExt: imageExt 
+  %}
+</div>
diff --git a/_layouts/post.html → _includes/layouts/post.html b/_layouts/post.html → _includes/layouts/post.html
diff --git a/_includes/pagination.html b/_includes/pagination.html
@@ -1,54 +1,26 @@
-{% if paginator.total_pages > 1 %}
-  {% if paginator.page < paginator.total_pages %}
-    {% assign currentOffset = 1 %}
-  {% else %}
-    {% assign currentOffset = 2 %}
-  {% endif %}
+{% comment %}
+  @TODO This is a simplified version of the navigation from the Jekyll version
+  Pagination variables/logic does not map cleanly between Jekyll and 11ty... 
+  Managing that conversion in addition to deciphering the tricky logic that toggled
+  the next/previous arrows was making my head hurt, so I conciously skipped the arrows
+  for now. Also of note: 11ty page paths are 0-indexed, which means the third page
+  will have the path: /2/. This feels unintuitive to me, but comes straight from the docs.
+  This may be a configurable thing, but I ran out of time (for now). —Emerson
+{% endcomment %}
+{% if pagination.pages.size > 1 %}
   <nav class="u-containProse" aria-label="Pagination">
-    <ul class="Pagination {% if paginator.page > 1 %}Pagination--withPrevious{% endif %} {% if paginator.page < paginator.total_pages %}Pagination--withNext{% endif %}">
-      {% for page in (1..paginator.total_pages) %}
-        {% assign currPageMinusCurrOffset = paginator.page | minus: currentOffset %}
-        <li{% if page < currPageMinusCurrOffset %} class="u-hidden u-sm-block"{% endif %}>
-          {% if page == paginator.page %}
+    <ul class="Pagination {% if pagination.pageNumber > 0 %}Pagination--withPrevious{% endif %} {% if pagination.pageNumber < pagination.pages.size %}Pagination--withNext{% endif %}">
+      {% for pageEntry in pagination.pages %}
+        <li class="u-hidden u-sm-block">
+          {% if forloop.index0 == pagination.pageNumber %}
             <span class="Pagination-item Pagination-item--muted">
               <span class="u-hiddenVisually">Currently viewing page</span>
-              {{page}}
+              {{forloop.index}}
             </span>
           {% else %}
-          <a class="Pagination-item" href=
-            {% if page == 1%}
-              "/"
-            {% else %}
-              "{{ site.paginate_path | replace: ':num', page }}"
-            {% endif %}>
-              {% assign pageMinusOne = paginator.page | minus: 1 %}
-              {% if page == pageMinusOne %}
-                <span class="Pagination-item Pagination-item--previous">
-                  <svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="pagination-previous-title" class="Icon">
-                    <title id="pagination-previous-title">Previous:</title>
-                    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" transform="rotate(180 12 12)">
-                      <polyline points="15 5 22 12 15 19"/>
-                      <line x1="20" y1="12" x2="2" y2="12"/>
-                    </g>
-                  </svg>
-                </span>
-              {% endif %}
-
-              {% assign pagePlusOne = paginator.page | plus: 1 %}
-              {% if page == pagePlusOne %}
-                <span class="Pagination-item Pagination-item--next">
-                  <svg viewBox="0 0 24 24" width="24" height="24" aria-labelledby="pagination-next-title" class="Icon">
-                    <title id="pagination-next-title">Next:</title>
-                    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
-                      <polyline points="15 5 22 12 15 19"/>
-                      <line x1="20" y1="12" x2="2" y2="12"/>
-                    </g>
-                  </svg>
-                </span>
-              {% endif %}
-
+          <a class="Pagination-item" href="{{ pagination.hrefs[forloop.index0] }}">
               <span class="u-hiddenVisually">Page</span>
-              {{page}}
+              {{forloop.index}}
             </a>
           {% endif %}
         </li>

diff --git a/_includes/resource-item.html b/_includes/resource-item.html
@@ -1,31 +1,31 @@
 <article class="Card u-borderNone">
-  <a class="Card-main" href="{{ include.sourceURL }}">
+  <a class="Card-main" href="{{ sourceURL }}">
     <h2 class="u-hiddenVisually">
-      {{ include.title }}
+      {{ title }}
     </h2>
     <img
       class="Card-mainObject"
       alt=""
-      src="/images/{{ include.slug }}/2x.{{ include.imageExt | default: 'png' }}"
+      src="/images/{{slug}}/2x.{{imageExt | default: 'png' }}"
     >
     <div class="Card-mainContent">
-      {{ include.content | markdownify }}
+      {{ content }}
     </div>
   </a>
   <footer class="Card-meta">
-    {% if include.tags.size > 0 %}
+    {% if tags.size > 0 %}
       <h3 class="u-hiddenVisually">
         Tags
       </h3>
     {% endif %}
     <div class="Grid Grid--withGutter Grid--alignMiddle u-textShrink1">
-      {% if include.tags.size > 0 %}
+      {% if tags.size > 0 %}
         <div class="Grid-cell u-sizeFill">
           <ul class="u-listInline">
-            {% for tag in include.tags %}
+            {% for tag in tags %}
               <li>
                 <a class="Card-metaLink"
-                  href="/tags/{{ tag | slugify }}">
+                  href="/tags/{{ tag | slug }}">
                   #{{ tag }}
                 </a>
               </li>
@@ -34,14 +34,14 @@ <h3 class="u-hiddenVisually">
         </div>
       {% endif %}
       <p class="Grid-cell u-sizeFit u-flexExpandLeft">
-        {% if page.layout == 'permalink' %}
+        {% if layout == 'permalink' %}
           <time class="u-textNoWrap"
-            datetime="{{ include.date | date: "%Y-%m-%d"  }}">
-            {{ include.date | date: "%b %-d, %Y"  }}
+            datetime="{{ date | date: "%Y-%m-%d"  }}">
+            {{ date | date: "%b %d, %Y"  }}
           </time>
         {% else %}
           <a class="Card-metaLink" title="Permalink"
-            href="{{ include.url }}">
+            href="{{ permalink }}">
             <svg width="24" height="24" class="Icon Icon--large" role="img">
               <use xlink:href="#link"/>
             </svg>

diff --git a/_layouts/permalink.html b/_layouts/permalink.html