feat: improve graphics

README.md

@@ -4,6 +4,26 @@
 
 ## astro-erudite
 
-astro-erudite is an opinionated, no-frills static blogging template built with [Astro](https://astro.build/) and [Tailwind](https://tailwindcss.com/). Extraordinarily loosely based on the [Astro Micro](https://astro-micro.vercel.app/) theme by [trevortylerlee](https://github.com/trevortylerlee).
+astro-erudite is an opinionated, no-frills static blogging template built with [Astro](https://astro.build/), [Tailwind](https://tailwindcss.com/), and [shadcn/ui](https://ui.shadcn.com/). Extraordinarily loosely based off the [Astro Micro](https://astro-micro.vercel.app/) theme by [trevortylerlee](https://github.com/trevortylerlee).
+
+To learn more about why this template exists, read [The State of Static Blogs in 2024](https://astro-erudite.vercel.app/blog/the-state-of-static-blogs), where I share my take on what constitutes a great blogging template and my goals while developing this one.
 
 </div>
+
+---
+
+## Technology Stack
+
+This is a list of the various technologies used to build this website:
+
+| Category            | Technology Name                                                                                    |
+| ------------------- | -------------------------------------------------------------------------------------------------- |
+| Framework           | [Astro](https://astro.build/)                                                                      |
+| Styling             | [Tailwind](https://tailwindcss.com)                                                                |
+| Components          | [shadcn/ui](https://ui.shadcn.com/)                                                                |
+| Content             | [MDX](https://mdxjs.com/)                                                                          |
+| Syntax Highlighting | [Shiki](https://github.com/shikijs/shiki) + [rehype-pretty-code](https://rehype-pretty.pages.dev/) |
+| Graphics            | [Figma](https://www.figma.com/)                                                                    |
+| Deployment          | [Vercel](https://vercel.com)                                                                       |
+
+---

public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#121212</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/safari-pinned-tab.svg

@@ -9,10 +9,9 @@ Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
 <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M0 4420 l0 -700 2320 0 2320 0 0 -230 0 -230 -2320 0 -2320 0 0 -700
+<path d="M0 4020 l0 -1100 2200 0 2200 0 0 -360 0 -360 -2200 0 -2200 0 0
-0 -700 2320 0 2320 0 0 -230 0 -230 -2320 0 -2320 0 0 -700 0 -700 2560 0
+-1100 0 -1100 2560 0 2560 0 0 370 0 370 -2200 0 -2200 0 0 360 0 360 2200 0
-2560 0 0 235 0 235 -2320 0 -2320 0 0 230 0 230 2320 0 2320 0 0 700 0 700
+2200 0 0 1100 0 1100 -2200 0 -2200 0 0 360 0 360 2200 0 2200 0 0 370 0 370
--2320 0 -2320 0 0 230 0 230 2320 0 2320 0 0 700 0 700 -2320 0 -2320 0 0 230
+-2560 0 -2560 0 0 -1100z"/>
-0 230 2320 0 2320 0 0 235 0 235 -2560 0 -2560 0 0 -700z"/>
 </g>
 </svg>

public/site.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "",
+    "name": "erudite",
-  "short_name": "",
+    "short_name": "erudite",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",

public/static/logo.svg

@@ -1,16 +1,12 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_271_118)">
-<rect width="512" height="47" fill="#CCCCCC"/>
+<rect width="512" height="74" fill="#CCCCCC"/>
-<rect y="93" width="512" height="47" fill="#CCCCCC"/>
+<rect y="146" width="512" height="74" fill="#CCCCCC"/>
-<rect y="186" width="512" height="47" fill="#CCCCCC"/>
+<rect y="292" width="512" height="74" fill="#CCCCCC"/>
-<rect y="279" width="512" height="47" fill="#CCCCCC"/>
+<rect y="438" width="512" height="74" fill="#CCCCCC"/>
-<rect y="372" width="512" height="47" fill="#CCCCCC"/>
+<rect y="74" width="72" height="72" fill="#CCCCCC"/>
-<rect y="465" width="512" height="47" fill="#CCCCCC"/>
+<rect y="366" width="72" height="72" fill="#CCCCCC"/>
-<rect y="47" width="48" height="46" fill="#CCCCCC"/>
+<rect x="440" y="220" width="72" height="72" fill="#CCCCCC"/>
-<rect x="464" y="140" width="48" height="46" fill="#CCCCCC"/>
-<rect y="233" width="48" height="46" fill="#CCCCCC"/>
-<rect x="464" y="326" width="48" height="46" fill="#CCCCCC"/>
-<rect y="419" width="48" height="46" fill="#CCCCCC"/>
 </g>
 <defs>
 <clipPath id="clip0_271_118">

src/components/BlogCard.astro

@@ -35,7 +35,7 @@ const authors = await parseAuthors(entry.data.authors ?? [])
             alt={entry.data.title}
             width={200}
             height={200}
-            class="rounded-xl object-cover"
+            class="object-cover"
           />
         </div>
       )

src/components/Head.astro

@@ -28,15 +28,13 @@ const { title, description, image = '/static/twitter-card.png' } = Astro.props
 <meta name="title" content={title} />
 <meta name="description" content={description} />
 
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest" />
+<link rel="manifest" href="/site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#121212">
-<link rel="shortcut icon" href="/favicon.ico" />
+<meta name="msapplication-TileColor" content="#121212">
-<meta name="msapplication-TileColor" content="#da532c" />
+<meta name="theme-color" content="#121212">
-<meta name="msapplication-config" content="/browserconfig.xml" />
-<meta name="theme-color" content="#121212" />
 
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />

src/components/Header.astro

@@ -18,7 +18,7 @@ import logo from '../../public/static/logo.svg'
         href="/"
         class="flex flex-shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
       >
-        <Image src={logo} alt="Logo" class="size-8 rounded-sm" />
+        <Image src={logo} alt="Logo" class="size-8" />
         {SITE.TITLE}
       </Link>
       <div class="flex items-center gap-2 md:gap-4">

src/consts.ts

@@ -14,7 +14,7 @@ export type NavigationLink = {
 export const SITE: Site = {
   TITLE: 'astro-erudite',
   DESCRIPTION:
-    'astro-erudite is a opinionated, no-frills blogging template. Built with Astro.',
+    'astro-erudite is a opinionated, no-frills blogging template—built with Astro, Tailwind, and shadcn/ui.',
   EMAIL: 'jason@enscribe.dev',
   NUM_POSTS_ON_HOMEPAGE: 2,
   SITEURL: 'https://astro-erudite.vercel.app',

src/pages/blog/[...slug].astro

@@ -71,7 +71,7 @@ const authors = await parseAuthors(post.data.authors ?? [])
           alt={post.data.title}
           width={1200}
           height={630}
-          class="rounded-xl object-cover"
+          class="object-cover"
         />
       )
     }