@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/CHANGELOG.md

@@ -1,13 +1,13 @@
-# Changelog
-
-## [0.3.0] - 2025-08-10
-- Added `deepmerge` for safer `package.json` and configuration updates.
-- Updated `bin/init.js` to avoid overwriting existing files and create backups.
-- Created `scripts/update.js` with user confirmation and backup functionality.
-- Improved update process to preserve local modifications by only copying new files.
-- Removed automatic file copying on `npm install`.
-
-## [0.2.23] - Previous
-- Initial release with basic project scaffolding.
-- Included Next.js, Tailwind CSS, and Radix UI components.
+# Changelog
+
+## [0.3.0] - 2025-08-10
+- Added `deepmerge` for safer `package.json` and configuration updates.
+- Updated `bin/init.js` to avoid overwriting existing files and create backups.
+- Created `scripts/update.js` with user confirmation and backup functionality.
+- Improved update process to preserve local modifications by only copying new files.
+- Removed automatic file copying on `npm install`.
+
+## [0.2.23] - Previous
+- Initial release with basic project scaffolding.
+- Included Next.js, Tailwind CSS, and Radix UI components.
 - Basic update script that overwrote files without robust merging.

package/LICENSE

@@ -1,7 +1,7 @@
-Copyright © 2025 [Gabriel Labbate / DevVista]
-
-All rights reserved.
-
-This software is proprietary and confidential. You may not copy, use, modify, distribute, or disclose any part of this code without explicit, written permission from the copyright holder.
-
+Copyright © 2025 [Gabriel Labbate / DevVista]
+
+All rights reserved.
+
+This software is proprietary and confidential. You may not copy, use, modify, distribute, or disclose any part of this code without explicit, written permission from the copyright holder.
+
 Unauthorized use is strictly prohibited and may result in legal action.

package/README.md

@@ -1,15 +1,55 @@
-### Instructions for DevVistaTech to Create a New Website
-
-- Create a new project folder and navigate to it: `mkdir my-project && cd my-project`
-- Initialize a Node.js project: `npm init -y`
-- Install the @devvistatech/devvista-kit package: `npm install --save @devvistatech/devvista-kit@latest`
-- Initialize the project with the prebuilt template: `npx devvista-kit`
-- Start the development server: `npm run dev`
-
-### Updating the npm Package with the Latest Version
-
-- Increment the package version: `npm version patch  # e.g., to 0.1.8`
-- Stage all changes: `git add .`
-- Commit the changes: `git commit -m "Increment version to 0.1.8"`
-- Push to the remote repository: `git push origin main`
-- Update projects with the new version: `npm install --save @devvistatech/devvista-kit@latest && npx devvista-kit`
+### Instructions for DevVistaTech to Create a New Website
+
+- Create a new project folder and navigate to it: `mkdir my-project && cd my-project`
+- Initialize a Node.js project: `npm init -y`
+- Install the @devvistatech/devvista-kit package: `npm install --save @devvistatech/devvista-kit@latest`
+- Initialize the project with the prebuilt template: `npx devvista-kit`
+- Start the development server: `npm run dev`
+
+Now after install, the steps to set up a repo:
+$ rm -rf .git
+$ git init
+$ cat .gitignore
+node_modules/
+$ git add .
+git remote add origin https://github.com/DevVistaTech/reponame.git
+git push -f -u origin main
+
+### Updating the npm Package with the Latest Version
+
+- Increment the package version: `npm version patch  # e.g., to 0.1.8`
+- Stage all changes: `git add .`
+- Commit the changes: `git commit -m "Increment version to 0.1.8"`
+- Push to the remote repository: `git push origin main`
+- Update projects with the new version: `npm install --save @devvistatech/devvista-kit@latest && npx devvista-kit`
+
+
+### Instructions to Set Up Environment VariablesGOOGLE_ANALYTICS_CLIENT_EMAIL & GOOGLE_ANALYTICS_PRIVATE_KEY Go to console.cloud.google.com.
+Navigate to IAM & Admin > Service Accounts.
+Click + Create Service Account, name it (e.g., "devvistatest"), and create.
+Click the service account, go to Keys > Add Key > Create New Key, select JSON, and download.
+Open the JSON file:client_email is the email (e.g., devvistatest@devvista-test.iam.gserviceaccount.com).
+private_key is the key (e.g., -----BEGIN PRIVATE KEY-----\n[long string]\n-----END PRIVATE KEY-----), copy it exactly with all \n newlines.
+
+GOOGLE_ANALYTICS_PROPERTY_ID
+Go to analytics.google.com.
+Select "Gabriel Labbate" account, then "DevVista" property.
+Go to Admin > Property Settings > Property Details; note the Property ID (e.g., 479012946).
+
+NEXT_PUBLIC_GA_MEASUREMENT_ID
+In analytics.google.com, select "Gabriel Labbate" account and "DevVista" property.
+Go to Admin > Data Streams, select your stream, and note the Measurement ID (e.g., G-VX3LV8FCS8).
+
+Add Service Account to PermissionsIn analytics.google.com, select "Gabriel Labbate" account and "DevVista" property.
+Go to Admin > Account Access Management.
+Click +, enter devvistatest@devvista-test.iam.gserviceaccount.com, assign Viewer role, and click Add. Wait 5-10 minutes for propagation.
+
+Save VariablesAdd to your .env file:
+
+GOOGLE_ANALYTICS_CLIENT_EMAIL=devvistatest@devvista-test.iam.gserviceaccount.com
+GOOGLE_ANALYTICS_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIIEvwIBADANBgkqhkikVXFFwjmA==\n-----END PRIVATE KEY----- //This is an example
+GOOGLE_ANALYTICS_PROPERTY_ID=47934342 //This is an example
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-VX3SDFDF //This is an example
+
+Troubleshooting StepsRestart Application: After saving the .env file, stop your Next.js app (e.g., Ctrl+C) and restart it (e.g., npm run dev). Clear the .next folder and rebuild if needed.
+

