Migrate ButtonLink to Astro

Author: egeakman

src/components/button-link/button-link.astro

@@ -0,0 +1,30 @@
+---
+import type React from 'react';
+
+export interface Props {
+  url: string;
+  children: React.ReactNode;
+  className?: string;
+  secondary?: boolean;
+  isExternal?: boolean;
+}
+
+const { url, className = "", secondary = false, isExternal } = Astro.props;
+const resolvedIsExternal = isExternal !== undefined ? isExternal : url.startsWith("http");
+---
+
+<a
+  class={`font-bold text-lg px-4 py-4 bg-button rounded-[60px] inline-block leading-4 hover:bg-button-hover not-prose
+    ${secondary ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
+    ${secondary ? "text-text" : ""}
+    ${className || ""}`}
+  href={url}
+>
+  <slot />
+
+  {resolvedIsExternal && (
+    <span class="inline-block ml-1 font-system text-lg leading-4">
+      ↗
+    </span>
+  )}
+</a>

src/components/button-link/button-link.tsx

@@ -1,4 +1,4 @@
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 
 type Props = {
@@ -15,7 +15,7 @@ export const ButtonWithTitle = ({ title, href, text }: Props) => {
       </Title>
 
       <div>
-        <ButtonLink href={href}>{text}</ButtonLink>
+        <ButtonLink url={href}>{text}</ButtonLink>
       </div>
     </div>
   );

src/components/button-link/index.tsx

@@ -1,7 +1,7 @@
 ---
 import type { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
-import { ButtonLink } from "../button-link/button-link";
+import ButtonLink from "../button-link/button-link.astro";
 
 export interface Props {
   title: string;
@@ -28,7 +28,7 @@ const { title, subtitle, url, image } = Astro.props;
     <h3 class="text-3xl font-bold mt-2 mb-4 text-primary">{title}</h3>
   </a>
   <ButtonLink
-    href={url}
+    url={url}
     className="mb-4"
     isExternal={false}
   >

src/components/button-with-title/button-with-title.tsx

@@ -1,5 +1,5 @@
 ---
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import HeaderButton from "./header-button.astro";
 
 export interface Props {
@@ -15,17 +15,17 @@ const IS_LIVE = false;
   {
     !mobile ? (
       <>
-        <ButtonLink secondary href="https://www.europython-society.org/coc/">
+        <ButtonLink secondary url="https://www.europython-society.org/coc/">
           <abbr title="Code of Conduct" class="no-underline md:hidden">
             CoC
           </abbr>
           <span class="hidden md:inline">Code of Conduct</span>
         </ButtonLink>
-        <ButtonLink href="https://voting.europython.eu" className="hidden md:block">
+        <ButtonLink url="https://voting.europython.eu" className="hidden md:block">
           <span>Community vote</span>
         </ButtonLink>
         {IS_LIVE && (
-          <ButtonLink href="/live">
+          <ButtonLink url="/live">
             Live
             <span class="hidden md:inline"> 📺</span>
           </ButtonLink>

src/components/card/card.astro

@@ -1,6 +1,6 @@
 ---
 import Prose from "../prose/prose.astro";
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 import { Image } from "astro:assets";
 
@@ -31,12 +31,12 @@ import venueImage from "./prague.png";
     </Prose>
 
     <div class="space-x-4 mb-5">
-      <ButtonLink href="/where">
+      <ButtonLink url="/where">
         Where is EuroPython?
       </ButtonLink>
     </div>
     <div class="space-x-12">
-      <ButtonLink href="/explore">
+      <ButtonLink url="/explore">
         Explore Prague
       </ButtonLink>
     </div>

src/components/header/header-actions.astro

@@ -1,5 +1,5 @@
 ---
-import { ButtonLink } from "../button-link/button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 import Keynoter from "./keynoter.astro";
 
@@ -120,7 +120,7 @@ const placeholders = Math.max(0, 6 - keynoters.length);
         <span class="text-body-light inline-block mr-2">#</span>
         See other sessions
       </h3>
-      <ButtonLink href="/sessions">List of Sessions</ButtonLink>
+      <ButtonLink url="/sessions">List of Sessions</ButtonLink>
     </div>
   </div>
 </section>

src/components/hero-section/prague.astro

@@ -4,7 +4,7 @@ import { Separator } from "../separator/separator";
 import { Fragment } from "react";
 import { Fullbleed } from "../layout/fullbleed";
 
-import { ButtonLink } from "../button-link";
+import ButtonLink from "../button-link/button-link.astro";
 import { Title } from "../typography/title";
 
 import SponsorTier from "./sponsor-tier.astro";
@@ -70,7 +70,7 @@ const topTier = sponsorTiers.find((tier) => tier.name === "Keystone");
           }
 
           <div class="mt-4">
-            <ButtonLink href="/sponsor">Become a sponsor</ButtonLink>
+            <ButtonLink url="/sponsor">Become a sponsor</ButtonLink>
           </div>
         </div>
       </div>

src/components/keynoters/keynoters.astro

@@ -20,7 +20,7 @@ from Wednesday, 5 February 23:00:00 UTC
 
 until Monday, 17 February 23:59:59 UTC
 
-<ButtonLink href="https://voting.europython.eu">Cast your votes now!</ButtonLink>
+<ButtonLink url="https://voting.europython.eu">Cast your votes now!</ButtonLink>
 </div>
 
 
@@ -94,7 +94,7 @@ of the major factors upon which they rely, will be the preferences of the
 community through this voting process.
 
 <div style={{textAlign: "center", marginBottom: 10}}>
-<ButtonLink href="https://voting.europython.eu">Go to the community voting</ButtonLink>
+<ButtonLink url="https://voting.europython.eu">Go to the community voting</ButtonLink>
 </div>