208 lines
4.4 KiB
Markdown
208 lines
4.4 KiB
Markdown
# Astro Tina Starter - Agent Knowledge Base
|
|
|
|
**Generated:** 2026-04-17
|
|
**Version:** 2.0.0
|
|
**Type:** Astro 6 + Tina CMS Starter Template
|
|
|
|
---
|
|
|
|
## OVERVIEW
|
|
|
|
Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS 4.x.
|
|
|
|
### Tech Stack
|
|
|
|
| Component | Technology | Version |
|
|
|-----------|------------|---------|
|
|
| Framework | Astro | 6.1.7 |
|
|
| CMS | Tina CMS | 2.x |
|
|
| Styling | Tailwind CSS | 4.x |
|
|
|
|
### Key Features
|
|
|
|
- Self-hosted Tina CMS with schema-based content
|
|
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
|
|
- External consent system integration
|
|
- Thai language support with Noto Sans Thai
|
|
- Docker-ready with nginx
|
|
|
|
---
|
|
|
|
## PROJECT STRUCTURE
|
|
|
|
```
|
|
astro-tina-starter/
|
|
├── .tina/
|
|
│ ├── config.ts # Tina CMS configuration
|
|
│ └── schema.ts # Content schema definitions
|
|
├── src/
|
|
│ ├── styles/
|
|
│ │ └── global.css # Tailwind v4 styles + @theme
|
|
│ ├── layouts/
|
|
│ │ └── Layout.astro
|
|
│ ├── pages/
|
|
│ │ └── index.astro
|
|
│ ├── components/
|
|
│ │ ├── Header.astro
|
|
│ │ └── TrackingScripts.astro # Tracking scripts (GA4, FB Pixel, etc.)
|
|
│ └── content/
|
|
│ ├── config.ts # Astro content collections
|
|
│ ├── posts/ # Blog posts (MDX)
|
|
│ ├── pages/ # Static pages (MDX)
|
|
│ └── settings/ # Site settings (JSON)
|
|
├── public/
|
|
│ └── favicon.svg
|
|
├── Dockerfile
|
|
├── nginx.conf
|
|
├── astro.config.mjs
|
|
├── tsconfig.json
|
|
└── package.json
|
|
```
|
|
|
|
---
|
|
|
|
## IMPORTANT CONVENTIONS
|
|
|
|
### Tailwind CSS 4.x Setup
|
|
|
|
**CRITICAL:** This template uses `@tailwindcss/vite` plugin, NOT `@astrojs/tailwind`.
|
|
|
|
```javascript
|
|
// astro.config.mjs
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
export default defineConfig({
|
|
vite: {
|
|
plugins: [tailwindcss()],
|
|
},
|
|
})
|
|
```
|
|
|
|
```css
|
|
/* src/styles/global.css */
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #1a1a1a;
|
|
--color-accent: #3b82f6;
|
|
}
|
|
```
|
|
|
|
### Tina CMS Content
|
|
|
|
Tina CMS manages content in `src/content/`:
|
|
- `posts/` - Blog posts (MDX format)
|
|
- `pages/` - Static pages (MDX format)
|
|
- `settings/` - Site settings (JSON format)
|
|
|
|
Schema defined in `.tina/schema.ts`.
|
|
|
|
### ConsentOS + Tracking System
|
|
|
|
ConsentOS (`consent.moreminimore.com`) manages consent and blocking:
|
|
|
|
```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
|
|
```
|
|
|
|
**Tracking Scripts:**
|
|
- `TrackingScripts.astro` - contains all tracking scripts
|
|
- Scripts are auto-blocked by ConsentOS until user consent
|
|
- Categories: `analytics`, `marketing`
|
|
|
|
---
|
|
|
|
## CREDENTIALS
|
|
|
|
No external API credentials required for this template.
|
|
|
|
### Optional Environment Variables
|
|
|
|
| Variable | Description |
|
|
|----------|-------------|
|
|
| `TINA_TOKEN` | Tina CMS production authentication |
|
|
| `TINA_CLIENT_ID` | Tina CMS client ID |
|
|
| `PUBLIC_CONSENT_SITE_ID` | ConsentOS site ID |
|
|
| `PUBLIC_CONSENT_API_BASE` | ConsentOS API base URL |
|
|
| `PUBLIC_GA4_ID` | Google Analytics 4 |
|
|
| `PUBLIC_GTM_ID` | Google Tag Manager |
|
|
| `PUBLIC_UMAMI_URL` | Umami analytics URL |
|
|
| `PUBLIC_UMAMI_WEBSITE_ID` | Umami website ID |
|
|
| `PUBLIC_CLARITY_ID` | Microsoft Clarity |
|
|
| `PUBLIC_FB_PIXEL_ID` | Facebook Pixel |
|
|
| `PUBLIC_GOOGLE_ADS_ID` | Google Ads conversion ID |
|
|
| `PUBLIC_TIKTOK_PIXEL_ID` | TikTok Pixel |
|
|
| `PUBLIC_LINE_CHANNEL_ID` | LINE Channel Tag |
|
|
|
|
---
|
|
|
|
## COMMANDS
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Development
|
|
npm run dev
|
|
|
|
# Build
|
|
npm run build
|
|
|
|
# Preview
|
|
npm run preview
|
|
```
|
|
|
|
---
|
|
|
|
## ANTI-PATTERNS
|
|
|
|
- **NEVER** use `@astrojs/tailwind` (deprecated)
|
|
- **ALWAYS** use `@tailwindcss/vite` for Tailwind v4
|
|
- **NEVER** commit environment files (.env)
|
|
|
|
---
|
|
|
|
## DEPLOYMENT
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
docker build -t astro-tina-starter .
|
|
docker run -p 8080:80 astro-tina-starter
|
|
```
|
|
|
|
### Easypanel
|
|
|
|
Static hosting - no persistent volume needed.
|
|
|
|
### Manual
|
|
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
# Serve dist/ folder with any static server
|
|
```
|
|
|
|
---
|
|
|
|
## NOTES
|
|
|
|
- Tina CMS admin: http://localhost:4321/admin
|
|
- Astro default port: 4321
|
|
- Tina dev server: 3001
|