This redesign started with a simple note in Obsidian:

Simplify. Keep the orange, but have less of it. Too much in nav. Move most of the extra info into pages linked off the About page.

I also wanted something with a sidebar again.

I wanted to stick with the Site Editor, so I used a child-theme of the Twenty Twenty-Four theme generated with Create Block Theme. I went with Twenty Twenty-Four because it purports to be extremely flexible and I wanted to use a theme with the most up-to-date Site Editor tooling and best practices.

The first thing I did was set up my own template parts, overwriting the defaults. It was a bit time consuming, but TT4 doesn’t have a left sidebar or sidebar navigation template or pattern. I made as much as I could reusable as a named template part so I can easily make changes later and keep them consistent across my various templates.

I used some very minor custom CSS (roughly 50 lines), mostly relating to my footer animation and some mobile styles for the navigation.

I decided to go with default system fonts rather than loading a web font. Simplify.

Everything non-essential got removed from the main navigation and either linked in the footer or somewhere more contextually appropriate on a subpage. Navigations on personal websites don’t need dropdowns.

I removed the custom PHP template I had for my Reading page and turned it into a regular page in the editor, and pretty soon I’ll probably remove the custom post type and custom fields that it relied on, too. I don’t think I really need a separate post type, just a list will do. Simplify.

Here is what it looks like:

Places I took inspiration from:

• From Manuel Moreale and Steph Ango‘s post lists on their homepages. I kind of like how both of them have their latest post at the top, which I might adopt. We’ll see.
• From Jeremy Felt, the right aligned titles and how to handle my h-card
• From Footer.design, a bold footer that has a surprise
• From James G, not being afraid to highlight specific sections of my site in my footer that I want people to look at. Things like /now, /uses, /meta, /blogroll
• From my own digital garden, the idea that having the last updated date on pages is useful to understand how fresh or stale they are.

I’m sure there are more folks I took unconscious inspiration from, too!

I included a Meta page in the footer that explains how this site is built and has a rough history of the changes this site has gone through since 2007. It was inspired by Anh, Shea Fitzpatrick, and Jeremy Felt. Since I’m a digital hoarder, I had backups of almost every iteration.

I know it isn’t perfect, but I wanted to ship it and get it live.

Where I want to go next with this:

• Customize some category archive pages with additional info. Things like Photography and Woodworking can use helpful contextful info on the archive pages.
• Continuing to refine pages like /now, /uses, /about, and /blogroll
• Keep improving the mobile styling
• Refining block styles as I use them
• Fixing old posts that now look wonky
• Keep figuring out what I like and what is useful on the homepage
• Style webmentions, pingbacks, and comments better

If you find something broken, please let me know. There are some templates I haven’t touched (though I don’t think anything actually uses them, but I should verify that.) 🚢

Andy SylvesterArchived Link wrote me asking about my digital garden:

I followed links to your site from Dave Winer’s Scripting News site, your digital garden site is cool! I am interested in what theme you started with to create that site.

