Replace className with Astro.props.class

Author: adwinying

Diff for: src/components/ButtonIcon.astro

@@ -5,10 +5,10 @@ import { cn } from "@/utils/css";
 interface Props {
   href: string;
   icon: keyof typeof Icons;
-  className?: string;
+  class?: string;
 }
 
-const { href, icon, className = "" } = Astro.props;
+const { href, icon } = Astro.props;
 
 const Icon = Icons[icon];
 ---
@@ -18,12 +18,12 @@ const Icon = Icons[icon];
     "rounded-lg border-2 px-4 py-2 text-lg font-light sm:px-5 sm:text-2xl",
     "border-gray-800 bg-white hover:bg-gray-800 hover:text-gray-50",
     "transition-all duration-200",
-    className,
+    Astro.props.class,
   )}
   href={href}
 >
   <span class="flex items-center space-x-2 sm:space-x-3">
-    <Icon className="w-6 hover:text-gray-50" />
+    <Icon class="w-6 hover:text-gray-50" />
     <span><slot /></span>
   </span>
 </a>

Diff for: src/components/Link.astro

@@ -4,14 +4,14 @@ import { cn } from "@/utils/css";
 type Props = {
   href: string;
   ariaLabel?: string;
-  className?: string;
+  class?: string;
 };
 
-const { href, ariaLabel, className = "" } = Astro.props;
+const { href, ariaLabel } = Astro.props;
 ---
 
 <a
-  class={cn("text-sky-500 hover:text-sky-700", className)}
+  class={cn("text-sky-500 hover:text-sky-700", Astro.props.class)}
   href={href}
   aria-label={ariaLabel}
 >

Diff for: src/components/icons/Chain.astro

@@ -2,11 +2,13 @@
 import type IconProps from "@/types/IconProps";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class={className}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  class={Astro.props.class}
+>
   <path
     fill="currentColor"
     d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"

