chore: adjust ProjectCard and tag Badge design

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "astro-erudite",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "astro-erudite",
-      "version": "1.1.9",
+      "version": "1.2.1",
       "dependencies": {
         "@astrojs/check": "^0.9.4",
         "@astrojs/markdown-remark": "^6.0.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/Footer.astro

@@ -1,6 +1,8 @@
 ---
 import Container from '@/components/Container.astro'
+import { Separator } from '@/components/ui/separator'
 import { SOCIAL_LINKS } from '@/consts'
+import Link from './Link.astro'
 import SocialIcons from './SocialIcons.astro'
 ---
 
@@ -9,9 +11,18 @@ import SocialIcons from './SocialIcons.astro'
     <div
       class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between"
     >
-      <div class="flex items-center">
-        <p class="text-center text-sm text-muted-foreground">
+      <div class="flex items-center gap-x-2">
+        <span class="text-center text-sm text-muted-foreground">
           &copy; {new Date().getFullYear()} All rights reserved.
+        </span>
+        <Separator orientation="vertical" className="h-4" />
+        <p class="text-center text-sm text-muted-foreground">
+          Made with 🤍 by <Link
+            href="https://github.com/jktrn"
+            class="text-foreground"
+            external
+            underline>enscribe</Link
+          >!
         </p>
       </div>
       <SocialIcons links={SOCIAL_LINKS} />

src/components/ProjectCard.astro

@@ -12,30 +12,44 @@ const { project } = Astro.props
 ---
 
 <div
-  class="overflow-hidden rounded-xl border transition-colors duration-300 ease-in-out hover:bg-secondary/50"
+  class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
 >
-  <Link href={project.data.link} class="block" external>
+  <Link
+    href={project.data.link}
+    class="flex flex-col gap-4 sm:flex-row"
+    external
+  >
+    {
+      project.data.image && (
+        <div class="max-w-[200px] sm:flex-shrink-0">
           <Image
             src={project.data.image}
             alt={project.data.name}
-      width={400}
-      height={200}
-      class="w-full object-cover"
+            width={1200}
+            height={630}
+            class="object-cover"
           />
-    <div class="p-4">
-      <h3 class="mb-2 text-lg font-semibold">{project.data.name}</h3>
-      <p class="mb-4 text-sm text-muted-foreground">
+        </div>
+      )
+    }
+    <div class="flex-grow">
+      <h3 class="mb-1 text-lg font-semibold">
+        {project.data.name}
+      </h3>
+      <p class="mb-2 text-sm text-muted-foreground">
         {project.data.description}
       </p>
-      <div class="flex flex-wrap gap-2">
       {
-          project.data.tags.map((tag) => (
+        project.data.tags && (
+          <div class="flex flex-wrap gap-2">
+            {project.data.tags.map((tag: string) => (
               <Badge variant="secondary" showHash={false}>
                 {tag}
               </Badge>
-          ))
-        }
+            ))}
           </div>
+        )
+      }
     </div>
   </Link>
 </div>

src/content.config.ts

