feat: add interactive components

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1741386617926
+		"lastUpdateCheck": 1726089127618
 	}
 }

.astro/types.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
+/// <reference path="astro/content.d.ts" />

CHANGELOG.md

@@ -1,33 +1,3 @@
-# [1.29.0](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0) (2025-03-08)
-
-
-### Features
-
-* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
-* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
-* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
-
-# [1.29.0-beta.3](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.2...v1.29.0-beta.3) (2024-10-05)
-
-
-### Features
-
-* **blog:** add redirect to 404 page if entry is not found ([6cd32df](https://github.com/deployn/astro-deploy/commit/6cd32df0eeadad3094cc35724961a4bbd5541eb0))
-
-# [1.29.0-beta.2](https://github.com/deployn/astro-deploy/compare/v1.29.0-beta.1...v1.29.0-beta.2) (2024-10-05)
-
-
-### Features
-
-* add 404 page ([04cba4f](https://github.com/deployn/astro-deploy/commit/04cba4fa051b1c8958aa4dfe99266c56d0e8cf0b))
-
-# [1.29.0-beta.1](https://github.com/deployn/astro-deploy/compare/v1.28.0...v1.29.0-beta.1) (2024-10-04)
-
-
-### Features
-
-* **Dockerfile:** use Alpine base image and add healthcheck ([02e218d](https://github.com/deployn/astro-deploy/commit/02e218d1853c3c06d48bb3f8811564d910c61837))
-
 # [1.28.0](https://github.com/deployn/astro-deploy/compare/v1.27.0...v1.28.0) (2024-09-13)
 
 

Dockerfile

@@ -1,15 +1,19 @@
-# Build Stage
+FROM node:20-slim AS base
-FROM node:22-slim AS build
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 
 WORKDIR /app
-
 COPY package.json pnpm-lock.yaml ./
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS build-deps
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
+FROM build-deps AS build
 COPY . .
 ARG SITE_URL
 ENV SITE_URL=${SITE_URL}
@@ -17,21 +21,10 @@ ARG DIRECTUS_URL
 ENV DIRECTUS_URL=${DIRECTUS_URL}
 RUN pnpm run build
 
-# Runtime Stage
 FROM nginx:1.25-alpine AS runtime
-
-# Copy custom nginx config
 COPY nginx/nginx.conf /etc/nginx/nginx.conf
-
-# Copy built assets from build stage
 COPY --from=build /app/dist /usr/share/nginx/html
 
-# Add curl for healthchecks
-RUN apk add --no-cache curl
-
-# Healthcheck
-HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
-
 EXPOSE 80
 
 CMD ["nginx", "-g", "daemon off;"]

Readme.md

@@ -6,7 +6,7 @@ A custom Astro.js template
 
 ## Features
 
-- 🚀 Astro.js 5 for modern web development.
+- 🚀 Astro.js 4 for modern web development.
 - 🐳 Docker integration for consistent environments and easy deployment.
 - 🍃 Tailwind CSS for utility-first styling and rapid UI development.
 - ⚛️ React.js integration, enabling complex UI construction with ease.

nginx/nginx.conf

@@ -1,7 +1,7 @@
 user nginx;
 worker_processes auto;
 
-error_log /var/log/nginx/error.log warn;
+error_log  /var/log/nginx/error.log notice;
 pid        /var/run/nginx.pid;
 
 events {
@@ -19,10 +19,8 @@ http {
     access_log  /var/log/nginx/access.log  main;
 
     sendfile 		on;
-    tcp_nopush on;
+
-    tcp_nodelay on;
     keepalive_timeout	65;
-    types_hash_max_size 2048;
 
     gzip on;
     gzip_vary on;
@@ -34,33 +32,26 @@ http {
         listen 80;
         listen [::]:80;
         server_name localhost;
+        port_in_redirect off;
+
         root   /usr/share/nginx/html;
         index  index.html index.htm;
+        rewrite ^([^.]*[^/])$ $1/ permanent;
+        try_files $uri $uri/ $uri/index.html =404;
 
-        location / {
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
-            try_files $uri $uri/ /index.html;
+            expires 60d;
-        }
-
-        location ~* \.(?:ico|css|js|gif|jpe?g|png|svg|woff|woff2|eot|ttf|webp)$ {
-            expires 30d;
             add_header Cache-Control "public, no-transform";
         }
 
-        error_page 404 /404.html;
-        location = /404.html {
-            internal;
-        }
-
         error_page 500 502 503 504 /50x.html;
         location = /50x.html {
-            internal;
+            root /usr/share/nginx/html;
         }
 
         add_header X-Frame-Options "SAMEORIGIN";
         add_header X-Content-Type-Options "nosniff";
         add_header X-XSS-Protection "1; mode=block";
         add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-        add_header Referrer-Policy "strict-origin-when-cross-origin";
-        add_header Permissions-Policy "geolocation=(), microphone=(), camera=()";
     }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-deploy",
   "type": "module",
-  "version": "1.29.0",
+  "version": "1.28.0",
   "description": "A custom Astro.js template",
   "private": true,
   "scripts": {
@@ -15,50 +15,49 @@
     "upgrade": "pnpm update --interactive --latest",
     "commit": "cz"
   },
-  "packageManager": "pnpm@9.8.0",
   "dependencies": {
     "@astrojs/alpinejs": "^0.4.0",
-    "@astrojs/check": "^0.9.4",
+    "@astrojs/check": "^0.9.3",
-    "@astrojs/mdx": "^4.1.0",
+    "@astrojs/mdx": "^3.1.5",
-    "@astrojs/react": "^4.2.1",
+    "@astrojs/react": "^3.6.2",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/tailwind": "^5.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
-    "astro": "^5.4.2",
+    "astro": "^4.15.4",
-    "astro-expressive-code": "^0.40.2",
+    "astro-expressive-code": "^0.36.1",
     "astro-icon": "^1.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@commitlint/cz-commitlint": "^19.5.0",
-    "@directus/sdk": "^19.0.1",
+    "@directus/sdk": "^17.0.1",
     "@iconify-json/line-md": "^1.2.1",
     "@pagefind/default-ui": "^1.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@tailwindcss/typography": "^0.5.15",
     "@types/alpinejs": "^3.13.10",
-    "@types/react": "^19.0.10",
+    "@types/react": "^18.3.5",
-    "@types/react-dom": "^19.0.4",
+    "@types/react-dom": "^18.3.0",
     "@vite-pwa/assets-generator": "^0.2.6",
     "alpinejs": "^3.14.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "commitizen": "^4.3.1",
+    "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "lucide-react": "^0.479.0",
+    "lucide-react": "^0.439.0",
     "pagefind": "^1.1.1",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "pwa-asset-generator": "^6.3.2",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.3.1",
     "semantic-release": "^24.1.1",
     "sharp": "0.32.6",
-    "tailwind-merge": "^3.0.2",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.11",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.2"

src/components/Modal.astro

@@ -0,0 +1,68 @@
+---
+interface Props {
+	id: string;
+	title: string;
+}
+
+const { id, title } = Astro.props;
+---
+
+<div
+	id={id}
+	class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
+	<div
+		class="w-full max-w-lg transform rounded-2xl bg-white p-6 shadow-xl transition-all dark:bg-gray-800">
+		<div class="flex items-center justify-between">
+			<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
+				{title}
+			</h3>
+			<button
+				type="button"
+				class="rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+				onclick={`window.closeModal('${id}')`}>
+				<svg
+					class="h-6 w-6"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd">
+					</path>
+				</svg>
+			</button>
+		</div>
+		<div class="mt-4 space-y-6">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<script>
+	interface CustomWindow extends Window {
+		closeModal: (id: string) => void;
+		openModal: (id: string) => void;
+	}
+
+	declare let window: CustomWindow;
+
+	function closeModal(id: string) {
+		const modal = document.getElementById(id);
+		if (modal) {
+			modal.classList.add('hidden');
+			document.body.classList.remove('overflow-hidden');
+		}
+	}
+
+	function openModal(id: string) {
+		const modal = document.getElementById(id);
+		if (modal) {
+			modal.classList.remove('hidden');
+			document.body.classList.add('overflow-hidden');
+		}
+	}
+
+	window.closeModal = closeModal;
+	window.openModal = openModal;
+</script>

src/components/Tooltip.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+	text: string;
+	position?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const { text, position = 'top' } = Astro.props;
+
+const positionClasses = {
+	top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',
+	right: 'left-full top-1/2 ml-2 -translate-y-1/2',
+	bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',
+	left: 'right-full top-1/2 mr-2 -translate-y-1/2',
+};
+---
+
+<div class="group relative inline-block">
+	<slot />
+	<div
+		class={`invisible absolute ${positionClasses[position]} z-10 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2 text-sm text-white opacity-0 shadow-lg transition-all duration-300 ease-in-out group-hover:visible group-hover:opacity-100`}>
+		{text}
+		<div
+			class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-800">
+		</div>
+	</div>
+</div>

src/pages/404.astro

@@ -1,12 +0,0 @@
----
-import BaseLayout from '@/layouts/BaseLayout.astro';
----
-
-<BaseLayout title="Astro Deploy 404" description="404: Page not found.">
-	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
-		<h1 class="text-center text-zinc-900 dark:text-zinc-200">404: Page Not Found</h1>
-		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
-			The page you are looking for does not exist. Please check the URL or return to the home page.
-		</p>
-	</header>
-</BaseLayout>

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

@@ -110,11 +110,14 @@ const {
 													{author.url ? (
 														<a
 															href={author.url}
-															class="font-medium text-primary-600 underline hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
+															class="font-medium text-primary-600 underline
+           hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
 															{author.name}
 														</a>
 													) : (
-														<span class="font-medium text-primary-600 dark:text-primary-400">
+														<span
+															class="font-medium text-primary-600
+           dark:text-primary-400 ">
 															{author.name}
 														</span>
 													)}

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

@@ -21,11 +21,6 @@ interface Props {
 }
 
 const { entry } = Astro.props as Props;
-
-if (!entry) {
-	return Astro.redirect('/404');
-}
-
 const { Content } = await entry.render();
 const components = { table: Table };
 const {

src/pages/index.astro

@@ -3,6 +3,8 @@ import { Icon } from 'astro-icon/components';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import Heading from '@/components/ui/Heading.astro';
 import FeatureSection from '@/components/FeatureSection.astro';
+import Modal from '@/components/Modal.astro';
+import Tooltip from '@/components/Tooltip.astro';
 
 import index1 from '@/assets/images/index-1.png';
 import index2 from '@/assets/images/index-2.png';
@@ -47,37 +49,44 @@ const features = [
 <BaseLayout
 	title="Astro Deploy"
 	description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
-	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
+	<header class="relative mx-auto px-4 pb-32 pt-40 sm:px-6 lg:px-8">
-		<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
+		<div
+			class="absolute inset-0 bg-gradient-to-br from-primary-100 to-primary-50 dark:from-primary-900 dark:to-primary-800">
+		</div>
+		<div class="relative">
+			<Heading
+				level={1}
+				classes="text-center text-4xl sm:text-5xl lg:text-6xl font-bold text-primary-900 dark:text-primary-100">
 				Deploy Your
-			<span
+				<span class="bg-gradient-to-r from-accent-600 to-primary-600 bg-clip-text text-transparent">
-				class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
 					Astro.js
 				</span>
 				Site!
 			</Heading>
-		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
+			<p
+				class="mx-auto mt-6 max-w-3xl text-center text-lg text-primary-800/80 dark:text-primary-200/80 sm:text-xl">
 				Supercharge your website with the Astro Deploy boilerplate with Docker support for
 				out-of-this-world web experiences. Launch today!
 			</p>
-		<div class="mt-8 flex justify-center">
+			<div class="mt-10 flex justify-center">
 				<a
 					href="https://github.com/deployn/astro-deploy"
-				class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
+					class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-base font-medium text-white shadow-lg transition-all hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-primary-800 sm:text-lg">
 					<span>Get started!</span>
-				<Icon name="line-md:chevron-right" class="size-3" />
+					<Icon name="line-md:chevron-right" class="size-5" />
 				</a>
 			</div>
+		</div>
 	</header>
 
-	<section
+	<section class="mx-auto max-w-6xl px-8 py-16 sm:py-24 lg:px-8 lg:py-32">
-		class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
 		<Heading
 			level={2}
-			classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
+			classes="max-w-3xl text-center mx-auto pb-2 text-3xl sm:text-4xl lg:text-5xl font-bold bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-400 dark:to-primary-200 text-transparent">
 			Launch Stunning Websites Effortlessly with Astro Deploy
 		</Heading>
-		<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
+		<p
+			class="mx-auto mt-6 max-w-4xl text-center text-lg text-gray-700 dark:text-gray-300 sm:text-xl">
 			Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
 			experiences.
 		</p>
@@ -94,6 +103,39 @@ const features = [
 		))
 	}
 
+	<section class="bg-gray-100 py-16 dark:bg-gray-800 dark:text-gray-100 sm:py-24">
+		<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+			<Heading level={2} classes="text-3xl sm:text-4xl font-bold text-center mb-8">
+				Interactive Components
+			</Heading>
+			<div class="flex flex-col items-center justify-center gap-8 sm:flex-row">
+				<Modal id="myModal" title="Example Modal">
+					<p class="text-gray-700 dark:text-gray-300">
+						This is the content of a modal. It can include any HTML content.
+					</p>
+					<button
+						class="mt-4 rounded bg-primary-600 px-4 py-2 text-white transition-colors hover:bg-primary-700"
+						onclick="closeModal('myModal')">
+						Close Modal
+					</button>
+				</Modal>
+
+				<Tooltip text="This is a tooltip">
+					<button
+						class="rounded bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600">
+						Hover me
+					</button>
+				</Tooltip>
+
+				<button
+					onclick="openModal('myModal')"
+					class="rounded-lg bg-primary-600 px-6 py-3 text-white shadow-md transition-colors hover:bg-primary-700">
+					Open modal
+				</button>
+			</div>
+		</div>
+	</section>
+
 	<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
 		<div
 			class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">