feat: setup webpack dev env for bootstrap

docs_theme/.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+dist/

docs_theme/main.html

@@ -21,7 +21,7 @@
   <link href="{{ 'css/bootstrap-responsive.css'|url }}" rel="stylesheet">
   <link href="{{ 'css/default.css'|url }}" rel="stylesheet"> -->
 
-    <link rel="stylesheet" href="{{ 'css/bootstrap5.css'|url }}" />
+    <link rel="stylesheet" href="{{ 'dist/main.css'|url }}" />
 
     <script type="text/javascript">
       var _gaq = _gaq || [];
@@ -192,7 +192,7 @@
       var base_url = "{{ base_url }}";
     </script>
 
-    <script src="{{ 'js/bootstrap5.bundle.js'|url }}"></script>
+    <script src="{{ 'dist/main.js'|url }}"></script>
 
     {% for path in config.extra_javascript %}
     <script src="{{ path|url }}" defer></script>

docs_theme/package.json

@@ -4,11 +4,26 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack build",
+    "build:production": "webpack build --mode=production"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "css-loader": "^7.1.1",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.77.1",
+    "sass-loader": "^14.2.1",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }

docs_theme/src/js/main.js

@@ -0,0 +1,14 @@
+import "../../node_modules/bootstrap/js/dist/alert";
+import "../../node_modules/bootstrap/js/dist/button";
+import "../../node_modules/bootstrap/js/dist/carousel";
+import "../../node_modules/bootstrap/js/dist/collapse";
+import "../../node_modules/bootstrap/js/dist/dropdown";
+import "../../node_modules/bootstrap/js/dist//modal";
+import "../../node_modules/bootstrap/js/dist/offcanvas";
+import "../../node_modules/bootstrap/js/dist/popover";
+import "../../node_modules/bootstrap/js/dist/scrollspy";
+import "../../node_modules/bootstrap/js/dist/tab";
+import "../../node_modules/bootstrap/js/dist/toast";
+import "../../node_modules/bootstrap/js/dist/tooltip";
+
+import "../scss/styles.scss";

docs_theme/src/scss/styles.scss

@@ -0,0 +1,46 @@
+// Configuration
+@import "../../node_modules/bootstrap/scss/_functions";
+@import "../../node_modules/bootstrap/scss/_variables";
+@import "../../node_modules/bootstrap/scss/_variables-dark";
+@import "../../node_modules/bootstrap/scss/_maps";
+@import "../../node_modules/bootstrap/scss/_mixins";
+@import "../../node_modules/bootstrap/scss/_utilities";
+
+// Layout & components
+@import "../../node_modules/bootstrap/scss/_root";
+@import "../../node_modules/bootstrap/scss/_reboot";
+@import "../../node_modules/bootstrap/scss/_type";
+@import "../../node_modules/bootstrap/scss/_images";
+@import "../../node_modules/bootstrap/scss/_containers";
+@import "../../node_modules/bootstrap/scss/_grid";
+@import "../../node_modules/bootstrap/scss/_tables";
+@import "../../node_modules/bootstrap/scss/_forms";
+@import "../../node_modules/bootstrap/scss/_buttons";
+@import "../../node_modules/bootstrap/scss/_transitions";
+@import "../../node_modules/bootstrap/scss/_dropdown";
+@import "../../node_modules/bootstrap/scss/_button-group";
+@import "../../node_modules/bootstrap/scss/_nav";
+@import "../../node_modules/bootstrap/scss/_navbar";
+@import "../../node_modules/bootstrap/scss/_card";
+@import "../../node_modules/bootstrap/scss/_accordion";
+@import "../../node_modules/bootstrap/scss/_breadcrumb";
+@import "../../node_modules/bootstrap/scss/_pagination";
+@import "../../node_modules/bootstrap/scss/_badge";
+@import "../../node_modules/bootstrap/scss/_alert";
+@import "../../node_modules/bootstrap/scss/_progress";
+@import "../../node_modules/bootstrap/scss/_list-group";
+@import "../../node_modules/bootstrap/scss/_close";
+@import "../../node_modules/bootstrap/scss/_toasts";
+@import "../../node_modules/bootstrap/scss/_modal";
+@import "../../node_modules/bootstrap/scss/_tooltip";
+@import "../../node_modules/bootstrap/scss/_popover";
+@import "../../node_modules/bootstrap/scss/_carousel";
+@import "../../node_modules/bootstrap/scss/_spinners";
+@import "../../node_modules/bootstrap/scss/_offcanvas";
+@import "../../node_modules/bootstrap/scss/_placeholders";
+
+// Helpers
+@import "../../node_modules/bootstrap/scss/_helpers";
+
+// Utilities
+@import "../../node_modules/bootstrap/scss/utilities";

docs_theme/webpack.config.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const autoprefixer = require("autoprefixer");
+const miniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/js/main.js",
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  devServer: {
+    static: path.resolve(__dirname, "dist"),
+    port: 8080,
+    hot: true,
+  },
+  plugins: [new miniCssExtractPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.(scss)$/,
+        use: [
+          {
+            // Adds CSS to the DOM by injecting a `<style>` tag
+            loader: miniCssExtractPlugin.loader,
+          },
+          {
+            // Interprets `@import` and `url()` like `import/require()` and will resolve them
+            loader: "css-loader",
+          },
+          {
+            // Loader for webpack to process CSS with PostCSS
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [autoprefixer],
+              },
+            },
+          },
+          {
+            // Loads a SASS/SCSS file and compiles it to CSS
+            loader: "sass-loader",
+          },
+        ],
+      },
+    ],
+  },
+};