Cleanup & Adjustment to support static site generation (#50)

Co-authored-by: root <root@N3XT>
Co-authored-by: pshubham <[email protected]>

README.md

@@ -118,6 +118,28 @@ To create a production build:
 npm run build
 ```
 
+## Creating a Static Production Build
+
+To generate a static production build of your Next.js application, follow these steps:
+
+1. **Configure Output Setting:**  
+   Ensure that you have the following line in your `next.config.mjs` file:
+
+   ```javascript
+   output: 'export'
+   ```
+2. **Build the Project:**
+
+   Run the following command in your terminal:
+
+   ```bash
+   npm run build
+   ```
+3. **Testing static build locally:**
+   ```bash
+   npx serve@latest out
+   ```
+
 After the build is complete, you can start the production server with:
 
 ```bash

docker-compose.yml

@@ -14,7 +14,7 @@ services:
     depends_on:
       - dicedb
     environment:
-      - DICE_ADDR=dicedb:7379
+      - DICEDB_ADDR=dicedb:7379
 
   frontend:
     build:

next.config.mjs

@@ -10,6 +10,7 @@ const nextConfig = {
       },
     ],
   },
+  output: 'export'
 };
 
 export default nextConfig;

src/components/Footer/Footer.tsx

@@ -1,9 +1,10 @@
+'use client';
+
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button } from '@/shared/components/Button';
 import { Twitter } from '@mui/icons-material';
 import GitHub from '@mui/icons-material/GitHub';
 import People from '@mui/icons-material/People';
-// icons
 
 export default function Footer() {
   return (
@@ -12,10 +13,13 @@ export default function Footer() {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div>
             <h3 className="text-gray-500 font-semibold mb-4">DiceDB</h3>
-            <Button className="w-full mb-2 bg-red-600 hover:bg-red-700 text-white">
+            <Button className="!bg-red-600 hover:!bg-red-700 !text-white">
               Get Started →
             </Button>
-            <Button className="w-full mb-2 border-2 border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600">
+            <Button
+              variant="outline"
+              className="!w-full mt-2 !border-1 !border-gray-700 bg-blue-50 hover:text-blue text-black hover:text-blue-600"
+            >
               <GitHub className="mr-2 h-4 w-4" /> GitHub (4k+)
             </Button>
           </div>
@@ -62,13 +66,25 @@ export default function Footer() {
               </li>
             </ul>
             <div className="flex space-x-4 mt-4">
-              <a href="#" className="text-gray-400 hover:text-gray-600">
+              <a
+                href="#"
+                className="text-gray-400 hover:text-gray-600"
+                aria-label="People"
+              >
                 <People className="h-6 w-6" />
               </a>
-              <a href="#" className="text-gray-400 hover:text-gray-600">
+              <a
+                href="#"
+                className="text-gray-400 hover:text-gray-600"
+                aria-label="Twitter"
+              >
                 <Twitter className="h-6 w-6" />
               </a>
-              <a href="#" className="text-gray-400 hover:text-gray-600">
+              <a
+                href="#"
+                className="text-gray-400 hover:text-gray-600"
+                aria-label="GitHub"
+              >
                 <GitHub className="h-6 w-6" />
               </a>
             </div>

src/components/Playground/Playground.tsx

@@ -1,15 +1,14 @@
 'use client';
 
+import Image from 'next/image';
+import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
+
 // Components
 import Shell from '@/components/Shell/Shell';
 import SearchBox from '@/components/Search/SearchBox';
-import { Dice1, Dice3, Dice5, Info } from 'lucide-react';
 
 // utils
 import { formatTime } from '@/shared/utils/commonUtils';
-
-// images and icons
-import Image from 'next/image';
 import { usePlayground } from './hooks/usePlayground';
 
 export default function Playground() {
@@ -21,12 +20,13 @@ export default function Playground() {
       <header className="navbar flex items-center justify-between py-5">
         <div className="flex items-center">
           <Image
-            src="https://dicedb.io/dicedb-logo-light.png"
+            src="/images/dicedb-logo-light.png"
             width={110}
             height={110}
             priority={true}
             alt="DiceDB logo"
             className="object-contain"
+            unoptimized
           />
           <h2 className="font-light text-2xl ml-2">PlayGround</h2>
         </div>

src/components/Search/command.tsx

@@ -1,14 +1,29 @@
-import { useState } from 'react';
 import { Clipboard } from 'lucide-react';
 import { DiceCmdMeta } from '@/data/command';
+import { useState } from 'react';
 
-export default function CommandPage({ title, syntax, body, url }: DiceCmdMeta) {
-  const [copied, setCopied] = useState(false);
+interface CommandPageProps extends DiceCmdMeta {
+  onCopy?: () => void;
+}
 
+export default function CommandPage({
+  title,
+  syntax,
+  body,
+  url,
+  onCopy,
+}: CommandPageProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  setIsCopied(true);
+  setTimeout(() => {
+    setIsCopied(false);
+  }, 1000);
   const handleCopy = () => {
-    navigator.clipboard.writeText(syntax);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    navigator.clipboard.writeText(syntax).then(() => {
+      if (onCopy) {
+        onCopy();
+      }
+    });
   };
 
   return (
@@ -18,7 +33,7 @@ export default function CommandPage({ title, syntax, body, url }: DiceCmdMeta) {
       <div className="flex items-center justify-between mb-4 pt-4">
         <h3 className="text-gray-700 text-2xl font-semibold">Syntax</h3>
         <div className="flex flex-row">
-          {copied && <div className="text-green-500 text-sm">Copied!</div>}
+          {isCopied && <div className="text-green-500 text-sm">Copied!</div>}
           <button
             onClick={handleCopy}
             className="text-gray-500 hover:text-gray-700 flex items-center ml-4"

src/shared/components/Button.tsx

@@ -5,13 +5,25 @@ import React from 'react';
 interface ButtonProps {
   children: React.ReactNode;
   className?: string;
-  variant?: 'outline';
+  variant?: 'default' | 'outline';
 }
 
-export function Button({ children, className }: ButtonProps) {
+const baseClasses =
+  'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2';
+const variantClasses = {
+  default: 'bg-gray-900 text-white hover:bg-gray-700 focus:ring-gray-400',
+  outline:
+    'border border-gray-900 bg-transparent text-gray-900 hover:bg-gray-200 focus:ring-gray-400',
+};
+
+export function Button({
+  children,
+  className = '',
+  variant = 'default',
+}: ButtonProps) {
   return (
     <button
-      className={`inline-flex items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 ${className}`}
+      className={`${baseClasses} ${variantClasses[variant]} ${className}`} // Combine all classes
     >
       {children}
     </button>

src/styles/globals.css

@@ -1,6 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap');
 
 body {