Eleventy refactor

.eleventy.js

@@ -0,0 +1,55 @@
+const fs = require("fs");
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+
+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();
+        });
+      }
+    }
+  });
+
+  // register rss plugin
+  eleventyConfig.addPlugin(pluginRss);
+
+  return {
+    dir: {
+      input: "./",
+      output: "./_site"
+    }
+  }
+}

.eleventyignore

@@ -0,0 +1,8 @@
+Gemfile
+Gemfile.lock
+package.json
+LICENSE
+README.md
+node_modules
+scripts
+.github

.nvmrc

@@ -0,0 +1 @@
+14

README.md

@@ -8,34 +8,31 @@ 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.
 
-```sh
-git clone [email protected]:cloudfour/pwastats.git
-cd pwastats
-gem install bundler
-bundle install
-npm install
-```
+Installation:
+
+1. Clone this repository.
+1. `cd` into the directory.
+1. Run `npm ci` to install dependencies.
 
 For local development:
 
 ```
 npm start
 ```
+This will compile the site into the \_site 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

_data/site.json

@@ -0,0 +1,17 @@
+{
+	"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/",
+  "github": {
+    "repository_url": "https://github.com/cloudfour/pwastats",
+    "issues_url": "https://github.com/cloudfour/pwastats/issues/new"
+  }
+}

_includes/footer.html

@@ -5,7 +5,7 @@
         <a href="https://cloudfour.com"><strong>Cloud Four, Inc.</strong></a>
       </p>
       <p>
-        208 SW 1st Ave, Suite 240<br>
+        510 SW 3rd Ave, Suite 420<br>
         Portland, Oregon 97204 USA
       </p>
       <ul class="u-listUnstyled">

_includes/head.html

@@ -17,7 +17,7 @@
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="/feed.xml">
 
   {% if site.title %}
-    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+    <title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
     <meta name="twitter:title" property="og:title" content="{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}">
     <meta name="twitter:site" content="@pwastats">
     <meta name="twitter:creator" content="@cloudfour">

_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: title %}
+  <body{% if body_class %} class="{{ body_class }}"{% endif %}>
     {{ content }}
     {% include svg-icons.html %}
     <script>

_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>

_includes/pagination.html

@@ -1,28 +1,51 @@
-{% if paginator.total_pages > 1 %}
-  {% if paginator.page < paginator.total_pages %}
-    {% assign currentOffset = 1 %}
-  {% else %}
-    {% assign currentOffset = 2 %}
-  {% endif %}
+{% comment %}
+The logic that follows is tricky:
+* all navigation links are printed within a single forloop
+* the next/prev arrows are printed inline, then abs positioned to the sides
+* the arrows are children of the same <a> as the corresponding page #
+
+Gotchas:
+* pagination.pageNumber is ZERO based
+* pagination.pageNumber returns a string (ex: "3") which won't behave as expected when compared with integers
+* the workaround for this ^ is to use a filter like `| minus: 0` that returns an int.
+{% endcomment %}
+
+{% assign lastPage = pagination.pages.size | minus: 0 %}
+{% assign prevPageIndex = pagination.pageNumber | minus: 1 %}
+{% assign nextPageIndex = pagination.pageNumber | plus: 1 %}
+{% assign pageNumber = pagination.pageNumber | plus: 1 %}
+
+{% comment %}
+On small screens we show only a few of the page links. The following variable is used in the loop to determine
+which page links get the class that hides them on small screens. The conditional accounts for the arrow that
+dissapears on the final page
+{% endcomment %}
+{% if pageNumber < lastPage %}
+  {% assign smallScreenVisibleOffset = 2 %}
+{% else %}
+  {% assign smallScreenVisibleOffset = 3 %}
+{% endif %}
+{% assign smallScreenVisibilityCutoff = pageNumber | minus: smallScreenVisibleOffset %}
+
+{% 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 pageNumber > 1 %}Pagination--withPrevious{% endif %} {% if pageNumber < pagination.pages.size %}Pagination--withNext{% endif %}">
+
+      {% for pageEntry in pagination.pages %}
+        {% assign index = forloop.index0 | minus: 0 %}
+
+        <li {% if index < smallScreenVisibilityCutoff %}class="u-hidden u-sm-block"{% endif %}>
+          {% if forloop.index0 == pagination.pageNumber %}
             <span class="Pagination-item Pagination-item--muted">
               <span class="u-hiddenVisually">Currently viewing page</span>
-              {{page}}
+              {{pagination.pageNumber | plus: 1}}
             </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 %}
+            <a class="Pagination-item" href="{{ pagination.hrefs[forloop.index0] }}">
+              {% comment %}
+              If this page link == the previous page, print the left arrow that will be positioned left
+              {% endcomment %}
+              {% if index == prevPageIndex %}
                 <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>
@@ -33,9 +56,10 @@
                   </svg>
                 </span>
               {% endif %}
-
-              {% assign pagePlusOne = paginator.page | plus: 1 %}
-              {% if page == pagePlusOne %}
+              {% comment %}
+              If this page link == the next page, print the right arrow that will be positioned right
+              {% endcomment %}
+              {% if index == nextPageIndex %}
                 <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>
@@ -46,13 +70,17 @@
                   </svg>
                 </span>
               {% endif %}
-
               <span class="u-hiddenVisually">Page</span>
-              {{page}}
+              {% comment %}
+              Here we print index instead of index0 becuase humans don't like "Page 0"
+              {% endcomment %}
+              {{forloop.index}}
             </a>
           {% endif %}
         </li>
+
       {% endfor %}
+
     </ul>
   </nav>
 {% endif %}