@edgedev/create-edge-site 1.0.14 → 1.0.16

package/app/app.vue

@@ -1,12 +1,11 @@
+<script setup>
+</script>
+
 <template class="font-sans">
-  <edge-navbar />
-  <NuxtPage />
-  <edge-footer class="h-[200px]" />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <style>
-@import 'swiper/css';
-@import 'swiper/css/navigation';
-@import 'swiper/css/pagination';
-@import '@fancyapps/ui/dist/fancybox/fancybox.css';
 </style>

package/app/components/edgeFormFling.vue

@@ -39,6 +39,14 @@ const props = defineProps({
     required: false,
     default: 'text-red-500 mt-2',
   },
+  gtagEvent: {
+    type: String,
+    required: false,
+  },
+  gtagEventParams: {
+    type: Object,
+    required: false,
+  },
 })
 
 const state = reactive({
@@ -118,6 +126,10 @@ const onSubmit = async (values, { resetForm }) => {
     state.submitting = false
   }
   if (state.submitResponse.success) {
+    if (props.gtagEvent && typeof window !== 'undefined' && typeof window.gtag === 'function') {
+      const hasParams = props.gtagEventParams && Object.keys(props.gtagEventParams).length > 0
+      window.gtag('event', props.gtagEvent, hasParams ? props.gtagEventParams : undefined)
+    }
     resetForm()
   }
 }
@@ -128,7 +140,7 @@ const onSubmit = async (values, { resetForm }) => {
     :validation-schema="props.validationSchema"
     @submit="onSubmit"
   >
-    <slot :submitting="state.submitting" :submit-response="state.submitResponse"></slot>
+    <slot :submitting="state.submitting" :submit-response="state.submitResponse" />
     <VueTurnstile
       v-if="props.turnstileSiteSecret"
       v-model="state.turnstileToken"

package/app/components/{Input.vue → edgeInput.vue}

@@ -42,11 +42,11 @@ defineOptions({ inheritAttrs: false })
       type="file"
       v-bind="{ ...field, ...$attrs }"
       @change="handleChange($event)"
-    />
+    >
     <input
       v-else
       v-bind="{ ...field, ...$attrs }"
-    />
+    >
   </Field>
   <ErrorMessage :class="props.errorClass" :name="props.name" />
 </template>

package/app/components/edgeNavbar.vue

@@ -43,7 +43,7 @@ onUnmounted(() => {
       <div class="container mx-auto flex items-center justify-between h-[128px]">
         <!-- Logo -->
         <NuxtLink to="/" class="text-xl font-bold">
-          <img src="/images/logo.png" alt="MT" class="w-full h-auto" />
+          <img src="/images/logo.png" alt="MT" class="w-full h-auto">
         </NuxtLink>
 
         <!-- Mobile Menu Button -->
@@ -68,6 +68,11 @@ onUnmounted(() => {
               Stuff
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink to="/projects" class="nav-item">
+              Projects
+            </NuxtLink>
+          </li>
           <li>
             <NuxtLink to="/contact" class="nav-item">
               Contact
@@ -86,18 +91,18 @@ onUnmounted(() => {
         </button>
 
         <!-- Mobile Logo -->
-        <a href="/"><img src="/images/logo.png" alt="Logo" class="mb-4 w-50" /></a>
+        <a href="/"><img src="/images/logo.png" alt="Logo" class="mb-4 w-50"></a>
 
         <!-- Social Media Icons -->
         <div class="flex justify-center my-6 space-x-4">
           <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
-            <i class="fab fa-facebook-f fa-lg"></i>
+            <i class="fab fa-facebook-f fa-lg" />
           </a>
           <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
-            <i class="fab fa-instagram fa-lg"></i>
+            <i class="fab fa-instagram fa-lg" />
           </a>
           <a href="#" class="flex items-center justify-center w-12 h-12 transition rounded-full bg-lblue text-dblue hover:bg-opacity-80">
-            <i class="fab fa-houzz fa-lg"></i> <!-- Houzz or custom icon -->
+            <i class="fab fa-houzz fa-lg" /> <!-- Houzz or custom icon -->
           </a>
         </div>
 
@@ -113,6 +118,11 @@ onUnmounted(() => {
               Stuff
             </NuxtLink>
           </li>
+          <li class="border-t border-b border-lblue">
+            <NuxtLink to="/projects" class="text-lg tracking-widest uppercase" @click="closeMenu">
+              Projects
+            </NuxtLink>
+          </li>
           <li class="border-t border-b border-lblue">
             <NuxtLink to="/contact" class="text-lg tracking-widest uppercase" @click="closeMenu">
               Contact

package/app/components/titleSection.vue

@@ -31,13 +31,13 @@ onMounted(() => {
       :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
     >
       <h6
-        class="inline-flex items-center gap-2 mb-4 transition-all duration-700 ease-out super-head"
+        class="inline-flex capitalize items-center gap-2 mb-4 transition-all duration-700 ease-out super-head"
         :class="isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'"
       >
         {{ page }}
       </h6>
       <h1
-        class="text-3xl font-light !leading-tight font-fancy md:text-5xl md:pr-80 transition-all duration-700 ease-out delay-100"
+        class="text-3xl capitalize font-light !leading-tight font-fancy md:text-5xl md:pr-80 transition-all duration-700 ease-out delay-100"
         :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
       >
         {{ headline }}

package/app/error.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps({
+  error: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const statusCode = computed(() => props.error?.statusCode || 500)
+const isNotFound = computed(() => statusCode.value === 404)
+</script>
+
+<template>
+  <Head>
+    <Title>Edge Website - An awesome Edge website</Title>
+    <Meta name="description" content="This is an Edge website template" />
+    <Link rel="canonical" href="https://edgemarketingdesign.com/" />
+  </Head>
+
+  <template v-if="isNotFound">
+    <titleSection
+      page="404"
+      headline="404 - Page Not Found"
+    />
+    <div class="min-h-[calc(100vh_-_586px)] w-full items-center justify-center flex flex-col">
+      <h1 class="text-6xl font-bold mb-4">
+        404
+      </h1>
+      <p class="text-xl mb-2">
+        Page Not Found
+      </p>
+      <p class="text-md text-gray-400 mb-6">
+        Looks like this page took an early return and never came back.<br>
+        Maybe it hit a <code class="bg-gray-800 px-1 py-0.5 rounded">null pointer</code>... or just rage-quit the DOM.
+      </p>
+      <a href="/" class="px-6 py-2 mt-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
+        Go Home & Debug Later
+      </a>
+    </div>
+  </template>
+  <div v-else class="min-h-[calc(100vh_-_586px)] w-full items-center justify-center flex flex-col">
+    <titleSection
+      page="Error"
+      headline="Something went wrong"
+    />
+    <h1 class="text-6xl font-bold mb-4">
+      {{ statusCode }}
+    </h1>
+    <p class="text-xl mb-2">
+      Unexpected Error
+    </p>
+    <p class="text-md text-gray-400 mb-6">
+      Please try again or head back home.
+    </p>
+    <a href="/" class="px-6 py-2 mt-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
+      Go Home & Debug Later
+    </a>
+  </div>
+</template>

package/app/layouts/admin.vue

@@ -0,0 +1,6 @@
+<template>
+  <slot />
+</template>
+
+<style>
+</style>

package/app/layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <edge-navbar />
+  <slot />
+  <edge-footer class="h-[200px]" />
+</template>
+
+<style>
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+@import '@fancyapps/ui/dist/fancybox/fancybox.css';
+</style>

package/app/pages/[collection]/[slug].vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useAsyncData } from '#imports'
+import { createError } from 'h3'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const { collection, slug } = route.params
+
+const { data: project } = await useAsyncData(`${collection}-${slug}`, () => {
+  return queryCollection(collection).path(`/${collection}/${slug}`).first()
+})
+
+if (!project.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+  })
+}
+</script>
+
+<template>
+  <Head>
+    <Title>Edge Website - An awesome Edge website</Title>
+    <Meta name="description" content="This is an Edge website template" />
+    <Link rel="canonical" href="https://edgemarketingdesign.com/contact" />
+  </Head>
+
+  <titleSection
+    :page="collection"
+    :headline="project.title"
+  />
+
+  <div class="container flex flex-col items-center justify-center w-full max-w-6xl px-6 pt-10 pb-64 mx-auto">
+    <article class="max-w-4xl px-4  py-16 mx-auto">
+      <ContentRenderer :value="project" />
+    </article>
+  </div>
+</template>

package/app/pages/[collection]/index.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { createError } from 'h3'
+import { NuxtLink } from '#components'
+import { useAsyncData } from '#imports'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const { collection } = route.params
+
+const { data: projects } = await useAsyncData(collection, () => {
+  return queryCollection(collection).order('date', 'DESC').all()
+})
+
+if (!projects.value || projects.value.length === 0) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+  })
+}
+</script>
+
+<template>
+  <Head>
+    <Title>Edge Website - An awesome Edge website</Title>
+    <Meta name="description" content="This is an Edge website template" />
+    <Link rel="canonical" href="https://edgemarketingdesign.com/contact" />
+  </Head>
+
+  <titleSection
+    page="Content"
+    :headline="collection"
+  />
+
+  <div class="container flex flex-col items-center justify-center w-full max-w-6xl px-6 pt-10 pb-64 mx-auto">
+    <div v-for="project in projects" :key="project._id" class="mb-12">
+      <NuxtLink :to="`${project.path}`">
+        {{ project.title }}
+      </NuxtLink>
+    </div>
+  </div>
+</template>

package/app/pages/admin/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  test admin index page
+</template>

package/app/pages/admin.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { definePageMeta } from '#imports'
+
+definePageMeta({ layout: 'admin' })
+</script>
+
+<template class="font-sans">
+  <NuxtPage />
+</template>
+
+<style>
+</style>

package/app/pages/contact.vue

@@ -49,7 +49,7 @@ onMounted(() => {
       success-class="text-green-500"
       error-class="text-red-500"
     >
-      <Input
+      <edge-input
         type="text"
         placeholder="Name"
         name="name"
@@ -59,7 +59,7 @@ onMounted(() => {
       <!-- Email and Phone -->
       <div class="max-w-[400px] my-2 grid grid-cols-1 gap-4 md:grid-cols-2">
         <div>
-          <Input
+          <edge-input
             type="email"
             placeholder="Email"
             name="email"
@@ -68,7 +68,7 @@ onMounted(() => {
           />
         </div>
         <div>
-          <Input
+          <edge-input
             type="phone"
             placeholder="Phone"
             name="phone"
@@ -79,7 +79,7 @@ onMounted(() => {
       </div>
       <!-- Message -->
       <div>
-        <Textarea
+        <edge-textarea
           name="message"
           placeholder="Message"
           class="w-full h-32 px-4 py-2 mt-2 border border-gray-300 resize-none focus:outline-none"

package/app/pages/index.vue

@@ -11,6 +11,6 @@ onMounted(() => {
     <Link rel="canonical" href="https://edgemarketingdesign.com/" />
   </Head>
   <div class="min-h-[calc(100vh_-_328px)] w-full items-center justify-center flex flex-col">
-    <img src="/images/edge_logo.png" class="w-[400px] h-auto" alt="Edge Marketing Design Logo" />
+    <img src="/images/edge_logo.png" class="w-[400px] h-auto" alt="Edge Marketing Design Logo">
   </div>
 </template>

package/app/plugins/detect-domain.server.ts

@@ -0,0 +1,21 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  let host = ''
+
+  // Works locally (node SSR)
+  const nodeReq = nuxtApp.ssrContext?.event?.node?.req
+  if (nodeReq?.headers?.host) {
+    host = nodeReq.headers.host
+  }
+
+  // Works in Cloudflare Pages Functions
+  const webReq = nuxtApp.ssrContext?.event?.req || nuxtApp.ssrContext?.event?.request
+  if (!host && typeof webReq?.headers?.get === 'function') {
+    host = webReq.headers.get('host') || ''
+  }
+
+  host = host.replace(/^www\./, '')
+  const baseURL = host.startsWith('localhost') || host.startsWith('192.') ? `http://${host}` : `https://${host}`
+
+  nuxtApp.provide('domain', host)
+  nuxtApp.provide('baseURL', baseURL)
+})

package/content/projects/test.md

@@ -0,0 +1,6 @@
+---
+title: "Test Project"
+date: "2025-01-01"
+---
+
+This is just a test.

package/content/projects/test2.md

@@ -0,0 +1,6 @@
+---
+title: "Test Project 2"
+date: "2025-08-25"
+---
+
+This is just another test.

package/content.config.ts

@@ -0,0 +1,14 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    projects: defineCollection({
+      type: 'page',
+      source: 'projects/*.md',
+      schema: z.object({
+        title: z.string(),
+        date: z.date(),
+      }),
+    }),
+  },
+})

package/eslint.config.mjs

@@ -1,7 +1,37 @@
 import antfu from '@antfu/eslint-config'
 
+// Handle CJS interop for Nuxt plugin
+const nuxtPluginModule = await import('eslint-plugin-nuxt')
+const nuxtPlugin = nuxtPluginModule.default ?? nuxtPluginModule
+
 export default [
-  ...(await antfu()),
+  // Antfu base config
+  ...await antfu(),
+
+  // Nuxt recommended rules
+  {
+    name: 'nuxt',
+    plugins: {
+      nuxt: nuxtPlugin,
+    },
+    rules: {
+      ...(nuxtPlugin.configs?.recommended?.rules ?? {}),
+    },
+  },
+
+  // Explicit globals (add any other auto-imported composables here)
+  {
+    name: 'globals',
+    languageOptions: {
+      globals: {
+        globalState: 'readonly',
+        $fetch: 'readonly',
+        queryCollection: 'readonly',
+      },
+    },
+  },
+
+  // Your custom rule overrides
   {
     rules: {
       'vue/no-deprecated-slot-attribute': 'off',
@@ -9,16 +39,6 @@ export default [
       'no-console': 'off',
       'antfu/top-level-function': 'off',
       'style/eol-last': 'off',
-      // ✅ Enforce correct self-closing behavior in Vue templates
-      'vue/html-self-closing': ['error', {
-        html: {
-          void: 'always', // <img />, <br />, <input />, etc.
-          normal: 'never', // <div></div>, <span></span>, etc.
-          component: 'always', // <MyComponent />
-        },
-        svg: 'always',
-        math: 'always',
-      }],
     },
   },
-]
+]

package/nuxt.config.ts

@@ -32,7 +32,7 @@ export default defineNuxtConfig({
   css: [
     '~/assets/css/global.css', // ✅ Keep global styles only
   ],
-  modules: ['@nuxtjs/tailwindcss', '@vee-validate/nuxt', 'nitro-cloudflare-dev'],
+  modules: ['@nuxtjs/tailwindcss', '@vee-validate/nuxt', 'nitro-cloudflare-dev', '@nuxt/content'],
   vite: {
     define: {
       'process.env.DEBUG': false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-site",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Create Edge Starter Site",
   "bin": {
     "create-edge-site": "./bin/cli.js"
@@ -14,24 +14,28 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@fancyapps/ui": "^5.0.36",
+    "@fancyapps/ui": "5.0.36",
+    "@nuxt/content": "3.6.3",
     "@nuxtjs/tailwindcss": "6.13.2",
-    "@vee-validate/nuxt": "^4.15.0",
-    "@vee-validate/rules": "^4.15.0",
-    "@vee-validate/zod": "^4.15.0",
-    "nuxt": "^3.16.1",
-    "scrollreveal": "^4.0.9",
-    "swiper": "^11.2.6",
-    "vue": "^3.5.13",
-    "vue-imask": "^7.6.1",
-    "vue-router": "^4.5.0",
-    "vue-turnstile": "^1.0.11",
-    "zod": "^3.24.2"
+    "@vee-validate/nuxt": "4.15.0",
+    "@vee-validate/rules": "4.15.0",
+    "@vee-validate/zod": "4.15.0",
+    "better-sqlite3": "12.2.0",
+    "nuxt": "3.16.1",
+    "scrollreveal": "4.0.9",
+    "swiper": "11.2.6",
+    "vue": "3.5.13",
+    "vue-imask": "7.6.1",
+    "vue-router": "4.5.0",
+    "vue-turnstile": "1.0.11",
+    "zod": "3.24.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.11.0",
-    "eslint": "^9",
-    "nitro-cloudflare-dev": "^0.2.2",
-    "wrangler": "^4.14.4"
+    "@antfu/eslint-config": "4.11.0",
+    "eslint": "9.23.0",
+    "eslint-plugin-nuxt": "4.0.0",
+    "nitro-cloudflare-dev": "0.2.2",
+    "typescript": "5.9.3",
+    "wrangler": "4.14.4"
   }
 }

package/server/api/hello.ts

@@ -1,3 +1,5 @@
-export default defineEventHandler(() => {
+export default defineEventHandler((event) => {
+    const context = event.context
+    const config = useRuntimeConfig()
   return { message: 'Hello from World' }
 })

package/server/api/images/upload.post.ts

@@ -0,0 +1,246 @@
+import { useRuntimeConfig } from '#imports'
+// server/api/images.upload.post.ts
+import { createError, defineEventHandler, readMultipartFormData } from 'h3'
+
+function getCfg(cfg = useRuntimeConfig()) {
+  const accountId = cfg.cfAccountId ?? process.env.NUXT_CF_ACCOUNT_ID
+  const apiToken = cfg.cfApiToken ?? process.env.NUXT_CF_API_TOKEN
+  const imagesHash = cfg.cfImagesAccountHash ?? process.env.NUXT_CF_IMAGES_HASH
+  let variants: string[]
+    = Array.isArray(cfg.cfImagesVariants)
+      ? cfg.cfImagesVariants
+      : (typeof cfg.cfImagesVariants === 'string'
+          ? cfg.cfImagesVariants.split(',').map(s => s.trim()).filter(Boolean)
+          : [])
+
+  if (!accountId)
+    throw new Error('Missing cfAccountId / NUXT_CF_ACCOUNT_ID')
+  if (!apiToken)
+    throw new Error('Missing cfApiToken / NUXT_CF_API_TOKEN')
+  if (!imagesHash)
+    throw new Error('Missing cfImagesAccountHash / NUXT_CF_IMAGES_HASH')
+  if (!variants.length) {
+    // sensible default if you have a “public” variant configured
+    variants = ['public', 'thumbnail']
+  }
+
+  return { accountId, apiToken, imagesHash, variants }
+}
+
+export default defineEventHandler(async (event) => {
+  if (event.node.req.method !== 'POST') {
+    throw createError({ statusCode: 405, statusMessage: 'Method Not Allowed' })
+  }
+
+  const config = useRuntimeConfig()
+  const turnstileSecretKey = config.turnstileSecretKey || process.env.NUXT_TURNSTILE_SECRET_KEY || ''
+  if (turnstileSecretKey) {
+    const tokenHeader = event.node.req.headers['cf-turnstile-response']
+    const token = Array.isArray(tokenHeader) ? tokenHeader[0] : tokenHeader
+    if (typeof token !== 'string' || !token) {
+      throw createError({ statusCode: 400, statusMessage: 'Missing Turnstile token' })
+    }
+
+    const verifyResponse = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
+        secret: turnstileSecretKey,
+        response: token,
+        remoteip: Array.isArray(event.node.req.headers['cf-connecting-ip'])
+          ? event.node.req.headers['cf-connecting-ip'][0]
+          : (event.node.req.headers['cf-connecting-ip'] || ''),
+      }),
+    })
+
+    if (!verifyResponse.ok) {
+      throw createError({ statusCode: 500, statusMessage: 'Failed to verify Turnstile token' })
+    }
+
+    const verifyData = await verifyResponse.json()
+    if (!verifyData.success) {
+      throw createError({ statusCode: 400, statusMessage: 'Invalid Turnstile token' })
+    }
+  }
+
+  const { accountId, apiToken, imagesHash, variants } = getCfg(config)
+
+  const parts = await readMultipartFormData(event)
+  if (!parts || !parts.length) {
+    throw createError({ statusCode: 400, statusMessage: 'No form data' })
+  }
+
+  const filePart = parts.find(p => p.filename && p.data)
+  if (!filePart) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing file upload (field "file")' })
+  }
+
+  // Convert Buffer -> File for FormData
+  const filename = filePart.filename || 'upload.bin'
+  console.warn('Uploading file:', filename, 'size:', filePart.data?.length, 'type:', filePart.type)
+  const mime = filePart.type || 'application/octet-stream'
+  const blob = new Blob([filePart.data], { type: mime })
+  // @ts-ignore: File is available in Node 18+ (undici)
+  const file = new File([blob], filename, { type: mime })
+
+  // Optional metadata fields (if you posted them in the same form)
+  const metadataPart = parts.find(p => p.name === 'metadata' && !p.filename)
+  const requireSignedPart = parts.find(p => p.name === 'requireSignedURLs' && !p.filename)
+
+  const form = new FormData()
+  form.append('file', file)
+  if (metadataPart?.data?.length) {
+    // accept either JSON or plain string metadata
+    const asText = metadataPart.data.toString('utf8')
+    try {
+      JSON.parse(asText)
+      form.append('metadata', asText)
+    }
+    catch {
+      // If not JSON, wrap as a string field
+      form.append('metadata', JSON.stringify({ note: asText }))
+    }
+  }
+  if (requireSignedPart) {
+    const v = requireSignedPart.data.toString('utf8').trim().toLowerCase()
+    if (v === 'true' || v === '1')
+      form.append('requireSignedURLs', 'true')
+  }
+
+  // Upload to Cloudflare Images (REST)
+  const apiUrl = `https://api.cloudflare.com/client/v4/accounts/${accountId}/images/v1`
+  const res = await fetch(apiUrl, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${apiToken}` },
+    body: form,
+  })
+
+  const text = await res.text()
+  let json: any
+  try { json = JSON.parse(text) }
+  catch { /* keep text for error */ }
+
+  if (!res.ok || !json?.success) {
+    const msg
+      = (json?.errors && json.errors[0]?.message)
+        || json?.messages?.[0]
+        || text
+        || `Upload failed with status ${res.status}`
+    throw createError({ statusCode: 502, statusMessage: `Cloudflare Images upload error: ${msg}` })
+  }
+
+  const id: string = json.result?.id
+  if (!id) {
+    throw createError({ statusCode: 502, statusMessage: 'Upload succeeded but no image id returned' })
+  }
+
+  // Helper to extract variant name from URL
+  function variantNameFromUrl(u: string): string | null {
+    try {
+      const url = new URL(u)
+      const parts = url.pathname.split('/').filter(Boolean) // ['', 'HASH', 'ID', 'variant']
+      return parts[3] || null
+    }
+    catch {
+      return null
+    }
+  }
+
+  // Prefer the variant URLs returned by the API (they are authoritative)
+  const variantsMap: Record<string, string> = {}
+  if (Array.isArray(json.result?.variants)) {
+    for (const u of json.result.variants) {
+      const name = variantNameFromUrl(u)
+      if (name)
+        variantsMap[name] = u
+    }
+  }
+
+  // Ensure configured variants exist in the map (construct if missing)
+  for (const v of variants) {
+    if (!variantsMap[v]) {
+      variantsMap[v] = `https://imagedelivery.net/${imagesHash}/${id}/${v}`
+    }
+  }
+
+  // If API returned variant URLs, verify their HASH matches configured imagesHash
+  let hashMismatch: { configured: string, observed: string } | null = null
+  const anyVariantUrl = Object.values(variantsMap)[0]
+  if (anyVariantUrl) {
+    try {
+      const parts = new URL(anyVariantUrl).pathname.split('/').filter(Boolean) // HASH/ID/variant
+      const observedHash = parts[0]
+      if (observedHash && observedHash !== imagesHash) {
+        hashMismatch = { configured: imagesHash, observed: observedHash }
+      }
+    }
+    catch {}
+  }
+
+  // Sleep helper for simple backoff
+  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+  // Single HEAD probe
+  async function headProbe(url: string): Promise<{ ok: boolean, status: number }> {
+    try {
+      const r = await fetch(url, { method: 'HEAD' })
+      return { ok: r.ok, status: r.status }
+    }
+    catch {
+      return { ok: false, status: 0 }
+    }
+  }
+
+  // Probe delivery with small exponential backoff to smooth over manifest lag
+  const probe: Record<string, { ok: boolean, status: number, note?: string, attempts: number }> = {}
+  await Promise.all(Object.entries(variantsMap).map(async ([name, url]) => {
+    const delays = [0, 200, 400, 800] // ms
+    let last = { ok: false, status: 0 }
+    for (let i = 0; i < delays.length; i++) {
+      if (delays[i] > 0)
+        await sleep(delays[i])
+      last = await headProbe(url)
+      // Exit early unless this is a transient 500
+      if (last.ok || (last.status !== 500 && last.status !== 0)) {
+        probe[name] = {
+          ok: last.ok,
+          status: last.status,
+          note:
+            last.status === 403
+              ? 'Forbidden (variant may require signed URL)'
+              : last.status === 404
+                ? 'Not found (check hash/id/variant name)'
+                : last.status === 500
+                  ? 'Image manifest not ready/available yet'
+                  : last.status === 0
+                    ? 'HEAD request failed'
+                    : undefined,
+          attempts: i + 1,
+        }
+        return
+      }
+    }
+    // If we reach here, still failing with 500/0 after retries
+    probe[name] = {
+      ok: last.ok,
+      status: last.status,
+      note:
+        last.status === 500
+          ? 'Persistent 500 after retries (manifest not ready or account/variant mismatch)'
+          : last.status === 0
+            ? 'HEAD failed after retries'
+            : undefined,
+      attempts: delays.length,
+    }
+  }))
+
+  return {
+    success: true,
+    id,
+    variants: variantsMap,
+    probe,
+    ...(hashMismatch ? { hashMismatch } : {}),
+  }
+})

package/server/utils/deleteKV.js

@@ -0,0 +1,49 @@
+import { useRuntimeConfig } from '#imports'
+
+export async function deleteKVValue(key, context) {
+  const config = useRuntimeConfig()
+  const isDev = import.meta.dev
+  const MY_KV = context?.cloudflare?.env?.MY_KV
+
+  const deleteFromAPI = async () => {
+    const { cfAccountId, cfKVNamespaceId, cfApiToken } = config
+    const url = `https://api.cloudflare.com/client/v4/accounts/${cfAccountId}/storage/kv/namespaces/${cfKVNamespaceId}/values/${key}`
+    const res = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        Authorization: `Bearer ${cfApiToken}`,
+      },
+    })
+    if (!res.ok) {
+      console.warn('❌ Remote delete failed:', await res.text())
+      return false
+    }
+    return true
+  }
+
+  let deletedLocally = false
+
+  if (typeof MY_KV !== 'undefined') {
+    try {
+      await MY_KV.delete(key)
+      console.log('🗑️ Deleted from local KV')
+      deletedLocally = true
+    }
+    catch (e) {
+      console.warn('⚠️ Failed to delete from local KV:', e)
+    }
+  }
+
+  if (isDev) {
+    console.log('🛠 Dev mode – syncing delete to API')
+    const deletedRemotely = await deleteFromAPI()
+    return deletedLocally || deletedRemotely
+  }
+
+  if (typeof MY_KV === 'undefined') {
+    console.log('🌐 No KV available, deleting via API')
+    return await deleteFromAPI()
+  }
+
+  return deletedLocally
+}

package/server/utils/getPrefix.js

@@ -0,0 +1,74 @@
+import { useRuntimeConfig } from '#imports'
+
+export async function getKVValuesByPrefix(prefix, context) {
+  const config = useRuntimeConfig()
+  const isDev = import.meta.dev
+  const MY_KV = context?.cloudflare?.env?.MY_KV
+
+  const fetchKeysFromAPI = async () => {
+    const { cfAccountId, cfKVNamespaceId, cfApiToken } = config
+    const url = `https://api.cloudflare.com/client/v4/accounts/${cfAccountId}/storage/kv/namespaces/${cfKVNamespaceId}/keys?prefix=${encodeURIComponent(prefix)}`
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${cfApiToken}`,
+      },
+    })
+    if (!res.ok) {
+      console.warn('❌ Failed to list keys from API')
+      return []
+    }
+    const data = await res.json()
+    return data.result?.map(k => k.name) || []
+  }
+
+  const fetchValuesFromAPI = async (keys) => {
+    const { cfAccountId, cfKVNamespaceId, cfApiToken } = config
+    const results = []
+    for (const key of keys) {
+      const res = await fetch(`https://api.cloudflare.com/client/v4/accounts/${cfAccountId}/storage/kv/namespaces/${cfKVNamespaceId}/values/${key}`, {
+        headers: {
+          Authorization: `Bearer ${cfApiToken}`,
+        },
+      })
+      if (res.ok) {
+        const text = await res.text()
+        results.push({ key, value: text })
+      }
+    }
+    return results
+  }
+
+  // Local KV available
+  if (typeof MY_KV !== 'undefined') {
+    const keys = await MY_KV.list({ prefix })
+    const values = []
+    for (const key of keys.keys || []) {
+      const value = await MY_KV.get(key.name)
+      values.push({ key: key.name, value })
+    }
+
+    if (values.length > 0) {
+      console.warn('✅ Retrieved from local KV')
+      return values
+    }
+
+    if (isDev) {
+      console.warn('🔍 No local matches, trying API fallback (dev only)')
+      const remoteKeys = await fetchKeysFromAPI()
+      return await fetchValuesFromAPI(remoteKeys)
+    }
+
+    console.warn('🚫 No results and no API fallback in production')
+    return []
+  }
+
+  // No KV available
+  if (isDev) {
+    console.warn('🌐 No KV available, fetching from API (dev only)')
+    const remoteKeys = await fetchKeysFromAPI()
+    return await fetchValuesFromAPI(remoteKeys)
+  }
+
+  console.warn('🚫 No KV and no API fallback in production')
+  return []
+}

package/server/utils/putKV.js

@@ -0,0 +1,63 @@
+import { useRuntimeConfig } from '#imports'
+
+export async function putKVValue(key, value, context) {
+  const config = useRuntimeConfig()
+  const isDev = import.meta.dev
+  const MY_KV = context?.cloudflare?.env?.MY_KV
+
+  // Auto-stringify objects and arrays
+  let toStore = value
+  if (typeof value === 'object' && value !== null) {
+    value.key = key // Ensure the key is part of the stored value
+    try {
+      toStore = JSON.stringify(value)
+    }
+    catch (e) {
+      console.warn('⚠️ Failed to stringify value:', e)
+      return false
+    }
+  }
+
+  const writeToAPI = async () => {
+    const { cfAccountId, cfKVNamespaceId, cfApiToken } = config
+    const url = `https://api.cloudflare.com/client/v4/accounts/${cfAccountId}/storage/kv/namespaces/${cfKVNamespaceId}/values/${key}`
+    const res = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Authorization': `Bearer ${cfApiToken}`,
+        'Content-Type': 'text/plain',
+      },
+      body: toStore,
+    })
+    if (!res.ok) {
+      console.warn('❌ Remote write failed:', await res.text())
+      return false
+    }
+    return true
+  }
+
+  // Always try local KV first if available
+  if (typeof MY_KV !== 'undefined') {
+    try {
+      await MY_KV.put(key, toStore)
+      console.log('✅ Wrote to local KV')
+    }
+    catch (e) {
+      console.warn('⚠️ Failed to write to local KV:', e)
+    }
+  }
+
+  // Dev mode: also sync up to the Cloudflare API
+  if (isDev) {
+    console.log('🛠 Dev mode – syncing write to API')
+    return await writeToAPI()
+  }
+
+  // Production: only write to API if no KV available
+  if (typeof MY_KV === 'undefined') {
+    console.log('🌐 No KV available, writing directly to API')
+    return await writeToAPI()
+  }
+
+  return true
+}

package/server/utils/sendEmail.js

@@ -0,0 +1,67 @@
+import { useRuntimeConfig } from '#imports'
+
+export async function sendEmail(toEmail, fromEmail, replyToEmail, subject, messageText, messageHtml) {
+  const config = useRuntimeConfig()
+  const apiKey = config.sendgridApiKey || process.env.NUXT_SENDGRID_API_KEY
+
+  if (!apiKey) {
+    throw new Error('SendGrid API key is missing. Set NUXT_SENDGRID_API_KEY in your environment.')
+  }
+
+  if (!toEmail || !fromEmail) {
+    throw new Error('Both toEmail and fromEmail are required.')
+  }
+
+  if (!subject) {
+    throw new Error('Email subject is required.')
+  }
+
+  if (!messageText && !messageHtml) {
+    throw new Error('At least one of messageText or messageHtml must be provided.')
+  }
+
+  const payload = {
+    personalizations: [
+      {
+        to: [{ email: toEmail }],
+      },
+    ],
+    from: { email: fromEmail },
+    subject,
+    content: [],
+  }
+
+  if (replyToEmail) {
+    payload.reply_to = { email: replyToEmail }
+  }
+
+  if (messageText) {
+    payload.content.push({
+      type: 'text/plain',
+      value: messageText,
+    })
+  }
+
+  if (messageHtml) {
+    payload.content.push({
+      type: 'text/html',
+      value: messageHtml,
+    })
+  }
+
+  const response = await fetch('https://api.sendgrid.com/v3/mail/send', {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (!response.ok) {
+    const errorBody = await response.text()
+    throw new Error(`SendGrid request failed with status ${response.status}: ${errorBody}`)
+  }
+
+  return true
+}

package/set-wrangler-secrets.sh

@@ -0,0 +1,75 @@
+#!/usr/bin/env sh
+# POSIX-compatible script.
+# Purpose: Read .env.wrangler and upload **all** keys as Cloudflare Pages **Secrets**.
+# - No wrangler.toml modifications
+# - No REST API usage
+# - Works even if .env.wrangler has no trailing newline
+# - Skips blank lines and comments, trims whitespace, strips surrounding quotes
+#
+# Usage:
+#   export CF_PAGES_PROJECT=openhousemap   # optional but recommended
+#   chmod +x set-wrangler-secrets.sh
+#   ./set-wrangler-secrets.sh
+
+set -eu
+
+ENV_FILE=".env.wrangler"
+
+# Optional: pin the Pages project (avoids prompts)
+CF_PAGES_PROJECT="${CF_PAGES_PROJECT-}"
+
+wrangler_pages() {
+  if [ -n "$CF_PAGES_PROJECT" ]; then
+    npx wrangler pages "$@" --project-name "$CF_PAGES_PROJECT"
+  else
+    npx wrangler pages "$@"
+  fi
+}
+
+if [ ! -f "$ENV_FILE" ]; then
+  echo "❌ File $ENV_FILE not found!" >&2
+  exit 1
+fi
+
+echo "🔐 Uploading ALL entries in $ENV_FILE as Cloudflare Pages Secrets..."
+
+# Read raw lines, process each exactly once
+while IFS= read -r raw || [ -n "$raw" ]; do
+  # Trim surrounding whitespace from the whole line
+  line=$(printf '%s' "$raw" | awk '{$1=$1};1')
+
+  # Skip blanks and comments
+  [ -z "$line" ] && continue
+  first_char=$(printf '%s' "$line" | cut -c1)
+  [ "$first_char" = "#" ] && continue
+
+  # Split only on the first '='
+  case "$line" in
+    *=*)
+      key=${line%%=*}
+      value=${line#*=}
+      ;;
+    *)
+      # No '=', skip
+      continue
+      ;;
+  esac
+
+  # Trim key/value
+  key=$(printf '%s' "$key" | awk '{$1=$1};1')
+  value=$(printf '%s' "$value" | awk '{$1=$1};1')
+
+  # Strip surrounding double quotes from value
+  case "$value" in
+    \"*\") value=$(printf '%s' "$value" | sed 's/^"//;s/"$//') ;;
+  esac
+
+  # Skip empty key names defensively
+  [ -z "$key" ] && continue
+
+  echo "🔑 SECRET → Cloudflare Pages: $key"
+  printf '%s' "$value" | wrangler_pages secret put "$key"
+
+done < "$ENV_FILE"
+
+echo "✅ Done. All keys uploaded as Secrets."

package/wrangler.toml

@@ -1,3 +1,7 @@
+name = "edgeproject"
+compatibility_date = "2024-09-23"
+pages_build_output_dir = "dist"
+
 [[kv_namespaces]]
 binding = "MY_KV"
 id = "ce7ff0d3eb6f43ae84611b5d9e28b6f1"

package/app/pages/[...404].vue

@@ -1,33 +0,0 @@
-<script setup>
-onMounted(() => {
-  console.log('Hello world.')
-})
-</script>
-
-<template>
-  <Head>
-    <Title>Edge Website - An awesome Edge website</Title>
-    <Meta name="description" content="This is an Edge website template" />
-    <Link rel="canonical" href="https://edgemarketingdesign.com/" />
-  </Head>
-
-  <titleSection
-    page="404"
-    headline="404 - Page Not Found"
-  />
-  <div class="min-h-[calc(100vh_-_586px)] w-full items-center justify-center flex flex-col">
-    <h1 class="text-6xl font-bold mb-4">
-      404
-    </h1>
-    <p class="text-xl mb-2">
-      Page Not Found
-    </p>
-    <p class="text-md text-gray-400 mb-6">
-      Looks like this page took an early return and never came back.<br />
-      Maybe it hit a <code class="bg-gray-800 px-1 py-0.5 rounded">null pointer</code>... or just rage-quit the DOM.
-    </p>
-    <a href="/" class="px-6 py-2 mt-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
-      Go Home & Debug Later
-    </a>
-  </div>
-</template>