Merge pull request #815 from evershopcommerce/theming

Theming

Author: treoden

packages/evershop/src/bin/install/index.js

@@ -15,6 +15,8 @@ import { Pool } from 'pg';
 import { CONSTANTS } from '../../lib/helpers.js';
 import { error, success } from '../../lib/log/logger.js';
 import { hashPassword } from '../../lib/util/passwordHelper.js';
+import { getCoreModules } from '../lib/loadModules.js';
+import { migrate } from '../lib/bootstrap/migrate.js';
 
 // The installation command will create a .env file in the root directory of the project.
 // If you are using docker, do not run this command. Instead, you should set the environment variables in the docker-compose.yml file and run `npm run start`
@@ -252,6 +254,10 @@ DB_SSLMODE="${sslMode}"
         full_name: adminUser?.fullName || 'Admin'
       })
       .execute(connection);
+
+    // Run module migrations
+    const coreModules = getCoreModules();
+    await migrate(coreModules, connection);
     await commit(connection);
   } catch (e) {
     await rollback(connection);

packages/evershop/src/bin/lib/bootstrap/migrate.js

@@ -13,20 +13,20 @@ import { error } from '../../../lib/log/logger.js';
 import { getConnection, pool } from '../../../lib/postgres/connection.js';
 import { createMigrationTable } from '../../install/createMigrationTable.js';
 
-async function getCurrentInstalledVersion(module) {
+async function getCurrentInstalledVersion(module, connection = null) {
   /** Check for current installed version */
   const check = await select()
     .from('migration')
     .where('module', '=', module)
-    .load(pool);
+    .load(connection || pool);
   if (!check) {
     return '0.0.1';
   } else {
     return check.version;
   }
 }
 
-async function migrateModule(module) {
+async function migrateModule(module, connection = null) {
   /** Check if the module has migration folder, if not ignore it */
   if (!existsSync(path.resolve(module.path, 'migration'))) {
     return;
@@ -42,15 +42,20 @@ async function migrateModule(module) {
     .map((dirent) => dirent.name.replace('Version-', '').replace('.js', ''))
     .sort((first, second) => semver.lt(first, second));
 
-  const currentInstalledVersion = await getCurrentInstalledVersion(module.name);
+  const currentInstalledVersion = await getCurrentInstalledVersion(
+    module.name,
+    connection
+  );
 
   for (const version of migrations) {
     /** If the version is lower or equal the installed version, ignore it */
     if (semver.lte(version, currentInstalledVersion)) {
       continue;
     }
-    const connection = await getConnection();
-    await startTransaction(connection);
+    const migrationConnection = connection || (await getConnection());
+    if (!connection) {
+      await startTransaction(migrationConnection);
+    }
 
     /** We expect the migration script to provide a function as a default export */
     try {
@@ -59,32 +64,36 @@ async function migrateModule(module) {
           path.resolve(module.path, 'migration', `Version-${version}.js`)
         )
       );
-      await versionModule.default(connection);
+      await versionModule.default(migrationConnection);
 
       await insertOnUpdate('migration', ['module'])
         .given({
           module: module.name,
           version
         })
-        .execute(connection, false);
-      await commit(connection);
+        .execute(migrationConnection, false);
+      if (!connection) {
+        await commit(migrationConnection);
+      }
     } catch (e) {
-      await rollback(connection);
+      if (!connection) {
+        await rollback(migrationConnection);
+      }
       throw new Error(
         `Migration failed for module ${module.name}, version ${version}\n${e}`
       );
     }
   }
 }
 
-export async function migrate(modules) {
+export async function migrate(modules, connection = null) {
   try {
-    const connection = await getConnection();
+    const psqlConnection = connection || (await getConnection());
     // Create a migration table if not exists. This is for the first time installation
-    await createMigrationTable(connection);
+    await createMigrationTable(psqlConnection);
 
     for (const module of modules) {
-      await migrateModule(module);
+      await migrateModule(module, connection);
     }
   } catch (e) {
     error(e);

packages/evershop/src/bin/seed/data/pages.json

@@ -14,11 +14,11 @@
               "time": 1729900000000,
               "blocks": [
                 {
-                  "id": "about_us_h1",
+                  "id": "about_us_h2",
                   "type": "header",
                   "data": {
                     "text": "Welcome to Our Store",
-                    "level": 1
+                    "level": 2
                   }
                 },
                 {
@@ -41,7 +41,7 @@
                   "type": "image",
                   "data": {
                     "file": {
-                      "url": "https://raw.githubusercontent.com/vercel/next.js/refs/heads/canary/examples/blog/public/images/photo.jpg"
+                      "url": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-one.jpg"
                     },
                     "caption": "Our carefully curated collection",
                     "withBorder": false,

packages/evershop/src/bin/seed/data/widgets.json

@@ -49,7 +49,7 @@
       "slides": [
         {
           "id": "slide-1",
-          "image": "https://raw.githubusercontent.com/vercel/next.js/refs/heads/canary/examples/blog/public/images/photo.jpg",
+          "image": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-one.jpg",
           "width": 2400,
           "height": 800,
           "subText": "Discover our exquisite collection of ceramic and stainless steel products",
@@ -60,7 +60,7 @@
         },
         {
           "id": "slide-2",
-          "image": "https://raw.githubusercontent.com/vercel/next.js/refs/heads/canary/examples/blog/public/images/photo2.jpg",
+          "image": "https://raw.githubusercontent.com/evershopcommerce/evershop/refs/heads/dev/seed/images/banner-two.jpg",
           "width": 2400,
           "height": 800,
           "subText": "Elegant designs that enhance your daily life, from morning coffee to home organization",
@@ -76,5 +76,17 @@
       "autoplaySpeed": 3000
     },
     "status": true
+  },
+  {
+    "name": "Featured Products",
+    "type": "collection_products",
+    "route": ["homepage"],
+    "area": ["content"],
+    "sort_order": 20,
+    "settings": {
+      "count": 4,
+      "collection": "homepage"
+    },
+    "status": true
   }
 ]

packages/evershop/src/bin/seed/imageDownloader.ts

@@ -102,7 +102,7 @@ export function convertToMediaPath(localPath: string): string {
   // e.g., /path/to/media/widgets/slide-1.jpg -> /media/widgets/slide-1.jpg
   const mediaMatch = localPath.match(/media\/(.+)$/);
   if (mediaMatch) {
-    return `/media/${mediaMatch[1]}`;
+    return `/assets/${mediaMatch[1]}`;
   }
   return localPath;
 }

packages/evershop/src/bin/seed/seedWidgets.ts

@@ -9,6 +9,7 @@ import {
   getFilenameFromUrl,
   convertToMediaPath
 } from './imageDownloader.js';
+import { CONSTANTS } from '../../lib/helpers.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -53,8 +54,12 @@ async function downloadSlideshowImages(
           const slideId = slide.id || `slide-${Date.now()}`;
 
           // Create local path
-          const projectRoot = resolve(__dirname, '../../../../..');
-          const mediaDir = join(projectRoot, 'media', 'widgets', slideId);
+          const mediaDir = join(
+            CONSTANTS.ROOTPATH,
+            'media',
+            'widgets',
+            slideId
+          );
 
           // Ensure directory exists
           if (!existsSync(mediaDir)) {
@@ -126,7 +131,7 @@ export async function seedWidgets(): Promise<void> {
 
       // Process settings - download slideshow images if needed
       let processedSettings = widgetData.settings;
-      if (widgetData.type === 'slideshow') {
+      if (widgetData.type === 'simple_slider') {
         info(`  → Processing slideshow images for: ${widgetData.name}`);
         processedSettings = await downloadSlideshowImages(widgetData.settings);
       }

packages/evershop/src/modules/base/pages/frontStore/all/global.scss

@@ -64,8 +64,9 @@ html {
 body {
   color: #3a3a3a;
 }
-p {
-  margin-bottom: 0.625rem;
+.header {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 @media screen and (max-width: 767px) {
   $font-size-base: $font-size-sm;

packages/evershop/src/modules/cms/services/tailwind.frontStore.config.js

@@ -1,3 +1,5 @@
+import plugin from '@tailwindcss/typography';
+
 export default {
   theme: {
     extend: {
@@ -30,5 +32,6 @@ export default {
       margin: ['first', 'last'],
       padding: ['first', 'last']
     }
-  }
+  },
+  plugins: [plugin]
 };