Merge pull request #3 from liyunze-coding/tailwind-v4

updated to tailwind v4

astro.config.mjs

@@ -1,25 +1,31 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import expressiveCode from "astro-expressive-code";
 import remarkDirective from "remark-directive";
 import remarkCalloutDirectives from "./src/assets/plugins/remark-callout-directives-customized.js";
 
+import tailwindcss from "@tailwindcss/vite";
+
 // https://astro.build/config
 export default defineConfig({
-    integrations: [
+  integrations: [
-        tailwind(),
+      expressiveCode(),
-        expressiveCode(),
+      mdx({
-        mdx({
+          remarkPlugins: [remarkDirective, remarkCalloutDirectives],
-            remarkPlugins: [remarkDirective, remarkCalloutDirectives],
+      }),
-        }),
+      react(),
-        react(),
+  ],
-    ],
+
-    server: {
+  server: {
-        port: 4321,
+      port: 4321,
-    },
+  },
-    markdown: {
+
-        remarkPlugins: [remarkDirective, remarkCalloutDirectives],
+  markdown: {
-    },
+      remarkPlugins: [remarkDirective, remarkCalloutDirectives],
+  },
+
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package.json

@@ -12,8 +12,8 @@
     "dependencies": {
         "@astrojs/mdx": "^4.2.5",
         "@astrojs/react": "^3.6.2",
-        "@astrojs/tailwind": "^5.1.2",
         "@astrojs/ts-plugin": "^1.10.4",
+        "@tailwindcss/vite": "^4.1.10",
         "@types/react": "^18.2.65",
         "@types/react-dom": "^18.2.22",
         "@vercel/analytics": "^1.0.1",
@@ -21,11 +21,12 @@
         "astro-expressive-code": "^0.41.2",
         "clsx": "^2.1.0",
         "framer-motion": "^11.0.12",
+        "motion": "^12.18.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "remark-directive": "^3.0.0",
         "tailwind-merge": "^2.2.1",
-        "tailwindcss": "^3.4.1",
+        "tailwindcss": "^4.1.10",
         "typescript": "^5.4.3"
     },
     "devDependencies": {

src/components/blocks/verticalNav.astro

@@ -34,14 +34,20 @@ export async function setup() {
 	// Define the order of categories
 	let categoryOrder = ["Get Started", "Guide", "Tutorials"];
 
-	const getStartedFiles = Object.values(import.meta.glob("../../pages/get-started/*", { eager: true }));
+	const getStartedFiles = Object.values(
-	const guideFiles = Object.values(import.meta.glob("../../pages/guide/*", { eager: true }));
+		import.meta.glob("../../pages/get-started/*", { eager: true })
-	const tutorialFiles = Object.values(import.meta.glob("../../pages/tutorials/*", { eager: true }));
+	);
+	const guideFiles = Object.values(
+		import.meta.glob("../../pages/guide/*", { eager: true })
+	);
+	const tutorialFiles = Object.values(
+		import.meta.glob("../../pages/tutorials/*", { eager: true })
+	);
 
 	let markdownFiles: MarkdownFile[] = [
 		...(getStartedFiles as MarkdownFile[]),
 		...(guideFiles as MarkdownFile[]),
-		...(tutorialFiles as MarkdownFile[])
+		...(tutorialFiles as MarkdownFile[]),
 	];
 	let navigation: Navigation = {};
 
@@ -122,10 +128,10 @@ const { showHome } = Astro.props;
 					</div>
 					<ul class="list-disc list-outside font-normal">
 						{links.map((link) => (
-							<li class="mb-1 pl-0">
+							<li class="mb-1 pl-0 ml-5">
 								<a
 									href={link.url}
-									class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-black bg-primary-green" : "text-gray-400 bg-none"}`}
+									class={`no-target-blank w-full inline-block px-2 py-1 rounded-md transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-black bg-primary-green" : "text-gray-400 bg-none"}`}
 								>
 									{link.title}
 								</a>

src/components/ui/HeroTitle.astro

@@ -2,7 +2,8 @@
 	<div class="text-center text-4xl lg:text-6xl font-bold">
 		<span class="text-slate-200">Getting started with</span>
 		<div
-			class="bg-clip-text text-transparent bg-hero-gradient animate-gradient py-1 lg:py-3 bg-[length:300%]"
+			id="coworking-streams"
+			class="text-transparent animate-gradient py-1 lg:py-3 bg-[length:300%]"
 		>
 			Coworking streams
 		</div>
@@ -15,3 +16,10 @@
 		>
 	</div>
 </div>
+
+<style>
+	#coworking-streams {
+		background: var(--color-hero-gradient);
+		-webkit-background-clip: text;
+	}
+</style>

src/components/ui/card-hover-effect.tsx

@@ -1,5 +1,5 @@
-import { cn } from "../../../utils/cn";
+import { cn } from "@/utils/cn";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useState } from "react";
 
 export const HoverEffect = ({
@@ -87,7 +87,7 @@ export const CardTitle = ({
     return (
         <h4
             className={cn(
-                "mt-4 font-bold tracking-wide text-zinc-100",
+                "mt-4 font-bold tracking-wide text-zinc-100 text-xl",
                 className,
             )}
         >

src/layouts/GuideLayout.astro

@@ -3,12 +3,14 @@ import Layout from "./Layout.astro";
 import TableOfContent from "../components/blocks/TableOfContent.astro";
 import VerticalNav from "../components/blocks/verticalNav.astro";
 import "../assets/styles/remark-callout-directives.css";
+import NavBar from "@/components/blocks/navBar.astro";
 
 const { frontmatter, headings } = Astro.props;
 ---
 
 <Layout title={frontmatter.title} description={frontmatter.description}>
-	<div class="mx-auto px-2 max-w-[1440px]">
+	<NavBar />
+	<div class="mx-auto px-2 max-w-[1440px] pt-[var(--header-height)]">
 		<div class="flex flex-col lg:grid lg:grid-cols-10 gap-5">
 			<!-- vertical navbar -->
 			<div
@@ -16,18 +18,20 @@ const { frontmatter, headings } = Astro.props;
 				transition:name="vertical-navbar"
 			>
 				<aside
-					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
+					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[var(--header-height)]"
 				>
 					<VerticalNav />
 				</aside>
 			</div>
 			<div class="lg:col-span-8">
 				<div class="flex flex-col lg:grid lg:grid-cols-10">
-					<div class="col-span-8 px-2 md:px-10 pb-10 pt-8">
+					<div
+						class="guide-content col-span-8 px-2 md:px-10 pb-10 pt-8"
+					>
 						<slot />
 					</div>
 					<div
-						class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
+						class="hidden col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[var(--header-height)]"
 					>
 						<!-- TOC -->
 						<TableOfContent
@@ -39,10 +43,108 @@ const { frontmatter, headings } = Astro.props;
 			</div>
 		</div>
 	</div>
-	<script is:inline>
-		// make all <a> attributes have target="_blank" except for Table of Contents
-		document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
-			el.setAttribute("target", "_blank");
-		});
-	</script>
 </Layout>
+
+<script is:inline>
+	// make all <a> attributes have target="_blank" except for Table of Contents
+	document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
+		el.setAttribute("target", "_blank");
+	});
+</script>
+<style is:inline>
+	.guide-content blockquote {
+		margin: 1rem 0;
+		border-left: 4px solid #718096;
+		padding-left: 1rem;
+	}
+
+	.guide-content a {
+		display: inline-block;
+		color: #4299e1;
+		text-decoration: none;
+	}
+
+	.guide-content a:hover {
+		text-decoration: underline;
+	}
+
+	.guide-content h1 {
+		margin-bottom: 0.5rem;
+		font-size: 2.75rem;
+		font-weight: bold;
+		scroll-margin-top: 3.7rem;
+	}
+
+	.guide-content h2 {
+		margin-bottom: 0.5rem;
+		margin-top: 1.5rem;
+		font-size: 1.875rem;
+		font-weight: bold;
+		scroll-margin-top: 3.7rem;
+	}
+
+	.guide-content h3 {
+		margin-bottom: 0.5rem;
+		margin-top: 1.25rem;
+		font-size: 1.5rem;
+		font-weight: bold;
+		scroll-margin-top: 3.7rem;
+	}
+
+	.guide-content h4 {
+		margin-bottom: 0.5rem;
+		margin-top: 1.25rem;
+		font-size: 1.25rem;
+		font-weight: bold;
+		scroll-margin-top: 3.7rem;
+	}
+
+	.guide-content p {
+		margin-bottom: 0.5rem;
+		margin-top: 0.5rem;
+		font-family: system-ui;
+		font-size: 1rem;
+		line-height: 1.75rem;
+	}
+
+	.guide-content hr {
+		margin: 2.5rem 0;
+		/* border-color: #add19c; */
+	}
+
+	.guide-content ul,
+	.guide-content ol {
+		list-style-position: outside;
+		line-height: 1.75rem;
+	}
+
+	.guide-content ul {
+		list-style-type: disc;
+	}
+
+	.guide-content ul ul,
+	.guide-content ol ul {
+		margin-bottom: 0.5rem;
+		margin-left: 1.25rem;
+		list-style-type: circle;
+	}
+
+	.guide-content ul li,
+	.guide-content ol li {
+		margin-bottom: 0.25rem;
+		margin-left: 1.25rem;
+	}
+
+	.guide-content ol {
+		margin-left: 1.25rem;
+		list-style-type: decimal;
+	}
+
+	.guide-content code {
+		border-radius: 0.375rem;
+		background-color: #323232;
+		padding: 0.5rem;
+		font-family: monospace;
+		font-size: 0.875rem;
+	}
+</style>

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
-import NavBar from "../components/blocks/navBar.astro";
+import { ClientRouter } from "astro:transitions";
-import { ViewTransitions } from "astro:transitions";
+import "@/styles/global.css";
 
 export interface Props {
 	title: string;
@@ -50,13 +50,12 @@ const { title, description } = Astro.props;
 		<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
 		<script src="/pagefind/pagefind-ui.js" is:inline></script>
 		<script is:inline src="/_vercel/insights/script.js"></script>
-		<ViewTransitions />
+		<ClientRouter />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
 	<body>
-		<div class="pt-[var(--header-height)] bg-none">
+		<div class="bg-none">
-			<NavBar />
 			<slot />
 		</div>
 		<script>
@@ -73,12 +72,6 @@ const { title, description } = Astro.props;
 				--header-height: 3.5rem;
 			}
 
-			* {
-				box-sizing: border-box;
-				margin: 0;
-				padding: 0;
-			}
-
 			html {
 				font-family: system-ui, sans-serif;
 				background-color: #171717;

src/pages/index.astro

@@ -2,13 +2,17 @@
 import Layout from "../layouts/Layout.astro";
 import Hero from "../components/blocks/Hero.astro";
 import BlurBackground from "../components/ui/BlurBackground.astro";
+import NavBar from "@/components/blocks/navBar.astro";
 ---
 
 <Layout
 	title="Coworking Stream Guide"
 	description="A guide for new and existing coworking streamers!"
 >
-	<div class="relative overflow-hidden h-fit min-h-screen w-full">
+	<NavBar />
+	<div
+		class="relative overflow-hidden h-fit min-h-screen w-full pt-[var(--header-height)]"
+	>
 		<BlurBackground />
 		<div class="flex justify-center items-start pb-10">
 			<Hero />

src/styles/global.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+    --color-primary: #fafafa;
+    --color-secondary: #171717;
+    --color-primary-green: #8DECB4;
+    --color-primary-blue: #3f84d8;
+    --color-light-blue: #b3c6f9;
+    --header-height: 3.5rem;
+    --color-hero-gradient: linear-gradient(to right, #3F84D8, aquamarine);
+
+    --animate-gradient: gradient 15s ease infinite;
+
+    @keyframes gradient {
+        "0%": {
+            "background-position": "0% 50%",
+        }
+        "50%": {
+            "background-position": "100% 50%",
+        }
+        "100%": {
+            "background-position": "0% 50%",
+        }
+    }
+
+    @keyframes fadeIn {
+        from: {
+            opacity: "0",
+        }
+        to: {
+            opacity: "1",
+        }
+    }
+}