From 167b3a7375fa179e60361d4bb29ba2f6d0dc8c5d Mon Sep 17 00:00:00 2001 From: LoveJesus Date: Mon, 12 Jan 2026 04:56:21 -0500 Subject: [PATCH] feat: Add SvelteKit starter template for customer sites - Complete SvelteKit 2 + Svelte 5 template - Tailwind CSS styling with primary color customization - Pages: Home, About, Services, Contact - Contact form with D1 database backend - Placeholder system for site-specific values - Cloudflare adapter configuration Co-Authored-By: Claude Opus 4.5 --- CLAUDE.md | 66 +++++++ README.md | 4 +- package.json | 25 +++ postcss.config.js | 10 ++ schema.sql | 21 +++ src/app.css | 26 +++ src/app.d.ts | 29 +++ src/app.html | 13 ++ src/routes/+layout.svelte | 138 ++++++++++++++ src/routes/+page.svelte | 100 +++++++++++ src/routes/about-fe/+page.svelte | 89 +++++++++ src/routes/api-fe/contact-fe/+server.ts | 56 ++++++ src/routes/contact-fe/+page.svelte | 229 ++++++++++++++++++++++++ src/routes/services-fe/+page.svelte | 120 +++++++++++++ svelte.config.js | 21 +++ tailwind.config.js | 27 +++ tsconfig.json | 14 ++ vite.config.ts | 10 ++ wrangler.toml | 33 ++++ 19 files changed, 1028 insertions(+), 3 deletions(-) create mode 100644 CLAUDE.md create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 schema.sql create mode 100644 src/app.css create mode 100644 src/app.d.ts create mode 100644 src/app.html create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/+page.svelte create mode 100644 src/routes/about-fe/+page.svelte create mode 100644 src/routes/api-fe/contact-fe/+server.ts create mode 100644 src/routes/contact-fe/+page.svelte create mode 100644 src/routes/services-fe/+page.svelte create mode 100644 svelte.config.js create mode 100644 tailwind.config.js create mode 100644 tsconfig.json create mode 100644 vite.config.ts create mode 100644 wrangler.toml diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..a74dfbd --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,66 @@ +# For God so loved the world — John 3:16 + +This is a customer site for **{{BUSINESS_NAME_CHIRHO}}** hosted on perffection.com. + +## Project Overview + +This is a SvelteKit 2 site using: +- `@sveltejs/adapter-cloudflare` for Cloudflare Workers deployment +- Tailwind CSS for styling +- D1 Database for data storage +- KV for caching + +## Key Files + +- `src/routes/+page.svelte` - Home page +- `src/routes/about-fe/+page.svelte` - About page +- `src/routes/services-fe/+page.svelte` - Services page +- `src/routes/contact-fe/+page.svelte` - Contact page with form +- `src/routes/api-fe/contact-fe/+server.ts` - Contact form API endpoint +- `src/routes/+layout.svelte` - Global layout with header/footer +- `src/app.css` - Global styles and CSS variables + +## Naming Convention + +All project identifiers use the `_chirho` or `Chirho` suffix: +- Variables/functions: `camelCaseChirho` +- Types/Classes: `PascalCaseChirho` +- Constants: `SCREAMING_SNAKE_CHIRHO` +- Database columns: `snake_case_chirho` +- Routes: `kebab-case-fe` + +## Configuration Placeholders + +The following placeholders are replaced during site generation: +- `{{BUSINESS_NAME_CHIRHO}}` - Business name +- `{{TAGLINE_CHIRHO}}` - Business tagline +- `{{PHONE_CHIRHO}}` - Contact phone +- `{{EMAIL_CHIRHO}}` - Contact email +- `{{ADDRESS_CHIRHO}}` - Business address +- `{{PRIMARY_COLOR_CHIRHO}}` - Primary brand color +- `{{SLUG_CHIRHO}}` - Site slug identifier + +## Platform Bindings + +Available via `platform.env`: +- `DB_CHIRHO` - D1 Database +- `KV_CHIRHO` - KV Namespace +- `ASSETS_CHIRHO` - R2 Bucket +- `SITE_SLUG_CHIRHO` - Site identifier + +## Development + +```bash +bun install +bun run dev +``` + +## Build + +```bash +bun run build +``` + +Output goes to `.svelte-kit/cloudflare` for deployment. + +# JESUS CHRIST IS LORD diff --git a/README.md b/README.md index 56eae48..9321a9c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1 @@ -# starter-site-chirho - -Starter SvelteKit template for customer sites \ No newline at end of file +# JESUS CHRIST IS LORD diff --git a/package.json b/package.json new file mode 100644 index 0000000..1f16f23 --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "name": "{{SLUG_CHIRHO}}-site-chirho", + "version": "1.0.0", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" + }, + "devDependencies": { + "@sveltejs/adapter-cloudflare": "^5.0.0", + "@sveltejs/kit": "^2.15.0", + "@sveltejs/vite-plugin-svelte": "^5.0.0", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "typescript": "^5.0.0", + "vite": "^6.0.0", + "tailwindcss": "^3.4.0", + "autoprefixer": "^10.4.0", + "postcss": "^8.4.0" + }, + "type": "module" +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..8cb547b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,10 @@ +// For God so loved the world — John 3:16 + +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +}; + +// JESUS CHRIST IS LORD diff --git a/schema.sql b/schema.sql new file mode 100644 index 0000000..459409b --- /dev/null +++ b/schema.sql @@ -0,0 +1,21 @@ +-- For God so loved the world — John 3:16 + +-- Contact form submissions table +CREATE TABLE IF NOT EXISTS contact_submissions_chirho ( + id_chirho INTEGER PRIMARY KEY AUTOINCREMENT, + name_chirho TEXT NOT NULL, + email_chirho TEXT NOT NULL, + phone_chirho TEXT, + message_chirho TEXT NOT NULL, + read_chirho INTEGER DEFAULT 0, + created_at_chirho TEXT DEFAULT (datetime('now')) +); + +-- Create index for faster queries +CREATE INDEX IF NOT EXISTS idx_contact_submissions_created_chirho +ON contact_submissions_chirho(created_at_chirho DESC); + +CREATE INDEX IF NOT EXISTS idx_contact_submissions_read_chirho +ON contact_submissions_chirho(read_chirho); + +-- JESUS CHRIST IS LORD diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..cb71bd9 --- /dev/null +++ b/src/app.css @@ -0,0 +1,26 @@ +/* For God so loved the world — John 3:16 */ + +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --color-primary-50: #eff6ff; + --color-primary-100: #dbeafe; + --color-primary-200: #bfdbfe; + --color-primary-300: #93c5fd; + --color-primary-400: #60a5fa; + --color-primary-500: #3b82f6; + --color-primary-600: #2563eb; + --color-primary-700: #1d4ed8; + --color-primary-800: #1e40af; + --color-primary-900: #1e3a8a; +} + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* JESUS CHRIST IS LORD */ diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..b699c4c --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,29 @@ +// For God so loved the world — John 3:16 + +declare global { + namespace App { + interface Error { + message: string; + code?: string; + } + interface Locals { + siteSlugChirho?: string; + } + interface PageData {} + interface PageState {} + interface Platform { + env?: { + DB_CHIRHO: D1Database; + KV_CHIRHO: KVNamespace; + ASSETS_CHIRHO: R2Bucket; + SITE_SLUG_CHIRHO: string; + }; + context?: ExecutionContext; + caches?: CacheStorage; + } + } +} + +export {}; + +// JESUS CHRIST IS LORD diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..2c83566 --- /dev/null +++ b/src/app.html @@ -0,0 +1,13 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..8b192b5 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,138 @@ + + + + + + + +
+ +
+
+
+ + {siteConfigChirho.businessNameChirho} + + + + + + + + +
+
+
+ + +
+ {@render children()} +
+ + +
+
+
+
+

