Kunstmaan · acrobat · Feb 21, 2022 · Oct 12, 2021
diff --git a/.github/workflows/ci-frontend.yml b/.github/workflows/ci-frontend.yml
@@ -13,7 +13,7 @@ jobs:
 
             -   uses: actions/setup-node@v2-beta
                 with:
-                    node-version: '12'
+                    node-version: '12' #same as .nvmrc
 
             -   uses: actions/cache@v2
                 with:

diff --git a/groundcontrol/gulp-plugins/twig.js b/groundcontrol/gulp-plugins/twig.js
@@ -17,11 +17,10 @@ export default function twig(options) {
 
         try {
             let contents = file.contents.toString();
-
             // Twig.js uses different escaping compared to the PHP version
             // This line was failing the renderering, as we don't put backlashes in the testdata it could be removed
-            contents = contents.replace(/\|replace\(\{\'\\\\\'\:\'\/\'\}\)/gmi, '');
-            
+            contents = contents.replace(/\|replace\(\{\'\\\\\'\:\'(\/|\-)\'\}\)/gmi, '');
+
             const template = Twig.twig({
                 data: contents
             });
@@ -34,4 +33,4 @@ export default function twig(options) {
         }
     });
 
-};
+};
diff --git a/groundcontrol/tasks/build-gc-skeleton.js b/groundcontrol/tasks/build-gc-skeleton.js
@@ -20,12 +20,12 @@ const runChildProcess = (executable, args, cwd, cb) => {
     });
 };
 
-export default function createBuildGroundControlSkeletonTask(skeletonPath, namespace = 'kuma/my-project') {
+export default function createBuildGroundControlSkeletonTask(skeletonPath, namespace = 'kuma-my-project') {
     const distPath = skeletonPath + '/dist';
-    const appPath = distPath + '/src/' + namespace;
-    const jsPath = appPath + '/Resources/ui/js';
-    const scssPath = appPath + '/Resources/ui/scss';
-    const adminJsPath = appPath + '/Resources/admin/js';
+    const appPath = distPath + '/assets';
+    const jsPath = appPath + '/ui/js';
+    const scssPath = appPath + '/ui/scss';
+    const adminJsPath = appPath + '/admin';
 
     return [
         function cleanGroundControlSkeleton() {
@@ -42,7 +42,8 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
                         getName: () => 'test-bundle',
                         namespace
                     },
-                    demosite: false
+                    demosite: false,
+                    isV4: true
                 }))
                 .pipe(gulp.dest(distPath));
         },
@@ -56,8 +57,6 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
             fs.writeFileSync(adminJsPath + '/admin-bundle-extra.js', 'console.log(\'Hello world from admin\');\n');
             fs.ensureDirSync(scssPath);
             fs.writeFileSync(scssPath + '/style.scss', 'body { font-size: 20px; }\n');
-            // Style guide
-            fs.copySync(skeletonPath + '/../Resources/ui/styleguide', appPath + '/Resources/ui/styleguide');
             // Index.html
             const html = `
                 <!DOCTYPE html>
@@ -69,13 +68,13 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
                     <meta charset="utf-8">
                     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <link rel="stylesheet" href="web/frontend/css/style.css"/>
+                    <link rel="stylesheet" href="public/build/css/style.css"/>
                 </head>
 
                 <body>
                     <h1>Test page</h1>
-                    <script src="web/frontend/js/bundle.js"></script>
-                    <script src="web/frontend/js/admin-bundle-extra.js"></script>
+                    <script src="public/build/js/bundle.js"></script>
+                    <script src="public/build/js/admin-bundle-extra.js"></script>
                 </body>
 
                 </html>`;
@@ -85,7 +84,7 @@ export default function createBuildGroundControlSkeletonTask(skeletonPath, names
         function installGroundControlSkeletonNpmPackages(cb) {
             runChildProcess('npm', ['install'], distPath, cb);
         },
-        function builGroundControlSkeletonExample(cb) {
+        function buildGroundControlSkeletonExample(cb) {
             runChildProcess('npm', ['run', 'build'], distPath, cb);
         }
     ];

diff --git a/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_footer.html.twig b/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_footer.html.twig
@@ -16,6 +16,9 @@
 
         {%- set jsPath = 'frontend/js/admin-bundle-extra.js' -%}
         {% if file_exists(jsPath) %}'{{ asset('/' ~ jsPath) }}'{% endif %}
+
+        {%- set jsPath = 'build/js/admin-bundle-extra.js' -%}
+        {% if file_exists(jsPath) %}'{{ asset('/' ~ jsPath) }}'{% endif %}
     ];
 
     if (!('fetch' in window &&

diff --git a/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_header.html.twig b/src/Kunstmaan/AdminBundle/Resources/views/Default/_js_header.html.twig
@@ -1 +1,5 @@
+{% if encore_entry_exists('admin') %}
+    {{ encore_entry_script_tags('admin') }}
+{% endif %}
+
 {% include "@KunstmaanAdmin/Default/_js_header_extra.html.twig" %}
diff --git a/src/Kunstmaan/ArticleBundle/Resources/views/AbstractArticlePageAdminList/list.html.twig b/src/Kunstmaan/ArticleBundle/Resources/views/AbstractArticlePageAdminList/list.html.twig
@@ -51,7 +51,7 @@
     {% else %}
         {% set title = adminlist.configurator.getEntityName() %}
     {% endif %}
-    
+
     {% if adminlistconfigurator.overviewPage %}
         {% if adminlist.canAdd() %}
             <div class="col-sm-6 col-md-4">

diff --git a/...le/Resources/skeleton/legal/Resources/views/PageParts/LegalCookiesPagePart/view.html.twig b/...le/Resources/skeleton/legal/Resources/views/PageParts/LegalCookiesPagePart/view.html.twig
@@ -1,6 +1,6 @@
 {% set cookie = get_legal_cookie(app.request) %}
 
-<div class="kmcc-cookies-toggle-pp"> 
+<div class="kmcc-cookies-toggle-pp">
     {% for type in get_cookie_types() %}
         <strong class="kmcc-cookies-toggle-pp__name">
             {{ type.name }}
@@ -9,7 +9,12 @@
 
             {% if type.alwaysOn %}
                 <div class="kmcc-btn-toggle--always-on">
-                    <img src="/frontend/img/legal/svg/check.svg"/>
+                    {% set imgPath = 'build/img/legal/svg/check.svg' %}
+                    {% if file_exists(imgPath) %}
+                        <img src="/build/img/legal/svg/check.svg"/>
+                    {% else %}
+                        <img src="/frontend/img/legal/svg/check.svg"/>
+                    {% endif %}
                     <span class="kmcc-btn-toggle__text">
                         {{ 'kuma.cookie.cookie_preferences.always_on' | trans }}
                     </span>
@@ -45,4 +50,3 @@
 
 
 {% set cookie = get_legal_cookie(app.request) %}
-
diff --git a/...aan/CookieBundle/Resources/skeleton/legal/Resources/views/Pages/LegalPage/_main.html.twig b/...aan/CookieBundle/Resources/skeleton/legal/Resources/views/Pages/LegalPage/_main.html.twig
@@ -9,7 +9,12 @@
             <div class="js-kmcc-collapsible-content">
                 <div class="kmcc-collapsible-content__title js-kmcc-collapsible-content__title">
                     <svg class="icon icon--chevron--down kmcc-collapsible-content__title__icon">
-                        <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
+                        {% set imgPath = 'build/img/legal/svg/symbol-defs.svg' %}
+                        {% if file_exists(imgPath) %}
+                            <use xlink:href="/build/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
+                        {% else %}
+                            <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
+                        {% endif %}
                     </svg>
         {% endif %}
     {% endif %}

diff --git a/src/Kunstmaan/CookieBundle/Resources/ui/scss/config/_variables.scss b/src/Kunstmaan/CookieBundle/Resources/ui/scss/config/_variables.scss
@@ -91,7 +91,7 @@ $kmcc-fact__figure-width:          150px;
 
 /* Fact
    ========================================================================== */
-$base-image-path:                  "../../frontend/img/legal/svg/";
+$base-image-path:                  "../../frontend/img/legal/svg/" !default;
 $toggle-check-image:               $base-image-path + "toggle--check.svg" !default;
 $toggle-cross-image:               $base-image-path + "toggle--cross.svg" !default;
 $arrow-up-image:                   $base-image-path + "arrow--up.svg" !default;
diff --git a/src/Kunstmaan/CookieBundle/Resources/views/Svg/CloseCookieModalButtonIcon.html.twig b/src/Kunstmaan/CookieBundle/Resources/views/Svg/CloseCookieModalButtonIcon.html.twig
@@ -1,4 +1,9 @@
 <svg id="kmcc-cookie-modal__close-button"
      class="icon icon--cross svg-parent kmcc-btn-close-modal">
-    <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--cross"></use>
-</svg>
+    {% set imgPath = 'build/img/legal/svg/symbol-defs.svg' %}
+    {% if file_exists(imgPath) %}
+        <use xlink:href="/build/img/legal/svg/symbol-defs.svg#icon--cross"></use>
+    {% else %}
+        <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--cross"></use>
+    {% endif %}
+</svg>
diff --git a/src/Kunstmaan/CookieBundle/Resources/views/Svg/CloseDetailButtonIcon.html.twig b/src/Kunstmaan/CookieBundle/Resources/views/Svg/CloseDetailButtonIcon.html.twig
@@ -1,3 +1,8 @@
 <svg class="icon icon--chevron--down kmcc-btn-close-detail__icon">
-    <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
-</svg>
+    {% set imgPath = 'build/img/legal/svg/symbol-defs.svg' %}
+    {% if file_exists(imgPath) %}
+        <use xlink:href="/build/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
+    {% else %}
+        <use xlink:href="/frontend/img/legal/svg/symbol-defs.svg#icon--chevron--down"></use>
+    {% endif %}
+</svg>
diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateDefaultSiteCommand.php
@@ -28,6 +28,11 @@ class GenerateDefaultSiteCommand extends KunstmaanGenerateCommand
      */
     private $demosite;
 
+    /**
+     * @var bool
+     */
+    private $groundcontrol;
+
     /**
      * @see Command
      */
@@ -48,6 +53,7 @@ protected function configure()
             ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace to generate the default website in')
             ->addOption('prefix', '', InputOption::VALUE_OPTIONAL, 'The prefix to be used in the table names of the generated entities')
             ->addOption('demosite', '', InputOption::VALUE_NONE, 'Whether to generate a website with demo contents or a basic website')
+            ->addOption('groundcontrol', '', InputOption::VALUE_NONE, 'Whether to use Webpack Encore or Groundcontrol as FE build tools')
             ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect')
             ->addOption('articleoverviewpageparent', '', InputOption::VALUE_OPTIONAL, 'Shortnames of the pages that can have the article overview page as a child (comma separated)')
             ->setName('kuma:generate:default-site');
@@ -87,12 +93,18 @@ protected function doExecute()
 
         $browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null);
 
+        /*
+         * If we need to generate Groundcontrol or Webpack Encore
+         */
+        $this->groundcontrol = $this->assistant->getOption('groundcontrol');
+
         // First we generate the layout if it is not yet generated
         $command = $this->getApplication()->find('kuma:generate:layout');
         $arguments = [
             'command' => 'kuma:generate:layout',
             '--namespace' => str_replace('\\', '/', $this->bundle->getNamespace()),
             '--demosite' => $this->demosite,
+            '--groundcontrol' => $this->groundcontrol,
             '--browsersync' => $browserSyncUrl,
             '--subcommand' => true,
         ];

diff --git a/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php b/src/Kunstmaan/GeneratorBundle/Command/GenerateLayoutCommand.php
@@ -37,6 +37,7 @@ protected function configure()
             ->addOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle where we need to create the layout in')
             ->addOption('subcommand', '', InputOption::VALUE_OPTIONAL, 'Whether the command is called from an other command or not')
             ->addOption('demosite', '', InputOption::VALUE_NONE, 'Pass this parameter when the demosite styles/javascipt should be generated')
+            ->addOption('groundcontrol', '', InputOption::VALUE_NONE, 'Pass this parameter to use Groundcontrol in favor of Webpack Encore')
             ->addOption('browsersync', '', InputOption::VALUE_OPTIONAL, 'The URI that will be used for browsersync to connect')
             ->setName('kuma:generate:layout');
     }
@@ -63,7 +64,7 @@ protected function doExecute()
         }
 
         $rootDir = $this->getApplication()->getKernel()->getProjectDir() . '/';
