moved themes to separate folder

src/app/+home-page/home-news/home-news.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-news',
-  styleUrls: ['./$themePath$/home-news.component.$theme$.scss'],
+  styleUrls: ['./home-news.component.scss'],
-  templateUrl: './$themePath$/home-news.component.$theme$.html'
+  templateUrl: './home-news.component.html'
 })
 
 /**

src/app/+home-page/home-news/themes/home-news.component.mantis.scss

@@ -1,4 +0,0 @@
-@import '../home-news.component.scss';
-.jumbotron {
-    background-color: transparent;
-}

src/app/+home-page/home-page.component.ts

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ds-home-page',
-  styleUrls: ['./$themePath$/home-page.component.$theme$.scss'],
+  styleUrls: ['./home-page.component.scss'],
-  templateUrl: './$themePath$/home-page.component.$theme$.html'
+  templateUrl: './home-page.component.html'
 })
 export class HomePageComponent {
 }

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts

@@ -14,7 +14,7 @@ import { FilterType } from '../../../../search-service/filter-type.model';
   selector: 'ds-search-facet-option',
   styleUrls: ['./search-facet-option.component.scss'],
   // templateUrl: './search-facet-option.component.html',
-  templateUrl: './$themePath$/search-facet-option.component.$theme$.html',
+  templateUrl: './search-facet-option.component.html',
 })
 
 /**

src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -19,7 +19,7 @@ const rangeDelimiter = '-';
   selector: 'ds-search-facet-range-option',
   styleUrls: ['./search-facet-range-option.component.scss'],
   // templateUrl: './search-facet-range-option.component.html',
-  templateUrl: './$themePath$/search-facet-range-option.component.$theme$.html',
+  templateUrl: './search-facet-range-option.component.html',
 })
 
 /**

src/app/+search-page/search-filters/search-filter/search-filter.component.ts

@@ -13,8 +13,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../../+my-dspace-page/my-dspace-page.c
 
 @Component({
   selector: 'ds-search-filter',
-  styleUrls: ['./$themePath$/search-filter.component.$theme$.scss'],
+  styleUrls: ['./search-filter.component.scss'],
-  templateUrl: './$themePath$/search-filter.component.$theme$.html',
+  templateUrl: './search-filter.component.html',
   animations: [slide],
 })
 

src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts

@@ -41,7 +41,7 @@ const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
  */
 @Component({
   selector: 'ds-search-range-filter',
-  styleUrls: ['./$themePath$/search-range-filter.component.$theme$.scss'],
+  styleUrls: ['./search-range-filter.component.scss'],
   templateUrl: './search-range-filter.component.html',
   animations: [facetLoad]
 })

src/app/+search-page/search-filters/search-filter/search-range-filter/themes/search-range-filter.component.mantis.scss

@@ -1,5 +0,0 @@
-@import '../search-range-filter.component';
-
-::ng-deep .noUi-connect {
-    background: $info;
-}

src/app/+search-page/search-filters/search-filters.component.ts

