Design inspiration: https://fabiensanglard.net
The site was was initially built using pug templates but it was getting tedious to expand and there was so much stuff that I didn’t need. I wanted to keep it as simple as possible:
And that’s it.
So I changed the implementation to: A ruby script essentially
Now also showing list of journals separately on the main page
Site looks good, generates very quickly and is dead simple. I do need some checks that make sure that pages don’t get deleted and permalinks of pages don’t change. Would need to keep track of the list of permalinks for generated pages and each time the site is built, the build shouldn’t succeed if any permalinks have changed, or pages have been deleted or renamed. At the very least, keeping word count and page count is needed.
Added a section for listing out posts, and added my first post.
It was becoming difficult to add more featues to this site with my custom generator. I’m porting it to a Jekyll site created from scratch. Following the excellent instructions from here:
Instead of cloning an existing Jekyll repo or starting with a custom theme, would highly suggest going to this tutorial. I would have saved a ton if time if I had gone through this tutorial earlier instead of starting with my custom generator. The main reason was in the past, when I had created Jekyll sites there was so much I didn’t understand. But with this step-by-step tutorial I undertand what each file in my repo is because I’ve created every single one myself. And I can trim the site down to only the bare minimum features that I need.
The move to Jekyll started with me trying to configure Netlify CMS and it was getting very tedious to incorporate the changes needed to my custom site generator.
For projects, I can add the following data YAML file and make it editable in Netlify CMS:
And then create a list with links for each item in the data file. This way I can keep adding new projects from the CMS
I’d like to add a page with my generative art. Could be a grid of posts - if the posts become too many then I can paginate using Jekyll. Elements of an ‘art’ entry:
That’s all. If I can templat-ize this as a Jekyll collection called ‘art’ I can then create new art posts by just adding a new ‘js’ or ‘ts’ file, and that’s it. The HTML wrapper, etc can be generated automatically for each new art post. I would need to figure out how to automatically compile all TS files to JS and then generate pages that use each JS file.
Ok, so this is what I ended up doing:
Big fan of https://noahveltman.com/projects/ and added very similar styling for my art page
Decomissioning because of new and much simpler site created using Zola
I use IA Writer for most of my writing. And I came across an interesting project to use Apple notes to just write and publish: https://montaigne.io/ . What a wonderful idea! Could I do that with IA Writer?
Initial thoughts are:
But I’m unable to find any API documentation for IAWriter. But looks
like it support micropub
publishing. So I could probably use
that.
https://www.matsimitsu.com/blog/2020-08-27-iawriter-micropub-netlify-static-site
has some details on how one could go about it.
https://indieweb.org/Micropub#How_to_implement has documentation on one one can implement a Micropub endpoint. Let me try it with cloudflare functions.
I started on the path of implementing a simple micro pub server with basic functionality to publish posts via iAWriter but stopped midway because I realized that it’s not actually what I want. I just want to be able to publish a folder of markdown files. That’s all. I don’t need the functionality to publish individual files. I can just used the ‘creation’ date of the file to determine the the post date. And looks like when saving with iCloud sync with iAWriter, it saves the creation date irrespective of which device I’m using iCloud writer on.
Anyways, I’m deciding with the following approach:
Here’s the entire script to do this:
#!/bin/bash
# Create a public folder if it doesn't exist
rm -rf public/*
mkdir -p public
# Create a temp folder and clean it up if it already exists
mkdir -p temp
rm -rf temp/*
# Create a data.csv file if it doesn't exist
touch data.csv
# Loop over all the files in the posts folder
for file in posts/*.md
do
# Get the filename without the extension
filename=$(basename "$file" .md)
# Remove any commas from the filename
filename=$(echo "$filename" | tr -d ',')
# data.csv keeps a mapping of actual filename (filename.md) and generated filename (new_filename.html)
# check if the file exists in data.csv and use the same filename. If not, then
# create a new filename with the yyyy-mm-dd-title format and add an entry in the data.csv file
if grep -q "$filename" data.csv; then
echo "Found $filename in data.csv"
# Set new_filename to the second column of the matching row
new_filename=$(grep "$filename" data.csv | cut -d ',' -f 2)
else
echo "Adding $filename to data.csv"
# Get date based on the creation date of the file
# Get the creation date of the file
creation_date=$(stat -f "%SB" -t "%Y-%m-%d" "$file")
# Create title from filename by replacing all spaces with dashes
title=$(echo "$filename" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')
# Create a new filename with the date and title
# TODO: Truncate new_filename to 50 characters
new_filename="$creation_date-$title"
# Add an entry in the data.csv file
echo "$filename,$new_filename" >> data.csv
fi
# Convert the markdown to HTML and save it in the temp folder
markdown "$file" > "temp/$new_filename.html"
# Also add an entry in the temp/index.html file
echo "<li><a href=\"$new_filename.html\">$filename</a></li>" >> temp/index.html
done
for file in temp/*.html
do
# concatenate the html/before.html, file and html/after.html to create a new file in the public folder
cat html/before.html "$file" html/after.html > "public/$(basename "$file")"
done
# Copy the stylesheet file to the public folder
cp html/style.css public/style.css
# Copy the images folder to the public folder
cp -r posts/images public/images
# ----------- Preview
open public/index.html
# ---------------- Deploy
read -p "Deploy to Cloudflare? (y/n) " -n 1 -r
if [[ $REPLY =~ ^[Yy]$ ]]
then
git commit -am "Saving changes"
git push
fi
Current site looks like this:
Switched from using markdown
cli on macOS to
pandoc
so I could embed front matter in the markdown files.
Not using data.csv
at all now - all the metadata is added
at YAML front matter to each markdown file. Works seamlessly with both
IA Writer’s preview functionality as well as pandoc
.
yq
makes reading/writing the front matter in markdown files
extremely
easy with the --front-matter=
flag.