Diff for: src/components/icons/Code.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="code"
-  class={cn("svg-inline--fa fa-code fa-w-20", className)}
+  class={cn("svg-inline--fa fa-code fa-w-20", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 640 512"

Diff for: src/components/icons/Github.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fab"
   data-icon="github"
-  class={cn("svg-inline--fa fa-github fa-w-16", className)}
+  class={cn("svg-inline--fa fa-github fa-w-16", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 496 512"

Diff for: src/components/icons/Link.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="external-link-alt"
-  class={cn("svg-inline--fa fa-external-link-alt fa-w-16", className)}
+  class={cn("svg-inline--fa fa-external-link-alt fa-w-16", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 512 512"

Diff for: src/components/icons/Linkedin.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fab"
   data-icon="linkedin-in"
-  class={cn("svg-inline--fa fa-linkedin-in fa-w-14", className)}
+  class={cn("svg-inline--fa fa-linkedin-in fa-w-14", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"

Diff for: src/components/icons/Mail.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="envelope"
-  class={cn("svg-inline--fa fa-envelope fa-w-16", className)}
+  class={cn("svg-inline--fa fa-envelope fa-w-16", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 512 512"

Diff for: src/components/icons/Menu.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="bars"
-  class={cn("svg-inline--fa fa-bars fa-w-14", className)}
+  class={cn("svg-inline--fa fa-bars fa-w-14", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"

Diff for: src/components/icons/Rss.astro

@@ -2,11 +2,13 @@
 import type IconProps from "@/types/IconProps";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class={className}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+  class={Astro.props.class}
+>
   <path
     fill="currentColor"
     d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"

Diff for: src/components/icons/Server.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="server"
-  class={cn("svg-inline--fa fa-server fa-w-16", className)}
+  class={cn("svg-inline--fa fa-server fa-w-16", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 512 512"

Diff for: src/components/icons/Tag.astro

@@ -2,11 +2,13 @@
 import type IconProps from "@/types/IconProps";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class={className}>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  class={Astro.props.class}
+>
   <path
     fill="currentColor"
     d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"

Diff for: src/components/icons/User.astro

@@ -3,16 +3,14 @@ import type IconProps from "@/types/IconProps";
 import { cn } from "@/utils/css";
 
 type Props = IconProps;
-
-const { className = "" } = Astro.props;
 ---
 
 <svg
   aria-hidden="true"
   focusable="false"
   data-prefix="fas"
   data-icon="user"
-  class={cn("svg-inline--fa fa-user fa-w-14", className)}
+  class={cn("svg-inline--fa fa-user fa-w-14", Astro.props.class)}
   role="img"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"

Diff for: src/features/blog/BlogAuthor.astro

@@ -5,17 +5,15 @@ import ChainIcon from "@/components/icons/Chain.astro";
 import { cn } from "@/utils/css";
 
 interface Props {
-  className?: string;
+  class?: string;
 }
-
-const { className = "" } = Astro.props;
 ---
 
 <div
   class={cn(
     "flex flex-col space-y-3",
     "sm:flex-row sm:items-center sm:space-x-5 sm:space-y-0",
-    className,
+    Astro.props.class,
   )}
 >
   <div class="w-28 sm:w-32">
@@ -40,8 +38,8 @@ const { className = "" } = Astro.props;
     </p>
 
     <div class="flex">
-      <Link href="/" className="flex space-x-1">
-        <ChainIcon className="w-4" />
+      <Link href="/" class="flex space-x-1">
+        <ChainIcon class="w-4" />
         <span>https://iAdw.in</span>
       </Link>
     </div>

Diff for: src/features/blog/BlogHeader.astro

@@ -7,6 +7,6 @@ import RssIcon from "@/components/icons/Rss.astro";
   <a href="/blog" class="font-sans text-3xl font-normal text-gray-900"> Blog</a>
 
   <a href="/blog/rss.xml" target="_parent">
-    <RssIcon className="mt-1 h-5" />
+    <RssIcon class="mt-1 h-5" />
   </a>
 </Header>

Diff for: src/features/blog/BlogPostEntries.astro

@@ -3,7 +3,7 @@ import TagLinks from "@/features/blog/TagLinks.astro";
 import { cn } from "@/utils/css";
 
 interface Props {
-  className?: string;
+  class?: string;
   posts: {
     url: string;
     title: string;
@@ -12,10 +12,10 @@ interface Props {
   }[];
 }
 
-const { className, posts } = Astro.props;
+const { posts } = Astro.props;
 ---
 
-<div class={cn("flex flex-col space-y-8", className)}>
+<div class={cn("flex flex-col space-y-8", Astro.props.class)}>
   {
     posts.map((post) => {
       const { url, title, date } = post;

Diff for: src/features/blog/TagLinks.astro

@@ -8,7 +8,7 @@ interface Props {
 const { tags } = Astro.props;
 ---
 
-<TagIcon className="mr-1 inline-block h-2.5" />
+<TagIcon class="mr-1 inline-block h-2.5" />
 
 {
   tags

Diff for: src/features/landing/Connect.astro

@@ -4,7 +4,7 @@ import Section from "@/features/landing/Section.astro";
 import { connect } from "@/features/landing/data";
 ---
 
-<Section id="connect" className="bg-white">
+<Section id="connect" class="bg-white">
   <Fragment slot="title">Connect</Fragment>
 
   <div class="mx-auto max-w-4xl text-center text-gray-800">
@@ -16,7 +16,7 @@ import { connect } from "@/features/landing/data";
   >
     {
       connect.map((item) => (
-        <ButtonIcon href={item.url} icon={item.icon} className="block w-full">
+        <ButtonIcon href={item.url} icon={item.icon} class="block w-full">
           {item.title}
         </ButtonIcon>
       ))

Diff for: src/features/landing/Hero.astro

@@ -16,7 +16,7 @@ import { cn } from "@/utils/css";
     type="button"
     class="js-nav-toggle absolute right-5 top-4 w-9 p-2 md:hidden"
   >
-    <MenuIcon className="w-full text-white" />
+    <MenuIcon class="w-full text-white" />
   </button>
 
   {/* Hero text */}

Diff for: src/features/landing/Projects.astro

@@ -25,7 +25,7 @@ import { projects } from "@/features/landing/data";
             <h3 class="mb-1.5 flex items-center justify-center space-x-1 text-2xl font-light md:justify-start">
               <span>{title}</span>
               <Link href={url} ariaLabel="Preview">
-                <LinkIcon className="w-6 p-1" />
+                <LinkIcon class="w-6 p-1" />
               </Link>
             </h3>
 

Diff for: src/features/landing/Section.astro

@@ -3,13 +3,13 @@ import { cn } from "@/utils/css";
 
 interface Props {
   id: string;
-  className?: string;
+  class?: string;
 }
 
-const { id, className = "" } = Astro.props;
+const { id } = Astro.props;
 ---
 
-<section id={id} class={cn("px-7 py-16 md:py-32", className)}>
+<section id={id} class={cn("px-7 py-16 md:py-32", Astro.props.class)}>
   {
     Astro.slots.has("title") && (
       <div class="mb-8 flex justify-center">
@@ -19,7 +19,7 @@ const { id, className = "" } = Astro.props;
             "text-center font-title text-2xl uppercase tracking-wider",
             "after:mx-auto after:-mt-1 after:block after:border-b-2",
             "after:border-black after:transition-all after:duration-300 ",
-            className,
+            Astro.props.class,
           )}
         >
           <slot name="title" />

Diff for: src/features/landing/Skills.astro

@@ -5,7 +5,7 @@ import { skills } from "@/features/landing/data";
 import { cn } from "@/utils/css";
 ---
 
-<Section id="skills" className="bg-white">
+<Section id="skills" class="bg-white">
   <Fragment slot="title">Skills</Fragment>
 
   <div
@@ -27,7 +27,7 @@ import { cn } from "@/utils/css";
                 "border-2 border-black bg-white",
               )}
             >
-              <SkillIcon className="h-5" />
+              <SkillIcon class="h-5" />
             </div>
 
             <h3 class="mb-4 mt-1 text-center font-title text-xl uppercase tracking-wider">

Diff for: src/layouts/base.astro

@@ -11,7 +11,7 @@ interface Props {
   description?: string;
   image?: ImageMetadata | null;
   isPost?: boolean;
-  className?: string;
+  class?: string;
 }
 
 const title = Astro.props.title ?? "iAdwin";
@@ -48,8 +48,6 @@ const seo = {
     ],
   },
 };
-
-const className = Astro.props.className ?? "";
 ---
 
 <html lang="en">
@@ -88,7 +86,7 @@ const className = Astro.props.className ?? "";
     <slot name="head" />
   </head>
 
-  <body class={cn("flex flex-col bg-gray-50 min-h-screen", className)}>
+  <body class={cn("flex flex-col bg-gray-50 min-h-screen", Astro.props.class)}>
     <slot />
   </body>
 </html>

Diff for: src/pages/[slug].astro

@@ -76,11 +76,11 @@ const { Content } = await post.render();
       <hr />
     </div>
 
-    <BlogAuthor className="mb-9 mt-14 font-sans text-base" />
+    <BlogAuthor class="mb-9 mt-14 font-sans text-base" />
 
     <Link
       href="/blog"
-      className="font-sans !text-gray-900 underline underline-offset-2"
+      class="font-sans !text-gray-900 underline underline-offset-2"
     >
       &larr; Back to all posts
     </Link>

Diff for: src/pages/blog.astro

@@ -16,7 +16,7 @@ const posts = await getCollection(
   <BlogHeader />
 
   <BlogPostEntries
-    className="mx-auto mb-12 mt-4 w-full max-w-blog flex-grow px-5"
+    class="mx-auto mb-12 mt-4 w-full max-w-blog flex-grow px-5"
     posts={posts
       .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
       .map((post) => ({

Diff for: src/types/IconProps.ts

@@ -1,5 +1,5 @@
 interface IconProps {
-  className?: string;
+  class?: string;
 }
 
 export default IconProps;