Write a Script with Script Kit to Browse Hacker News

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 2 months ago
Updated 3 weeks ago

This lesson walks through a script that can query a Hacker News API and display the information in Script Kit.

Learn to do several things using Script Kit's global API methods, such as how to make and inspect data requests using get and inspect, how to display lists of data using arg, and how to display previews of the current selection.

Install Hacker News Script

Instructor: [0:00] Create the hacker news script just by typing hacker news and hitting Enter. This will open our editor with a new file called hacker news. We can just await get the API. I'll just paste that in. This gives us back a response and we can inspect the response.data.

[0:20] Get uses Axios, and Axios automatically puts the data on the response. Once I run this script, it will create a JSON file of the response. I use inspect like a postman or other tools where I'm not sure what the data is coming back.

[0:35] I toss it in to inspect and then read through the JSON of what it actually is. We can see we now have titles and URLs. Let's use those. I'll just comment out inspect. Then to display the data as a list, we'll await arg. We'll just call this select story.

[0:52] We can loop through the response.data, map, pass a function in where we get the title and the URL. Arg expects us to return an object where it has a name. It can be the title, the description is optional, but we'll use the URL.

[1:10] Then the value can be the URL as well because that's what's going to come out of arg on this side. Once we make our selection from arg, the URL will get passed out because it's the value.

[1:22] Right now, if we run our hacker news script, hit Enter, you can see we already have a list of stories and URLs. We can search through those stories or we can even search through the URLs.

[1:34] Since we probably want to open that URL after our selection, we'll just say await $template string. I'll say open. This is a bash command inside of the string. Open URL. This dollar sign is a library called ZX, which allows you to pass a template string and it runs it like you'd run a bash command.

[1:51] We'll go ahead and run hacker news. I'll just search for something on GitHub. Hit Enter. Then it pops that URL open in our browser. We can also give our script a name. Let's call it Hacker News. A description, browse the orange site.

[2:10] When we search for hacker news, we get a bit more detail of what this script is. You'll notice on the data, we actually have IDs to where people leave comments. We can display the comments in line as well. We do that on the preview.

[2:28] The preview can take an async function where we can make a request to get more data, which shows the comments, so the URL for getting the data. Let's await get again. I'll paste this URL in, is /item and then the ID. We'll need the ID off of this post.

[2:47] Then let's do that same let response, is that, and the same inspect response.data so we can see what this is. I'm actually going to give this the name of item.JSON. Otherwise, inspect just gives it a name of the date. Run hacker news, hit Enter. It creates our item.JSON.

[3:08] We can see we have some comments we can look at. The comments have content and a user. We'll go ahead and use content and user to read the comments. I don't know why anyone would read the comments, but here we go anyway.

[3:21] We'll say, let comments = response.data.comments because we're pulling the comments off of here, that array. Then we'll map, pass in a function, grab the content and the user off of each comment. We need to return a string of HTML for preview to render.

[3:42] Return some markdown, which we can render into HTML. We'll just make this a header two of the user, followed by their content. Then we'll just join these back into a string using a new line. That's all the comments set up and we still need to return a string.

[3:59] We'll return our markdown helper wrapped around a string. MD just renders markdown into HTML. We'll use the title as our h1. Then on the next line, we'll just go ahead and pass in comments. Then now once we run our hacker news script, I can search through this.

[4:21] As I select items, you'll see the title and the comments that have been made on it. Some won't have any comments, but it will display each of the top-level comments made with a post and then we can just pick whichever story we want to read. That pops open in our browser.

~ a month ago

I feel like an idiot, but I also feel like there need to be more instructions to get up and running.

  1. How did you create a script just by typing hackernews at the very beginning of the video?

  2. I created a new npm project, installed the library, wrote out the same code, and I got this error:

let response = await get(`https://api.hackerwebapp.com/news`)
               ^

ReferenceError: get is not defined
Prince Wilson
Prince Wilson
~ a month ago

After you installed ScriptKit, you needed to launch it either clicking on it from the tray in the top of macOS or using the shortcut which I believe by default is CMD + ;

In Scriptkit if it can't find the name of the command, hackernews for example, it is going to ask you to create a new script and that's what it started off with. That should get you all up and running as opposed to doing it by hand through NPM.