feat: import boilerplate components locally and unify frontmatter types

package.json

@@ -49,7 +49,6 @@
     "tailwindcss": "^3.3.6"
   },
   "dependencies": {
-    "astro-boilerplate-components": "^1.0.16",
     "date-fns": "^2.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/components/BlogCard.tsx

@@ -0,0 +1,39 @@
+import type { MarkdownInstance } from 'astro';
+import { format } from 'date-fns';
+
+import type { IFrontMatter } from '@/types/IFrontMatter';
+
+type IBlogCardProps = {
+  instance: MarkdownInstance<IFrontMatter>;
+};
+
+const BlogCard = (props: IBlogCardProps) => (
+  <a className="hover:translate-y-1" href={props.instance.url}>
+    <div className="overflow-hidden rounded-md bg-slate-800">
+      <div className="aspect-h-2 aspect-w-3">
+        <img
+          className="size-full object-cover object-center"
+          src={props.instance.frontmatter.imgSrc}
+          alt={props.instance.frontmatter.imgAlt}
+          loading="lazy"
+        />
+      </div>
+
+      <div className="px-3 pb-6 pt-4 text-center">
+        <h2 className="text-xl font-semibold">
+          {props.instance.frontmatter.title}
+        </h2>
+
+        <div className="mt-1 text-xs text-gray-400">
+          {format(new Date(props.instance.frontmatter.pubDate), 'LLL d, yyyy')}
+        </div>
+
+        <div className="mt-2 text-sm">
+          {props.instance.frontmatter.description}
+        </div>
+      </div>
+    </div>
+  </a>
+);
+
+export { BlogCard };

src/components/BlogGallery.tsx

@@ -0,0 +1,19 @@
+import type { MarkdownInstance } from 'astro';
+
+import type { IFrontMatter } from '@/types/IFrontMatter';
+
+import { BlogCard } from './BlogCard';
+
+type IRecentPostsProps = {
+  postList: MarkdownInstance<IFrontMatter>[];
+};
+
+const BlogGallery = (props: IRecentPostsProps) => (
+  <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+    {props.postList.map((elt) => (
+      <BlogCard key={elt.url} instance={elt} />
+    ))}
+  </div>
+);
+
+export { BlogGallery };

src/components/FooterCopyright.tsx

@@ -0,0 +1,23 @@
+type IFooterCopyrightProps = {
+  site_name: string;
+};
+
+const FooterCopyright = (props: IFooterCopyrightProps) => (
+  <div className="border-t border-gray-600 pt-5">
+    <div className="text-sm text-gray-200">
+      © Copyright {new Date().getFullYear()} by {props.site_name}. Built with ♥
+      by{' '}
+      <a
+        className="text-cyan-400 hover:underline"
+        href="https://creativedesignsguru.com"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        CreativeDesignsGuru
+      </a>
+      .
+    </div>
+  </div>
+);
+
+export { FooterCopyright };

src/components/GradientText.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type IGradientTextProps = {
+  children: ReactNode;
+};
+
+const GradientText = (props: IGradientTextProps) => (
+  <span className="bg-gradient-to-br from-sky-500 to-cyan-400 bg-clip-text text-transparent">
+    {props.children}
+  </span>
+);
+
+export { GradientText };

src/components/HeroAvatar.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+type IHeroAvatarProps = {
+  title: ReactNode;
+  description: ReactNode;
+  avatar: ReactNode;
+  socialButtons: ReactNode;
+};
+
+const HeroAvatar = (props: IHeroAvatarProps) => (
+  <div className="flex flex-col items-center md:flex-row md:justify-between md:gap-x-24">
+    <div>
+      <h1 className="text-3xl font-bold">{props.title}</h1>
+
+      <p className="mt-6 text-xl leading-9">{props.description}</p>
+
+      <div className="mt-3 flex gap-1">{props.socialButtons}</div>
+    </div>
+
+    <div className="shrink-0">{props.avatar}</div>
+  </div>
+);
+
+export { HeroAvatar };

src/components/HeroSocial.tsx

@@ -0,0 +1,15 @@
+type IHeroSocialProps = {
+  src: string;
+  alt: string;
+};
+
+const HeroSocial = (props: IHeroSocialProps) => (
+  <img
+    className="size-12 hover:translate-y-1"
+    src={props.src}
+    alt={props.alt}
+    loading="lazy"
+  />
+);
+
+export { HeroSocial };

src/components/Logo.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+type ILogoProps = {
+  icon: ReactNode;
+  name: string;
+};
+
+const Logo = (props: ILogoProps) => (
+  <div className="flex items-center bg-gradient-to-br from-sky-500 to-cyan-400 bg-clip-text text-xl font-bold text-transparent">
+    {props.icon}
+
+    {props.name}
+  </div>
+);
+
+export { Logo };

src/components/NavMenu.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type INavMenuProps = {
+  children: ReactNode;
+};
+
+const NavMenu = (props: INavMenuProps) => (
+  <nav>
+    <ul className="flex gap-x-3 font-medium text-gray-200">{props.children}</ul>
+  </nav>
+);
+
+export { NavMenu };

src/components/NavMenuItem.tsx

@@ -0,0 +1,15 @@
+type INavMenuItemProps = {
+  href: string;
+  children: string;
+  target?: '_blank' | '_self' | '_parent' | '_top' | string;
+};
+
+const NavMenuItem = (props: INavMenuItemProps) => (
+  <li className="hover:text-white">
+    <a href={props.href} target={props.target || '_self'}>
+      {props.children}
+    </a>
+  </li>
+);
+
+export { NavMenuItem };

src/components/NavbarTwoColumns.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type INavbarProps = {
+  children: ReactNode;
+};
+
+const NavbarTwoColumns = (props: INavbarProps) => (
+  <div className="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:justify-between">
+    {props.children}
+  </div>
+);
+
+export { NavbarTwoColumns };

src/components/NewerOlderPagination.tsx

@@ -0,0 +1,14 @@
+import type { FrontmatterPage } from '@/types/IFrontMatter';
+
+type INewerOlderPaginationProps = {
+  page: FrontmatterPage;
+};
+
+const NewerOlderPagination = (props: INewerOlderPaginationProps) => (
+  <div className="flex justify-center gap-8">
+    {props.page.url.prev && <a href={props.page.url.prev}>← Newer Posts</a>}
+    {props.page.url.next && <a href={props.page.url.next}>Older Posts →</a>}
+  </div>
+);
+
+export { NewerOlderPagination };

src/components/Newsletter.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+type INewsletterProps = {
+  title: ReactNode;
+  description: ReactNode;
+};
+
+const Newsletter = (props: INewsletterProps) => (
+  <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
+    <div className="sm:w-7/12">
+      <div className="text-3xl font-bold">{props.title}</div>
+
+      <p className="mt-3 text-gray-300">{props.description}</p>
+    </div>
+
+    <div className="w-full sm:w-5/12">
+      <form className="flex rounded-full bg-slate-800 px-4 py-2 focus-within:ring-2 focus-within:ring-cyan-600 hover:ring-2 hover:ring-cyan-600">
+        <input className="w-full appearance-none bg-slate-800 focus:outline-none" />
+
+        <button
+          className="ml-2 shrink-0 rounded-full bg-gradient-to-br from-sky-500 to-cyan-400 px-3 py-1 text-sm font-medium hover:from-sky-700 hover:to-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-600/50"
+          type="submit"
+        >
+          Subscribe
+        </button>
+      </form>
+    </div>
+  </div>
+);
+
+export { Newsletter };

src/components/PaginationHeader.tsx

@@ -0,0 +1,14 @@
+type IPaginationHeaderProps = {
+  title: string;
+  description: string;
+};
+
+const PaginationHeader = (props: IPaginationHeaderProps) => (
+  <div className="text-center">
+    <h1 className="text-3xl font-bold">{props.title}</h1>
+
+    <div className="mt-3 text-gray-200">{props.description}</div>
+  </div>
+);
+
+export { PaginationHeader };

src/components/PostContent.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import type { IFrontMatter } from '@/types/IFrontMatter';
+
+type IPostContentProps = {
+  content: IFrontMatter;
+  children: ReactNode;
+};
+
+const PostContent = (props: IPostContentProps) => (
+  <div className="mx-auto mt-5 max-w-prose">
+    <div className="aspect-h-2 aspect-w-3">
+      <img
+        className="size-full rounded-lg object-cover object-center"
+        src={props.content.imgSrc}
+        alt={props.content.imgAlt}
+        loading="lazy"
+      />
+    </div>
+
+    <div className="prose prose-invert mt-8 prose-img:rounded-lg">
+      {props.children}
+    </div>
+  </div>
+);
+
+export { PostContent };

src/components/PostHeader.tsx

@@ -0,0 +1,21 @@
+import { format } from 'date-fns';
+
+import type { IFrontMatter } from '@/types/IFrontMatter';
+
+type IPostHeaderProps = {
+  content: IFrontMatter;
+  author: string;
+};
+
+const PostHeader = (props: IPostHeaderProps) => (
+  <>
+    <h1 className="text-center text-3xl font-bold">{props.content.title}</h1>
+
+    <div className="mt-2 text-center text-sm text-gray-400">
+      By {props.author} on{' '}
+      {format(new Date(props.content.pubDate), 'LLL d, yyyy')}
+    </div>
+  </>
+);
+
+export { PostHeader };

src/components/Project.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+
+type IProjectProps = {
+  img: {
+    src: string;
+    alt: string;
+  };
+  name: string;
+  description: string;
+  link: string;
+  category: ReactNode;
+};
+
+const Project = (props: IProjectProps) => (
+  <div className="flex flex-col items-center gap-x-8 rounded-md bg-slate-800 p-3 md:flex-row">
+    <div className="shrink-0">
+      <a href={props.link}>
+        <img
+          className="size-36 hover:translate-y-1"
+          src={props.img.src}
+          alt={props.img.alt}
+          loading="lazy"
+        />
+      </a>
+    </div>
+
+    <div>
+      <div className="flex flex-col items-center gap-y-2 md:flex-row">
+        <a className="hover:text-cyan-400" href={props.link}>
+          <div className="text-xl font-semibold">{props.name}</div>
+        </a>
+
+        <div className="ml-3 flex flex-wrap gap-2">{props.category}</div>
+      </div>
+
+      <p className="mt-3 text-gray-400">{props.description}</p>
+    </div>
+  </div>
+);
+
+export { Project };

src/components/Section.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+type ISectionProps = {
+  title?: ReactNode;
+  children: ReactNode;
+};
+
+const Section = (props: ISectionProps) => (
+  <div className="mx-auto max-w-screen-lg px-3 py-6">
+    {props.title && (
+      <div className="mb-6 text-2xl font-bold">{props.title}</div>
+    )}
+
+    {props.children}
+  </div>
+);
+
+export { Section };