jamstack-cms · maximoospital · Feb 2, 2025 · Feb 3, 2025
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.next
+.git
diff --git a/README.md b/README.md
@@ -1,7 +1,9 @@
-## Jamstack ECommerce Next
+## Jamstack ECommerce Next Upgraded
 
 Jamstack ECommerce Next provides a way to quickly get up and running with a fully configurable ECommerce site using Next.js.
 
+This fork upgrades it to Node v22 and Next v22 while trying to prevent it from breaking. I also added dockerfile and docker-compose files for easy dockerization.
+
 Out of the box, the site uses completely static data coming from a provider at `providers/inventoryProvider.js`. You can update this provider to fetch data from any real API by changing the call in the `getInventory` function.
 
 ![Home](example-images/1.png)

diff --git a/components/CartLink.js b/components/CartLink.js
@@ -12,15 +12,15 @@ function CartLink(props) {
   }, [])
   let { context: { numberOfItemsInCart = 0 }} = props
   return (
-    <div>
+    (<div>
       <div className="fixed
       sm:top-53 right-24 desktop:right-flexiblemargin
       top-40 z-10">
         <div className="flex flex-1 justify-end pr-4 relative">
-          <Link href="/cart">
-            <a aria-label="Cart">
-              <FaShoppingCart />
-            </a>
+          <Link href="/cart" aria-label="Cart">
+
+            <FaShoppingCart />
+
           </Link>
           {
             renderClientSideComponent && numberOfItemsInCart > Number(0) && (
@@ -29,8 +29,8 @@ function CartLink(props) {
           }
         </div>
       </div>
-    </div>
-  )
+    </div>)
+  );
 }
 
 function CartLinkWithContext(props) {

diff --git a/components/ListItem.js b/components/ListItem.js
@@ -10,14 +10,14 @@ const ListItem = ({ link, title, imageSrc, price }) =>  (
     lg:w-1/4
     p1 sm:p-2
   ">
-    <Link href={`${link}`}>
-      <a aria-label={title}>
-        <div className="h-72 flex justify-center items-center bg-light hover:bg-light-200">
-          <div className="flex flex-column justify-center items-center">
-            <Image alt={title} src={imageSrc} className="w-3/5" />
-          </div>
+    <Link href={`${link}`} aria-label={title}>
+
+      <div className="h-72 flex justify-center items-center bg-light hover:bg-light-200">
+        <div className="flex flex-column justify-center items-center">
+          <Image alt={title} src={imageSrc} className="w-3/5" />
         </div>
-      </a>
+      </div>
+
     </Link>
     <div>
       <p className="m-4 text-center text-l font-semibold mb-1">{title}</p>

diff --git a/components/ViewInventory.js b/components/ViewInventory.js
@@ -44,19 +44,19 @@ class ViewInventory extends React.Component {
   render() {
     const { inventory, currentItem, editingIndex } = this.state
     return (
-      <div>
+      (<div>
         <h2 className="text-3xl">Inventory</h2>
         {
           inventory.map((item, index) => {
             const isEditing = editingIndex === index
             if (isEditing) {
               return (
-                <div className="border-b py-10" key={item.id}>
+                (<div className="border-b py-10" key={item.id}>
                   <div className="flex items-center">
-                    <Link href={`/product/${slugify(item.name)}`}>
-                      <a aria-label={item.name}>
-                        <Image className="w-32 m-0" src={item.image} alt={item.name} />
-                      </a>
+                    <Link href={`/product/${slugify(item.name)}`} aria-label={item.name}>
+
+                      <Image className="w-32 m-0" src={item.image} alt={item.name} />
+
                     </Link>
                     <input
                       onChange={(e) => this.onChange(e, index)}
@@ -86,23 +86,23 @@ class ViewInventory extends React.Component {
                       <p className="text-sm ml-10 m-0">Save</p>
                     </div>
                   </div>
-                </div>
-              )
+                </div>)
+              );
             }
             return (
-              <div className="border-b py-10" key={item.id}>
+              (<div className="border-b py-10" key={item.id}>
                 <div className="flex items-center">
                   <Link href={`/product/${slugify(item.name)}`}>
-                    <a>
-                      <Image className="w-32 m-0" src={item.image} alt={item.name} />
-                    </a>
+
+                    <Image className="w-32 m-0" src={item.image} alt={item.name} />
+
                   </Link>
                   <Link href={`/product/${slugify(item.name)}`}>
-                    <a>
-                      <p className="m-0 pl-10 text-gray-600 text-sm">
-                        {item.name}
-                      </p>
-                    </a>
+
+                    <p className="m-0 pl-10 text-gray-600 text-sm">
+                      {item.name}
+                    </p>
+
                   </Link>
                   <div className="flex flex-1 justify-end">
                     <p className="m-0 pl-10 text-gray-900 text-sm">In stock: {item.currentInventory}</p>
@@ -115,12 +115,12 @@ class ViewInventory extends React.Component {
                     <p role="button" onClick={() => this.editItem(item, index)} className="text-sm ml-10 m-0">Edit</p>
                   </div>
                 </div>
-              </div>
-            )
+              </div>)
+            );
           })
         }
-      </div>
-    )
+      </div>)
+    );
   }
 }
 

diff --git a/components/heroComponents/DisplayMedium.js b/components/heroComponents/DisplayMedium.js
@@ -3,22 +3,22 @@ import Link from 'next/link'
 
 const DisplayMedium = ({ imageSrc, title, subtitle, link }) => {
   return (
-    <div className="
+    (<div className="
     mb-4 lg:mb-0
     bg-light p-8 pb-0 hover:bg-light-200">
-      <Link href={`${link}`}>
-        <a aria-label={title}>
-          <div className="flex flex-column justify-center items-center h-56">
-            <Image src={imageSrc} alt={title} className="w-3/5" />
-          </div>
-          <div className="mb-8">
-            <p className="text-3xl font-semibold mb-1">{title}</p>
-            <p className="text-xs text-gray-700">{subtitle}</p>
-          </div>
-        </a>
+      <Link href={`${link}`} aria-label={title}>
+
+        <div className="flex flex-column justify-center items-center h-56">
+          <Image src={imageSrc} alt={title} className="w-3/5" />
+        </div>
+        <div className="mb-8">
+          <p className="text-3xl font-semibold mb-1">{title}</p>
+          <p className="text-xs text-gray-700">{subtitle}</p>
+        </div>
+
       </Link>
-    </div>
-  )
+    </div>)
+  );
 }
 
 export default DisplayMedium;
