Giter Club home page Giter Club logo

slacker's Introduction

Slacker OG Image

Slacker

A bot that notifies you on Slack whenever your company/product is mentioned on Hacker News.

Demo
Add to Slack

or deploy your own


Built With

  1. Vercel Functions for cron processes & event subscriptions via webhooks
  2. Vercel Cron Jobs for triggering cron processes.
  3. Hacker News API for pulling data
  4. Slack API for sending and unfurling messages
  5. Upstash for key-value storage (Redis).

How It Works

  1. Set up a Vercel cron job that pings our /api/cron endpoint once every 60 seconds.
  2. Get the last checked HN post ID (lastCheckedId) and the list of keywords to check against from Upstash.
  3. Get the latestPostId using HN API's maxitem endpoint. Then, perform checks against each post between lastCheckedId and latestPostId to see if they contain any of the delineated keywords.
  4. For each positive post, send its link to Slack using the chat.postMessage method.
  5. Listen to the link_shared event at our /api/event endpoint. Once an event occurs, send a POST request to Slack to unfurl the link using the chat.unfurl method.
Slacker Overview

One-Click Install

Here's a 60s video that walks you through the installation process, step-by-step.

You can click the button below to install the bot directly into your desired Slack workspace:

Add to Slack

Once it's installed, create a channel to receive notifications in and start configuring the bot with the /configure command.


Deploy Your Own

You can also deploy your own version of this bot using Vercel and Upstash. Note that while this is in early-access, some of these processes might change.

Prefer a video tutorial instead? Watch this video.

Step 1: Create Slack App + Secure Env Vars

  1. Navigate to api.slack.com/apps and click on "Create New App".
  2. Select "From scratch" and input Hacker News Bot as the name of your app.
  3. Voilà! You've just created your Slack app. Here, you'll receive 3 values that will be used for your Vercel deployment in the next step:
    • Client ID: This is your App's unique public-facing ID that will be the value for the NEXT_PUBLIC_SLACK_CLIENT_ID env var.
    • Signing Secret: This is the signing secret used to validate that requests are genuinely coming from Slack. It will be the value for the SLACK_SIGNING_SECRET env var.
    • Verification Token: This is the verification token used to validate that requests are genuinely coming from Slack. It will be the value for the SLACK_VERIFICATION_TOKEN env var.

CleanShot 2022-07-25 at 02 16 31

Step 2: Create Upstash Account

Go to console.upstash.com and create an account. You'll need it for the next step.

Step 3: Deploy to Vercel

You can deploy your bot to Vercel with one-click:

Deploy with Vercel

Be sure to include all 5 of the env vars above in your deployment.

When the project finishes deploying, get your project's domain (e.g. https://slacker-eight.vercel.app/). You'll need it for the next step.

Step 4: Configuring Slack app

For your Slack app to be able to send/unfurl messages in your Slack workspace, we will need to configure a few things:

Step 4A: Configuring OAuth Scopes

  1. From your Slack app home screen, select "OAuth & Permissions" from the sidebar (under "Features").

  2. Scroll down to "Scopes", and add the following scopes under "Bot Token Scopes":

    • chat:write
    • chat:write.public
    • links:read
    • links:write

    CleanShot 2022-07-25 at 13 49 18

Step 4B: Configuring Event Subscriptions

  1. Now, select "Event Subscriptions" from the sidebar (under "Features").
  2. Toggle "Enable Events" to "ON".
  3. For the "Request URL" field, input your Vercel project's domain and append /api/event to it. The final URL should look something like https://slacker-eight.vercel.app/api/event.
  4. Scroll down to "Subscribe to bot events". Add the link_shared bot user event.
  5. Do the same for `Subscribe to events on behalf of users". Slack app configurations (1)
  6. Under "App unfurl domains", add news.ycombinator.com. Slack app configurations
  7. Click on "Save Changes".

Step 4C: Configure Slash Commands

Select "Slash Commands" from the sidebar (under "Features"). Create the following commmand with its respective Request URLs (based on your Vercel project's domain):

  • Command: /configure
  • Request URL: https://[YOUR_VERCEL_PROJECT_DOMAIN]/api/cmd/configure
  • Short Description: Configure your HN Slack Bot

Step 4D: Enable Interactivity

  1. Now, select "Interactivity & Shortcuts" from the sidebar (under "Features").
  2. Toggle "Interactivity" to "ON".
  3. For the "Request URL" field, input your Vercel project's domain and append /api/response to it. The final URL should look something like https://slacker-eight.vercel.app/api/response.
  4. Click on "Save Changes".

Step 4E: Install App to Slack Workspace + Get OAuth token

  1. Go to "Basic Information" (under "Settings").
  2. Under "Install your app", click on "Install to Workspace".
  3. You should receive a notification that your app has been installed in your Slack workspace.
  4. Go back to "OAuth & Permissions". Copy the value of "Bot User OAuth Token". CleanShot 2022-07-25 at 18 28 46
  5. Set it as the SLACK_OAUTH_TOKEN env var in your Vercel project. Here's a guide on how to do that. Add env var
  6. Redeploy your Vercel project for the changes to take effect.
  7. To verify that this worked, go to any channel on your Slack workspace and send a Hacker News link. The link should now unfurl and show a nice preview (like the one above).

Authors

This project was originally created by Steven Tey at Vercel, with contributions/feedback from:


License

The MIT License.


slacker's People

Contributors

chronark avatar healeycodes avatar jridgewell avatar leerob avatar steven-tey avatar tywayne avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

slacker's Issues

Step 4E redeploy not working

Has anyone else had this issue?
I also tried to trigger a redeploy by making changes in the repo and it's not happening.
A temporary issue with Vercel maybe?

image

Include HN title in previews

I think it'd be useful to include the HN title in place of the "Hacker News" text at the bottom. The additional context would help, for instance, to know that the comment is discussion a hot article (which is getting a lot of comments), or if it's a new post.
Screen Shot 2022-07-22 at 9 31 03 PM

Weird blink on Chrome bookmarks tab

Screen.Recording.2023-09-04.at.7.17.42.AM.mov

Device Info

OS: OS X Ventura 13.5
Browser: Chrome Version 116.0.5845.140 (Official Build) (arm64)

Tested on MacBook Display and external display

Discord Support

I've gotten a bunch of requests for Discord support and I'm brainstorming how this would work.

Thoughts?

PRs welcome too! :)

Reddit Support

I've gotten a bunch of requests for Reddit support and I'm brainstorming how this would work.

I'm thinking of using something that streams comments from Reddit, something like https://github.com/rockets/demo but an NPM module.

Thoughts?

PRs welcome too! :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.