feat: add github card

.vscode/typescriptreact.code-snippets

@@ -141,6 +141,17 @@
       "  noCookie={true}",
       "/>"
     ]
-  }
+  },
   //#endregion  //*======== MDX ===========
+
+  //#region  //*=========== Snippet Wrap ===========
+  "Wrap with Fragment": {
+    "prefix": "ff",
+    "body": ["<>", "\t${TM_SELECTED_TEXT}", "</>"]
+  },
+  "Wrap with clsx": {
+    "prefix": "cx",
+    "body": ["{clsx(${TM_SELECTED_TEXT})}"]
+  }
+  //#endregion  //*======== Snippet Wrap ===========
 }

src/components/content/MDXComponents.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 
 import Quiz from '@/components/content/blog/Quiz';
+import GithubCard from '@/components/content/card/GithubCard';
 import CustomCode, { Pre } from '@/components/content/CustomCode';
 import SplitImage, { Split } from '@/components/content/SplitImage';
 import TweetCard from '@/components/content/TweetCard';
@@ -20,6 +21,7 @@ const MDXComponents = {
   Split,
   TechIcons,
   TweetCard,
+  GithubCard,
   Quiz,
 };
 

src/components/content/card/GithubCard.tsx

@@ -0,0 +1,79 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import { BiGitRepoForked } from 'react-icons/bi';
+import { HiOutlineStar } from 'react-icons/hi';
+import { SiGithub } from 'react-icons/si';
+import useSWR from 'swr';
+
+import Accent from '@/components/Accent';
+import UnstyledLink from '@/components/links/UnstyledLink';
+
+interface GithubRepo {
+  full_name: string;
+  description: string;
+  forks: number;
+  stargazers_count: number;
+  html_url: string;
+  owner: {
+    avatar_url: string;
+    login: string;
+    html_url: string;
+  };
+}
+
+type GithubCardProps = {
+  repo: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+
+export default function GithubCard({ repo, className }: GithubCardProps) {
+  const { data: repository, error } = useSWR<GithubRepo>(
+    `https://api.github.com/repos/${repo}`
+  );
+
+  return !error && repository ? (
+    <div className='not-prose'>
+      <UnstyledLink
+        href={repository.html_url}
+        className={clsx(
+          'max-w-xl !block',
+          'not-prose px-4 py-3',
+          'rounded-lg border border-gray-300 dark:border-gray-600',
+          'transform-gpu scale-100 hover:scale-[1.02] active:scale-[0.97]',
+          'transition duration-100',
+          'animate-shadow',
+          className
+        )}
+      >
+        <div className='flex gap-2 items-center text-sm md:text-base'>
+          <SiGithub className='shrink-0 text-[1.2em] ml-0.5' />
+          <Accent className={clsx('font-semibold truncate overflow-ellipsis')}>
+            {repository.full_name}
+          </Accent>
+        </div>
+        <p className={clsx('mt-2 text-sm text-gray-700 dark:text-gray-200')}>
+          {repository.description}
+        </p>
+        <div className='flex gap-3 mt-2'>
+          <div className='flex gap-1 items-center text-xs'>
+            <HiOutlineStar className='shrink-0 text-[1.2em]' />
+            <span>{repository.stargazers_count}</span>
+          </div>
+          <div className='flex gap-1 items-center text-xs'>
+            <BiGitRepoForked className='shrink-0 text-[1.2em]' />
+            <span>{repository.forks}</span>
+          </div>
+        </div>
+      </UnstyledLink>
+    </div>
+  ) : (
+    <div
+      className={clsx(
+        'mx-auto max-w-xl !block',
+        'not-prose px-4 py-3',
+        'rounded-lg border border-gray-300 dark:border-gray-600',
+        'bg-gray-300 animate-pulse dark:bg-gray-600',
+        'h-[111px] animate-pulse'
+      )}
+    />
+  );
+}

src/contents/blog/one-stop-starter.mdx

@@ -13,6 +13,8 @@ I made the [ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-
 
 This is something that I use every project init, features are carefully curated, and put into this repository.
 
+<GithubCard repo='theodorusclarence/ts-nextjs-tailwind-starter' />
+
 ## Features
 
 According to my list, these are all the features that I incorporate on ts-nextjs-tailwind-starter:
@@ -262,7 +264,7 @@ You might notice the `#region` with green highlight comments. This is something
   height={415}
 />
 
-The lesser noise the better. You can also use `⌘K + ⌘8` to fold all regions.
+The lesser noise the better. You can also use `⌘ K + ⌘ 8` to fold all regions.
 
 ### Snippets Wrap
 
@@ -301,10 +303,12 @@ Hit the terminal then grab some coffee. You're back with complete components als
 
 For more demo, check out the [repository readme](https://github.com/theodorusclarence/expansion-pack)
 
+<GithubCard repo='theodorusclarence/expansion-pack' />
+
 ## Star the repository
 
 Liking the features? This repository basically grows with me, so the features will go through changes and improvement. If you got anything in mind, leave a comment below, or [open a discussion](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/discussions).
 
-Finally, I would be **thrilled** if you give a **star** to the repository.
+<GithubCard repo='theodorusclarence/ts-nextjs-tailwind-starter' />
 
-[https://github.com/theodorusclarence/ts-nextjs-tailwind-starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter)
+Finally, I would be **thrilled** if you give a **star** to the repository.

src/pages/blog/[slug].tsx

@@ -187,7 +187,7 @@ export default function SingleBlogPage({
             </section>
 
             <ShareTweetButton
-              className='mt-6'
+              className='mt-12'
               url={`https://theodorusclarence.com/blog/${frontmatter.slug}`}
               title={frontmatter.title}
             />