diff --git a/components/heroComponents/DisplaySmall.js b/components/heroComponents/DisplaySmall.js
@@ -6,16 +6,16 @@ const DisplaySmall = ({ link, title, subtitle, imageSrc }) =>  (
   <div className="lg:w-flex-fourth bg-light
   px-6 pt-10 pb-2 lg:p-6 lg:pb-0
   hover:bg-light-200 lg:mb-0 mb-4">
-    <Link href={link}>
-      <a aria-label={title}>
-        <div className="flex flex-column justify-center items-center h-32">
-          <Image alt={title} src={imageSrc} className="w-3/5" />
-        </div>
-        <div className="">
-          <p className="text-xl font-semibold mb-1">{title}</p>
-          <p className="text-xs text-gray-700 mb-4">{getTrimmedString(subtitle, 150)}</p>
-        </div>
-      </a>
+    <Link href={link} aria-label={title}>
+
+      <div className="flex flex-column justify-center items-center h-32">
+        <Image alt={title} src={imageSrc} className="w-3/5" />
+      </div>
+      <div className="">
+        <p className="text-xl font-semibold mb-1">{title}</p>
+        <p className="text-xs text-gray-700 mb-4">{getTrimmedString(subtitle, 150)}</p>
+      </div>
+
     </Link>
   </div>
 )

