placeholder content

content/index.html

@@ -1 +1,9 @@
-<span class="red">Hello World</span>
+<div class="px-4 py-5 my-5 text-center">
+  <h1 class="display-5 fw-bold text-body-emphasis">UniWorX Systems</h1>
+  <div class="col-lg-6 mx-auto">
+    <p class="lead">
+      Diese Seite befindet sich aktuell noch im Aufbau.
+      Später finden Sie hier Informationen zu den von UniWorX Systems angebotenen Produkten und Dienstleistungen im Bereich Campusmanagement-Software und Ähnlichem.
+    </p>
+  </div>
+</div>

frontend/package.json

@@ -3,19 +3,29 @@
   "version": "1.0.0",
   "main": "index.js",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "@popperjs/core": "^2.11.7",
+    "bootstrap": "^5.2.3"
+  },
   "scripts": {
     "build": "webpack"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
     "@webpack-cli/generators": "^3.0.4",
     "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^5.0.0",
     "js-yaml": "^4.1.0",
     "mini-css-extract-plugin": "^2.7.5",
     "postcss": "^8.4.23",
     "postcss-loader": "^7.3.0",
+    "postcss-preset-env": "^8.3.2",
     "prettier": "^2.8.8",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "style-loader": "^3.3.2",

frontend/src/index.js

@@ -1 +1,3 @@
-import './main.sass';
+import 'bootstrap/scss/bootstrap.scss'
+
+import {} from 'bootstrap'

frontend/src/main.sass

@@ -1,2 +0,0 @@
-.red
-  color: red

frontend/webpack.config.js

@@ -4,6 +4,9 @@ const path = require("path");
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const TerserPlugin = require('terser-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const yaml = require('js-yaml');
 
 const stylesHandler = MiniCssExtractPlugin.loader;
@@ -37,33 +40,80 @@ const config = {
       filename: '[chunkhash].css',
       chunkFilename: '[chunkhash].css',
     }),
-
-    new RemoveEmptyScriptsPlugin({
-      extensions: /\.(js|css|scss|sass|less|styl)([?].*)?$/
-    }),
-
-    // Add your plugins here
-    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
   ],
 
   module: {
     rules: [
       {
-        test: /\.s[ac]ss$/i,
-        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
-      },
-      {
-        test: /\.css$/i,
-        use: [stylesHandler, "css-loader", "postcss-loader"],
-      },
-      {
-        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
-        type: "asset",
-      },
+	loader: 'babel-loader',
 
-      // Add your rules for custom modules here
-      // Learn more about loaders from https://webpack.js.org/loaders/
+	options: {
+	  plugins: ['syntax-dynamic-import'],
+
+	  presets: [
+	    [
+	      '@babel/preset-env',
+	      {
+		modules: false,
+		targets: "defaults",
+		useBuiltIns: "usage",
+		corejs: 3
+	      }
+	    ]
+	  ]
+	},
+	test: /\.js$/i,
+	exclude: /node_modules/,
+      },
+      {
+	test: /\.css$/i,
+	use: [ MiniCssExtractPlugin.loader,
+	       { loader: 'css-loader', options: { sourceMap: true }},
+	       { loader: 'postcss-loader', options: {
+		   sourceMap: true,
+		   postcssOptions:  {
+		     plugins: [ 'postcss-preset-env' ]
+		   }
+	       }},
+	       { loader: 'resolve-url-loader', options: { sourceMap: true }}
+	     ]
+      },
+      {
+	test: /\.s(c|a)ss$/i,
+	use: [ MiniCssExtractPlugin.loader,
+	       { loader: 'css-loader', options: { sourceMap: true }},
+	       { loader: 'postcss-loader', options: {
+		   sourceMap: true,
+		   postcssOptions:  {
+		     plugins: [ 'postcss-preset-env' ]
+		   }
+	       }},
+	       { loader: 'resolve-url-loader', options: { sourceMap: true }},
+	       { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true }}
+	     ]
+      },
+      {
+	test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/i,
+	type: 'asset'
+      }
+    ]
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+	parallel: true,
+	terserOptions: {
+	  sourceMap: true
+	}
+      }),
+      new CssMinimizerPlugin(),
     ],
+    moduleIds: 'named',
+    chunkIds: 'named',
+    runtimeChunk: 'single',
+    realContentHash: false
   },
 };
 

src/Main.hs

@@ -38,12 +38,17 @@ main = hakyllWith config $ do
 
     let context =
           defaultContext
+            <> jsContext
             <> cssContext
 
         cssContext = listField "css" innerContext genCSSItems
           where
             innerContext = urlField "url"
             genCSSItems = genManifestItems $ Glob.compile "**/*.css"
+        jsContext = listField "js" innerContext genCSSItems
+          where
+            innerContext = urlField "url"
+            genCSSItems = genManifestItems $ Glob.compile "**/*.js"
 
         genManifestItems :: Glob.Pattern -> Compiler [Item CopyFile]
         genManifestItems p = do

templates/site-layout.html

@@ -10,6 +10,11 @@
   </head>
 
   <body>
-    $body$
+    <main>
+      $body$
+    </main>
+    $for(js)$
+      <script src="$url$">
+    $endfor$
   </body>
 </html>