Improve "open in AP" documentation and deeplink display

[loucasal]

Closes #404.

I will need some help completing this one.

• [x] Instructions on URL encoding special characters are included.
• [x] Two screenshots are added, illustrating the result for users who have AntennaPod installed. For those who don't, an example link is provided.
• [x] The link to the branding repository is moved to a sub-heading.
• [x] I included example HTML code for an 'open in AntennaPod' link.

I also thought it would be nice to take the opportunity for two related improvements (help wanted):

• [x] The RSS feed on the deeplink page contains a leading space which should be removed.
• [ ] It would be nice to add a clickable "Copy to clipboard" button to the right of the RSS feed on the deeplink page.

[keunes]

Thanks for starting this!

even reproducing the button we use on the deeplink page would require showcasing more code, including a script. If the current example code is too basic, it could be improved (help wanted) or left out.

We don't need a script I think. We could just showcase code, something like this (maybe check/improve with AI).

<form action="https://antennapod.org/deeplink/subscribe/?url=%68%74%74ps%3A%2F%2Fbellingcat.libsyn.com%2Frss&title=The+Bellingcat+Podcast">
   <button><img src="antennapod-logo.svg"> Open in AntennaPod</button>
</form>

The RSS feed on the deeplink page contains a leading space which should be removed. It would be nice to add a clickable "Copy to clipboard" button to the right of the RSS feed on the deeplink page.

Myeah. I also noticed on mobile that 'select all' selects the whole page. Maybe it'd be nice to prevent that if possible also.

This is relevant if this page is shared on social media and someone has another podcast app. I can look into this when I'm back from holidays.

And two other points: seeing the page I would

• introduce a heading 'What users see', above the screenshot
• move the first point in the 'Examples' section to above, as it's an example of what the user sees

And we need to fix this:

• [ ] the code block in dark mode is hard to read (dark text on dark background)

[loucasal]

• We don't need a script I think. We could just showcase code, something like this (maybe check/improve with AI).
• introduce a heading 'What users see', above the screenshot
• move the first point in the 'Examples' section to above, as it's an example of what the user sees

These 3 points are addressed.

Looking at the latest preview, I wonder if the third screenshot is necessary at all - perhaps the example link is sufficiently illustrative and we can shorten the page?

The style issue is logged in #438.

[keunes]

Looking at the latest preview, I wonder if the third screenshot is necessary at all - perhaps the example link is sufficiently illustrative and we can shorten the page?

Yeah, that's probably fine.

FMI:

• https://deploy-preview-439--antennapod-test.netlify.app/documentation/podcasters-hosters/add-on-antennapod
• https://deploy-preview-439--antennapod-test.netlify.app/deeplink/subscribe/?url=%68%74%74ps%3A%2F%2Ffeeds.buzzsprout.com%2F1538779.rss&title=Podnews+Weekly+Review

[ByteHamster]

Are we allowed to use the logo of that podcast in the screenshot? (Do we need to have permission?)

[loucasal]

I doubt they would object, but I haven't reached out. If we already have permission from the other podcasts we feature in our promotional materials, it might be quicker to replace it with one of them.

[ByteHamster]

From the ones in the play store screenshots, I guess "this American life" would fit best because it is more internal than the others. What do you think?

[loucasal]

Right, the copy to clipboard button is clearly beyond my reach, but at least I managed to resolve the other issue, so that's enough for me.