Andrew Shell has developed some tools for creating feeds for Federated Wiki installations (https://feeds.fedwikiriver.com/). I am interested in your thoughts about how to create feeds for wikis.

Andy Sylvester
andysylvester.com

Thanks, Andy! I hope you don’t mind me writing a full post as a reply instead of an email. I’ve received other questions about this recently and I find it useful to document this stuff so it is searchable and linkable.

If you want to use the theme and templates I’ve set up, I can try to package it up for you. I didn’t want to do that here because it isn’t in a state I feel comfortable releasing publicly, but happy to share it privately and get your feedback on what would be good to add. I consider it an ongoing experiment and subject to change at any time.

Theme and templates

For notes.cagrimmett.com I used the Blockbase theme. I picked that one because it is barebones but has nice Site Editor support, and I didn’t want to fight existing conventions. I wanted something that would stay out of my way but give me modern WP tools.

If I were to do it again, I’d probably use the new Twenty Twenty-Four theme. It is super flexible and has the lastest-and-greatest Site Editor and blocks support.

As you can tell, I’m all-in on the block editor.

If you haven’t used the Site Editor yet, the main way it differs from classic themes is that it gives you the ability to customize templates right in the block editor, which is very powerful.

I customized the templates in the Site Editor for the Blockbase theme, so I thought I’d call those out:

• Homepage
  • I have two lists at the top of my homepage: Recently Created and Recently Updated.
    • One is a list generated by published date and one is a list generated by post modified date. I like to be able to see not only what is new, but what has been updated recently. I use the more powerful query loop in Generate Blocks to sort by post modified.
    • In the garden metaphor, I think of these as Planted and Tended.
  • Page Index
    • I opted to use Pages instead of Posts because I liked the hierarchy of Pages and thought I’d use that. I think this might have been a mistake and I’m considering moving everything to Posts and forgetting the hierarchy altogether. The hierarchy does make things easy to find, but so would better tags and categories.
    • I do have some private pages that only I can see when logged in, so there is a section on the homepage for that, too.
    • This is generated by the Page List block. If I moved to posts, I’d probably have a bunch of query loops for different categories.
  • Categories
    • Self explanatory
  • Tags
    • Self explanatory
• Single Page
  • At the top I’m trying to surface relevant metadata:
    • Hierarchy (basically breadcrumbs from the hierarchical pages)
    • Categories and Tags
    • Published date
    • Last Modified date
  • Some pages have a sidebar with links to child pages to try to show the note’s context within a similar group. I don’t think I’ve nailed this yet.
  • Pingbacks and trackbacks to surface cross-linking between posts. I don’t think the bottom is the right place for this… I think I should put this in the sidebar instead.
    • Cross/backlinking are handled via enabling trackbacks and pingbacks on pages.
      • add_post_type_support( 'page', 'trackbacks' );
    • I use Webmentions here, too!

Plugins

• Tags are topical and freeform, auto-linked by TaxoPress
  • TaxoPress only has posts turned on by default. You need to go into the settings and enable for pages.
• Making use of the GenerateBlocks plugin, which has a great replacement for the core Query Loop block with the ability to customize the query just like you can in code with WP_Query
• Breadcrumbs via Breadcrumb NavXT
• Redirection to monitor permalink changes so I can easily reorganize things without breaking links.
• Webmentions as an addition to pingbacks and trackbacks for the indieweb.
• Post Modified Time Block for easily displaying the post modified date on a page
• Bookmark Card for nice looking bookmark cards
• Child Pages Card for displaying child pages in the sidebar

Feeds

I am interested in your thoughts about how to create feeds for wikis.

I have some thoughts in the WordPress ecosystem, and some cross over to wikis.

• WordPress has incredible feed support already. Categories, tags, and search queries have their own feeds, which is quite helpful for people only interested in subscribing to certain topics.
  • Wikis have categories, so they could have category feeds, too.
• Pages do not have feeds by default, but you can add them with this plugin: https://wordpress.org/plugins/rss-includes-pages/
• It would be great if RSS feeds could surface updates to existing content, too. I’d like a feed for my recently updated list. My colleagues at Newspack have a plugin that includes an <updated> tag, which is a step in the right direction. It might require a different sorting mechanism for the feed reader. I’ll float it by Dave for FeedLand 🙂
  • Wikis have a great history page, so it is theoretically possible to have an updated element in the feed for the most recent updated time.

Future additions/ongoing work

• I want to better surface cross-linking within the site and inbound links from around the internet.
• I want neat previews for outgoing links. Transclusion. I have some code for this that Jeremy Felt wrote for perell.com, but need to integrate it.
• I want better context. On each page I want to show related content by category and show page ancestry siblings rather than just children. This would be easier if I moved to posts rather than pages.
• I want to show revisions and/or changelog to show how notes have changed over time. I’m working with the WordPress Gutenberg team to figure out how to do this.

A couple days ago I asked Dave Winer how he was able to point news.scripting.com to a FeedLand news product, because CNAME records have to point to a hostname and can’t include a path. I wanted to point a subdomain at one of my own news products on FeedLand and couldn’t figure it out.

The answer was PageParkArchived Link, a simple web server he wrote in 2014 to park his unused domains, and later expanded to include useful tools like serving redirects, content from GitHub and S3, and aliasing content from another site.

I realized that I had to set that up for myself. I have a bunch of domains I don’t use, some old sites that I should just turn into a static archive and stick somewhere, and domains that I’d like to point to other services, such as FeedLand news products.

That night I decided to set up PageParkArchived Link on a DigitalOcean droplet. I thought I’d write out the steps in case I or anyone else want to set it up on DigitalOcean in the future.

Assuming you have a DigitalOcean account and are logged in:

1. Set up a NodeJS droplet. I used DO’s NodeJS droplet template, which as of the time of this writing uses Node 18.12.1 and Ubuntu 20.04. I don’t expect to need a high powered server due to the low traffic to these domains, so I started with a $4/mo basic shared 512MB CPU with 10GB SSD and 500GB transfer. Basically the lowest tier.
2. After the server came online, I SSH’d in.
3. At the root, I cloned the PagePark repo: git clone https://github.com/scripting/pagePark.git
4. Go into the pagePark directory: cd pagePark
5. Install the app and dependencies: npm install
6. Start the app: sudo -u root pm2 start pagepark.js
7. Edit the nginx config to serve the app to the world. The default hello.js app that comes with the droplet is set to serve from port 3000. PagePark is set to serve from 1339, so we need to edit the location / block in nginx:
   • nano /etc/nginx/sites-available/default
   • Look for the block that looks like this:

location / {
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://localhost:3000;
}

8. That second to last line, proxy_pass http://localhost:3000; is what we want to edit. Simple change 3000 to 1339. The line should now read: proxy_pass http://localhost:1339;
9. Exit and save: ^X to exit, y to confirm save, hit enter to save it to the same filename
10. Restart nginx: sudo systemctl restart nginx
11. Delete the default app included with the droplet: sudo -u root pm2 delete hello
12. Schedule the PagePark app to run at launch and stop the default hello app from running at launch: sudo -u root pm2 save
13. Point a domain at the droplet to use for easy CNAME pointing for other domains. I used pagepark.cagrimmett.com and pointed it via A record to the IP address listed in the DO dashboard under the project I added the droplet to > Resources > Domains.
14. Back on the server, I went to ~/pagePark/domains and added a folder for pagepark.cagrimmett.com, then added an index.html with a simple message to test my setup. I also moved the ~/pagePark/prefs/error.html and ~/pagePark/templates/* to the pagepark.cagrimmett.com folder to make the accessible, then edited them and changed the path for the ~/pagePark/config.json keys for the following items to serve them from this server rather than Dave’s:
    • urlDefaultMarkdownTemplate
    • urlDefaultOpmlTemplate
    • urlDefaultErrorPage

That was it! pagepark.cagrimmett.com started working, then I set up a couple more domains by adding new folders to the domains folder (follow the docsArchived Link) and adding a cname record for the domains to pagepark.cagrimmett.com.

• peekskill.cagrimmett.com shows my Peekskill news product, running on FeedLand. It pulls in feeds from local news sources and the City of Peekskill.
• sideproject.showArchived Link shows the contents of a simple markdown file
• behindtheart.xyz – an interview website I set up on WordPress where I interviewed generative artists in 2021, then abandoned. I want the interviews to stay live, but I’m probably not going to do them anymore, so I generated a static site and put the HTML files here instead of keeping the WP site live. I’m probably going to do this with a few more old WP sites.
• More to come soon!

Thanks for open sourcing PagePark, Dave! I’m already finding it useful.

UPDATE 11 Feb 2023:

Good news! I refactored this to work with the Share Sheet and to prompt you for credentials and a media endpoint on the initial setup.

Here is the new link: https://www.icloud.com/shortcuts/cf31d94107e24e5e947a801fb9d8132c

Here is how easy it is to use on macOS.

And here is how easy it is to use on iOS:

Tonight I sat down and figured out something that has been in my head for months: Uploading photos to my WordPress Media Library with an Apple Shortcut. It works on both macOS and iOS.

I use the REST API to upload them to the /wp/v2/media endpoint via a POST request. For authentication I use a username and Application Password that I base64 encode.

Here is the basic workflow:

• Select the photos
• Loop through them and convert them to JPEGs. This is necessary because WordPress does not currently handle HEIC images, the default iOS image format.
• Use a POST request to upload the converted JPEGs to the /wp/v2/media endpoint.

You currently have to run this from Shortcuts.app. Share sheet support does not work on macOS Monterey, so I still have the step in there to pick images from Photos.app. I know they added this in Ventura, but I haven’t upgraded yet. Once I do, I’ll change this to only take images from the Share sheet so you can start in Photos.app rather than Shortcuts. I know share sheet support works on iOS, but since I blog most on my Mac, I wanted to make a shortcut that works in both places.

If you’d like to use this Shortcut, you can get it here: https://www.icloud.com/shortcuts/e473f76d1692444896077ebcdbc4c893

If you use it, you’ll need to make two changes:

1. In the Text area at the top, put your WordPress Username and Application Password in this format: username:password
   • Application passwords are found under wp-admin -> Users -> your user profile -> Application passwords
2. Change the domain from example.com to your website’s domain.

Day 12!

I tried to add user authentication with EmberFire and Ember Simple Auth. I get through the provider workflow with Twitter, see a new user in Firebase, see the correct user data in the network panel in Chrome, and the ember_simple_auth-session cookie has “authenticated” in the content field. But session.isAuthenticated never seems to be true.

I must be doing something wrong, but I don’t have the time to figure it out today. Time to keep packing. I’m buying a house tomorrow and moving in this weekend!

Day 8! Another short session of work on a plane before I go home and pack up my apartment. Today I finished separating different functional parts of my components into individual components and started integrating Ember data.

I hit an issue I wasn’t able to research since I wrote it only a place without internet access, so the below might be wrong.

My models:

export default DS.Model.extend({   garden: DS.belongsTo('garden'),   startDate: DS.attr('date'),   name: DS.attr('string'),   color: DS.attr('string'),   daysToMaturity: DS.attr('number') });  export default DS.Model.extend({   name: DS.attr('string'),   startDate: DS.attr('date'),   plants: DS.hasMany('plant') }); 

Tomorrow’s goal:

• Figure out why store is throwing errors for me

Day 7! Today I’m traveling, but I got some work done on the plane: I figured out my routes and started breaking apart components to their individual functions.

My routes:

Router.map(function() {   this.route('login');   this.route('signup');   this.route('gardens', function() {     this.route('edit', { path: ':slug' });     this.route('new');   });   this.route('public-profile', { path: ':user_slug' }, function() {     this.route('garden', { path: ':garden_slug' });   }); }); 

Tomorrow’s goal:

• Finish breaking the components apart
• Get the new routes working

Day 6! Short update today after tons of phone calls, move packing prep, and packing for a trip.

Today’s progress

• Removed the mocked plant data for my testing and built out the plant addition flow:
  • If there are no plants, hide the chart, show the form, and show a header
  • After adding a plant, hide the form, render the chart, and show the Add a Plant button
  • Only add the resize listener after the chart renders

I also tried to fix a bug with the color picker where it wouldn’t close, but didn’t solve it.

Amanda gave me another good idea today: For items like tomatoes, it would be good if there was another bar at the end that was lighter to signify a harvesting time window.

Today’s commits:

1. first use flow

Tomorrow’s goal:

• Dig in further to tailwind for styling
• Read the Ember Data docs
• Use D3’s update() to update the chart instead of destroying and redrawing it
• Break the components apart

I’ve wanted to do Advent of Code for a few years, but I just can’t get excited about random puzzles. Not knocking all the folks involved in it–more power to you! It just isn’t for me. So I haven’t participated.

Last week while flipping through a seed catalog to figure out what I’m going to plan in my garden next year, I had an idea: I want to build a plant starting/harvesting calendar for my garden. Building that will be my own Advent of Code project this year.

Today was Day 1, planning day.

Name

Plant Gantt. Amanda came up with it and it is perfect. A gantt chart for plants.

Goals

1. Build an interactive planting/harvesting calendar for vegetables.
2. Deploy my own Ember app with a user login system on something like EmberFire
3. Beef up on my D3 and Ember skills.
4. Use Tailwind for the first time
5. Make progress every day.

Features

• Ability to add a plant name, seed start date, days to maturity, and pick a label color for it.
• Visualize the plant’s growing period on a 52 week calendar
• See the current day marked across the full calendar
• Ability to hover over a plant and see how long it has been growing and how long left until harvest
• Ability to create an account and save your calendar
• Ability to print the calendar you created
• Ability to create multiple calendars with unique names

I may not get this done in 25 days, but I intend to make progress every day. It will be tough with the month ahead: Two out of state trips, moving into our new house, and holiday parties. I’ll carve out time every day to get some work done, though.

Today’s progress

1. Picked a name and got a domain
2. Planned out the features and my goals for the project
3. Set up the git repo and basic Ember app
4. Install add-ons: ember-d3, ember-cli-tailwind

Tomorrow’s goal

• Figure out the basics of the D3 gantt-style chart