Authoring URLs

[auniverseaway]

The current practice for content links is to expose the underlying github / helix infrastructure in URLs when authoring:

We then do checks to determine if the URL should be converted into a relative URL. Example:

export function makeLinkRelative(href) {
  const url = new URL(href);
  const host = url.hostname;
  if (host.endsWith('.page') || host.endsWith('.live') || host === 'business.adobe.com') return (url.pathname);
  return (href);
}

I see one pro and a couple cons with this approach:

Pros

• Relative URLs instead absolute URLs.

Cons

• Authors must know Helix URL schemes
• Linking out to other *.page or *.live will get you a relative URL.
• View source will never be correct.

There's an alternate approach we currently take on the Helix website, but it has reverse problems:

const LIVE_DOMAIN = 'https://www.hlx.live';
function setDomain(anchor, currentDomain) {
  const { href, textContent } = anchor;
  if (!href.includes(LIVE_DOMAIN)) return href;
  anchor.href = href.replace(LIVE_DOMAIN, currentDomain);
  anchor.textContent = textContent.replace(LIVE_DOMAIN, currentDomain);
  return anchor.href;
}

Pros

• Authors link to their actual live page - No underlying Helix infrastructure is passed to authors.
• View source will always be correct.

Cons

• The JS is needlessly creating an absolute link

My proposal is to combine the two methods to make authoring more intuitive, but reduce the complexity of absolute links:

const LIVE_DOMAIN = 'https://busines.adobe.com/blog/';
function makeLinkRelative(href) {
  if (!href.startsWith(LIVE_DOMAIN)) return href;
  const url = new URL(href);
  return `${url.pathname}${url.search}`;
}

Thoughts?