adds possibility to add link to card

[MariaBee3]

This pull request adds the possibility in the CMS to add a link to a card in the cardblock.

[MariaBee3]

@antw would you be willing to review this issue? I've been doubting about wrapping a card into a link or making a stretchable link in the card. I couldn't find a conclusive answer online, so for now I've made a conditional wrapper that links the card if a link has been added in the CMS. But I would be very interested in hearing you opinion on this. And of course on any other issue you come across.

[antw]

I've been doubting about wrapping a card into a link or making a stretchable link in the card.

Personally, I'd use something like a stretched link. Wrap whatever part of the card you want to be clickable in className="relative" then apply the stretched link class to the link.

/* styles/globals.css */

@layer base {
  .stretched-link::after {
    content: "";
    @apply z-10 absolute inset-0 bg-transparent pointer-events-auto;
  }
}

// components/StretchedLink.tsx

function StretchedLink({ content, className, ...linkProps }: React.ComponentProps<'a'>) {
  return (
    // Use "a" or Link as appropriate.
    <a {...linkProps} className={`${className || '' } stretched-link`}>
      {content}
    </a>
  );
}

// Inside the component

function CardTitle({ condition, children, ...rest }) {
  // Pseudo code
  if (condition) {
    return <StretchedLink href="..." className="mb-3 block">...</StretchedLink>
  }

  return <strong className="mb-3 block>...</strong>;
}

function Card(...)
  return (
    {/* stuff */}
    <div className="flex-col flex m-4 flex-1 max-h:1/2 overflow-hidden">
      <CardTitle ...>{cardItem.title}</CardTitle>
      <div>
        <RawHtml html={cardItem.text} />
      </div>
    </div>
    {/* more stuff */
  );
}

[MariaBee3]

@antw Thanks for the feedback. Good idea to make it a separate component. I've implemented your suggestion. Could you please review it?
There is still a problem in this branch with the migration files, causing a failed check, we are solving this currently.

[MariaBee3]

@broekhuisg wil jij misschien deze nog goedkeuren? Anthony heeft alles al gereviewed en goedgekeurd maar omdat ik de laatste migration files nog heb gepushed moet er weer iemand het goedkeuren.

[MariaBee3]

@antw Sorry, would you mind approving this issue again? We had to change some things in the migration files before it would pass all tests. I've pushed this and now it needs to be approved again. Nothing changed in the code you approved earlier.