Respect rel attributes on <Button>

JamesLaverack commented 11 months ago

This is a follow-on from https://github.com/cert-manager/website/pull/1360 as, predictibly, rel doesn't work on a Button. This change passes the rel through the Button component to the underlying <Link>, which does render it correctly. When rendering locally the Mastodon button (with rel=me) renders as:

<a
  target="_blank"
  rel="me"
  class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px px-3 py-1 text-11px mx-4 "
  href="https://infosec.exchange/@CertManager">

Which is intended. Other buttons, such as the Twitter button next to it, do not render with any rel attribute as it's omitted from the <Button>:

<a
  target="_blank"
  class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px px-3 py-1 text-11px mx-4 "
  href="https://twitter.com/CertManager/"><span class="block w-4">

netlify[bot] commented 11 months ago

Deploy Preview for cert-manager-website ready!

Name	Link
Latest commit	3d82d9788ad38433c1216fec707b00e465204fe2
Latest deploy log	https://app.netlify.com/sites/cert-manager-website/deploys/6577c4b8d750570008d43d17
Deploy Preview	https://deploy-preview-1362--cert-manager-website.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 11 months ago

Deploy Preview for cert-manager-website ready!

Name	Link
Latest commit	2a195fc506ffdb0418d72d6a1fd7983ee944eabb
Latest deploy log	https://app.netlify.com/sites/cert-manager-website/deploys/6577c4cee4f2400008fac226
Deploy Preview	https://deploy-preview-1362--cert-manager-website.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

inteon commented 11 months ago

The button does not seem to have the rel attribute set in the preview: https://deploy-preview-1362--cert-manager-website.netlify.app

Maybe the rel attribute is also not supported by the next/Link element?

JamesLaverack commented 7 months ago

The button does not seem to have the rel attribute set in the preview: https://deploy-preview-1362--cert-manager-website.netlify.app

Maybe the rel attribute is also not supported by the next/Link element?

Hey, sorry for the delay in response. This issue slipped on my radar.

Looking at the deploy preview now, I can see that the button does have rel="me". Did it get updated by Netlify somehow in the meantime?

Parsing the HTML with pup, directly from the preview:

$ curl -s https://deploy-preview-1362--cert-manager-website.netlify.app/ | pup 'a[href="https://infosec.exchange/@CertManager"]'
<a target="_blank" rel="me" class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px px-3 py-1 text-11px mx-4 " href="https://infosec.exchange/@CertManager">
 <span class="block w-4">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="currentColor" viewBox="0 0 16 16">
   <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z">
   </path>
  </svg>
 </span>
 <span>
  Mastodon
 </span>
</a>
<a target="_blank" class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px " href="https://infosec.exchange/@CertManager">
 <span class="block w-8">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="currentColor" viewBox="0 0 16 16">
   <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z">
   </path>
  </svg>
 </span>
 <span>
  Follow on Mastodon
 </span>
</a>
<a target="_blank" class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px " href="https://infosec.exchange/@CertManager">
 <span class="block w-8">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="currentColor" viewBox="0 0 16 16">
   <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z">
   </path>
  </svg>
 </span>
 <span>
  Follow on Mastodon
 </span>
</a>

So the rel="me" is there, although admitadly only on the first Mastodon link in the header and not the other two further down the page. 🤔

inteon commented 7 months ago

My mistake @JamesLaverack I was looking at the other mastodon button on the page (the one that is not in the header). /approve /lgtm

jetstack-bot commented 7 months ago

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: inteon

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files: - ~~[OWNERS](https://github.com/cert-manager/website/blob/master/OWNERS)~~ [inteon] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment

JamesLaverack commented 7 months ago

Great! Thank you @inteon.

I was looking at the other mastodon button on the page (the one that is not in the header).

It probably should be on all of them, but I think Mastodon only needs one for the linking to work correctly.

I can see it's been deployed to the main website already:

$ curl -s https://cert-manager.io/ | pup 'a[href="https://infosec.exchange/@CertManager"][rel="me"]'
<a target="_blank" rel="me" class="font-montserrat font-bold uppercase text-sm leading-20px btn-primary rounded-5px inline-flex items-center gap-3 px-4 py-10px px-3 py-1 text-11px mx-4 " href="https://infosec.exchange/@CertManager">
 <span class="block w-4">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" fill="currentColor" viewBox="0 0 16 16">
   <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z">
   </path>
  </svg>
 </span>
 <span>
  Mastodon
 </span>
</a>

The cert-manager Mastodon profile hasn't marked the website link as a verified link yet (which was the entire point of doing this), but I think there's some delay in how often Mastodon checks that. So I guess we'll wait a while to see if infosec.exchange picks it up.

JamesLaverack commented 7 months ago

Hrm, infosec.exchange hasn't picked it up automatically. The Mastodon documentation on link verification states:

Make sure to save your profile after adding the rel-me link to your web page! The verification process is triggered when you save your profile, and may take some time before completing. If you have added the rel-me link and verification is not working, then try deleting the link, saving, re-adding the link, and saving again.

So we might need someone with edit access on the Mastodon profile (perhaps yourself @inteon?) to edit and re-save the cert-manager profile on infosec.exchange to cause their mastodon instance to pick up the verified link.

inteon commented 7 months ago

infosec.exchange

Done !

JamesLaverack commented 7 months ago

And just like that, it's all done. Thanks @inteon!

cert-manager / website