Merge branch 'release/v1.13.0'

generators/app/index.js

@@ -4,8 +4,6 @@ import {createRequire} from 'module';
 const require = createRequire(import.meta.url);
 const pkg = require('../../package.json');
 
-import config from './config.js';
-
 import Generator from 'yeoman-generator';
 import chalk from 'chalk';
 import cowsay from 'cowsay';
@@ -25,8 +23,6 @@ export default class MG extends Generator {
 
         this.appName = 'Website';
         this.isThemeWebsite = false;
-        this.includeMagnific = false;
-        this.includeSlick = false;
         this.appBlog = false;
         this.appStore = false;
 
@@ -96,17 +92,6 @@ export default class MG extends Generator {
             default: 'No',
         });
 
-        // Front-end libraries to include
-        prompts.push({
-            type: 'checkbox',
-            name: 'libraries',
-            message: 'Check which libraries to include',
-            choices: [
-                {name: 'Magnific Popup', value: 'magnific', checked: false},
-                {name: 'Slick slider', value: 'slick', checked: true},
-            ],
-        });
-
         // BranchCMS App templates to include
         prompts.push({
             type: 'checkbox',
@@ -132,9 +117,6 @@ export default class MG extends Generator {
 
             this.isThemeWebsite = answers.istheme.toLowerCase() === 'yes';
 
-            this.includeMagnific = hasAnswer(answers.libraries, 'magnific');
-            this.includeSlick = hasAnswer(answers.libraries, 'slick');
-
             this.appBlog = hasAnswer(answers.apps, 'blog');
             this.appStore = hasAnswer(answers.apps, 'store');
         });
@@ -189,26 +171,15 @@ export default class MG extends Generator {
         );
 
         // Package.json
-        this.fs.copyTpl(
+        this.fs.copy(
             this.templatePath('_package.json'),
             this.destinationPath('package.json'),
-            {
-                includeMagnific: this.includeMagnific,
-                includeSlick: this.includeSlick,
-            },
         );
 
         // Set the name value in the package.json
         this.packageJson.set('name', this.appName);
 
         const dependencies = {};
-        if (this.includeMagnific) {
-            dependencies['magnific-popup'] = config.packages['magnific-popup'];
-        }
-
-        if (this.includeSlick) {
-            dependencies['slick-carousel'] = config.packages['slick-carousel'];
-        }
 
         if (Object.keys(dependencies).length > 0) {
             this.addDependencies(dependencies);
@@ -225,8 +196,6 @@ export default class MG extends Generator {
             this.templatePath() + '/gulp/**/*.ejs',
             this.destinationPath() + '/gulp',
             {
-                includeMagnific: this.includeMagnific,
-                includeSlick: this.includeSlick,
                 isThemeWebsite: this.isThemeWebsite,
             },
             null,

generators/app/templates/_package.json

@@ -51,10 +51,11 @@
     "stylelint-selector-bem-pattern": "^2.1.1"
   },
   "dependencies": {
-    "cacao-css": "^3.14.0",
-    "jquery": "^3.6.0",
-    "jquery-form": "^4.3.0",
-    "jquery-validation": "^1.19.3"
+    "@splidejs/splide": "^4.1.4",
+    "cacao-css": "^3.16.0",
+    "fslightbox": "^3.4.1",
+    "just-validate": "^4.2.0",
+    "masonry-layout": "^4.2.2"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"

generators/app/templates/gulp/config.ejs

@@ -67,22 +67,22 @@ const config = {
      * dest is the folder within the root 'dist' folder to put
      */
     copy: [
-    <%_ if (includeMagnific) { _%>
         {
-            src: ['node_modules/magnific-popup/dist/**/*.{css,min.js}'],
-            dest: 'magnific'
+            src: 'node_modules/@splidejs/splide/dist/**/*',
+            dest: 'splide'
         },
-    <%_ } _%>
-    <%_ if (includeSlick) { _%>
         {
-            src: ['node_modules/slick-carousel/slick/*.{css,min.js,gif}'],
-            dest: 'slick'
+            src: 'node_modules/just-validate/dist/just-validate.production.min.js',
+            dest: 'just-validate'
         },
         {
-            src: ['node_modules/slick-carousel/slick/fonts/*'],
-            dest: 'slick/fonts'
+            src: ['node_modules/masonry-layout/dist/*.{pkgd.min.js, min.js}'],
+            dest: 'masonry'
+        },
+        {
+            src: 'node_modules/fslightbox/index.js',
+            dest: 'fslightbox'
         }
-    <%_ } _%>
     ],
 
     /**
@@ -103,16 +103,13 @@ const config = {
         {
             name: 'main.js',
             src: [
-                'node_modules/jquery/dist/jquery.js',
                 src + '/js/navigation.js',
                 src + '/js/main.js'
             ]
         },
         {
             name: 'forms.js',
             src: [
-                'node_modules/jquery-validation/dist/jquery.validate.js',
-                'node_modules/jquery-form/src/jquery.form.js',
                 src + '/js/forms.js'
             ]
         }

generators/app/templates/src/css/components/card/card.css

@@ -0,0 +1,146 @@
+/* =========================================================================== *\
+    Card component styles
+\* =========================================================================== */
+
+/* @define Card */
+.Card {
+    border-radius: 10px;
+    box-shadow: 0 15px 30px rgb(4 43 55 / 25%);
+    display: flex;
+    flex-direction: column;
+    overflow-wrap: anywhere;
+    width: 100%;
+}
+
+.Card:hover {
+    outline: 5px solid var(--theme-primary-color);
+}
+
+/* postcss-bem-linter: ignore */
+.Card > div {
+    margin-bottom: 10px;
+}
+
+/* postcss-bem-linter: ignore */
+.Card > div:last-child {
+    margin-bottom: 0;
+}
+
+.Card--noImage .Card-title {
+    flex-grow: unset;
+}
+
+/* ------------------------------------ *\
+    Card image
+\* ------------------------------------ */
+
+.Card-image {
+    margin-bottom: 0 !important;
+}
+
+/* postcss-bem-linter: ignore */
+.Card-image img {
+    border-radius: 10px 10px 0 0;
+    width: 100%;
+}
+
+.Card-image--aspect1by1 {
+    display: block;
+    padding-bottom: 100%;
+    position: relative;
+}
+
+/* postcss-bem-linter: ignore */
+.Card-image--aspect1by1 > img {
+    height: 100%;
+    image-orientation: none;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+/* ------------------------------------ *\
+    Card content
+\* ------------------------------------ */
+
+.Card-inner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-evenly;
+    padding: 20px;
+}
+
+/* postcss-bem-linter: ignore */
+.Card-inner > div {
+    margin-bottom: 10px;
+}
+
+/* postcss-bem-linter: ignore */
+.Card-inner > div:last-child {
+    margin-bottom: 0;
+}
+
+.Card-date {
+    color: var(--theme-typography-heading-color);
+    font-weight: 700;
+}
+
+.Card-category {
+    color: var(--theme-button-background);
+}
+
+.Card-title {
+    display: flex;
+    font-weight: 700;
+    justify-content: center;
+    text-align: center;
+}
+
+.Card-title--left {
+    justify-content: flex-start;
+    text-align: left;
+}
+
+.Card-title--push {
+    flex-grow: 1;
+}
+
+.Card-abstract {
+    flex-grow: 1;
+}
+
+/* ------------------------------------ *\
+    Horizonal card styles
+\* ------------------------------------ */
+
+.Card--horizontal {
+    margin-bottom: 20px;
+}
+
+/* postcss-bem-linter: ignore */
+.Card--horizontal .Card-image img {
+    border-radius: 10px 0 0 10px !important;
+}
+
+.Card--horizontal .Card-inner--noImage {
+    height: unset !important;
+}
+
+.Card--horizontal .Card-title {
+    margin-bottom: 20px;
+}
+
+@media (--c-bp-md) {
+
+    /* postcss-bem-linter: ignore */
+    .Card--horizontal .Card-image img {
+        border-radius: 10px 10px 0 0 !important;
+    }
+
+    .Card--horizontal .Card-inner {
+        height: unset !important;
+    }
+}

generators/app/templates/src/css/components/card/index.css

@@ -0,0 +1 @@
+@import './card.css';

generators/app/templates/src/css/components/index.css

@@ -1,5 +1,6 @@
 @import './breadcrumb';
 @import './button';
+@import './card';
 @import './container';
 @import './content';
 @import './footer';