From 8cdb57c9d1d4b0da82a3eb00debd594d7b35d574 Mon Sep 17 00:00:00 2001
From: Josephat-S <sangwajozaphat@gmail.com>
Date: Mon, 25 May 2026 13:26:35 +0200
Subject: [PATCH] add security and dependency injection

---
 src/generate.js                               | 15 +++++++--
 .../ecommerce/nextjs-monolith/app/layout.tsx  | 26 ++++++++++++---
 .../components/AnimationProvider.tsx          | 32 +++++++++++++++++++
 .../portfolio/nextjs-monolith/app/layout.tsx  | 16 +++++++++-
 .../components/AnimationProvider.tsx          | 32 +++++++++++++++++++
 templates/portfolio/nextjs-monolith/env.mjs   |  9 ++++++
 templates/portfolio/nextjs-monolith/lib/db.ts | 17 ++++++++++
 7 files changed, 139 insertions(+), 8 deletions(-)
 create mode 100644 templates/ecommerce/nextjs-monolith/components/AnimationProvider.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/components/AnimationProvider.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/env.mjs
 create mode 100644 templates/portfolio/nextjs-monolith/lib/db.ts

diff --git a/src/generate.js b/src/generate.js
index 63b64ee..6ae2b40 100644
--- a/src/generate.js
+++ b/src/generate.js
@@ -5,6 +5,12 @@ import ora from 'ora';
 import tiged from 'tiged';
 import Handlebars from 'handlebars';
 import { execSync } from 'child_process';