-        $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl);
+        $this->createGenerator()->generate($this->bundle, $rootDir, $this->assistant->getOption('demosite'), $this->browserSyncUrl, $this->assistant->getOption('groundcontrol'));
 
         if (!$this->isSubCommand()) {
             $this->assistant->writeSection('Layout successfully created', 'bg=green;fg=black');
@@ -88,8 +89,8 @@ protected function doInteract()
         $this->bundle = $this->askForBundleName('layout', $bundleNamespace);
         $this->browserSyncUrl = $this->assistant->getOptionOrDefault('browsersync', null);
 
-        if (null === $this->browserSyncUrl) {
-            $this->browserSyncUrl = $this->assistant->ask('Which URL would you like to configure for browserSync?', 'http://myproject.dev');
+        if (null === $this->browserSyncUrl && $this->assistant->getOption('groundcontrol', null)) {
+            $this->browserSyncUrl = $this->assistant->ask('Which URL would you like to configure for browserSync?', 'https://myproject.dev');
         }
     }
 

diff --git a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php
@@ -52,6 +52,7 @@ protected function configure()
                     [
                         new InputOption('db-installed', '', InputOption::VALUE_NONE, 'Acknowledge that you have setup your database"'),
                         new InputOption('demosite', '', InputOption::VALUE_REQUIRED, 'Do you want to create a "demosite"'),
+                        new InputOption('groundcontrol', '', InputOption::VALUE_REQUIRED, 'Do you want to use Groundcontrol instead of Webpack Encore'),
                         new InputOption('create-tests', '', InputOption::VALUE_REQUIRED, 'Do you want to create tests for you pages/pageparts'),
                         new InputOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle to create (only for SF3)'),
                         new InputOption('dir', '', InputOption::VALUE_OPTIONAL, 'The directory where to create the bundle (only for SF3)'),
@@ -90,10 +91,15 @@ protected function interact(InputInterface $input, OutputInterface $output)
         }
 
         if (null === $input->getOption('demosite')) {
-            $demoSiteOption = $this->assistant->askConfirmation('Do you want to create a "demosite"? (y/n)', 'n');
+            $demoSiteOption = $this->assistant->askConfirmation('Do you want to create a "demosite"? (y/n)', 'n', '?', false);
             $input->setOption('demosite', $demoSiteOption === true ? 'Yes' : 'No');
         }
 
+        if (null === $input->getOption('groundcontrol')) {
+            $groundcontrolOption = $this->assistant->askConfirmation('Do you want to use Groundcontrol instead of Webpack Encore? (y/n)', 'n', '?', false);
+            $input->setOption('groundcontrol', $groundcontrolOption === true ? 'Yes' : 'No');
+        }
+
         if (null === $input->getOption('create-tests')) {
             $createTests = $this->assistant->askConfirmation('Do you want to create tests for you pages/pageparts? (y/n)', 'n', '?', false);
             $input->setOption('create-tests', $createTests === true ? 'Yes' : 'No');
@@ -120,6 +126,10 @@ protected function execute(InputInterface $input, OutputInterface $output)
             $defaultSiteOptions['--demosite'] = true;
         }
 
+        if ($input->getOption('groundcontrol') === 'Yes') {
+            $defaultSiteOptions['--groundcontrol'] = true;
+        }
+
         $this->executeCommand($output, 'kuma:generate:config');
 
         $this
@@ -172,14 +182,14 @@ protected function executeCommand(OutputInterface $output, $command, array $opti
     protected function getKunstmaanLogo()
     {
         return '
-         /$$   /$$                                 /$$                                                  /$$$$$$                         
-        | $$  /$$/                                | $$                                                 /$$__  $$                        
+         /$$   /$$                                 /$$                                                  /$$$$$$
+        | $$  /$$/                                | $$                                                 /$$__  $$
         | $$ /$$/  /$$   /$$ /$$$$$$$   /$$$$$$$ /$$$$$$   /$$$$$$/$$$$   /$$$$$$   /$$$$$$  /$$$$$$$ | $$  \__/ /$$$$$$/$$$$   /$$$$$$$
         | $$$$$/  | $$  | $$| $$__  $$ /$$_____/|_  $$_/  | $$_  $$_  $$ |____  $$ |____  $$| $$__  $$| $$      | $$_  $$_  $$ /$$_____/
-        | $$  $$  | $$  | $$| $$  \ $$|  $$$$$$   | $$    | $$ \ $$ \ $$  /$$$$$$$  /$$$$$$$| $$  \ $$| $$      | $$ \ $$ \ $$|  $$$$$$ 
+        | $$  $$  | $$  | $$| $$  \ $$|  $$$$$$   | $$    | $$ \ $$ \ $$  /$$$$$$$  /$$$$$$$| $$  \ $$| $$      | $$ \ $$ \ $$|  $$$$$$
         | $$\  $$ | $$  | $$| $$  | $$ \____  $$  | $$ /$$| $$ | $$ | $$ /$$__  $$ /$$__  $$| $$  | $$| $$    $$| $$ | $$ | $$ \____  $$
         | $$ \  $$|  $$$$$$/| $$  | $$ /$$$$$$$/  |  $$$$/| $$ | $$ | $$|  $$$$$$$|  $$$$$$$| $$  | $$|  $$$$$$/| $$ | $$ | $$ /$$$$$$$/
-        |__/  \__/ \______/ |__/  |__/|_______/    \___/  |__/ |__/ |__/ \_______/ \_______/|__/  |__/ \______/ |__/ |__/ |__/|_______/ 
+        |__/  \__/ \______/ |__/  |__/|_______/    \___/  |__/ |__/ |__/ \_______/ \_______/|__/  |__/ \______/ |__/ |__/ |__/|_______/
         ';
     }
 

diff --git a/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php b/src/Kunstmaan/GeneratorBundle/Generator/DefaultSiteGenerator.php
@@ -31,19 +31,25 @@ class DefaultSiteGenerator extends KunstmaanGenerator
      */
     private $demosite;
 
+    /**
+     * @var bool
+     */
+    private $groundControl;
+
     /**
      * Generate the website.
      *
      * @param string $prefix
      * @param string $rootDir
      * @param bool   $demosite
      */
-    public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false)
+    public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite = false, $groundControl = false)
     {
         $this->bundle = $bundle;
         $this->prefix = GeneratorUtils::cleanPrefix($prefix);
         $this->rootDir = $rootDir;
         $this->demosite = $demosite;
+        $this->groundControl = $groundControl;
 
         $parameters = [
             'namespace' => $this->bundle->getNamespace(),
@@ -53,6 +59,7 @@ public function generate(BundleInterface $bundle, $prefix, $rootDir, $demosite =
             'demosite' => $this->demosite,
             'multilanguage' => $this->isMultiLangEnvironment(),
             'isV4' => $this->isSymfony4(),
+            'groundcontrol' => $this->groundControl,
         ];
 
         $this->generateControllers($parameters);