feat: Move away from panda and make theme playful

Author: coreybruyere

package.json

@@ -3,13 +3,11 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "prepare": "pnpm run codegen",
     "dev": "astro dev",
     "start": "astro preview",
     "build": "CI=false astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro",
-    "codegen": "panda codegen"
+    "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.8",
@@ -31,7 +29,5 @@
     "marked": "^15.0.7",
     "typescript": "^5.4.2"
   },
-  "devDependencies": {
-    "@pandacss/dev": "^0.35.0"
-  }
+  "devDependencies": {}
 }

panda.config.ts

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    // PostCSS plugins can be added here as needed
+    // For now, we're using vanilla CSS with no build-time processing
   },
-}
+};

postcss.config.cjs

@@ -1,14 +1,6 @@
 ---
-import { container } from "../../styled-system/patterns";
 ---
 
-<div
-  class={container({
-    width: "full",
-    px: "4",
-    maxWidth: "4xl",
-    marginX: "auto",
-  })}
->
+<div class="container w-full px-4 max-w-4xl mx-auto">
   <slot />
 </div>

src/components/Container.astro

@@ -1,7 +1,6 @@
 ---
 import { POSTS_PER_PAGE_MAX } from "../consts";
 
-import { css } from "../../styled-system/css";
 import {
   contentfulClient,
   type Post,
@@ -41,17 +40,12 @@ const {
 }: ContentfulPostsListProps = Astro.props;
 ---
 
-<ul class={css({ listStyle: "none", p: 0 })}>
+<ul class="list-none p-0">
   {
     posts
       .slice((pageParam - 1) * postsPerPage, pageParam * postsPerPage)
       .map((post: any) => (
-        <li
-          class={css({
-            mb: 4,
-            color: "primary",
-          })}
-        >
+        <li class="mb-4 text-primary">
           <a href={`/blog/${post.slug}`}>
             Title:{post.title}, Date: {post.publishDate}, Slug: {post.slug}
           </a>

src/components/ContentfulPostsList.astro

@@ -1,7 +1,6 @@
 ---
 import Pagination from "./PagePagination.astro";
 import { POSTS_PER_PAGE_MAX } from "../consts";
-import { css } from "../../styled-system/css";
 import { contentfulClient, type Work } from "../lib/contentful";
 
 export const contentfulEntries = await contentfulClient.getEntries<Work>({
@@ -33,12 +32,7 @@ const works = contentfulPosts.slice(
 <ul>
   {
     works.map((post: any) => (
-      <li
-        class={css({
-          mb: 4,
-          color: "primary",
-        })}
-      >
+      <li class="mb-4 text-primary">
         Title: {post.title}, Date: {post.publishDate}, Slug: {post.slug}
       </li>
     ))

src/components/ContentfulWorksList.astro

@@ -1,12 +1,10 @@
 ---
-import { css } from "../../styled-system/css";
-
 const today = new Date();
 ---
 
-<footer class={css({ p: "2em 1em 6em 1em", bg: "gray.100", textAlign: "center" })}>
+<footer class="p-5 text-center bg-gray-100 font-playful">
 	&copy; {today.getFullYear()} Your name here. All rights reserved.
-	<div class={css({ display: "flex", justifyContent: "center", gap: "1em", mt: "1em" })} class="social-links">
+	<div class="flex justify-center gap-4 mt-4 social-links">
 		<a href="https://m.webtoo.ls/@astro" target="_blank">
 			<span class="sr-only">Follow Astro on Mastodon</span>
 			<svg
@@ -41,24 +39,3 @@ const today = new Date();
 		</a>
 	</div>
 </footer>
-<style>
-	footer {
-		padding: 2em 1em 6em 1em;
-		background: linear-gradient(var(--gray-gradient)) no-repeat;
-		color: rgb(var(--gray));
-		text-align: center;
-	}
-	.social-links {
-		display: flex;
-		justify-content: center;
-		gap: 1em;
-		margin-top: 1em;
-	}
-	.social-links a {
-		text-decoration: none;
-		color: rgb(var(--gray));
-	}
-	.social-links a:hover {
-		color: rgb(var(--gray-dark));
-	}
-</style>