Compare commits

..

1 Commits

Author SHA1 Message Date
Jewgeni Lewash
c1389166b8 feat: add interactive components 2024-10-04 22:07:20 +02:00
14 changed files with 6496 additions and 7778 deletions

View File

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

2
.astro/types.d.ts vendored
View File

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

View File

@ -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)

View File

@ -1,15 +1,19 @@
# Build Stage
FROM node:22-slim AS build
FROM node:20-slim AS base
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;"]

View File

@ -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.

View File

@ -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 / {
try_files $uri $uri/ /index.html;
}
location ~* \.(?:ico|css|js|gif|jpe?g|png|svg|woff|woff2|eot|ttf|webp)$ {
expires 30d;
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
expires 60d;
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=()";
}
}

View File

@ -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/mdx": "^4.1.0",
"@astrojs/react": "^4.2.1",
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@astrojs/check": "^0.9.3",
"@astrojs/mdx": "^3.1.5",
"@astrojs/react": "^3.6.2",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"astro": "^5.4.2",
"astro-expressive-code": "^0.40.2",
"astro": "^4.15.4",
"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-dom": "^19.0.4",
"@types/react": "^18.3.5",
"@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-dom": "^19.0.0",
"react": "^18.3.1",
"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"

13781
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
)}

View File

@ -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 {

View File

@ -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">
<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
<header class="relative mx-auto px-4 pb-32 pt-40 sm:px-6 lg:px-8">
<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
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">
<span class="bg-gradient-to-r from-accent-600 to-primary-600 bg-clip-text text-transparent">
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
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">
<section class="mx-auto max-w-6xl px-8 py-16 sm:py-24 lg:px-8 lg:py-32">
<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">