@edgedev/create-edge-site 1.0.13 → 1.0.15

package/{components → 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/{components → app/components}/edgeScrollRevealAnim.vue

@@ -1,8 +1,9 @@
 <script setup>
-import ScrollReveal from 'scrollreveal'
 import { onMounted } from 'vue'
 
-function initObserver() {
+onMounted(async () => {
+  const ScrollReveal = (await import('scrollreveal')).default
+
   const rows = document.querySelectorAll('.sr-row')
 
   const observer = new IntersectionObserver((entries, obs) => {
@@ -21,18 +22,14 @@ function initObserver() {
           reset: false,
         })
 
-        obs.unobserve(row) // only trigger once
+        obs.unobserve(row)
       }
     })
   }, {
-    threshold: 0.3, // only trigger when 30% of the row is visible
+    threshold: 0.3,
   })
 
   rows.forEach(row => observer.observe(row))
-}
-
-onMounted(() => {
-  initObserver()
 })
 </script>
 

package/{components → 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/{directives → app/directives}/scrollReveal.ts

@@ -15,7 +15,7 @@ const scrollReveal: ObjectDirective = {
 
     const observer = new IntersectionObserver(
       ([entry]) => {
-        if (entry.isIntersecting) {
+        if (entry && entry.isIntersecting) {
           setTimeout(() => {
             el.classList.remove('opacity-0', 'translate-y-8')
             el.classList.add('opacity-100', 'translate-y-0')

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

@@ -0,0 +1,30 @@
+<script setup>
+import { useAsyncData } from '#imports'
+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()
+})
+</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,33 @@
+<script setup>
+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()
+})
+</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/{pages → app/pages}/contact.vue

@@ -30,7 +30,7 @@ onMounted(() => {
   <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/" />
+    <Link rel="canonical" href="https://edgemarketingdesign.com/contact" />
   </Head>
 
   <titleSection

package/{pages → 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/{pages → app/pages}/stuff.vue

@@ -8,7 +8,7 @@ onMounted(() => {
   <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/" />
+    <Link rel="canonical" href="https://edgemarketingdesign.com/stuff" />
   </Head>
 
   <titleSection

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

@@ -2,6 +2,9 @@ import process from 'node:process'
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
+  future: {
+    compatibilityVersion: 4,
+  },
   ssr: true,
   nitro: {
     preset: 'cloudflare-pages',
@@ -29,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.13",
+  "version": "1.0.15",
   "description": "Create Edge Starter Site",
   "bin": {
     "create-edge-site": "./bin/cli.js"
@@ -15,10 +15,12 @@
   },
   "dependencies": {
     "@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",
+    "better-sqlite3": "^12.2.0",
     "nuxt": "^3.16.1",
     "scrollreveal": "^4.0.9",
     "swiper": "^11.2.6",
@@ -31,6 +33,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^4.11.0",
     "eslint": "^9",
+    "eslint-plugin-nuxt": "^4.0.0",
     "nitro-cloudflare-dev": "^0.2.2",
     "wrangler": "^4.14.4"
   }

package/scripts/generateImageManifest.mjs

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
-const rootFolder = 'public/images'
+const rootFolder = '../public/images'
 const output = {}
 
 async function scanFolder(dirPath) {

package/server/api/images/[...path].ts

@@ -1,3 +1,5 @@
+import { readFile } from 'fs/promises'
+import { join } from 'path'
 export default defineEventHandler(async (event) => {
   const rawParam = event.context.params?.path;
   const pathSegments = Array.isArray(rawParam)
@@ -9,8 +11,9 @@ export default defineEventHandler(async (event) => {
   const requestedPath = pathSegments.join('/');
 
   try {
-    const manifestModule = await import('~/public/images/image-manifest.json');
-    const manifest = manifestModule.default;
+    const manifestPath = join(process.cwd(), 'public/images/image-manifest.json');
+    const raw = await readFile(manifestPath, 'utf-8');
+    const manifest = JSON.parse(raw);
 
     if (!manifest || typeof manifest !== 'object') {
       return sendError(event, createError({

package/server/api/images/index.ts

@@ -1,7 +1,11 @@
+import { readFile } from 'fs/promises'
+import { join } from 'path'
+
 export default defineEventHandler(async (event) => {
   try {
-    const manifestModule = await import('~/public/images/image-manifest.json');
-    const manifest = manifestModule.default;
+    const manifestPath = join(process.cwd(), 'public/images/image-manifest.json');
+    const raw = await readFile(manifestPath, 'utf-8');
+    const manifest = JSON.parse(raw);
 
     return { images: manifest };
   } catch (err) {

package/server/api/kv/[key].ts

@@ -1,4 +1,4 @@
-import { getKVValue } from '~/server/utils/getKV'
+import { getKVValue } from '../../../server/utils/getKV'
 
 export default defineEventHandler(async (event) => {
   const { key } = getRouterParams(event)

package/server/routes/sitemap.xml.ts

@@ -0,0 +1,33 @@
+export default defineEventHandler(async (event) => {
+  const host =
+    event.node?.req?.headers?.host ||
+    event.req?.headers?.['host'] ||
+    'localhost'
+
+  const protocol = host.startsWith('localhost') ? 'http' : 'https'
+  const baseURL = `${protocol}://${host.replace(/^www\./, '')}`
+
+  // Your routes here
+  const routes = [
+    '', // homepage
+    'stuff',
+    'contact',
+  ]
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  ${routes
+    .map(
+      (path) => `
+    <url>
+      <loc>${baseURL}/${path}</loc>
+      <changefreq>monthly</changefreq>
+      <priority>0.7</priority>
+    </url>`
+    )
+    .join('')}
+</urlset>`
+
+  event.node.res.setHeader('Content-Type', 'application/xml')
+  return sitemap
+})

package/tailwind.config.js

@@ -1,27 +1,27 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    content: [
-      "./components/**/*.{vue,js,ts}",
-      "./layouts/**/*.{vue,js,ts}",
-      "./pages/**/*.{vue,js,ts}",
-      "./app.vue",
-    ],
-    theme: {
-      extend: {
-        colors: {
-          dblue: "#30464C", // Dark Blue
-          mblue: "#46616F", // Medium Blue
-          lgray: "#A2A8AE", // Light Gray
-          lblue: "#87B4B7", // Light Blue
-          burntorange: "#B65B33", // Burnt Orange
-          tan: "#BDA86A", // Tan
-          cream: "#D9D0C4", // Cream
-        },
-        fontFamily: {
-          sans: ["Overpass", "sans-serif"],
-          serif: ["Rokkitt", "serif"],
-        },
+  content: [
+    './app/components/**/*.{vue,js,ts}',
+    './app/layouts/**/*.{vue,js,ts}',
+    './app/pages/**/*.{vue,js,ts}',
+    './app/app.vue',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        dblue: '#30464C', // Dark Blue
+        mblue: '#46616F', // Medium Blue
+        lgray: '#A2A8AE', // Light Gray
+        lblue: '#87B4B7', // Light Blue
+        burntorange: '#B65B33', // Burnt Orange
+        tan: '#BDA86A', // Tan
+        cream: '#D9D0C4', // Cream
+      },
+      fontFamily: {
+        sans: ['Overpass', 'sans-serif'],
+        serif: ['Rokkitt', 'serif'],
       },
     },
-    plugins: [],
-  };
+  },
+  plugins: [],
+}