122 lines
2.7 KiB
Markdown
122 lines
2.7 KiB
Markdown
# Astro Tina Starter
|
|
|
|
Astro 6.1.7 + Tina CMS starter template with Tailwind CSS 4.x
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework:** Astro 6.1.7 (static mode)
|
|
- **CMS:** Tina CMS (self-hosted)
|
|
- **Styling:** Tailwind CSS 4.x with `@tailwindcss/vite`
|
|
- **Language:** TypeScript
|
|
|
|
## Features
|
|
|
|
- Self-hosted Tina CMS with schema-based content
|
|
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
|
|
- ConsentOS + Tracking Scripts (GA4, Facebook Pixel, etc.)
|
|
- Docker-ready with nginx
|
|
- Thai language support foundation
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development (accessible at http://0.0.0.0:4321)
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
```
|
|
|
|
## Tina CMS Access
|
|
|
|
During development, access Tina CMS at:
|
|
- http://localhost:4321/admin
|
|
|
|
For production, you'll need a TINA_TOKEN environment variable.
|
|
|
|
## ConsentOS + Tracking
|
|
|
|
This template includes ConsentOS (`consent.moreminimore.com`) for PDPA-compliant consent management and auto-blocking of tracking scripts.
|
|
|
|
### Environment Variables
|
|
|
|
```bash
|
|
# ConsentOS
|
|
PUBLIC_CONSENT_SITE_ID=your-site-id
|
|
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com
|
|
|
|
# Analytics
|
|
PUBLIC_GA4_ID=G-XXXXXXXXXX
|
|
PUBLIC_GTM_ID=GTM-XXXXXXX
|
|
PUBLIC_UMAMI_URL=https://umami.example.com
|
|
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
PUBLIC_CLARITY_ID=xxxxxxxxxx
|
|
|
|
# Marketing
|
|
PUBLIC_FB_PIXEL_ID=123456789
|
|
PUBLIC_GOOGLE_ADS_ID=AW-123456789
|
|
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
|
|
PUBLIC_LINE_CHANNEL_ID=1234567890
|
|
```
|
|
|
|
### How It Works
|
|
|
|
1. `TrackingScripts.astro` contains all tracking codes with `data-consent-category` attributes
|
|
2. ConsentOS `consent-loader.js` scans and auto-blocks scripts until user consent
|
|
3. Categories: `analytics`, `marketing`
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
astro-tina-starter/
|
|
├── .tina/
|
|
│ ├── config.ts # Tina CMS configuration
|
|
│ └── schema.ts # Content schema definitions
|
|
├── src/
|
|
│ ├── styles/
|
|
│ │ └── global.css # Tailwind v4 styles
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro
|
|
│ ├── pages/
|
|
│ │ └── index.astro
|
|
│ ├── components/
|
|
│ │ ├── Header.astro
|
|
│ │ └── TrackingScripts.astro # Tracking scripts
|
|
│ └── content/
|
|
│ └── config.ts # Tina content collections
|
|
├── Dockerfile
|
|
├── nginx.conf
|
|
└── package.json
|
|
```
|
|
|
|
## Tailwind CSS 4.x
|
|
|
|
This template uses Tailwind CSS 4.x with the `@tailwindcss/vite` plugin.
|
|
The configuration is done via CSS `@theme` block in `src/styles/global.css`.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #1a1a1a;
|
|
--color-accent: #3b82f6;
|
|
}
|
|
```
|
|
|
|
## Docker
|
|
|
|
```bash
|
|
# Build
|
|
docker build -t astro-tina .
|
|
|
|
# Run
|
|
docker run -p 8080:80 astro-tina
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|