Better Bookmarks with Notions and IOS Shortcuts

 

Are you tired of cluttered and disorganized bookmarks? Look no further, as this article will show you how to streamline your bookmark management process using Notion and iOS Shortcuts.

Use Case

Saving a website’s URL, Open Graph Image (or screenshot), and appending this data to a Notion Database.

 

Building the API

Getting Started

const express = require("express");
const app = express(); // initialize express
const axios = require("axios");
const cloudinary = require("cloudinary").v2;

npm install -s express axios cloudinary

Defining our Endpoint

app.get("/", (req, res) => {
  const url = req.query.url;
  const api = "https://jsonlink.io/api/extract?url="; // A handy tool you should check out!
// Geting Opengraph information from jsonlink
  axios
    .get(api + url)
    .then((response) => {
      let data = {
        title: response.data.title ? response.data.title : "No Title", // Getting the title
        url: url,
        description: response.data.description
          ? response.data.description // Geting the description
          : "none",
        image: response.data.images[0]
          ? response.data.images[0]
          : "https://s.soup.cool/api?url=" + url, // If there is no image we'll grab a screenshot
      };
// Remember to set your Cloudinary values
      cloudinary.config({
        cloud_name: process.env.CLOUD_NAME,
        api_key: process.env.API_KEY,
        api_secret: process.env.API_SECRET,
      });
// Upload the image URL to Cloudinary in the "bookmarks' folder
      cloudinary.uploader.upload(data.image,{folder: "bookmarks"}, function (error, result) {
        if (error) {
// If we can't upload to Cloudinary for some reason return the original URL shared.
          let returnData = {
            image: data.url,
            description: data.description,
            title: data.title,
            url: data.url
          };
          res.setHeader("Content-Type", "application/json");
          res.send(JSON.stringify(returnData));
        } else {
// Return the hosted image URL.
          let returnData = {
            image: result.url,
            description: data.description,
            title: data.title,
            url: data.url
          };
          res.setHeader("Content-Type", "application/json");
          res.send(JSON.stringify(returnData));
        }
      });
    })
    .catch((error) => {
      res.send(error);
    });
});

Testing our Code

app.listen(3000, () => { // using port 3000
  console.log(`Testing at http://localhost:3000/?url=https://clark.today`);
});

{
  "image": "http://res.cloudinary.com/clark-host/image/upload/v1671475454/bookmarks/lky8gfz3tc1zlnwnh9sl.jpg",
  "description": "I'm a DevOps engineer located on Earth, for now. Feel free to ask me questions about any of my projects listed here or anywhere else you find me!",
  "title": "Clark Weckmann",
  "url": "https://clark.today"
}

// If wrong key or no key don't allow access.
if (req.query.key != process.env.ACCESS_TOKEN || !req.query.key) {
    res.send("wrong key");
    return;
  }

Deploying to Vercel

• Setup and deploy? Y

• Link an existing project? N

• In which directory is your code located ./

/ Setting up project
> Upload [===-----------------] 15% 136.6s
- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N]

🔗  Linked to user/project (created .vercel and added it to .gitignore)
🔍  Inspect: https://vercel.com/<user>/<project>/<ID> [1s]
✅  Production: https://<project>.vercel.app [copied to clipboard] [7s]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/<user>/<project>/settings

Building the IOS Shortcut

Our flow for the IOS Shortcut is pretty simple, check it out.

Share Sheet ⇒ Get Contents of URL(API_URL) ⇒ Set Variable URL to Contents of URL ⇒ Get Diction from URL ⇒ Add Page(Dictionary) To Database Nautomate

If you’re unfamiliar with Nautomate I recommend checking out their website.

Nautomate

Notion is one of the most flexible, powerful productivity platforms around but it doesn't support Apple's automation app, Shortcuts. Nautomate fills that gap, letting you add data to your Notion databases or create rich pages automatically without the need for expensive tools like Zapier. Unleash your creativity and create powerful new automated workflows!

https://www.nautomate.app/

You can download the completed shortcut here:

Shortcuts

https://www.icloud.com/shortcuts/97fee9af17ba4686bc67a03caffe08c6

Skip The Coding