Create about page component - Vanilla.js (#233)

* Add About page component and integrate Tailwind CSS * Refactor user authentication flow for improved error handling * Update About page test to reflect new heading
TBD54566975 · Oct 10, 2024 · ea5d15a · ea5d15a
1 parent 47b50f4
commit ea5d15a
Show file tree

Hide file tree

Showing 7 changed files with 932 additions and 5 deletions.
diff --git a/javascript/dwa-starter-vanillajs-vite/components.js b/javascript/dwa-starter-vanillajs-vite/components.js
@@ -1,11 +1,50 @@
 // components.js
-
+function AboutPage() {
+    // Create the main container
+    const container = document.createElement('div');
+    container.classList.add('space-y-4', 'p-6', 'text-center');
+
+    // Create the main title
+    const title = document.createElement('h1');
+    title.textContent = 'DWA Starter Vanilla';
+    title.classList.add('text-3xl', 'font-bold', 'mb-4');
+
+    // Create the first paragraph
+    const para1 = document.createElement('p');
+    para1.textContent = "Decentralized Web App: it's a Web5 Progressive Web App.";
+    para1.classList.add('text-lg');
+
+    // Create the subtitle
+    const subtitle = document.createElement('h2');
+    subtitle.textContent = 'Why PWA?';
+    subtitle.classList.add('text-2xl', 'font-semibold', 'mt-4');
+
+    // Create the second paragraph
+    const para2 = document.createElement('p');
+    para2.textContent = 'It\'s a perfect match with Web5 DWNs since a PWA can work offline and DWN has a synced local storage.';
+    para2.classList.add('text-lg');
+
+    // Append elements to the container
+    container.appendChild(title);
+    container.appendChild(para1);
+    container.appendChild(subtitle);
+    container.appendChild(para2);
+
+    // Return the container element
+    return container;
+  }
+
 export function Home() {
     document.getElementById('app').innerHTML = `<h1>Home</h1>`;
 }
 
 export function About() {
-    document.getElementById('app').innerHTML = `<h1>About</h1>`;
+    const app = document.getElementById('app');
+    app.innerHTML = ''; // Clear the current content
+
+    // Create and append the About page
+    const aboutPage = AboutPage(); // Call the AboutPage function to get the component
+    app.appendChild(aboutPage);
 }
 
 export function Settings() {

diff --git a/javascript/dwa-starter-vanillajs-vite/index.html b/javascript/dwa-starter-vanillajs-vite/index.html
@@ -11,7 +11,7 @@
       name="description"
       content="A Decentralized Web Application template"
     />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="dist/output.css" />
   </head>
   <body>
     <nav>

diff --git a/javascript/dwa-starter-vanillajs-vite/package.json b/javascript/dwa-starter-vanillajs-vite/package.json
@@ -7,12 +7,17 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "playwright test --config=playwright.config.js"
+    "test": "playwright test --config=playwright.config.js",
+    "build:css": "tailwindcss -i ./style.css -o ./dist/output.css --watch" 
+
   },
   "devDependencies": {
     "@playwright/test": "^1.47.2",
+    "autoprefixer": "^10.4.20",
     "jsdom": "^25.0.1",
     "playwright": "^1.47.2",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
     "vite": "^5.4.1",
     "vitest": "^2.1.2"
   },