buttondown / roadmap

Buttondown's public roadmap
48 stars 0 forks source link

`JSONValue` component should use router links rather than `a` tags #2956

Closed jmduke closed 1 week ago

jmduke commented 2 weeks ago

We do this reasonable but kind of gross thing when autolinking:


const potentiallyAutolinkedValue = computed(() => {
  if (!props.autolink) {
    return props.value;
  }
  return Object.entries(props.value).reduce((acc, [key, value]) => {
    if (typeof value === "string" && key === "email") {
      acc[
        key
      ] = `<a href='/emails/${value}' target='_blank' class='hover:bg-blue-100'>${value}</a>`;
    } else if (typeof value === "string" && key === "automation") {
      acc[
        key
      ] = `<a href='/automations/${value}' target='_blank' class='hover:bg-blue-100'>${value}</a>`;
    } else if (typeof value === "string" && key === "subscriber") {
      acc[
        key
      ] = `<a href='/subscribers/${value}' target='_blank' class='hover:bg-blue-100'>${value}</a>`;
    } else if (typeof value === "string" && key === "survey") {
      acc[
        key
      ] = `<a href='/surveys/${value}' target='_blank' class='hover:bg-blue-100'>${value}</a>`;
    } else {
      acc[key] = value;
    }
    return acc;
  }, {} as { [key: string]: any });
});

This doesn't let us take advantage of RouterLinks, typed routes, etc. So let's replace it with something more clever — ideally an abstraction that lends itself to https://github.com/buttondown/roadmap/issues/2576, as well.