routes moved to independent file

README.md

@@ -1,8 +1,8 @@
 # Plain JS Framework, initially from cive, web-team 🚀
 
-  <p>
-    <img src="https://komarev.com/ghpvc/?username=cive-framework&label=cive-framework&color=0e75b6&style=flat" alt="since 21 Feb,2024" />
-  </p>
+<p>
+  <img src="https://komarev.com/ghpvc/?username=cive-framework&label=cive-framework&color=0e75b6&style=flat" alt="since 21 Feb,2024" />
+</p>
 
 - [ ] **Currently on Development.. 🔥**
 
@@ -21,15 +21,14 @@ cive/
 │   │   └── images/
 │   │
 │   ├── components/
-│   │   └── Home.js
-│   │   └── About.js
-│   │   └── Contact.js
+│   │   └── home.html
 │   │
 │   ├── css/
-│   │   └── custom.css
-│   │
+│   │   └── style-main.css
+│   │   
+|   |
 │   ├── js/
-│   │   └── custom.js
+│   │   └──  //... your custom JS
 │   │
 │   ├── routes.js
 │   ├── App.js

index.html

@@ -9,7 +9,7 @@
     <meta name="author" content="">
 
     <!-- Favicon -->
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="/src/css/style-main.css">

src/App.js

@@ -1,9 +1,4 @@
-// Define the routes and their corresponding HTML files
-const routes = {
-  '/home': '/src/components/home.html',
-  '/about': '/src/components/about.html',
-  '/contact': '/src/components/contact.html'
-};
+import { routes } from './routes.js';
 
 // Function to navigate to a specific route
 function navigateTo(route) {
@@ -12,10 +7,12 @@ function navigateTo(route) {
     // Fetch and render the HTML content of the corresponding file
     fetchHtml(routes[route]);
   } else {
-    // the custom 404 page
-    fetchHtml('/src/components/404.html');
+    // Route Not Found Route
+
+    // The custom 404 page
+    fetchHtml('/src/components/not-found/404.html');
 
-    // Route not found, display a 404 error message
+    /* Uncomment to display custom message only ( No File ) */
     //renderComponent('404: Page not found.');
   }
 }
@@ -25,13 +22,16 @@ function fetchHtml(path) {
   fetch(path)
     .then(response => {
       if (!response.ok) {
+        console.log(`(cive) File:: {path} not found!`);
         throw new Error('Failed to fetch HTML file');
+
       }
       return response.text();
     })
     .then(html => renderComponent(html))
     .catch(error => {
       console.error(error);
+      console.log(`(cive) FailMessage:: Failed to load page!`)
       renderComponent('Failed to load page.');
     });
 }

src/components/index.html

@@ -0,0 +1,3 @@
+<p> This is index page </p>
+
+<p> here we go </p>

src/css/style-main.css

@@ -0,0 +1,5 @@
+/* This makes your site little responsive */
+
+* {
+    min-width: 0;
+}

src/routes.js

@@ -0,0 +1,5 @@
+// Define the routes and their corresponding HTML files
+export const routes = {
+    '/': '/src/components/index.html',
+    '/home': '/src/components/home.html',
+};