{siteConfigChirho.businessNameChirho}

+

{siteConfigChirho.taglineChirho}

+
+ +
+

Contact

+ +
+ +
+

Quick Links

+
    + {#each navItemsChirho as item} +
  • + {item.label} +
    • + {/each} +
+
+
+ +
+

© {new Date().getFullYear()} {siteConfigChirho.businessNameChirho}. All rights reserved.

+

+ Powered by perffection.com +

+
+
+
+
+ + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..968b919 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,100 @@ + + + + + {siteConfigChirho.businessNameChirho} + + + + +
+
+
+

+ {siteConfigChirho.businessNameChirho} +

+

+ {siteConfigChirho.taglineChirho} +

+
+ + Get Started + + + Our Services + +
+
+
+
+ + +
+
+
+

What We Offer

+

+ Professional services tailored to meet your needs +

+
+ +
+ {#each siteConfigChirho.servicesChirho as service} +
+
+ {service.iconChirho} +
+

{service.titleChirho}

+

{service.descriptionChirho}

+
+ {/each} +
+ +
+ + View All Services + + + + +
+
+
+ + +
+
+

Ready to Get Started?

+

+ Contact us today for a free consultation +

+ + Contact Us Now + +
+
+ + diff --git a/src/routes/about-fe/+page.svelte b/src/routes/about-fe/+page.svelte new file mode 100644 index 0000000..252c2c3 --- /dev/null +++ b/src/routes/about-fe/+page.svelte @@ -0,0 +1,89 @@ + + + + + About | {siteConfigChirho.businessNameChirho} + + + + +
+
+
+

About Us

+

+ {siteConfigChirho.taglineChirho} +

+
+
+
+ + +
+
+
+

Our Story

+

+ {siteConfigChirho.storyChirho || 'We are dedicated to providing exceptional service and value to our customers. Our team brings years of experience and a passion for excellence to everything we do.'} +

+
+
+
+ + +
+
+

Our Values

+
+
+
+ + + +
+

Quality

+

We deliver excellence in everything we do

+
+
+
+ + + +
+

Integrity

+

Honesty and transparency guide our actions

+
+
+
+ + + +
+

Innovation

+

We continuously improve and adapt

+
+
+
+
+ + +
+
+

Want to Learn More?

+

Get in touch with us today

+ + Contact Us + +
+
+ + diff --git a/src/routes/api-fe/contact-fe/+server.ts b/src/routes/api-fe/contact-fe/+server.ts new file mode 100644 index 0000000..b058140 --- /dev/null +++ b/src/routes/api-fe/contact-fe/+server.ts @@ -0,0 +1,56 @@ +// For God so loved the world — John 3:16 + +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; + +interface ContactRequestChirho { + name_chirho: string; + email_chirho: string; + phone_chirho?: string; + message_chirho: string; +} + +export const POST: RequestHandler = async ({ request, platform }) => { + try { + const bodyChirho: ContactRequestChirho = await request.json(); + + // Validate required fields + if (!bodyChirho.name_chirho || !bodyChirho.email_chirho || !bodyChirho.message_chirho) { + return json({ error_chirho: 'Missing required fields' }, { status: 400 }); + } + + // Basic email validation + const emailRegexChirho = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegexChirho.test(bodyChirho.email_chirho)) { + return json({ error_chirho: 'Invalid email address' }, { status: 400 }); + } + + const dbChirho = platform?.env?.DB_CHIRHO; + if (!dbChirho) { + console.error('D1 database not available'); + return json({ error_chirho: 'Service temporarily unavailable' }, { status: 503 }); + } + + // Insert into contact_submissions_chirho table + await dbChirho + .prepare( + `INSERT INTO contact_submissions_chirho + (name_chirho, email_chirho, phone_chirho, message_chirho, created_at_chirho) + VALUES (?, ?, ?, ?, datetime('now'))` + ) + .bind( + bodyChirho.name_chirho, + bodyChirho.email_chirho, + bodyChirho.phone_chirho || null, + bodyChirho.message_chirho + ) + .run(); + + return json({ success_chirho: true, message_chirho: 'Contact form submitted successfully' }); + } catch (errChirho) { + console.error('Contact form error:', errChirho); + return json({ error_chirho: 'Failed to process contact form' }, { status: 500 }); + } +}; + +// JESUS CHRIST IS LORD diff --git a/src/routes/contact-fe/+page.svelte b/src/routes/contact-fe/+page.svelte new file mode 100644 index 0000000..0a573ce --- /dev/null +++ b/src/routes/contact-fe/+page.svelte @@ -0,0 +1,229 @@ + + + + + Contact | {siteConfigChirho.businessNameChirho} + + + + +
+
+
+

Contact Us

+

+ We'd love to hear from you. Get in touch with us today. +

+
+
+
+ + +
+
+
+ +
+

Send us a Message

+ + {#if successChirho} +
+

Message sent successfully!

+

We'll get back to you as soon as possible.

+
+ {/if} + + {#if errorChirho} +
+

{errorChirho}

+
+ {/if} + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ + +
+
+

Contact Information

+

+ Feel free to reach out through any of the following methods. We typically respond within 24 hours. +

+
+ +
+ {#if siteConfigChirho.phoneChirho} +
+
+ + + +
+
+

Phone

+ + {siteConfigChirho.phoneChirho} + +
+
+ {/if} + + {#if siteConfigChirho.emailChirho} +
+
+ + + +
+
+

Email

+ + {siteConfigChirho.emailChirho} + +
+
+ {/if} + + {#if siteConfigChirho.addressChirho} +
+
+ + + + +
+
+

Address

+

{siteConfigChirho.addressChirho}

+
+
+ {/if} +
+ + +
+

Business Hours

+
    +
  • + Monday - Friday + 9:00 AM - 5:00 PM +
    • +
  • + Saturday + By appointment +
    • +
  • + Sunday + Closed +
    • +
+
+
+
+
+
+ + diff --git a/src/routes/services-fe/+page.svelte b/src/routes/services-fe/+page.svelte new file mode 100644 index 0000000..a6871d5 --- /dev/null +++ b/src/routes/services-fe/+page.svelte @@ -0,0 +1,120 @@ + + + + + Services | {siteConfigChirho.businessNameChirho} + + + + +
+
+
+

Our Services

+

+ Professional solutions tailored to meet your unique needs +

+
+
+
+ + +
+
+
+ {#each siteConfigChirho.servicesChirho as service, index} +
+
+
+ {service.iconChirho} +
+

{service.titleChirho}

+

{service.descriptionChirho}

+ + {#if service.featuresChirho && service.featuresChirho.length > 0} +
    + {#each service.featuresChirho as feature} +
  • + + + + {feature} +
    • + {/each} +
+ {/if} +
+
+ + Get Started + +
+
+ {/each} +
+
+
+ + +
+
+

Frequently Asked Questions

+
+
+

How do I get started?

+

Simply contact us through our contact form or give us a call. We'll schedule a consultation to understand your needs.

+
+
+

What areas do you serve?

+

We serve customers locally and can accommodate remote clients depending on the service.

+
+
+

Do you offer free consultations?

+

Yes! We offer free initial consultations to discuss your needs and how we can help.

+
+
+
+
+ + +
+
+

Ready to Get Started?

+

Contact us today for a free consultation

+ + Contact Us Now + +
+
+ + diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..d89bafd --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,21 @@ +// For God so loved the world — John 3:16 + +import adapter from '@sveltejs/adapter-cloudflare'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: vitePreprocess(), + kit: { + adapter: adapter({ + routes: { + include: ['/*'], + exclude: [''] + } + }) + } +}; + +export default config; + +// JESUS CHRIST IS LORD diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..4388bfb --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,27 @@ +// For God so loved the world — John 3:16 + +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{html,js,svelte,ts}'], + theme: { + extend: { + colors: { + primary: { + 50: 'var(--color-primary-50, #eff6ff)', + 100: 'var(--color-primary-100, #dbeafe)', + 200: 'var(--color-primary-200, #bfdbfe)', + 300: 'var(--color-primary-300, #93c5fd)', + 400: 'var(--color-primary-400, #60a5fa)', + 500: 'var(--color-primary-500, #3b82f6)', + 600: 'var(--color-primary-600, #2563eb)', + 700: 'var(--color-primary-700, #1d4ed8)', + 800: 'var(--color-primary-800, #1e40af)', + 900: 'var(--color-primary-900, #1e3a8a)' + } + } + } + }, + plugins: [] +}; + +// JESUS CHRIST IS LORD diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a8f10c8 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "moduleResolution": "bundler" + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..622a576 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,10 @@ +// For God so loved the world — John 3:16 + +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [sveltekit()] +}); + +// JESUS CHRIST IS LORD diff --git a/wrangler.toml b/wrangler.toml new file mode 100644 index 0000000..91daaf8 --- /dev/null +++ b/wrangler.toml @@ -0,0 +1,33 @@ +# For God so loved the world — John 3:16 + +name = "{{SLUG_CHIRHO}}-site-fe-chirho" +main = ".svelte-kit/cloudflare/_worker.js" +compatibility_date = "2024-12-01" +compatibility_flags = ["nodejs_compat"] + +# This worker will be deployed to the dispatch namespace +# via the perffection.com build system + +[vars] +SITE_SLUG_CHIRHO = "{{SLUG_CHIRHO}}" + +# D1 Database binding - configured during deployment +# [[d1_databases]] +# binding = "DB_CHIRHO" +# database_name = "{{SLUG_CHIRHO}}-db-chirho" +# database_id = "{{D1_DATABASE_ID_CHIRHO}}" + +# KV Namespace binding - configured during deployment +# [[kv_namespaces]] +# binding = "KV_CHIRHO" +# id = "{{KV_NAMESPACE_ID_CHIRHO}}" + +# R2 Bucket binding - configured during deployment +# [[r2_buckets]] +# binding = "ASSETS_CHIRHO" +# bucket_name = "{{SLUG_CHIRHO}}-assets-chirho" + +[site] +bucket = ".svelte-kit/cloudflare" + +# JESUS CHRIST IS LORD