Handle app:// URLs better

[cmheisel]

I use Bear and Things which use :/// native app URL schemes.

Example:

    {
      name: 'Transfer mental tasks and notes to official task list',
      urls: ['bear:///today', 'things:///show?id=inbox']
    },

By default those don't render at all because there's no "host name" in the URL. You can work around it by including the x-callback-url scheme but then the link test isn't terribly descriptive.

    {
      name: 'Transfer mental tasks and notes to official task list',
      urls: ['bear://x-callback-url/today', 'things://x-callback-url/show?id=inbox']
    },

Could the URLs have an optional name parameter, or have fallback logic to use the "scheme" if there's no hostname. That'd result in bear instead of x-callback-url

[ovidiuch]

Hi @cmheisel,

I think we could employ some heuristic to support both out of the box, before resorting to an additional name parameter.

Something along the lines of isNativeUrl(url) ? getAppNameFromNativeUrl(url) : getHostnameFromWebUrl(url).

Are you interested in making this contribution?

[chapati23]

fwiw, i've changed the steps data structure to:

[{
  name: 'Extract all mental tasks to a list',
  links: [
    { name: '🗒  Trello', url: 'trello://x-callback-url/showBoard?x-source=jobs-done&id=59e9dc0dd6c3de4e51ae29ea' },
    { name: '✅ Things', url: 'things:///show?id=today' }
  ]
}]

and then simply removed the parsing of urls and replaced it with explicitly passing down a name prop to the Link component

works fine for me 🙂

[ovidiuch]

Hmm. So I'm starting to think flexibility might be better here. Less code to manage 👍

@chapati23 If you don't mind, can I see a screenshot of your app? I'm curious how it looks with emojis in the link text 😅

[chapati23]

Real logos (slack, trello etc.) would be nicer of course, but didn't have enough time for more customization so far

[ovidiuch]

Nice. I'm a fan of the minimalist look, but I do like how you put a smiley in the intro! 😄

[cmheisel]

fwiw, i've changed the steps data structure to:

[{
  name: 'Extract all mental tasks to a list',
  links: [
    { name: '🗒  Trello', url: 'trello://x-callback-url/showBoard?x-source=jobs-done&id=59e9dc0dd6c3de4e51ae29ea' },
    { name: '✅ Things', url: 'things:///show?id=today' }
  ]
}]

and then simply removed the parsing of urls and replaced it with explicitly passing down a name prop to the Link component

works fine for me 🙂

@chapati23 - Nice! Is there a diff you can share for how to handle/display the new structure?