package/app/ClientLayout.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ThemeProvider } from "@/components/theme-provider";
+import { AuthProvider } from "@/lib/auth/auth-context";
+import Navbar from "@/components/navBars/navbar";
+import Banner from "@/components/addOns/functional/banner/Banner";
+import { Toaster } from "@/components/other/toaster";
+import Footer from "@/components/footers/footer";
+import IconBubble from "@/components/addOns/non-functional/IconBubble";
+import { useAuth } from "@clerk/nextjs";
+import Spinner from "@/components/addOns/non-functional/spinner";
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  const [hasError, setHasError] = useState(false);
+  const { isLoaded } = useAuth();
+
+  useEffect(() => {
+    setHasError(false);
+    const handleError = (event: ErrorEvent) => {
+      console.error("Global error:", {
+        message: event.message,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        error: event.error,
+      });
+    };
+    window.addEventListener("error", handleError);
+    return () => window.removeEventListener("error", handleError);
+  }, []);
+
+  if (!isLoaded) {
+    console.log("ClientLayout: Waiting for auth to load");
+    return <Spinner />;
+  }
+
+  if (hasError) {
+    console.log("ClientLayout: Rendering error state");
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-background text-foreground">
+        <h1 className="text-2xl font-bold">Something went wrong</h1>
+        <p className="mt-2 text-gray-600">Please refresh the page or try again later.</p>
+      </div>
+    );
+  }
+
+  console.log("ClientLayout: Rendering main layout");
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      <AuthProvider>
+        <Navbar />
+        <Banner />
+        <main className="min-h-screen w-full">{children}</main>
+        <Toaster />
+        <Footer />
+        <IconBubble />
+      </AuthProvider>
+    </ThemeProvider>
+  );
+}

package/app/about/page.tsx

