.

Post to Eleventy from iOS with Drafts, Shortcuts and Working Copy

April 23, 2022

For me using a static site generator such as Eleventy to blog has one big advantage and one big disadvantage compared to other systems (eg, WordPress). On the plus side hosting is extremely easy because I just need to host static files, no need to run PHP, Ruby, or Node.js on the server. However, blogging when I'm away from my Mac is more complicated than with a server-side system that has either an app for iOS or at least a mobile website I can log in.

When I was recently migrating POP.md from Tumblr to Eleventy on my own server I was thinking how I could handle writing new posts from the go and came up with a solution that involves Drafts, Shortcuts, and Working Copy and gives me the following workflow:

  1. I start a new post in Drafts with the New Draft with Template action, which provides me with the basic front matter structure.
  2. I write the post in Markdown and add all the meta information about the post to the front matter.
  3. When the post is ready to be published, I invoke the Post to Eleventy shortcut directly from Drafts.
  4. The shortcut parses the front matter, extracts the date and title, and generates a slug for the post. The slug is used as file name for the new post.
  5. Next the shortcut parses the post itself to find Markdown image links and opens a Photo picker for each image it finds. I can select an image and the shortcut will prepare the file (remove metadata, resize, convert to JPG if a photo or to PNG if a screenshot) and save it with the name I defined in the image link.
  6. Using Working Copy the shortcut writes the files (one Markdown file and all linked images) to the Git repository and creates a commit.
  7. The last step of the shortcut is to pull and push the repository.
  8. Pushing the repository causes the Continuous Integration to start a build. It runs the Eleventy and then rsyncs the built site to my server.

Demo Time

Just give me the shortcut

Ok, here it is:

The Slugify and Very Simple YAML Parser shortcuts are used in the Post to Eleventy shortcut and need to be installed separately to make it work. I should mention that both of these are very simple and I've created them mostly for my own needs at the moment.

To integrate this shortcut into Drafts I recommend the following two actions:

Very Simple YAML Parser

I've created the Very Simple YAML Parser because I was frustrated by having to construct the file name manually and I wanted the script to extract this information from the front matter. However, at the moment it can only parse the most basic YAML possible. The following works:

date: 2022-04-23
title: 'String with single quotes'
description: 'String with double quotes'
tags: [foo, bar]

No other YAML syntax is supported, don't even try to write multi-line values, quotes in arrays, and so on. This is very simple at the moment, but I've created this as a separate shortcut so that I can potentially improve this in the future.

Slugify

The Slugify shortcut takes a human-readable string and converts it into an URL slug. It replaces certain special characters with similar looking ASCII characters (ä → a) and whitespace with dashes. The shortcut contains a dictionary with all the replacements, which is very limited.

Limitations

Currently the shortcut does not work on Mac OS because it relies on Working Copy which is only available on iOS. I'm not sure if I even want to have this shortcut on Mac OS, because I use the file system for images.

Next Steps

One thing that I want to add to my workflow is the ability to receive a push notification once the site has been deployed. This should be possible by triggering a Pushcut webhook on my CI once the deploy step is done.