kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Fix website-creator: add missing functions and templates with IDs

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-03-16 10:50:00 +07:00
parent 58ab725ef9
commit 12515acd5d
6 changed files with 1190 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
skills/website-creator/scripts/templates/layouts/BaseLayout.astro Normal file
View File

@@ -0,0 +1,190 @@
---
import '../styles/global.css';
interface Props {
title: string;
description?: string;
image?: string;
canonicalURL?: string;
}
const { title, description = '', image = '/images/logo.png', canonicalURL = Astro.url } = Astro.props;
const siteName = 'Website Name';
const siteUrl = 'https://example.com';
---
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<!-- SEO Meta Tags -->
<title>{title} | {siteName}</title>
<meta name="title" content={`${title} | ${siteName}`} />
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={`${title} | ${siteName}`} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, siteUrl)} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={`${title} | ${siteName}`} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, siteUrl)} />
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body id="body" class="flex flex-col min-h-screen">
<div id="page-wrapper">
<header id="header">
<slot name="header" />
</header>
<main id="main-content" class="flex-grow">
<slot />
</main>
<footer id="footer">
<slot name="footer" />
</footer>
<!-- Cookie Consent Banner -->
<div id="cookie-consent-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-secondary-900 text-white p-6 shadow-2xl transform translate-y-full transition-transform duration-500">
<div id="cookie-consent-container" class="container-custom max-w-6xl">
<div id="cookie-consent-content" class="flex flex-col md:flex-row items-center justify-between gap-6">
<div id="cookie-consent-text" class="flex-1">
<h3 id="cookie-consent-title" class="text-xl font-bold mb-2">เราใช้คุกกี้เพื่อประสบการณ์ที่ดีที่สุด</h3>
<p id="cookie-consent-description" class="text-secondary-300 text-base">
เว็บไซต์ของเราใช้คุกกี้เพื่อเพิ่มประสิทธิภาพการใช้งาน คุณสามารถยอมรับหรือปฏิเสธได้
</p>
</div>
<div id="cookie-consent-buttons" class="flex flex-wrap gap-4">
<button id="cookie-reject-btn" class="btn-secondary px-6 py-3 text-sm">
ปฏิเสธทั้งหมด
</button>
<button id="cookie-accept-btn" class="btn-primary px-6 py-3 text-sm">
ยอมรับทั้งหมด
</button>
<button id="cookie-settings-btn" class="btn-outline px-6 py-3 text-sm">
ตั้งค่า
</button>
</div>
</div>
</div>
</div>
<!-- Cookie Preferences Modal -->
<div id="cookie-preferences-modal" class="fixed inset-0 z-50 hidden bg-black/50">
<div id="cookie-modal-content" class="flex items-center justify-center min-h-screen p-4">
<div id="cookie-modal-box" class="bg-white rounded-2xl shadow-2xl max-w-lg w-full p-6">
<div id="cookie-modal-header" class="flex justify-between items-center mb-4">
<h2 id="cookie-modal-title" class="text-xl font-bold">ตั้งค่าคุกกี้</h2>
<button id="cookie-modal-close" class="text-gray-500 hover:text-gray-700">
<span id="cookie-close-icon">✕</span>
</button>
</div>
<div id="cookie-modal-body">
<div id="cookie-necessary" class="mb-4">
<div class="flex items-center justify-between">
<div>
<h3 class="font-medium">คุกกี้ที่จำเป็น</h3>
<p class="text-sm text-gray-600">จำเป็นสำหรับการทำงานของเว็บไซต์</p>
</div>
<input type="checkbox" checked disabled class="w-5 h-5" />
</div>
</div>
<div id="cookie-analytics" class="mb-4">
<div class="flex items-center justify-between">
<div>
<h3 class="font-medium">คุกกี้วิเคราะห์</h3>
<p class="text-sm text-gray-600">ช่วยให้เราเข้าใจผู้ใช้งาน</p>
</div>
<input type="checkbox" id="cookie-analytics-checkbox" class="w-5 h-5" />
</div>
</div>
<div id="cookie-marketing" class="mb-4">
<div class="flex items-center justify-between">
<div>
<h3 class="font-medium">คุกกี้การตลาด</h3>
<p class="text-sm text-gray-600">ใช้สำหรับโฆษณา</p>
</div>
<input type="checkbox" id="cookie-marketing-checkbox" class="w-5 h-5" />
</div>
</div>
</div>
<div id="cookie-modal-footer" class="flex justify-end gap-4 mt-6">
<button id="cookie-save-btn" class="btn-primary px-6 py-3">บันทึก</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Cookie Consent Logic
const banner = document.getElementById('cookie-consent-banner');
const acceptBtn = document.getElementById('cookie-accept-btn');
const rejectBtn = document.getElementById('cookie-reject-btn');
const settingsBtn = document.getElementById('cookie-settings-btn');
const modal = document.getElementById('cookie-preferences-modal');
const closeModal = document.getElementById('cookie-modal-close');
const saveBtn = document.getElementById('cookie-save-btn');
function showBanner() {
banner?.classList.remove('translate-y-full');
}
function hideBanner() {
banner?.classList.add('translate-y-full');
}
acceptBtn?.addEventListener('click', () => {
localStorage.setItem('cookie-consent', 'accepted');
hideBanner();
});
rejectBtn?.addEventListener('click', () => {
localStorage.setItem('cookie-consent', 'rejected');
hideBanner();
});
settingsBtn?.addEventListener('click', () => {
modal?.classList.remove('hidden');
});
closeModal?.addEventListener('click', () => {
modal?.classList.add('hidden');
});
saveBtn?.addEventListener('click', () => {
const analytics = (document.getElementById('cookie-analytics-checkbox') as HTMLInputElement)?.checked;
const marketing = (document.getElementById('cookie-marketing-checkbox') as HTMLInputElement)?.checked;
localStorage.setItem('cookie-consent', JSON.stringify({ analytics, marketing }));
modal?.classList.add('hidden');
hideBanner();
});
// Check consent on load
const consent = localStorage.getItem('cookie-consent');
if (!consent) {
showBanner();
}
</script>
</body>
</html>