Add HTML template for navigation and update webpack configuration

vliz-be-opsci · Feb 5, 2025 · 6572ac7 · 6572ac7
1 parent 6b8bbda
commit 6572ac7
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,10 @@
 # production
 /build
 
+# public test html
+test.html
+/public/test.html
+
 #venv folder
 venv
 

diff --git a/config-overrides.js b/config-overrides.js
@@ -1,4 +1,5 @@
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = function override(config, env) {
   config.entry = {
@@ -9,5 +10,15 @@ module.exports = function override(config, env) {
     filename: "[name].bundle.js",
     path: path.resolve(__dirname, "build"),
   };
+
+  config.plugins = [
+    ...config.plugins,
+    new HtmlWebpackPlugin({
+      template: "./public/navigation_template.html",
+      filename: "navigation.html",
+      chunks: ["navigation"],
+    }),
+  ];
+
   return config;
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "gh-pages": "^5.0.0",
+    "html-webpack-plugin": "^5.6.3",
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "./"

diff --git a/public/navigation.html b/public/navigation.html
@@ -4,6 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Navigation Component</title>
+  <link rel="stylesheet" href="css/bootstrap.css" />
+  <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css" />
+  <link rel="stylesheet" href="css/nivo-lightbox/default.css" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900" rel="stylesheet" />
 </head>
 <body>
   <div id="navigation-root"></div>

diff --git a/public/navigation_template.html b/public/navigation_template.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Navigation Component</title>
+  <link rel="stylesheet" href="css/bootstrap.css" />
+  <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" />
+  <link rel="stylesheet" href="css/style.css" />
+  <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css" />
+  <link rel="stylesheet" href="css/nivo-lightbox/default.css" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900" rel="stylesheet" />
+</head>
+<body>
+  <div id="navigation-root"></div>
+</body>
+</html>
diff --git a/src/components/navigation.jsx b/src/components/navigation.jsx
@@ -2,10 +2,6 @@ import React from "react";
 
 export const Navigation = (props) => {
 
-  $(function () {
-    $('[data-toggle="tooltip"]').tooltip()
-  })
-
   //get the current route 
   const currentRoutePath = window.location.pathname;
   console.log(currentRoutePath);

diff --git a/src/navigation_entry.js b/src/navigation_entry.js
@@ -9,7 +9,6 @@ const data = {
   Header: MainData,
   Crates: CratesData,
   Profiles: ProfilesData,
-  Docs: DocsData,
 };
 
 ReactDOM.render(

diff --git a/yarn.lock b/yarn.lock
@@ -5474,7 +5474,7 @@
   "resolved" "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz"
   "version" "2.0.1"
 
-"html-webpack-plugin@^5.5.0":
+"html-webpack-plugin@^5.5.0", "html-webpack-plugin@^5.6.3":
   "integrity" "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg=="
   "resolved" "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz"
   "version" "5.6.3"