Initial

2026-04-27 19:13:27 +07:00
commit 4ab5f16798
21 changed files with 1081 additions and 0 deletions
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -0,0 +1,27 @@
+---
+interface Props {
+  siteName?: string
+}
+
+const { siteName = "Astro Tina Starter" } = Astro.props
+---
+
+<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-primary-200">
+  <nav class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+    <a href="/" class="font-bold text-xl text-primary-900 hover:text-accent-600 transition-colors">
+      {siteName}
+    </a>
+
+    <div class="flex items-center gap-6">
+      <a href="/" class="text-primary-600 hover:text-primary-900 transition-colors">
+        Home
+      </a>
+      <a href="/blog" class="text-primary-600 hover:text-primary-900 transition-colors">
+        Blog
+      </a>
+      <a href="/about" class="text-primary-600 hover:text-primary-900 transition-colors">
+        About
+      </a>
+    </div>
+  </nav>
+</header>
--- a/src/components/TrackingScripts.astro
+++ b/src/components/TrackingScripts.astro
@@ -0,0 +1,167 @@
+---
+const ga4Id = import.meta.env.PUBLIC_GA4_ID
+const gtmId = import.meta.env.PUBLIC_GTM_ID
+const umamiUrl = import.meta.env.PUBLIC_UMAMI_URL
+const umamiWebsiteId = import.meta.env.PUBLIC_UMAMI_WEBSITE_ID
+const clarityId = import.meta.env.PUBLIC_CLARITY_ID
+const fbPixelId = import.meta.env.PUBLIC_FB_PIXEL_ID
+const googleAdsId = import.meta.env.PUBLIC_GOOGLE_ADS_ID
+const tiktokPixelId = import.meta.env.PUBLIC_TIKTOK_PIXEL_ID
+const lineChannelId = import.meta.env.PUBLIC_LINE_CHANNEL_ID
+---
+
+<!-- Google Analytics 4 -->
+{ga4Id && (
+  <script
+    data-consent-category="analytics"
+    async
+    src={`https://www.googletagmanager.com/gtag/js?id=${ga4Id}`}
+  ></script>
+)}
+{ga4Id && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${ga4Id}');
+    `
+    }}
+  ></script>
+)}
+
+<!-- Google Tag Manager -->
+{gtmId && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','${gtmId}');
+    `
+    }}
+  ></script>
+)}
+
+<!-- Umami Analytics -->
+{umamiUrl && umamiWebsiteId && (
+  <script
+    data-consent-category="analytics"
+    async
+    src={`${umamiUrl}/script.js`}
+    data-website-id={umamiWebsiteId}
+  ></script>
+)}
+
+<!-- Microsoft Clarity -->
+{clarityId && (
+  <script
+    data-consent-category="analytics"
+    dangerouslySetInnerHTML={{
+      __html: `
+      (function(c,l,a,r,i,t,y){
+        a[q]=a[q]||function(){(a[q].q=a[q].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "${clarityId}");
+    `
+    }}
+  ></script>
+)}
+
+<!-- Facebook Pixel -->
+{fbPixelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      !function(f,b,e,v,n,t,s)
+      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+      n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      fbq('init', '${fbPixelId}');
+      fbq('track', 'PageView');
+    `
+    }}
+  ></script>
+)}
+{fbPixelId && (
+  <noscript data-consent-category="marketing">
+    <img
+      height="1"
+      width="1"
+      style="display:none"
+      src={`https://www.facebook.com/tr?id=${fbPixelId}&ev=PageView&noscript=1`}
+      alt=""
+    />
+  </noscript>
+)}
+
+<!-- Google Ads Conversion -->
+{googleAdsId && (
+  <script
+    data-consent-category="marketing"
+    async
+    src={`https://www.googletagmanager.com/gtag/js?id=${googleAdsId}`}
+  ></script>
+)}
+
+<!-- TikTok Pixel -->
+{tiktokPixelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      !function (w, d, t) {
+        w.TiktokAnalyticsObject = t;
+        var ttq = w[t] = w[t] || [];
+        ttq.methods = ["page", "track", "identify", "instances", "debug", "on", "off", "once", "ready", "alias", "group", "enableCookie", "disableCookie"];
+        ttq.setAndDefer = function (t, e) { t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } };
+        for (var i = 0; i < ttq.methods.length; i++) ttq.setAndDefer(ttq, ttq.methods[i]);
+        ttq.instance = function (t) {
+          var e = t.slice(0);
+          return ttq.push([e]), ttq
+        };
+        for (var i = 0; i < ttq.methods.length; i++) {
+          var e = ttq.methods[i];
+          ttq[e] = ttq.instance.bind(ttq, e)
+        }
+        ttq.load = function (t, e) {
+          var n = "https://analytics.tiktok.com/i18n/pixel/events.js";
+          n = n + "?sdkid=" + t + "&lib=" + e;
+          var i = d.createElement("script");
+          i.type = "text/javascript";
+          i.src = n;
+          d.getElementsByTagName("head")[0].appendChild(i)
+        };
+        ttq.load("${tiktokPixelId}", "exc");
+        ttq.page()
+      }(window, document, 'ttq');
+    `
+    }}
+  ></script>
+)}
+
+<!-- LINE Channel Tag -->
+{lineChannelId && (
+  <script
+    data-consent-category="marketing"
+    dangerouslySetInnerHTML={{
+      __html: `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${lineChannelId}');
+    `
+    }}
+  ></script>
+)}
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -0,0 +1,34 @@
+import { defineCollection, z } from "astro:content"
+
+const postCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    publishedAt: z.date().optional(),
+    category: z.enum(["news", "blog", "tutorial"]).optional(),
+  }),
+})
+
+const pageCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+  }),
+})
+
+const settingsCollection = defineCollection({
+  type: "data",
+  schema: z.object({
+    siteName: z.string(),
+    siteDescription: z.string(),
+    language: z.enum(["th", "en", "th-en"]).default("th"),
+  }),
+})
+
+export const collections = {
+  posts: postCollection,
+  pages: pageCollection,
+  settings: settingsCollection,
+}
--- a/src/content/posts/welcome.mdx
+++ b/src/content/posts/welcome.mdx
@@ -0,0 +1,17 @@
+---
+title: Welcome to Astro Tina Starter
+description: A modern starter template with Astro 6, Tina CMS, and Thai language support.
+publishedAt: 2026-04-17
+category: blog
+---
+
+Welcome to our new blog built with Astro and Tina CMS!
+
+## Features
+
+- **Tina CMS** - Self-hosted content management
+- **Tailwind CSS v4** - Latest styling with @tailwindcss/vite
+- **ConsentOS** - PDPA-compliant consent management
+- **Thai Support** - Ready for Thai language content
+
+Stay tuned for more updates!
--- a/src/content/settings/site.json
+++ b/src/content/settings/site.json
@@ -0,0 +1,5 @@
+{
+  "siteName": "Astro Tina Starter",
+  "siteDescription": "Astro 6 + Tina CMS starter template with Thai language support",
+  "language": "th"
+}
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,41 @@
+---
+import "@/styles/global.css"
+import TrackingScripts from "@/components/TrackingScripts.astro"
+
+interface Props {
+  title?: string
+  description?: string
+}
+
+const {
+  title = "Astro Tina Starter",
+  description = "Astro 6 + Tina CMS starter template",
+} = Astro.props
+
+const consentSiteId = import.meta.env.PUBLIC_CONSENT_SITE_ID || 'demo'
+const consentApiBase = import.meta.env.PUBLIC_CONSENT_API_BASE || 'https://consent.moreminimore.com'
+---
+
+<!doctype html>
+<html lang="th">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body class="bg-primary-50 text-primary-900 min-h-screen">
+    <slot />
+
+    <!-- Tracking Scripts (ConsentOS will auto-block until consent) -->
+    <TrackingScripts />
+
+    <!-- ConsentOS - Consent Management -->
+    <script
+      src={`${consentApiBase}/consent-loader.js`}
+      data-site-id={consentSiteId}
+      data-api-base={consentApiBase}
+    ></script>
+  </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,47 @@
+---
+import Layout from "@/layouts/Layout.astro"
+---
+
+<Layout>
+  <main>
+    <section class="px-6 py-24 max-w-4xl mx-auto">
+      <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-6">
+        Welcome to Astro Tina Starter
+      </h1>
+      <p class="text-lg text-primary-600 mb-8 max-w-2xl">
+        A modern starter template with Astro 6, Tina CMS, Tailwind CSS 4.x,
+        and Thai language support.
+      </p>
+
+      <div class="grid gap-6 md:grid-cols-2">
+        <div class="p-6 bg-white rounded-xl border border-primary-200">
+          <h2 class="text-xl font-semibold mb-3">Tina CMS</h2>
+          <p class="text-primary-600">
+            Self-hosted content management with schema-based editing.
+          </p>
+        </div>
+
+        <div class="p-6 bg-white rounded-xl border border-primary-200">
+          <h2 class="text-xl font-semibold mb-3">Tailwind v4</h2>
+          <p class="text-primary-600">
+            Latest Tailwind CSS with @tailwindcss/vite plugin.
+          </p>
+        </div>
+
+        <div class="p-6 bg-white rounded-xl border border-primary-200">
+          <h2 class="text-xl font-semibold mb-3">ConsentOS</h2>
+          <p class="text-primary-600">
+            PDPA-compliant consent management with auto-blocking tracking.
+          </p>
+        </div>
+
+        <div class="p-6 bg-white rounded-xl border border-primary-200">
+          <h2 class="text-xl font-semibold mb-3">Thai Support</h2>
+          <p class="text-primary-600">
+            Ready for Thai language content with Noto Sans Thai.
+          </p>
+        </div>
+      </div>
+    </section>
+  </main>
+</Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,57 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: "Inter", "Noto Sans Thai", system-ui, sans-serif;
+  --font-serif: "Merriweather", Georgia, serif;
+
+  --color-primary-50: #f8fafc;
+  --color-primary-100: #f1f5f9;
+  --color-primary-200: #e2e8f0;
+  --color-primary-300: #cbd5e1;
+  --color-primary-400: #94a3b8;
+  --color-primary-500: #64748b;
+  --color-primary-600: #475569;
+  --color-primary-700: #334155;
+  --color-primary-800: #1e293b;
+  --color-primary-900: #0f172a;
+  --color-primary-950: #020617;
+
+  --color-accent-50: #eff6ff;
+  --color-accent-100: #dbeafe;
+  --color-accent-200: #bfdbfe;
+  --color-accent-300: #93c5fd;
+  --color-accent-400: #60a5fa;
+  --color-accent-500: #3b82f6;
+  --color-accent-600: #2563eb;
+  --color-accent-700: #1d4ed8;
+  --color-accent-800: #1e40af;
+  --color-accent-900: #1e3a8a;
+
+  --color-success-500: #22c55e;
+  --color-warning-500: #f59e0b;
+  --color-error-500: #ef4444;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background-color: var(--color-accent-200);
+  color: var(--color-primary-900);
+}