Skip to content

URL ‐ Client side & JSON

Jump to bottom
Nick Liu edited this page Aug 14, 2024 · 9 revisions

Here we limit discussions to webpages

What's a URL?

A full URL looks something like this:

https://www.example.com/folder/page.html?search=example#section2

  • https:// is the protocol. (e.g., http, https, etc.)
  • www.example.com subdivides to:
    • www : subdomain (optional, allow Letters (a-z), numbers (0-9), and hyphens (-))
    • example : second-level domain (SLD) (allow Letters (a-z), numbers (0-9), and hyphens (-)) www.3m.com, www.xn--bcher-kva.de
    • .com : top-level domain (TLD) (e.g., .com, .org, .net, .uk, etc.; usually Letters (a-z), exceptions when it comes to internationalized domain names (IDNs) that are encoded in Punycode)
  • /folder/to/page.html is the path.
  • ?search=example is the query string.
  • #section2 is the fragment.

How does it behave when posting on Mastodon?

Things could differ on the client side (mastodon.social) compared to when retrieved as JSON from the API.

Hyperlink

While www.example.com and example.com don't get recognized as / get transformed into hyperlinks, URLs with protocol (https://www.example.com) do get picked up and made clickable as links on the client side. On the client side, it shows as a clickable link without protocol (example.com). It gets transformed into an HTML object in the JSON when hitting API endpoints ("content": "<p><a href=\"https://www.example.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://www.</span><span class=\"\">example.com</span><span class=\"invisible\"></span></a></p>").

Embedding

Both full length URLs (https://www.example.com/long/folder/path/to/article) and Shortened URLs (https://tinyurl.com/4j5y6usn) display the source embeddings on the Client side.

*different urls were used to showcase embeddings

Short URLs

As shown above, short URLs appear as is on the client side, and the same thing happens in JSON.

"content": "<p><a href=\"https://shorturl.at/eDG0o\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"\">shorturl.at/eDG0o</span><span class=\"invisible\"></span></a></p>"

Long URLs

Long URLs https://www.example.com/long/folder/path/to/article get trimmed on the client side into example.com/long/folder/path/t... and appear as HTML in JSON using invisible class to hide away the parts not shown on the client side:

<p><a href=\"https://www.example.com/long/folder/path/to/article" target=\"_blank\" rel=\"nofollow noopener noreferrer\" translate=\"no\"><span class=\"invisible\">https://www.</span><span class=\"ellipsis\">example.com/long/folder/path/t</span><span class=\"invisible\">o/article</span></a></p>
Clone this wiki locally