Merge pull request #11 from gwicho38/feature/add-tailwind-css

Added Web Components and Tailwind
gwicho38 · Feb 20, 2024 · 8f451b5 · 8f451b5
2 parents 7788642 + bd02526
commit 8f451b5
Show file tree

Hide file tree

Showing 16 changed files with 1,667 additions and 153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "express": "^4.18.2",
     "hbs": "^4.1.0",
     "http-errors": "~1.6.3",
-    "morgan": "~1.9.1"
+    "morgan": "~1.9.1",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "browser-sync": "^3.0.2",

diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,21 @@
-<!doctype html>
-<html lang="en-US">
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <meta charset="utf-8" />
-    <title>My test page</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>lefv.io</title>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
+  <script src="javascript/components/head-component.js"></script>
+  <script src="javascript/components/header-component.js" defer></script>
+  <script src="javascript/components/footer-component.js" defer></script>
+  <script src="javascript/components/body-component.js" defer></script>
+  <script src="javascript/components/main-component.js" defer></script>
 </head>
 
-<body>
-    <p>This is my page</p>
+<body class="root">
+  <main-component>
+  </main-component>
 </body>
 
-</html>
+</html>
diff --git a/public/javascript/components/body-component.js b/public/javascript/components/body-component.js
@@ -0,0 +1,15 @@
+class BodyComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+          <style>
+              @import "../../stylesheets/body-component.css";
+          </style>
+          <h1>Hello</h1>
+        `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('body-component', BodyComponent);
diff --git a/public/javascript/components/footer-component.js b/public/javascript/components/footer-component.js
@@ -0,0 +1,20 @@
+class FooterComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+            <head>
+              <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
+            </head>
+            <style>
+              @import "../../stylesheets/footer-component.css"
+            </style>
+            <footer class="flex justify-center items-center bg-gray-700 text-white p-4">
+                <p>© 2024 My Website. All rights reserved.</p>
+            </footer>
+        `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('footer-component', FooterComponent);
diff --git a/public/javascript/components/header-component.js b/public/javascript/components/header-component.js
@@ -0,0 +1,20 @@
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+            <head>
+              <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
+            </head>
+            <style>
+              @import "../../stylesheets/header-component.css"
+            </style>
+            <header class="justify-center items-center bg-blue-500 text-white p-4">
+                <h1>Welcome to My Website</h1>
+            </header>
+        `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('header-component', HeaderComponent);
diff --git a/public/javascript/components/main-component.js b/public/javascript/components/main-component.js
@@ -0,0 +1,17 @@
+class MainComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `
+          <style>
+              @import "../../stylesheets/main-component.css";
+          </style>
+          <header-component></header-component>
+          <body-component></body-component>
+          <footer-component></footer-component>
+        `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+customElements.define('main-component', MainComponent);
diff --git a/public/javascript/components/meta-component.js b/public/javascript/components/meta-component.js
diff --git a/public/javascripts/main.js → public/javascript/main.js b/public/javascripts/main.js → public/javascript/main.js
@@ -91,7 +91,7 @@
   })
 
   /**
-   * Scrool with ofset on links with a class name .scrollto
+   * Scroll with ofset on links with a class name .scrollto
    */
   on('click', '.scrollto', function(e) {
     if (select(this.hash)) {
@@ -255,4 +255,4 @@
     })
   });
 
-})()
+})()
diff --git a/public/stylesheets/body-component.css b/public/stylesheets/body-component.css
@@ -0,0 +1,6 @@
+:host {
+  flex: 1 1 auto;
+  /* Grow to fill available space */
+  overflow-y: auto;
+  /* Add scroll if content overflows */
+}
diff --git a/public/stylesheets/footer-component.css b/public/stylesheets/footer-component.css
@@ -0,0 +1,3 @@
+:host {
+  flex: 0 1 auto;
+}
diff --git a/public/stylesheets/header-component.css b/public/stylesheets/header-component.css
@@ -0,0 +1,3 @@
+:host {
+  flex: 0 1 auto;
+}
diff --git a/public/stylesheets/main-component.css b/public/stylesheets/main-component.css
@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* Full viewport height */
+}
diff --git a/public/stylesheets/theme.css b/public/stylesheets/theme.css
@@ -0,0 +1,6 @@
+/* theme.css */
+:root {
+  --background-color: #333;
+  --text-color: #fff;
+  --padding: 10px;
+}
diff --git a/views/error.hbs b/views/error.hbs
diff --git a/views/layout.hbs b/views/layout.hbs