Find a way to handle custom page icons

[joeynotjoe]

Background

For pages using default emojis for the page icon, the emoji is displayed appropriately in the search results.
When a page uses a custom icon, the icon's URL is displayed, which can be ugly and distracting while sifting through results.

---

Examples

A result for a page using a default emoji:

Results with custom page icons, displaying long URLs:

---

Implementation Ideas

Overriding the Default Workflow Icon
If the workflow is able to identify that a page uses a custom icon, maybe it can read that URL, and use i as the result icon, overriding the default Notion icon? I use an IMDB workflow that utilizes the Movie artwork as result icons, so maybe it's doable? Although that might slow things down significantly, as I believe it downloads the images locally and keeps them in a temp folder.

Here's an example of the IMDB workflow's results:

Ignoring Custom Icons

If there isn't an efficient and simple way to handle this, but it's still able to be identified as a custom icon- maybe it would be best to simply hide the URLs of custom icons.

---

Goal

It would be great if some logic could be added to the workflow so it could handle custom icons in a sensible manner.

---

Thanks!

[wrjlewis]

Really great write up on the issue, makes it super clear!

Thoughts I have so far:

1. I can update the icon using this property in the script filter:
   "icon": { "type": "fileicon", "path": "~/Desktop" }

2. If we are updating the search result icon for notion pages with custom icons (ie not emojis) then perhaps we should consider doing this for every notion page to create a consistent experience. Plus design-wise it feels better to use the notion icon functionality rather than having the emoji within the text space of the search results, where it is currently.

A limitation here is that alfred requires an actual image file to load the icon, you can't just paste an emoji code in there. So we would need a lookup table of emoji to emoji-image, with a set of images that represent emojis. A consideration here is that emojis look different depending on your platform so we would be locking everyone into the same visual style if we used one set images that represent emojis.

3. Notion store the custom icons in S3, called through Notion.so itself, I think I could reverse engineer this link and dynamically create it each time in the Alfred workflow, I don't see a problem here.

4. Over time images will build up in a temp directory. There are probably a number of different options on how to clear that up over time.

[joeynotjoe]

Thanks for taking the time to consider it. I hadn't thought about converting emoji to emoji images for the result icon. That makes sense.

It might be a long-shot, but maybe the user can somehow choose their set of emojis, with a variable? I'm not totally sure what the variants are, but it might be an option, if it's a big enough issue.

As for the S3 storage, you're right- about custom images that a user uploads to Notion. However, if you use the "embed link" option for a custom icon, it will only use that external link. I'm not sure if that changes anything regarding your third point.

[wrjlewis]

Hey

I've been working on some changes to enable custom icons. Alongside this, I've changed the design so it uses Alfred's native icon functionality, which means there is a big design improvement IMO.

Have a look and try it out https://github.com/wrjlewis/notion-search-alfred-workflow/releases/tag/v0.3

Thanks, Will.

[joeynotjoe]

Hey Will,

I can't believe you got this done so quickly! That's amazing. Unfortunately for me, I'm having some issues after installing the workflow and migrating my settings. It seems as though it's having trouble importing requests for some reason?

[16:55:22.679] Logging Started...
[16:55:24.752] Notion Search[Script Filter] Queuing argument 'r'
[16:55:24.879] Notion Search[Script Filter] Script with argv '(null)' finished
[16:55:24.881] ERROR: Notion Search[Script Filter] Code 1: Traceback (most recent call last):
  File "notion.py", line 10, in <module>
    import requests
ImportError: No module named requests

Did something change there, or did something happen to my Python installation?

[wrjlewis]

Ahhh I used the requests library - I didn't realise that isn't a standard library.

I've updated it to use the httplib library instead, which you will have by default. Can you please try again with version 0.3.1?

[joeynotjoe]

It was odd, because I actually do have that library installed, but I guess something's just weird in my path? But of course, using something like that isn't ideal for every user. That all being said, 0.3.1 is a smashing success, everything is working like a charm for me. Sincerely appreciate the effort! This really does take an already powerful workflow up a notch 💪

[wrjlewis]

Yep I’ve seen a couple of times where the path has acted strangely or there can be multiple versions of Python getting in the way.

Anyway. That’s so Awesome and I’m really glad to hear it’s working!

Thank you for the suggestion and raising this issue. It’s been a fun one to work on (minus my new found hatred for Emoji encoding 😂).

[haakonstorm]

Just my $0.05:

• issues with displaying SVGs, try converting to PNG but don't use imagemagick, use shakiba/svgexport` and try serve Alfred that instead.

• regarding lookup table for emoji, if you don't get an actual emoji glyph returned from Notion, try see if using emojidex/emojidex-web service can work, or see if you can utilize emoji.json.

• if you get an actual emoji glyph back, you can use this free API to resolve it to an image: emoji to image

[wrjlewis]

The emoji to image free API is really cool, thank you for that!

Regarding your other points, I have been hesitant to introduce third-party libraries since each individual user would need to install those prior to using the workflow.