@@ -14,7 +14,7 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
 @Component({
   selector: 'ds-search-filters',
   styleUrls: ['./search-filters.component.scss'],
-  templateUrl: './$themePath$/search-filters.component.$theme$.html',
+  templateUrl: './search-filters.component.html',
 })
 
 /**

src/app/+search-page/search-settings/search-settings.component.ts

@@ -9,8 +9,8 @@ import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.comp
 
 @Component({
   selector: 'ds-search-settings',
-  styleUrls: ['./$themePath$/search-settings.component.$theme$.scss'],
+  styleUrls: ['./search-settings.component.scss'],
-  templateUrl: './$themePath$/search-settings.component.$theme$.html'
+  templateUrl: './search-settings.component.html'
 })
 
 /**

src/app/navbar/navbar.component.ts

@@ -12,8 +12,8 @@ import { HostWindowService } from '../shared/host-window.service';
  */
 @Component({
   selector: 'ds-navbar',
-  styleUrls: ['./$themePath$/navbar.component.$theme$.scss'],
+  styleUrls: ['./navbar.component.scss'],
-  templateUrl: './$themePath$/navbar.component.$theme$.html',
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends MenuComponent implements OnInit {

src/app/navbar/themes/navbar.component.mantis.scss

@@ -1,7 +0,0 @@
-@import '../navbar.component.scss';
-
-nav.navbar {
-    border-bottom: 5px $green solid;
-}
-
-

src/app/shared/search-form/search-form.component.ts

@@ -16,7 +16,7 @@ import { SearchService } from '../../+search-page/search-service/search.service'
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
   // templateUrl: './search-form.component.html',
-  templateUrl: './$themePath$/search-form.component.$theme$.html'
+  templateUrl: './search-form.component.html'
 })
 
 /**

src/styles/_variables.scss

@@ -1,11 +1,13 @@
 @import '_functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
 
-@import '$themePath$/bootstrap_variables.$theme$.scss';
+//@import '$themePath$/bootstrap_variables.scss';
+@import '../../themes/mantis/styles/bootstrap_variables.scss';
 
 @import 'bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
 
-@import '$themePath$/custom_variables.$theme$.scss';
+//@import '$themePath$/custom_variables.scss';
+@import '../../themes/mantis/styles/custom_variables.scss';
 
 @import 'custom_variables.scss';

themes/mantis/app/+home-page/home-news/home-news.component.scss

@@ -0,0 +1,4 @@
+@import '../../../../../src/app/+home-page/home-news/home-news.component';
+.jumbotron {
+    background-color: transparent;
+}

themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.scss

@@ -1,4 +1,4 @@
-@import '../search-filter.component';
+@import '../../../../../../src/app/+search-page/search-filters/search-filter/search-filter.component';
 
 .facet-filter {
     background-color: map-get($theme-colors, light);

themes/mantis/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss

@@ -0,0 +1,5 @@
+@import '../../../../../../../src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component';
+
+::ng-deep .noUi-connect {
+    background: $info;
+}

themes/mantis/app/+search-page/search-settings/search-settings.component.scss

@@ -1,4 +1,4 @@
-@import '../search-settings.component';
+@import '../../../../../src/app/+search-page/search-settings/search-settings.component';
 
 .setting-option {
     background-color: map-get($theme-colors, light);

themes/mantis/app/navbar/navbar.component.scss

@@ -0,0 +1,7 @@
+@import '../../../../src/app/navbar/navbar.component.scss';
+
+nav.navbar {
+    border-bottom: 5px $green solid;
+}
+
+

webpack/helpers.js

@@ -1,6 +1,7 @@
 const {
     join,
     resolve,
+    normalize,
 } = require('path');
 
 
@@ -8,8 +9,10 @@ function root(path) {
     return resolve(__dirname, '..', path);
 }
 
-const theme = '';
+// const theme = '';
-// const theme = 'mantis';
+const theme = 'mantis';
+
+const themePath = normalize(join(__dirname, '..', 'themes', theme));
 
 const globalCSSImports = [
     resolve(__dirname, '..', 'src/styles/_variables.scss'),
@@ -19,24 +22,10 @@ const globalCSSImports = [
 const themeReplaceOptions =
         {
             multiple: [
-                {
-                    search: '$theme$.',
-                    replace: theme + (theme.length ? '.' : ''),
-
-                },
                 {
                     search: '$themePath$/',
-                    replace: (theme.length ? 'themes/' : ''),
+                    replace: (themePath.length ? themePath + '/' : ''),
 
-                },
-                {
-                    search: '$theme$.',
-                    replace: (theme.length ? theme + '.' : ''),
-
-                },
-                {
-                    search: '$themePath$/',
-                    replace: (theme.length ? 'themes/' : ''),
                 }
             ]
         };
@@ -45,6 +34,7 @@ module.exports = {
     root: root,
     join: join,
     theme: theme,
+    themePath: themePath,
     globalCSSImports: globalCSSImports,
     themeReplaceOptions: themeReplaceOptions
 };

webpack/webpack.common.js

@@ -1,137 +1,196 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const fs = require('fs');
 const {
-    root,
+  root,
-    join,
+  join,
-    globalCSSImports,
+  globalCSSImports,
-    themeReplaceOptions
+  themeReplaceOptions,
+  theme,
+  themePath
 } = require('./helpers');
 
+const srcPath = root('src');
+
+const getThemedPath = (componentPath, ext) => {
+  const parsedPath = path.parse(componentPath);
+  const relativePath = path.relative(srcPath, parsedPath.dir);
+  return path.join(themePath, relativePath, `${parsedPath.name}.${ext}`);
+};
 
 module.exports = {
-    mode: 'development',
+  mode: 'development',
-    devtool: 'source-map',
+  devtool: 'source-map',
-    resolve: {
+  resolve: {
-        extensions: ['.ts', '.js', '.json']
+    extensions: ['.ts', '.js', '.json']
-    },
+  },
-    output: {
+  output: {
-        path: root('dist')
+    path: root('dist')
-    },
+  },
-    watchOptions: {
+  watchOptions: {
-        aggregateTimeout: 50,
+    aggregateTimeout: 50,
-    },
+  },
-    node: {
+  node: {
-        fs: "empty",
+    fs: "empty",
-        module: "empty"
+    module: "empty"
-    },
+  },
-    module: {
+  module: {
-        rules: [
+    rules: [
+      {
+        test: (filePath) => {
+          if (/\.component.ts$/.test(filePath)) {
+            const themedStylePath = getThemedPath(filePath, 'scss');
+            return fs.existsSync(themedStylePath);
+          } else {
+            return false;
+          }
+        },
+        use: (info) => {
+          const parsedPath = path.parse(info.resource);
+          const themedStylePath = getThemedPath(info.resource, 'scss');
+
+          return [
+            'debug-loader',
             {
-                test: /\.component.ts$/,
+              loader: 'string-replace-loader',
-                loader: 'string-replace-loader',
+              options: {
-                options: themeReplaceOptions
+                search: `\.\/${parsedPath.name}\.scss`,
-            },
+                replace: themedStylePath,
-            {
+                flags: 'g'
-                test: /\.ts$/,
+              }
-                loader: '@ngtools/webpack'
+
-            },
-            {
-                test: /\.css$/,
-                use: [{
-                    loader: 'to-string-loader',
-                    options: {
-                        sourceMap: true
-                    }
-                },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: true,
-                            modules: true
-                        }
-                    },
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            sourceMap: true
-                        }
-                    }
-                ]
-            },
-            {
-                test: /\.scss$/,
-                exclude: [/node_modules/,
-                    path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss')
-                ],
-                use: [
-                    {
-                        loader: 'raw-loader',
-                        options: {
-                            sourceMap: true
-                        }
-                    },
-                    {
-                        loader: 'resolve-url-loader',
-                        options: {
-                            sourceMap: true
-                        }
-                    },
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            sourceMap: true
-                        }
-                    },
-                    {
-                        loader: 'string-replace-loader',
-                        options: themeReplaceOptions
-                    },
-                    {
-                        loader: 'sass-resources-loader',
-                        options: {
-                            resources: globalCSSImports
-                        },
-                    },
-                    'webpack-import-glob-loader'
-                ]
-            },
-            {
-                test: /_exposed_variables.scss$/,
-                exclude: /node_modules/,
-                use: [{
-                    loader: "css-loader" // translates CSS into CommonJS
-                }, {
-                    loader: "sass-loader" // compiles Sass to CSS
-                },
-                    {
-                        loader: 'string-replace-loader',
-                        options: themeReplaceOptions
-                    },
-                    {
-                        loader: 'sass-resources-loader',
-                        options: {
-                            resources: globalCSSImports
-                        },
-                    }
-                ]
-            },
-            {
-                test: /\.html$/,
-                loader: 'raw-loader'
             }
-        ]
+          ]
-    },
-    plugins: [
-        new CopyWebpackPlugin([{
-            from: join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-            to: join('assets', 'fonts')
-        }, {
-            from: join(__dirname, '..', 'resources', 'images'),
-            to: join('assets', 'images')
-        }, {
-            from: join(__dirname, '..', 'resources', 'i18n'),
-            to: join('assets', 'i18n')
         }
-        ])
+      },
+      {
+        test: (filePath) => {
+          if (/\.component.ts$/.test(filePath)) {
+            const themedTemplatePath = getThemedPath(filePath, 'html');
+            return fs.existsSync(themedTemplatePath);
+          } else {
+            return false;
+          }
+        },
+        use: (info) => {
+          const parsedPath = path.parse(info.resource);
+          const themedTemplatePath = getThemedPath(info.resource, 'html');
+
+          return [
+            'debug-loader',
+            {
+              loader: 'string-replace-loader',
+              options: {
+                search: `\.\/${parsedPath.name}\.html`,
+                replace: themedTemplatePath,
+                flags: 'g'
+              }
+
+            }
+          ]
+        }
+      },
+      {
+        test: /\.ts$/,
+        loader: '@ngtools/webpack'
+      },
+      {
+        test: /\.css$/,
+        use: [{
+          loader: 'to-string-loader',
+          options: {
+            sourceMap: true
+          }
+        },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              modules: true
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        exclude: [/node_modules/,
+          path.resolve(__dirname, '..', 'src/styles/_exposed_variables.scss')
+        ],
+        use: [
+          {
+            loader: 'raw-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'resolve-url-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'string-replace-loader',
+            options: themeReplaceOptions
+          },
+          {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: globalCSSImports
+            },
+          },
+          'webpack-import-glob-loader'
+        ]
+      },
+      {
+        test: /_exposed_variables.scss$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: "css-loader" // translates CSS into CommonJS
+        }, {
+          loader: "sass-loader" // compiles Sass to CSS
+        },
+          {
+            loader: 'string-replace-loader',
+            options: themeReplaceOptions
+          },
+          {
+            loader: 'sass-resources-loader',
+            options: {
+              resources: globalCSSImports
+            },
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        loader: 'raw-loader'
+      }
     ]
+  },
+  plugins: [
+    new CopyWebpackPlugin([{
+      from: join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+      to: join('assets', 'fonts')
+    }, {
+      from: join(__dirname, '..', 'resources', 'images'),
+      to: join('assets', 'images')
+    }, {
+      from: join(__dirname, '..', 'resources', 'i18n'),
+      to: join('assets', 'i18n')
+    }
+    ])
+  ]
 };

webpack/webpack.server.js

@@ -12,7 +12,6 @@ module.exports = {
       output: {
         filename: 'server.js'
       },
-    module: {rules: []},
     target: 'node',
       externals: [nodeExternals({
         whitelist: [