Prod release (#20)

* Update workflows

* Add contact form

* Fix tailwind paths

* Add images folder

* Add cache buster

* Add feed categories

* Fix images

.eleventy.js

@@ -1,7 +1,10 @@
 const pluginTailwindCSS = require("eleventy-plugin-tailwindcss");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
+const cacheBuster = require('@mightyplow/eleventy-plugin-cache-buster');
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("_content/images");
+
   eleventyConfig.addPlugin(pluginTailwindCSS, {
     src: "_includes/**/*.css",
     keepFolderStructure: false,
@@ -9,6 +12,15 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPlugin(pluginRss);
 
+  const cacheBusterOptions = {
+    createResourceHash() {
+      return Date.now();
+    },
+   // outputDirectory: "_site",
+  };
+
+  eleventyConfig.addPlugin(cacheBuster(cacheBusterOptions));
+
   eleventyConfig.addCollection("archive", (collectionApi) => {
     const formatter = new Intl.DateTimeFormat("en-US", {
       year: "numeric",

.github/workflows/build-deploy-prod.yml

@@ -0,0 +1,27 @@
+name: Build and Deploy Production Site
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: npm run build --if-present
+      - name: deploy site
+        uses: appleboy/scp-action@v0.1.1
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          password: ${{ secrets.PASSWORD }}
+          source: "_site"
+          target: "/home/${{ secrets.USERNAME }}/erickruizdechavez.com"
+          strip_components: 1

.github/workflows/build-deploy-staging.yml

@@ -1,8 +1,9 @@
-name: Build and Deploy site
+name: Build and Deploy Staging Site
 
 on:
   push:
-    branches: [main]
+    branches:
+      - develop
 
 jobs:
   build:

_content/blog/2019-07-19-automation-with-cli-and-node.md

@@ -23,11 +23,11 @@ The first step was to manually do what I needed to do, but not the usual repetit
 
 My first automated take at this was to use [Keyboard Maestro](https://www.keyboardmaestro.com/main/). I was able to automate Safari to open a new tab, go to the URL I needed, using JavaScript get the information I needed from the website and show a notification and put it on the clipboard so I could paste it later on another place.
 
-[<img loading="lazy" src="https://erickruizdechavez.com/wp-content/uploads/2019/07/Image-7-19-19-at-9.47-AM-130x300.jpg" alt="" width="130" height="300" class="aligncenter size-medium wp-image-154" srcset="https://erickruizdechavez.com/wp-content/uploads/2019/07/Image-7-19-19-at-9.47-AM-130x300.jpg 130w, https://erickruizdechavez.com/wp-content/uploads/2019/07/Image-7-19-19-at-9.47-AM-443x1024.jpg 443w, https://erickruizdechavez.com/wp-content/uploads/2019/07/Image-7-19-19-at-9.47-AM.jpg 737w" sizes="(max-width: 130px) 100vw, 130px" />](https://erickruizdechavez.com/wp-content/uploads/2019/07/Image-7-19-19-at-9.47-AM.jpg)
+[![](/images/Image-7-19-19-at-9.47-AM.jpg)](/images/Image-7-19-19-at-9.47-AM.jpg)
 
 And when run, it looks like this:
 
-[<img loading="lazy" src="https://erickruizdechavez.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-19-at-10.10.29-AM-300x103.png" alt="" width="300" height="103" class="aligncenter size-medium wp-image-156" srcset="https://erickruizdechavez.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-19-at-10.10.29-AM-300x103.png 300w, https://erickruizdechavez.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-19-at-10.10.29-AM.png 531w" sizes="(max-width: 300px) 100vw, 300px" />](https://erickruizdechavez.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-19-at-10.10.29-AM.png)
+[![](/images/Screen-Shot-2019-07-19-at-10.10.29-AM.png)](/images/Screen-Shot-2019-07-19-at-10.10.29-AM.png)
 
 After some testing and a couple of real-life uses, I noticed one thing. I do not need to authenticate to this page to grab the information, so I do not need Safari (or KM).
 

_content/contact.njk

@@ -2,3 +2,16 @@
 title: Contact
 ---
 <h1>{{ title }}</h1>
+
+<form action="https://formspree.io/f/mzbkydal" method="POST" class="flex flex-col">
+  <input type="text" name="_gotcha" style="display:none" />
+  <input type="hidden" name="_subject" value="ERCH Contact Form" />
+
+  <label for="name" class="mt-4">Your name:</label>
+  <input type="text" id="name" name="name" class="p-2 dark:bg-gray-700 dark:text-gray-200">
+  <label for="_replyto" class="mt-4">Your email:</label>
+  <input type="email" id="_replyto" name="_replyto" class="p-2 dark:bg-gray-700 dark:text-gray-200">
+  <label for="message" class="mt-4">Your message:</label>
+  <textarea id="message" name="message" class="h-48 p-2 dark:bg-gray-700 dark:text-gray-200"></textarea>
+  <button type="submit" class="mt-4 p-2 bg-gray-600 text-gray-200 dark:bg-gray-200 dark:text-gray-600 font-bold rounded-full">Send</button>
+</form>

_content/feed.njk

@@ -21,6 +21,11 @@ permalink: feed.xml
   <entry>
     <title>{{ post.data.title }}</title>
     <link href="{{ absolutePostUrl }}"/>
+    {%- if post.data.tags %}
+    {%- for tag in post.data.tags %}
+    <category term="{{ tag }}"/>
+    {%- endfor %}
+    {%- endif %}
     <updated>{{ post.date | rssDate }}</updated>
     <id>{{ absolutePostUrl }}</id>
     <content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>

package-lock.json

@@ -68,6 +68,18 @@
         "purgecss": "^3.1.3"
       }
     },
+    "@mightyplow/eleventy-plugin-cache-buster": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@mightyplow/eleventy-plugin-cache-buster/-/eleventy-plugin-cache-buster-1.1.3.tgz",
+      "integrity": "sha512-jM+gZkxQDuGCHlNnLRxvx5YRnLQG8NK6TLNhXkCwi8m0s+Yzt7YMlNLQ9CRLLpZiNJsn7/q59K885O4G2E0GHw==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "md5": "^2.2.1",
+        "minimist": "^1.2.0",
+        "parse5": "^5.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -660,6 +672,12 @@
         "is-regex": "^1.0.3"
       }
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "dev": true
+    },
     "chokidar": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
@@ -875,6 +893,12 @@
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "dev": true
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "dev": true
+    },
     "css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
@@ -916,6 +940,12 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "dev": true
+    },
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -2106,6 +2136,25 @@
         }
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dev": true,
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+          "dev": true
+        }
+      }
+    },
     "mdurl": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
@@ -2385,6 +2434,12 @@
       "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=",
       "dev": true
     },
+    "parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "dev": true
+    },
     "parseqs": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",

package.json

@@ -7,6 +7,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-plugin-rss": "^1.0.9",
+    "@mightyplow/eleventy-plugin-cache-buster": "^1.1.3",
     "@tailwindcss/typography": "^0.3.1",
     "eleventy-plugin-tailwindcss": "^0.3.0"
   }

tailwind.config.js

@@ -4,7 +4,7 @@ const colors = require("tailwindcss/colors");
 // https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920
 
 module.exports = {
-  purge: ["_includes/**/*.njk", "_includes/**/*.css"],
+  purge: ["_includes/**/*.njk", "_content/**/*.njk", "_includes/**/*.css"],
   darkMode: "media",
   theme: {
     extend: {