tweaked main page

electron/main.cjs

@@ -7,6 +7,20 @@ if (require('electron-squirrel-startup')) app.quit();
 
 const isDevEnvironment = process.env.DEV_ENV === 'true'
 
+if (isDevEnvironment) {
+    // try {
+    //     require('electron-reloader')(module, {
+    //         debug: true,
+    //         watchRenderer: true
+    //     });
+    // } catch (_) { console.log('Error'); }
+    require('electron-reload')(__dirname, {
+        electron: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
+        hardResetMethod: 'exit'
+    });
+
+}
+
 let mainWindow;
 const createWindow = () => {
     // Create the browser window.
@@ -32,7 +46,7 @@ const createWindow = () => {
         mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'));
     }
 
-    log('hello world!')
+    log('hello world!!!!!')
 
     // TODO: enable Tailwind, build
 }

package.json

@@ -8,12 +8,15 @@
   "main": "electron/main.cjs",
   "scripts": {
     "dev": "concurrently --kill-others \"vite\" \"npm run dev:electron\"",
+    "dev2": "concurrently --kill-others \"vite\" \"npm run dev:electron2\"",
     "dev:vite": "vite",
     "dev:electron": "cross-env DEV_ENV=true npx electronmon electron/main.cjs",
+    "dev:electron2": "cross-env DEV_ENV=true electron-forge start",
     "build": "vite build",
     "preview": "vite preview",
     "package": "npm run build && electron-forge package",
-    "make": "npm run build && electron-forge make"
+    "make": "npm run build && electron-forge make",
+    "tailwind": "npx tailwindcss -i ./src/app.css -o ./electron/build/assets/output.css --watch"
   },
   "devDependencies": {
     "@electron-forge/cli": "^6.1.1",
@@ -26,6 +29,8 @@
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",
     "electron": "^24.3.1",
+    "electron-reload": "^2.0.0-alpha.1",
+    "electron-reloader": "^1.2.3",
     "postcss": "^8.4.23",
     "svelte": "^3.57.0",
     "tailwindcss": "^3.3.2",

src/App.svelte

@@ -3,34 +3,36 @@
   import viteLogo from '/vite.svg'
   import Counter from './lib/Counter.svelte'
   import electronLogo from './assets/electron.svg'
+  import tailwindLogo from './assets/tailwind.svg'
 
   const nodeVersion = api.node();
   const chromeVersion = api.chrome();
   const electronVersion = api.electron();
 
 </script>
 
-<style>
-  .logo:hover {
-    filter: drop-shadow(0 0 2rem #ff00ff); /* Change the shadow color here */
-  }
-</style>
-
-<main class="min-h-screen bg-gray-900 text-white flex flex-col h-screen">
+<main class="min-h-screen bg-slate-900 text-white flex flex-col h-screen">
   <!-- Top Part -->
-  <section class="flex justify-center items-center h-2/5 py-8">
+  <section class="flex justify-center items-center h-48">
     <div class="flex items-center space-x-4 gap-16">
-      <img class="logo h-12" src={viteLogo} alt="Company Logo 1" />
-      <img class="logo h-12" src={svelteLogo} alt="Company Logo 2" />
-      <img class="logo h-12" src={electronLogo} alt="Company Logo 3" />
-      <img class="logo h-12" src={viteLogo} alt="Company Logo 4" />
+      <img class="h-20 hover:drop-shadow-[0_0_2rem_#ac00ac] transition-all duration-300" src={viteLogo} alt="Company Logo 1" />
+      <img class="h-20 hover:drop-shadow-[0_0_2rem_#ff3e00aa] transition-all duration-300" src={svelteLogo} alt="Company Logo 2" />
+      <img class="h-20 hover:drop-shadow-[0_0_2rem_#237d8f] transition-all duration-300" src={electronLogo} alt="Company Logo 3" />
+      <img class="h-20 hover:drop-shadow-[0_0_2rem_#a45ff9] transition-all duration-300 rounded-full p-1
+       bg-gradient-to-tr from-indigo-900 to-cyan-700" src={tailwindLogo} alt="Company Logo 4" />
     </div>
   </section>
+
+
 
   <!-- Middle Part -->
-  <section class="flex flex-col items-center justify-center h-60vh">
+  <section class="flex flex-col items-center justify-center mt-4">
     <h1 class="text-4xl font-bold">Vite + Svelte + Electron + Tailwind</h1>
     <!-- Additional content goes here -->
+    <p class="mt-6">Node version: {nodeVersion} | Chrome version: {chromeVersion} | Electron version: {electronVersion}</p>
+    <div>
+        <Counter/>
+    </div>
   </section>
 
   <!-- Footer -->

src/lib/Counter.svelte

@@ -5,6 +5,6 @@
   }
 </script>
 
-<button on:click={increment}>
+<button on:click={increment} class="p-4 mt-12 border border-indigo-900 border-opacity-80 rounded-md hover:border-indigo-500 hover:bg-slate-800 transition-all duration-300">
   count is {count}
 </button>