@@ -2,7 +2,7 @@ import { glob } from 'astro/loaders'
 import { defineCollection, z } from 'astro:content'
 
 const blog = defineCollection({
-  loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content/blog" }),
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
   schema: ({ image }) =>
     z.object({
       title: z
@@ -26,7 +26,7 @@ const blog = defineCollection({
 })
 
 const authors = defineCollection({
-  loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content/authors" }),
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/authors' }),
   schema: z.object({
     name: z.string(),
     pronouns: z.string().optional(),
@@ -42,7 +42,7 @@ const authors = defineCollection({
 })
 
 const projects = defineCollection({
-  loader: glob({ pattern: '**/*.{md,mdx}', base: "./src/content/projects" }),
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/projects' }),
   schema: ({ image }) =>
     z.object({
       name: z.string(),

src/lib/server-utils.ts

@@ -1,4 +1,4 @@
-import { getEntry } from "astro:content"
+import { getEntry } from 'astro:content'
 
 export async function parseAuthors(authors: string[]) {
   if (!authors || authors.length === 0) return []

src/pages/about.astro

@@ -1,6 +1,7 @@
 ---
 import Breadcrumbs from '@/components/Breadcrumbs.astro'
 import Container from '@/components/Container.astro'
+import Link from '@/components/Link.astro'
 import ProjectCard from '@/components/ProjectCard.astro'
 import { SITE } from '@/consts'
 import Layout from '@/layouts/Layout.astro'
@@ -15,14 +16,39 @@ const projects = await getCollection('projects')
 
     <section>
       <div class="min-w-full">
-        <h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
-        <p class="prose prose-neutral mb-8 dark:prose-invert">
-          {SITE.TITLE} is an opinionated, no-frills static blogging template built
-          with Astro.
+        <div class="prose prose-neutral mb-8 dark:prose-invert">
+          <p class="mb-4">
+            astro-erudite is an opinionated, no-frills static blogging template
+            that prioritizes simplicity and performance, built with <Link
+              href="https://astro.build"
+              class="text-foreground"
+              external
+              underline>Astro</Link
+            >, <Link
+              href="https://tailwindcss.com"
+              class="text-foreground"
+              external
+              underline>Tailwind</Link
+            >, and <Link
+              href="https://ui.shadcn.com"
+              class="text-foreground"
+              external
+              underline>shadcn/ui</Link
+            >. It provides a clean foundation for your content while being
+            extremely easy to customize.
           </p>
+          <p>
+            To learn more about the philosophy behind this template, check out
+            the following blog post: <Link
+              href="/blog/the-state-of-static-blogs"
+              class="text-foreground"
+              underline>The State of Static Blogs in 2024</Link
+            >.
+          </p>
+        </div>
 
-        <h2 class="mb-4 text-2xl font-semibold">Our Projects</h2>
-        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <h2 class="mb-4 text-2xl font-semibold">Example Projects Listing</h2>
+        <div class="flex flex-col gap-4">
           {projects.map((project) => <ProjectCard project={project} />)}
         </div>
       </div>

src/pages/tags/index.astro

@@ -9,9 +9,17 @@ import { getCollection } from 'astro:content'
 
 const blog = (await getCollection('blog')).filter((post) => !post.data.draft)
 
-const tags = blog
-  .flatMap((post) => post.data.tags)
-  .filter((tag, index, self) => self.indexOf(tag) === index)
+const tagCounts = blog.reduce((acc, post) => {
+  post.data.tags?.forEach((tag) => {
+    acc.set(tag, (acc.get(tag) || 0) + 1)
+  })
+  return acc
+}, new Map())
+
+const tags = [...tagCounts.keys()].sort((a, b) => {
+  const countDiff = tagCounts.get(b)! - tagCounts.get(a)!
+  return countDiff !== 0 ? countDiff : a.localeCompare(b)
+})
 ---
 
 <Layout title="Tags" description="A list of all tags used in blog posts">
@@ -19,7 +27,6 @@ const tags = blog
     <Breadcrumbs items={[{ label: 'Tags', icon: 'lucide:tags' }]} />
 
     <div class="flex flex-col gap-4">
-      <h1 class="text-3xl font-semibold">Tags</h1>
       <div class="flex flex-wrap gap-2">
         {
           tags.map((tag) => (
@@ -29,6 +36,9 @@ const tags = blog
             >
               <Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
               {tag}
+              <span class="ml-1.5 text-muted-foreground">
+                ({tagCounts.get(tag)})
+              </span>
             </Link>
           ))
         }

src/styles/global.css

@@ -124,6 +124,19 @@
         }
       }
 
+      /* Shadcn-like scrollbar */
+      pre::-webkit-scrollbar {
+        @apply h-2.5 w-2.5;
+      }
+
+      pre::-webkit-scrollbar-track {
+        @apply bg-transparent;
+      }
+
+      pre::-webkit-scrollbar-thumb {
+        @apply rounded-full bg-border bg-clip-padding p-px;
+      }
+
       /* Code block styles */
       pre {
         @apply static max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 py-4 text-sm leading-loose;