Skip to content
This repository has been archived by the owner on Dec 12, 2024. It is now read-only.

Create about page component - Vanilla.js #233

Merged
merged 3 commits into from
Oct 10, 2024
Merged

Create about page component - Vanilla.js #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
151f67c
Add About page component and integrate Tailwind CSS
29deepanshutyagi Oct 9, 2024
32d09c5
Refactor user authentication flow for improved error handling
29deepanshutyagi Oct 9, 2024
6725301
Update About page test to reflect new heading
29deepanshutyagi Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 41 additions & 2 deletions javascript/dwa-starter-vanillajs-vite/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion javascript/dwa-starter-vanillajs-vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion javascript/dwa-starter-vanillajs-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Loading
Loading