How to work with the Unsplash photo API and display it with Raycast

Raycast is one of the best tools any modern developer should have at their disposal. It replacements spotlight but with the added benefit of having an extension store and custom allowing scripting.

The extension store has over 500 plugins that range from viewing your github pull requests, viewing the NBA official rankings to translating languages on the fly and etc.

The extensions marketplace is robust and contains any little utility and applets you can think of as a developer but one of the most understated features of Raycast is the ability to script your own commands

Before extensions became the talk of town in the Raycast dev space, commands was where it was at. Raycast has an extension API that permits any developer to create their own extension but after reading the API docs for custom extensions, it felt overwhelming and overkill if you wanted to create a simple script that retrieves some information.

In my case, I am a hobbyist photographer who post his pictures on unsplash.com and would love to view my total view count on Raycast without having to visit unsplash.com

You can write scripts in bash(sh), python, ruby, swift, javascript, typescript with deno etc. In this article I am going to write a script in typescript using deno as the runtime. To start, you need to pass certain parameters to let Raycast know its an executable script it should run:

#!/usr/bin/env -S deno run --allow-net

// Required parameters:
// @raycast.schemaVersion 1
// @raycast.title Unsplash View Count
// @raycast.mode inline

// Optional parameters:
// @raycast.icon 🌉
// @raycast.packageName Media

// Documentation:
// @raycast.authorURL https://github.com/kennymark
// @raycast.author Kenneth Coffie
// @raycast.description Get your unsplash total view count

The first line should always specify the runtime. By default deno with zero permissions so you might need to allow some permission. The rest of the parameters are Raycast specific commands to let Raycast know how to run your script.

const id = 'your_unsplash_id'
const { format } = new Intl.NumberFormat('en-GB', { maximumSignificantDigits: 3 })

async function getStats() {
  const req = await fetch(`https://api.unsplash.com/users/${YOUR_USERNAME}/statistics?client_id=${id}`)

  const resp = await req.json()
  const total = resp.views.total
  return format(total)

}

getStats()
  .then(console.log)
  .catch(console.log)

Before you rush to build your own script for Raycast, first check out https://scriptcommands.com. It contains a hundreds of custom scripts that you may find useful. You could also read the official scripting guide here.