diff --git a/context/mainContext.js b/context/mainContext.js
@@ -61,7 +61,7 @@ class ContextProviderComponent extends React.Component {
       cart, numberOfItemsInCart: cart.length, total: calculateTotal(cart)
     }))
     toast("Successfully added item to cart!", {
-      position: toast.POSITION.TOP_LEFT
+      position: 'top-left'
     })
     this.forceUpdate()
   }

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,16 @@
+version: '3.8'
+
+services:
+  node-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+    restart: unless-stopped
+
diff --git a/dockerfile b/dockerfile
@@ -0,0 +1,12 @@
+# Example Dockerfile for a Node.js application
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+CMD ["npm", "run", "dev"]
diff --git a/layouts/layout.js b/layouts/layout.js
@@ -9,57 +9,54 @@ export default function Layout({ children, categories }) {
     categories = categories.slice(0, navItemLength)
   }
   return (
-    <div>
+    (<div>
       <nav>
         <div className="flex justify-center">
           <div className="
             mobile:px-12 sm:flex-row sm:pt-12 sm:pb-6 desktop:px-0
             px-4 pt-8 flex flex-col w-fw
           ">
             <div className="mb-4 sm:mr-16 max-w-48 sm:max-w-none">
-              <Link href="/">
-                <a aria-label="Home">
-                  <img src="/logo.png" alt="logo" width="90" height="28" />
-                </a>
+              <Link href="/" aria-label="Home">
+
+                <img src="/logo.png" alt="logo" width="90" height="28" />
+
               </Link>
             </div>
             <div className="flex flex-wrap mt-1">
-              <Link href="/">
-                <a aria-label="Home">
-                  <p className="
-                    sm:mr-8 sm:mb-0
-                    mb-4 text-left text-smaller mr-4
-                  ">
-                  Home
-                  </p>
-                </a>
+              <Link href="/" aria-label="Home">
+
+                <p className="
+                  sm:mr-8 sm:mb-0
+                  mb-4 text-left text-smaller mr-4
+                ">
+                Home
+                </p>
+
               </Link>
               {
                 categories.map((category, index) => (
-                  <Link
-                    href={`/category/${slugify(category)}`}
-                    key={index}
-                  >
-                    <a aria-label={category}>
-                      <p className="
-                          sm:mr-8 sm:mb-0
-                          mb-4 text-left text-smaller mr-4
-                        ">
-                        {category.charAt(0).toUpperCase() + category.slice(1)}
-                      </p>
-                    </a>
+                  <Link href={`/category/${slugify(category)}`} key={index} aria-label={category}>
+
+                    <p className="
+                        sm:mr-8 sm:mb-0
+                        mb-4 text-left text-smaller mr-4
+                      ">
+                      {category.charAt(0).toUpperCase() + category.slice(1)}
+                    </p>
+
                   </Link>
                 ))
               }
-              <Link href="/categories">
-                <a aria-label="All categories">
-                  <p className="
-                    sm:mr-8 sm:mb-0
-                    mb-4 text-left text-smaller mr-4 
-                  ">
-                  All
-                  </p>
-                </a>
+              <Link href="/categories" aria-label="All categories">
+
+                <p className="
+                  sm:mr-8 sm:mb-0
+                  mb-4 text-left text-smaller mr-4 
+                ">
+                All
+                </p>
+
               </Link>
             </div>
           </div>
@@ -81,15 +78,15 @@ export default function Layout({ children, categories }) {
             sm:justify-end sm:m-0
             flex flex-1 mt-4
           ">
-            <Link href="/admin">
-              <a aria-label="Admin panel">
+            <Link href="/admin" aria-label="Admin panel">
+
               <p className="text-sm font-semibold">Admins</p>
-              </a>
+
             </Link>
           </div>
         </div>
       </footer>
       <ToastContainer autoClose={3000} />
-    </div>
-  )
+    </div>)
+  );
 }