+import { resolveDependencies } from './dependencies.js';
+
+// Register custom Handlebars helpers
+Handlebars.registerHelper('eq', function (a, b) {
+  return a === b;
+});
 
 // Helper function to recursively find all files in a directory
 function getAllFiles(dirPath, arrayOfFiles = []) {
@@ -68,7 +74,7 @@ export async function generateProject(config) {
     const allFiles = getAllFiles(projectPath);
 
     for (const file of allFiles) {
-      if (file.match(/\.(tsx|ts|json|md|html|css)$/)) {
+      if (file.match(/\.(tsx|ts|json|md|html|css|mjs)$/)) {
         let content = fs.readFileSync(file, 'utf-8');
         if (content.includes('{{')) {
           const template = Handlebars.compile(content);
@@ -83,7 +89,10 @@ export async function generateProject(config) {
     const configFilePath = path.join(projectPath, 'opusify.config.json');
     fs.writeFileSync(configFilePath, JSON.stringify(config, null, 2));
 
-    // 5. AUTOMATION PHASE: Install Dependencies
+    // 5. Resolve dynamic dependencies based on user choices
+    resolveDependencies(projectPath, config);
+
+    // 6. AUTOMATION PHASE: Install Dependencies
     const installSpinner = ora('Installing dependencies (this might take a minute)...').start();
     try {
       execSync('npm install', { cwd: projectPath, stdio: 'pipe' });
@@ -92,7 +101,7 @@ export async function generateProject(config) {
       installSpinner.fail('Could not install dependencies. You may need to run npm install manually.');
     }
 
-    // 6. Git Initialization
+    // 7. Git Initialization
     if (config.initGit) {
       const gitSpinner = ora('Initializing Git repository...').start();
       try {
diff --git a/templates/ecommerce/nextjs-monolith/app/layout.tsx b/templates/ecommerce/nextjs-monolith/app/layout.tsx
index d4c0344..f51a6dc 100644
--- a/templates/ecommerce/nextjs-monolith/app/layout.tsx
+++ b/templates/ecommerce/nextjs-monolith/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import './globals.css';
+import AnimationProvider from '../components/AnimationProvider';
+{{#if (eq design "Dark Terminal")}}
+import { Terminal } from 'lucide-react';
+{{/if}}
 
 export const metadata: Metadata = {
   title: '{{projectName}} - Store',
@@ -18,7 +22,10 @@ function Navbar() {
   return (
     <header className="border-b border-border bg-card">
       <nav className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        <Link href="/" className="text-xl font-bold text-primary">
+        <Link href="/" className="text-xl font-bold text-primary flex items-center gap-2">
+          {{#if (eq design "Dark Terminal")}}
+          <Terminal className="w-5 h-5" />
+          {{/if}}
           {{projectName}}
         </Link>
         <ul className="flex gap-6">
@@ -41,7 +48,10 @@ function Navbar() {
 function Sidebar() {
   return (
     <aside className="w-64 border-r border-border bg-card min-h-screen p-6">
-      <Link href="/" className="text-xl font-bold text-primary block mb-8">
+      <Link href="/" className="text-xl font-bold text-primary flex items-center gap-2 mb-8">
+        {{#if (eq design "Dark Terminal")}}
+        <Terminal className="w-5 h-5" />
+        {{/if}}
         {{projectName}}
       </Link>
       <nav>
@@ -75,12 +85,20 @@ export default function RootLayout({
         {useSidebar ? (
           <div className="flex">
             <Sidebar />
-            <main className="flex-1">{children}</main>
+            <main className="flex-1">
+              <AnimationProvider>
+                {children}
+              </AnimationProvider>
+            </main>
           </div>
         ) : (
           <>
             <Navbar />
-            <main>{children}</main>
+            <main>
+              <AnimationProvider>
+                {children}
+              </AnimationProvider>
+            </main>
           </>
         )}
       </body>
diff --git a/templates/ecommerce/nextjs-monolith/components/AnimationProvider.tsx b/templates/ecommerce/nextjs-monolith/components/AnimationProvider.tsx
new file mode 100644
index 0000000..feaf51c
--- /dev/null
+++ b/templates/ecommerce/nextjs-monolith/components/AnimationProvider.tsx
@@ -0,0 +1,32 @@
+{{#if (eq design "Glassmorphism")}}
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function AnimationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial=\{{ opacity: 0, y: 20 }}
+        animate=\{{ opacity: 1, y: 0 }}
+        exit=\{{ opacity: 0, y: -20 }}
+        transition=\{{ duration: 0.3 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+{{else}}
+export default function AnimationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
+{{/if}}
diff --git a/templates/portfolio/nextjs-monolith/app/layout.tsx b/templates/portfolio/nextjs-monolith/app/layout.tsx
index 769d97d..dcc7872 100644
--- a/templates/portfolio/nextjs-monolith/app/layout.tsx
+++ b/templates/portfolio/nextjs-monolith/app/layout.tsx
@@ -1,5 +1,9 @@
 import type { Metadata } from 'next';
 import './globals.css';
+import AnimationProvider from '../components/AnimationProvider';
+{{#if (eq design "Dark Terminal")}}
+import { Terminal } from 'lucide-react';
+{{/if}}
 
 export const metadata: Metadata = {
   title: '{{projectName}} - Portfolio',
@@ -13,7 +17,17 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" data-theme="{{design}}">
-      <body>{children}</body>
+      <body>
+        {{#if (eq design "Dark Terminal")}}
+        <header className="border-b border-border bg-card px-6 py-3 flex items-center gap-2">
+          <Terminal className="w-5 h-5 text-primary" />
+          <span className="font-mono text-sm text-primary">{{projectName}}</span>
+        </header>
+        {{/if}}
+        <AnimationProvider>
+          {children}
+        </AnimationProvider>
+      </body>
     </html>
   );
 }
diff --git a/templates/portfolio/nextjs-monolith/components/AnimationProvider.tsx b/templates/portfolio/nextjs-monolith/components/AnimationProvider.tsx
new file mode 100644
index 0000000..feaf51c
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/components/AnimationProvider.tsx
@@ -0,0 +1,32 @@
+{{#if (eq design "Glassmorphism")}}
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function AnimationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial=\{{ opacity: 0, y: 20 }}
+        animate=\{{ opacity: 1, y: 0 }}
+        exit=\{{ opacity: 0, y: -20 }}
+        transition=\{{ duration: 0.3 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+{{else}}
+export default function AnimationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
+{{/if}}
diff --git a/templates/portfolio/nextjs-monolith/env.mjs b/templates/portfolio/nextjs-monolith/env.mjs
new file mode 100644
index 0000000..64f12a2
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/env.mjs
@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+const envSchema = z.object({
+  DATABASE_URL: z.string().url().optional(),
+  NEXTAUTH_SECRET: z.string().min(32).optional(),
+  NEXTAUTH_URL: z.string().url().optional(),
+});
+
+export const env = envSchema.parse(process.env);
diff --git a/templates/portfolio/nextjs-monolith/lib/db.ts b/templates/portfolio/nextjs-monolith/lib/db.ts
new file mode 100644
index 0000000..7a4f528
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/lib/db.ts
@@ -0,0 +1,17 @@
+import { env } from '../env.mjs';
+
+/**
+ * Database connection using validated environment variables.
+ * The `env` object is validated at build time via Zod (see env.mjs).
+ * This ensures DATABASE_URL is always defined and correctly formatted.
+ */
+
+const globalForDb = globalThis as unknown as {
+  dbUrl: string | undefined;
+};
+
+export const databaseUrl = globalForDb.dbUrl ?? env.DATABASE_URL;
+
+if (process.env.NODE_ENV !== 'production') {
+  globalForDb.dbUrl = databaseUrl;
+}