ℹ️ Update! Raindrop has a dedicated quick action specifically for this flow called "Add to Unsorted". https://twitter.com/raindrop_io/status/1651992165306839064?s=20

I recently switched from Instapaper to Raindrop. I love Instapaper with all my heart, been a subscriber for over a decade, but it never saw a lot of updates and the search never produced helpful results. Enter Raindrop which is another read-later service created by an indie dev with a wealth of awesome features. Some I didn't even know I wanted like mood board views of my links.

Anyway, one thing I loved about Instapaper is bookmarking was fast. I didn't have to worry about input and the UI was quick and disappeared after saving. Raindrop prompts for input while it parses the page contents to populate the title, description and some other metadata. I then have to tap Save to capture the bookmark. I missed my one-tap instant link saving!

To get back to a more rapid link-saving experience I mixed the following ingredients:

• My hosted site on Vercel https://drk.wtf using Remix

• Apple Shortcuts to add a new entry for bookmarking

• The Raindrop API

Adding an API route to Remix on Vercel

The source for the API integration can be found here https://github.com/derekr/drk.wtf/blob/main/app/routes/api/raindrop-new.ts.

I'm highlighting these technologies because they're what I am already using for my site. This is a use case I've been anticipating for a while and why I picked Remix, the web framework, and Vercel, my hosting provider of choice, in the first place since they allow me to add custom API route handling.

It's pretty light and just acts as a light proxy to the Raindrop API while providing some security around using my Raindrop test token. The route is accessible at /api/raindrop-new.

import { ActionArgs } from '@remix-run/server-runtime'

// This seems like a good candidate for an edge function. Depending on how long the Raindrop API request takes to resolve I might seek alternatives that are quicker like creating an inngest task.
export const config = { runtime: 'edge' }

export async function action({ request }: ActionArgs) {
  const headers = request.headers
  const payload = await request.json()

  // apple shortcut has the token as well to mitigate any 
  // potential abuse of this public endpoint
  if (headers.get('token') !== process.env.RAINDROP_TEST_TOKEN) {
    throw new Error('Invalid token')
  }

  // Simple fetch, but this could be queued up as a background job that can tolerate errors and handle retries etc.
  return fetch(`https://api.raindrop.io/rest/v1/raindrop`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.RAINDROP_TEST_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ pleaseParse: {}, link: payload.link }),
  })
}

Raindrop API Token

For simple use cases, Raindrop allows you to create a custom integration in their UI and then generate a Test Token for personal use.

https://developer.raindrop.io/v1/authentication/token

Apple Shortcut

Apple Shortcuts are wildly underrated and used. This feature is included across MacOS, iOS and iPadOS and provides a well of Actions that make automating workflows a breeze.

This is the simplest way I could think of to add something to a share sheet that could call out to my new endpoint. It's not perfect since the share sheet doesn't automatically dismiss after the request is resolved and it's still a little slow in executing. Going to look into possible queuing up on the device if that's a thing so the shortcut handler is as fast as possible.

The Shortcut consists of accepting various inputs that could distill into a link variable containing the desired URL. I am the Get contents of Action to handle the POST request to the API. You can set custom headers and a JSON payload. I check the Show in Share Sheet option under the Info section of the Shotcut so I can access it from any app that supports sharing.

Now I have my speedy bookmarking with very little compromise and it only took about 30 minutes of mostly researching Apple Shortcuts.