refactor: add HTML attributes, fix typo, match button hover colors (#50)

* typo(Button): fix transition-colors property, add missing 's' * refactor(ThemeToggle): set hover color to match `Button` component * refactor(components): Pass HTML attributes to components with `...attrs`
AVGVSTVS96 · Feb 22, 2024 · b077070 · b077070
1 parent 8d20a92
commit b077070
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 17 deletions.
diff --git a/src/components/BlogIndex.astro b/src/components/BlogIndex.astro
@@ -1,17 +1,20 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
+
 const allPosts = await Astro.glob('@pages/posts/*.md');
-const { class: className } = Astro.props;
+const { class: className, ...attrs } = Astro.props;
+
 let displayPosts = Astro.props.postCount
   ? allPosts.slice(-Astro.props.postCount)
   : allPosts;
 
-interface Props {
+interface Props extends HTMLAttributes<'ul'> {
   postCount?: number;
   class?: string;
 }
 ---
 
-<ul class={`list-none pl-0 ${className}`}>
+<ul class={`list-none pl-0 ${className}`} {...attrs}>
   {
     displayPosts.map((post) => (
       <li class="grid grid-cols-1 border-b-[0.5px] p-2.5 dark:border-base/20 sm:grid-cols-3">

diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,5 +1,7 @@
 ---
-interface Props {
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
   title?: string;
   subtitle?: string;
   heading?: string;
@@ -19,6 +21,7 @@ const {
   padding = 'card-p',
   class: className,
   noMargin = false,
+  ...attrs
 } = Astro.props;
 
 const baseStyles: string =
@@ -32,7 +35,7 @@ const variableStyles: (string | undefined)[] = [
 ];
 ---
 
-<div class:list={[baseStyles, variableStyles]}>
+<div class:list={[baseStyles, variableStyles]} {...attrs}>
   {title && <h1 class="mb-2">{title}</h1>}
   {subtitle && <h2 class="mt-0">{subtitle}</h2>}
   {displayHr && <hr class="mb-8 border-accent-500" />}

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,10 +1,17 @@
 ---
 import Social from '@subComponents/Social.astro';
+
+import type { HTMLAttributes } from 'astro/types';
+const { ...attrs } = Astro.props;
+
 const name = 'Bassim Shahidy';
+
+type Props = HTMLAttributes<'div'>;
 ---
 
 <div
-  class="footer-container mt-24 flex w-full justify-center border-t border-base/40">
+  class="footer-container mt-24 flex w-full justify-center border-t border-base/40"
+  {...attrs}>
   <footer class="m-5 flex items-center gap-4 text-sm dark:text-light">
     <p>© {new Date().getFullYear()} {name}. All rights reserved.</p>
     <Social platform="github" username="avgvstvs96" />

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -4,10 +4,15 @@ import DropdownMenu from './subComponents/DropdownMenu.astro';
 import ThemeToggle from './subComponents/ThemeToggle.astro';
 import ThemeSwitcher from './subComponents/ThemeSwitcher.astro';
 import { Icon } from 'astro-icon/components';
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
+
+const { ...attrs } = Astro.props;
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-base/50 bg-primary-50 px-4 py-2 dark:border-base/40 dark:bg-primary-950 sm:px-6 md:px-10 xl:px-14">
+  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-base/50 bg-primary-50 px-4 py-2 dark:border-base/40 dark:bg-primary-950 sm:px-6 md:px-10 xl:px-14" {...attrs}>
   <div
     class="button-container flex items-center justify-between text-dark dark:text-light">
     <a href="/" aria-label="home button">

diff --git a/src/components/Projects.astro b/src/components/Projects.astro
@@ -3,9 +3,13 @@ import { getCollection } from 'astro:content';
 const projects = await getCollection('projects');
 import Card from '@components/Card.astro';
 import { Icon } from 'astro-icon/components';
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
+const { ...attrs } = Astro.props;
 ---
 
-<div class="card-mx card-p">
+<div class="card-mx card-p" {...attrs}>
   <div class="h1 mb-4">
     <h1>Projects</h1>
   </div>

diff --git a/src/components/subComponents/Button.astro b/src/components/subComponents/Button.astro
@@ -1,6 +1,8 @@
 ---
 import { Icon } from 'astro-icon/components';
-interface Props {
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'button'>{
   name: string;
   link?: string;
   id?: string;
@@ -18,9 +20,10 @@ const {
   showCaret = false,
   class: className,
   icon = false,
+  ...attrs
 } = Astro.props;
 
-const baseStyles: string = `transition-color flex max-w-max rounded-lg px-3 py-2 font-normal duration-200 hover:bg-primary-200 hover:text-opacity-100 dark:hover:bg-primary-800`;
+const baseStyles: string = `transition-colors flex max-w-max rounded-lg px-3 py-2 font-normal duration-200 hover:bg-primary-200 hover:text-opacity-100 dark:hover:bg-primary-800`;
 
 const variableStyles: (string | undefined)[] = [
   className,
@@ -31,6 +34,7 @@ const variableStyles: (string | undefined)[] = [
 {
   menu ? (
     <button
+      {...attrs}
       class:list={[baseStyles, variableStyles]}
       aria-label={`${name} menu`}
       id={id}>
@@ -46,6 +50,7 @@ const variableStyles: (string | undefined)[] = [
   ) : (
     <a href={link} id={id}>
       <button
+        {...attrs}
         class:list={[baseStyles, variableStyles]}
         aria-label={`${name} button`}>
         {icon ? <Icon name={name} size={26} /> : name}

diff --git a/src/components/subComponents/DropdownMenu.astro b/src/components/subComponents/DropdownMenu.astro
@@ -1,10 +1,13 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
+import Button from './Button.astro';
+
 interface Link {
   name: string;
   url: string;
 }
 
-interface Props {
+interface Props extends HTMLAttributes<'div'>{
   name: string;
   links: Link[];
   showCaret: boolean;
@@ -16,11 +19,11 @@ const {
   links = [],
   showCaret = false,
   icon = false,
+  ...attrs
 } = Astro.props;
-import Button from './Button.astro';
 ---
 
-<div class="dropdown relative">
+<div class="dropdown relative" {...attrs}>
   <Button
     menu={true}
     name={name}

diff --git a/src/components/subComponents/Social.astro b/src/components/subComponents/Social.astro
@@ -1,15 +1,17 @@
 ---
-const { platform, username, variant } = Astro.props;
+const { platform, username, variant, ...attrs } = Astro.props;
 import { Icon } from 'astro-icon/components';
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props {
+interface Props extends HTMLAttributes<'a'> {
   platform: string;
   username?: string;
   variant?: 'linkedIn';
 }
 ---
 
 <a
+  {...attrs}
   href={`https://www.${
     variant === 'linkedIn' ? 'linkedin.com/in' : `${platform}.com`
   }/${username}`}

diff --git a/src/components/subComponents/ThemeSwitcher.astro b/src/components/subComponents/ThemeSwitcher.astro
@@ -1,6 +1,8 @@
 ---
-// ThemeSwitcher.astro
 import DropdownMenu from './DropdownMenu.astro';
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
 
 const themeOptions = [
   { name: 'Sky', url: '#sky' },

diff --git a/src/components/subComponents/ThemeToggle.astro b/src/components/subComponents/ThemeToggle.astro
@@ -1,8 +1,13 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
 
+type Props = HTMLAttributes<'button'>;
+
+const { ...attrs } = Astro.props;
 ---
 
 <button
+  {...attrs}
   id="themeToggle"
   aria-label="Dark Mode Toggle"
   class="ml-2 rounded-lg px-3 py-2">
@@ -24,7 +29,7 @@
   #themeToggle {
     border: 0;
     background: none;
-    @apply hover:bg-primary-200/50 dark:hover:bg-primary-800;
+    @apply hover:bg-primary-200 dark:hover:bg-primary-800;
   }
   .sun {
     fill: rgba(0, 0, 0, 0.7);