Write a Script with Script Kit to Browse Hacker News
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.
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.