@@ -1,299 +1,62 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { useRef, useState, useEffect } from "react";
-import { BioSection } from "@/components/addOns/functional/BioEditor";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { useAuth, useUser } from "@clerk/nextjs";
-import Testimonials from "@/components/addOns/non-functional/Testimonials";
-import { ABOUT_PAGE } from "../../lib/constants/about";
-
-interface BioContent {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  bio: boolean;
-  about: boolean;
-  image?: { url: string; id: number };
-  createdAt: string;
-}
-
-export default function AboutPage() {
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken } = useAuth();
-  const { user: clerkUser, isSignedIn } = useUser();
-  const [isMobile, setIsMobile] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [bioImageUrl, setBioImageUrl] = useState<string | null>(null);
-  const [bioText, setBioText] = useState<string | null>(null);
-  const [bioTitle, setBioTitle] = useState<string | null>(null);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isEditModalOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isEditModalOpen]);
-
-  useEffect(() => {
-    const debounce = (fn: () => void, delay: number) => {
-      let timeout: NodeJS.Timeout;
-      return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(fn, delay);
-      };
-    };
-
-    const checkMobile = debounce(() => {
-      setIsMobile(window.innerWidth < 768);
-    }, 100);
-
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-
-  useEffect(() => {
-    const handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener("user-login", handleLogin);
-    window.removeEventListener("user-logout", handleLogout);
-    return () => {
-      window.removeEventListener("user-login", handleLogin);
-      window.removeEventListener("user-logout", handleLogout);
-    };
-  }, [checkSession]);
-
-  useEffect(() => {
-    const fetchBioData = async () => {
-      setIsLoading(true);
-      try {
-        const response = await fetch("/api/bio", {
-          headers: { "Content-Type": "application/json" },
-        });
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || ABOUT_PAGE.ERRORS.FETCH_BIO_FAILED);
-        }
-        const result = await response.json();
-        if (result.data) {
-          const bioData: BioContent = result.data;
-          setBioImageUrl(bioData.image?.url || null);
-          setBioText(bioData.description || null);
-          setBioTitle(bioData.title || null);
-        } else {
-          throw new Error(ABOUT_PAGE.ERRORS.BIO_NOT_FOUND);
-        }
-      } catch (err) {
-        console.error("Fetch Error:", err);
-        setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.FETCH_BIO_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchBioData();
-  }, []);
-
-  const handlePatchSubmit = async (
-    e: React.FormEvent,
-    formTitle: string,
-    formDescription: string,
-    formImage: File | null,
-    onSuccess: () => void
-  ) => {
-    e.preventDefault();
-    if (!user?.businessAdminId) {
-      console.error("No user or businessAdminId:", { user, businessAdminId: user?.businessAdminId });
-      setError(ABOUT_PAGE.ERRORS.UNAUTHORIZED_UPDATE);
-      return;
-    }
-
-    try {
-      const formData = new FormData();
-      if (formTitle && formTitle !== bioTitle) {
-        formData.append("title", formTitle);
-      }
-      if (formDescription && formDescription !== bioText) {
-        formData.append("description", formDescription);
-      }
-      if (formImage) {
-        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
-          throw new Error(ABOUT_PAGE.ERRORS.INVALID_IMAGE_TYPE);
-        }
-        formData.append("image", formImage);
-      }
-
-      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
-        onSuccess();
-        return;
-      }
-
-      const token = await getToken();
-      if (!token) {
-        throw new Error(ABOUT_PAGE.ERRORS.NO_AUTH_TOKEN);
-      }
-
-      const response = await fetch("/api/bio", {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      const result = await response.json();
-      if (!response.ok) {
-        throw new Error(result.error || ABOUT_PAGE.ERRORS.UPDATE_BIO_FAILED);
-      }
-
-      if (result.data) {
-        const bioData: BioContent = result.data;
-        setBioImageUrl(bioData.image?.url || null);
-        setBioText(bioData.description || null);
-        setBioTitle(bioData.title || null);
-        setError(null);
-        onSuccess();
-      }
-    } catch (err) {
-      console.error("Update Error:", err);
-      setError(err instanceof Error ? err.message : ABOUT_PAGE.ERRORS.UPDATE_BIO_ERROR);
-    }
-  };
-
-  const sectionVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-    hover: {
-      scale: isMobile ? 1 : 1.05,
-      transition: { duration: 0.2, ease: "easeOut" },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="min-h-screen w-full bg-[#F7F7F7] relative flex flex-col">
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        }
-
-        .gradient-text {
-          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(12px);
-          -webkit-backdrop-filter: blur(12px);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
-          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-        }
-
-        @supports not (backdrop-filter: blur(12px)) {
-          .glassmorphism {
-            background: rgba(255, 255, 255, 0.3);
-          }
-        }
-
-        .glassmorphism:hover {
-          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
-        }
-
-        @media (max-width: 768px) {
-          .glassmorphism {
-            padding: 1rem;
-          }
-          .gradient-text {
-            font-size: 2.5rem;
-          }
-        }
-
-        .line-clamp-8 {
-          display: -webkit-box;
-          -webkit-line-clamp: 8;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-      `}</style>
-      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white">
-        <motion.h1
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
-        >
-          {ABOUT_PAGE.UI.MAIN_HEADING}
-        </motion.h1>
-        <BioSection
-          user={user}
-          authLoading={authLoading}
-          bioImageUrl={bioImageUrl}
-          bioText={bioText}
-          bioTitle={bioTitle}
-          error={error}
-          isLoading={isLoading}
-          setBioImageUrl={setBioImageUrl}
-          setBioText={setBioText}
-          setBioTitle={setBioTitle}
-          setError={setError}
-          handlePatchSubmit={handlePatchSubmit}
-        />
-        <Testimonials isMobile={isMobile} />
-        <div className="px-20 py-52 sm:py-52 pt-32">
-          <h1 className="text-2xl sm:text-3xl font-extrabold pb-12 uppercase">
-            {ABOUT_PAGE.UI.SUCCESS_STORY_HEADING}
-          </h1>
-          <p>{ABOUT_PAGE.UI.SUCCESS_STORY_TEXT}</p>
-        </div>
-      </div>
-    </div>
-  );
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { BioSection } from "@/components/addOns/functional/bioSections/BioEditor";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { useUser } from "@clerk/nextjs";
+import Testimonials from "@/components/addOns/non-functional/Testimonials";
+import { ABOUT_PAGE } from "../../lib/constants/about";
+
+export default function AboutPage() {
+  const { user, authLoading } = useStrapiAuth();
+  const { isSignedIn } = useUser();
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const debounce = (fn: () => void, delay: number) => {
+      let timeout: NodeJS.Timeout;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  if (authLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full bg-natural-white relative flex flex-col font-inter">
+      <div className="w-full pt-20 lg:pt-40 flex-grow relative z-10 px-4 sm:px-6 lg:px-8 bg-white">
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg pt-36 sm:pt-32"
+        >
+          {ABOUT_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+        <BioSection user={user} isSignedIn={isSignedIn} />
+        <Testimonials isMobile={isMobile} />
+        <div className="px-20 py-52 sm:py-52 pt-32">
+          <h1 className="text-2xl sm:text-3xl font-extrabold pb-12 uppercase">
+            {ABOUT_PAGE.UI.SUCCESS_STORY_HEADING}
+          </h1>
+          <p>{ABOUT_PAGE.UI.SUCCESS_STORY_TEXT}</p>
+        </div>
+      </div>
+    </div>
+  );
 }