Back to home

Setting upGenerating the docset listOpening the URLIn useResources and Further Reading
Building an Alfred extension for my developer notes main image

Building an Alfred extension for my developer notes

In this post, I will run through a short project I made using alfy to get an Alfred Workflow up to quickly open notes I have on my open-source note-taking website.

End result

End result

Setting up

If you follow the usage instructions on the alfy GitHub page, step 4 "Go to your new workflow directory" will you get you to the correct place that your code needs to be added in the Alfred workflow.

Getting there is half the battle already done.

This is how my config looks like:

COnfiguration

COnfiguration

Once there, run the following in a terminal to get things up and going:

1 2 3 yarn init -y yarn add alfy touch index.js

As for the Alfred code itself, it was super straight forward:

1 2 3 4 5 6 7 8 9 10 11 12 const alfy = require("alfy"); const json = require("./data.json"); (async () => { const items = alfy.inputMatches(json, "search").map((element) => ({ title: element.title, subtitle: element.subtitle, arg: element.arg, })); alfy.output(items); })();

That is literally it for the magic that happens with Alfred, but what is the json I am importing?

I decided to have a script that generates the latest doc set during my Git pre-push hook from the developer notes repo.

Generating the docset list

As mentioned above, I have a helper script that will generate the data.json file above.

That file looks like so:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 #!/usr/bin/env node /** * Dynamically generates a script you can `source ./bin/docs-autocompletions` * to gen local options for installation. */ const fs = require("fs"); const startCase = require("lodash.startcase"); const kebabCase = require("lodash.kebabcase"); const BASE_URL = "https://docs.dennisokeeffe.com/manual"; // Redacting the directory infor for where it is kept const parentDir = "/path/to/developer-notes"; const getDirectories = (source) => fs .readdirSync(source, { withFileTypes: true }) .filter((dirent) => dirent.isDirectory()) .map((dirent) => dirent.name); const getFiles = (source) => fs .readdirSync(source, { withFileTypes: true }) .filter((dirent) => dirent.isFile()) .map((dirent) => dirent.name); const main = () => { const directories = getDirectories(`${parentDir}/manual`); const json = []; for (const directory of directories) { getFiles(`${parentDir}/manual/${directory}`) .map((file) => file.replace(".md", "")) .map((file) => json.push({ title: startCase(file), subtitle: startCase(directory), arg: `${BASE_URL}-${kebabCase(directory).toLowerCase()}-${kebabCase( file ).toLowerCase()}`, search: `${startCase(directory)} ${startCase(file)}`, }) ); } fs.writeFileSync( "/path/to/alfy/code/data.json", JSON.stringify(json), "utf-8" ); console.log( "[Success]: Autocompletions written to bin/lift-autocomplete.sh for project" ); }; main();

The above code is not doing anything magical. It follows this process:

  1. Get the directory where all the docs are stored on my local developer notes repo.
  2. Iterate through the subdirectories, get the files and map through to make string changes that will end up matching the JSON structure that Alfy requires for the alfy.inputMatches function in my Alfred Workflow script.
  3. Write all that information to the data.json file in the Workflow directory.

That's it! Everytime I make a change in the developer notes, a pre-push Git hook will generate the latest data.json file and place it where it needs to go. Easy peasy!

Opening the URL

This last part is nice and straight forward - you just need to take the selected input from Alfred and pass it to "Open URL"!

Open at URL workflow

Open at URL workflow

Now I can peruse my notes locally from wherever I want!

In use

Searching through Alfred looks like so...

Searching on Alfred

Searching on Alfred

...and selecting the document will open up my browser at the page.

Opening at the website

Opening at the website

Resources and Further Reading

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.