Merge pull request #56 from brklntmhwk/55-create-card-component

feat(ui): 🆕 create a card component and the remark plugin

.frontmatter/database/mediaDb.json

@@ -1 +1 @@
-{"assets":{"images":{}},"src":{"assets":{"images":{}}}}
+{"assets":{"images":{}},"src":{"assets":{"images":{}},"components":{"card":{}},"content":{"page":{"en":{}}}}}

.vscode/settings.json

@@ -2,5 +2,5 @@
   "files.associations": {
     "*.mdx": "markdown"
   },
-  "frontMatter.content.autoUpdateDate": true
+  "frontMatter.content.autoUpdateDate": true,
 }

astro.config.ts

@@ -37,6 +37,7 @@ import {
   oEmbedTransformer,
   youTubeTransformer,
 } from './src/plugins/transformers';
+import remarkCard from './src/plugins/remark-card';
 
 // https://astro.build/config
 export default defineConfig({
@@ -111,6 +112,7 @@ export default defineConfig({
       remarkGfm,
       remarkAstroImageAssets,
       remarkCallout,
+      remarkCard,
       remarkFootnote,
       remarkLineBreaks,
       [

src/components/BlogList/BlogList.astro

@@ -35,7 +35,7 @@ const { entries, taxonomies } = Astro.props;
 
       return (
         <li class="entry-item fade-in-up">
-          <article class="pokemon-border">
+          <article class="double-border">
             <a
               class="blog-title"
               href={translatePath(
@@ -93,14 +93,14 @@ const { entries, taxonomies } = Astro.props;
         display: flex;
         flex-direction: column;
         gap: 0.825rem;
-        &:hover {
-          background-color: var(--bg-hover);
-        }
         .blog-title {
           color: var(--fg);
           font-size: 1.485rem;
           font-weight: 700;
           line-height: 1.325;
+          &:hover {
+          background-color: var(--bg-hover);
+        }
           @media (min-width: 640px) {
             font-size: 1.585rem;
           }

src/components/Card/Card.astro

@@ -0,0 +1,67 @@
+---
+import {
+  type CardBorderType,
+  type ComponentCardProps,
+  type ElementCardProps,
+  isElementCard,
+  isValidBorderType,
+} from './card';
+
+type Props = ComponentCardProps | ElementCardProps;
+
+let cardBorderType: CardBorderType = 'solid';
+let isAnimated = false;
+
+if (isElementCard(Astro.props)) {
+  const { 'data-border-type': dataBorderType } = Astro.props;
+  if (isValidBorderType(dataBorderType)) {
+    cardBorderType = dataBorderType;
+  }
+} else {
+  const { borderType, isAnimated: animation } = Astro.props;
+  cardBorderType = borderType;
+  isAnimated = animation;
+}
+---
+
+<div class:list={["card", `${cardBorderType}-border`, { "fade-in-up": isAnimated }]}>
+  <slot name="image" />
+  <slot name="content" />
+</div>
+<style>
+  .card {
+    background-color: var(--bg);
+    max-width: 100%;
+    height: 15rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.525rem;
+    break-inside: avoid;
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+    & :global(.card-image) {
+      max-height: 8.75rem;
+      min-height: 6.75rem;
+      padding: 0.25rem;
+      display: flex;
+      justify-content: center;
+      & :global(img) {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    & :global(.card-content) {
+      font-size: 0.925rem;
+      padding: 0.175rem 0.325rem;
+      overflow-y: auto;
+    }
+    @media (min-width: 320px) {
+      max-width: 18rem;
+    }
+    @media (min-width: 1280px) {
+      max-width: 20rem;
+    }
+  }
+</style>

src/components/Card/CardGrid.astro

@@ -0,0 +1,25 @@
+---
+
+---
+
+<div class="card-grid">
+  <slot />
+</div>
+<style>
+  .card-grid {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: repeat(auto-fit, minmax(7.875rem, 1fr));
+    grid-auto-flow: row dense;
+    gap: 1.5rem;
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(auto-fit, minmax(9.675rem, 1fr));
+    }
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+</style>

src/components/Card/card.ts

@@ -0,0 +1,18 @@
+const cardBorderTypes = ['pixel', 'double', 'solid'] as const;
+
+export type CardBorderType = (typeof cardBorderTypes)[number];
+
+export type ElementCardProps = {
+  'data-border-type': string;
+};
+
+export type ComponentCardProps = {
+  borderType: CardBorderType;
+  isAnimated: boolean;
+};
+
+export const isElementCard = (props: object): props is ElementCardProps =>
+  Object.hasOwn(props, 'data-border-type');
+
+export const isValidBorderType = (type: string): type is CardBorderType =>
+  cardBorderTypes.some((borderType) => borderType === type);

src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.astro';
+export { default as CardGrid } from './CardGrid.astro';

src/components/ContactForm/SubmitButton/SubmitButton.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export const SubmitButton: Component<Props> = (props) => {
   return (
-    <Button type="submit" class={`pokemon-border ${submitButton}`}>
+    <Button type="submit" class={`double-border ${submitButton}`}>
       {props.label}
     </Button>
   );

src/components/ContactForm/TextField/TextField.tsx

@@ -48,7 +48,7 @@ export const TextField: Component<Props> = (props) => {
           <Show
             when={props.type === 'hidden'}
             fallback={
-              <div class="pokemon-border">
+              <div class="double-border">
                 <Kobalte.Input
                   {...inputProps}
                   type={props.type}
@@ -65,7 +65,7 @@ export const TextField: Component<Props> = (props) => {
           </Show>
         }
       >
-        <div class="pokemon-border">
+        <div class="double-border">
           <Kobalte.TextArea {...inputProps} class={textField} />
         </div>
       </Show>

src/components/Navigation/Navigation.astro

@@ -31,6 +31,9 @@ const t = await getEntry('i18n', `${locale}/translation`);
       <NavLink href={translatePath('/about')}
         >{t.data.nav.nav_links.about}</NavLink
       >
+      <NavLink href={translatePath('/tools')}
+        >{t.data.nav.nav_links.tools}</NavLink
+      >
     </div>
     <div class="icon-links" slot="outside-drawer">
       <Modal

src/components/PhotoGallery/PhotoGallery.astro

@@ -1,5 +1,6 @@
 ---
 import { getEntry } from 'astro:content';
+import { CardGrid } from '@/components/Card';
 import { ACCOUNT_ID, UNSPLASH_BASE_URL } from '@/lib/consts';
 import { getPhotographer } from '@/lib/unsplash/contents';
 import type { UnsplashPhotoData } from '@/lib/unsplash/types';
@@ -17,14 +18,14 @@ const username = await getPhotographer();
 ---
 
 <div class="photo-gallery-wrapper">
-  <section class="photo-gallery">
+  <CardGrid>
     {
       photos &&
         photos.results.map((photo, i) => (
           <PhotoGalleryItem {photo} order={i + 1} />
         ))
     }
-  </section>
+  </CardGrid>
   <aside>
     <p>
       {t.data.photo_gallery.credit_label}
@@ -58,24 +59,5 @@ const username = await getPhotographer();
         }
       }
     }
-    .photo-gallery {
-      display: grid;
-      align-items: flex-start;
-      grid-template-columns: repeat(auto-fit, minmax(7.875rem, 1fr));
-      grid-auto-flow: row dense;
-      gap: 1.5rem;
-      @media (min-width: 640px) {
-        grid-template-columns: repeat(auto-fit, minmax(9.675rem, 1fr));
-      }
-      @media (min-width: 768px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-      @media (min-width: 1024px) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      @media (min-width: 1280px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
   }
 </style>

src/components/PhotoGallery/PhotoGalleryItem.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import { getEntry } from 'astro:content';
+import { Card } from '@/components/Card';
 import { ProfileIcon } from '@/components/ProfileIcon';
 import type { UnsplashPhoto } from '@/lib/unsplash/types';
 import { getTimeDiff } from '@/utils/get-time-diff';
@@ -30,75 +31,64 @@ const createdAt = new Date(created_at);
 const dateDiff = getTimeDiff(createdAt, locale);
 ---
 
-<div class="photo-gallery-item pixel-border fade-in-up">
+<Card borderType="pixel" isAnimated>
   <a
     aria-label={`${t.data.photo_gallery_item.photo_label}${order}`}
     href={`${links.html}?utm_source=${toSnakeCase(meta.data.site.title)}&utm_medium=referral`}
+    slot="image"
   >
-    <figure class="photo">
-      <Image
-        src={`${urls.raw}&auto=format&w=640&q=70`}
-        alt={alt_description || description || ''}
-        width={width}
-        height={height}
-        format="avif"
-        loading="lazy"
-      />
-      <figcaption>{alt_description || description}</figcaption>
-    </figure>
+    <Image
+      class="photo"
+      src={`${urls.raw}&auto=format&w=640&q=70`}
+      alt={alt_description || description || ''}
+      width={width}
+      height={height}
+      format="avif"
+      loading="lazy"
+    />
   </a>
-  <section class="photo-metadata">
+  <section slot="content" class="photo-metadata">
     <div class="photographer">
       <ProfileIcon
         alt={photo.user.username}
         src={photo.user.profile_image.small}
         size={20}
       />
-      <span>{user.username}</span>
+      <span>{user.last_name}</span>
     </div>
     <span class="photo-date">
       {dateDiff}
     </span>
   </section>
-</div>
+</Card>
 <style>
-  .photo-gallery-item {
+  .photo {
+    width: 100%;
+    max-height: 10.875rem;
+    object-fit: cover;
+  }
+  .photo-metadata {
+    font-size: 0.685rem;
     display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    break-inside: avoid;
-    .photo {
-      margin: 0 auto;
-      figcaption {
-        display: none;
-      }
-    }
-    .photo-metadata {
-      font-size: 0.685rem;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.175rem 0.225rem 0.225rem 0.225rem;
+    .photographer {
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: 0.5rem;
-      padding: 0.175rem 0.225rem 0.225rem 0.225rem;
-      .photographer {
-        display: flex;
-        align-items: center;
-        gap: 0.375rem;
-        @media (min-width: 768px) {
-          gap: 0.5rem;
-        }
-      }
-      .photo-date {
-        margin-left: 0.5rem;
-      }
+      gap: 0.375rem;
       @media (min-width: 768px) {
-        font-size: 0.85rem;
-        padding: 0.375rem 0.5rem 0.5rem 0.5rem;
+        gap: 0.5rem;
       }
     }
+    .photo-date {
+      margin-left: 0.5rem;
+    }
     @media (min-width: 768px) {
-      margin-bottom: 1.5rem;
+      font-size: 0.85rem;
+      padding: 0.375rem 0.5rem 0.5rem 0.5rem;
     }
   }
 </style>

src/components/Search/Search.tsx

@@ -98,7 +98,7 @@ export const Search: Component<Props> = (props) => {
   return (
     <div class={searchWrapper}>
       <form onsubmit={handleSubmit}>
-        <div class={`${searchInputWrapper} pokemon-border`}>
+        <div class={`${searchInputWrapper} double-border`}>
           <SearchIcon label={props.t.button_label} width={22} height={22} />
           <input
             id="search-window"

src/components/elements/Figure/Image.astro

@@ -32,7 +32,6 @@ const {
       margin: 0 auto;
       max-height: 100%;
       aspect-ratio: var(--aspectRatio);
-
       & :global(img) {
         object-fit: contain;
         color: transparent;