updated directory structure to fix root Service Worker issues and performance improvements

2025-09-08 23:18:43 +00:00 · 2025-02-05 16:54:40 -05:00
parent 03c28dacab
commit b6b61e4e15
94 changed files with 2265 additions and 79 deletions
--- a/content/roadmap/04_bitvid_Enhanced_Profile_Channel_Views_Specification.md
+++ b/content/roadmap/04_bitvid_Enhanced_Profile_Channel_Views_Specification.md
@@ -0,0 +1,149 @@
+# **bitvid: Enhanced Profile/Channel Views Specification**
+
+## **Overview**
+We aim to integrate a multi-view system within `index.html`, allowing smooth navigation between views like the home grid and user profiles. This will leverage JavaScript for dynamic DOM manipulation, maintaining a consistent layout (header, footer, future sidebar) across views.
+
+---
+
+## **Structure and Navigation**
+### **Navigation Logic**
+1. **Default View (Home Grid):**
+   - A grid showcasing all videos.
+   - Acts as the primary landing page.
+
+2. **Profile View:**
+   - A user's profile page containing:
+     - Profile banner and information.
+     - Action buttons (Subscribe, Share, Block).
+     - Videos grid (only videos posted by the user).
+
+3. **Templating System:**
+   - Use dynamic DOM manipulation to switch views without reloading the page.
+   - Structure each "view" as a reusable container rendered based on URL or state.
+
+---
+
+## **Dynamic Routing**
+### **Route Handling**
+- Use the `hashchange` or `pushState` method to detect and handle navigation.
+- Route format:
+  - `/#home`: Default home grid view.
+  - `/#profile/{npub}`: Profile view of a specific user, determined by `{npub}`.
+
+### **Implementation Plan**
+- Use JavaScript to parse the `window.location.hash` or `window.location.pathname` and determine which view to render.
+- Example:
+  ```javascript
+  const renderView = () => {
+    const hash = window.location.hash;
+    if (hash.startsWith("#profile")) {
+      const npub = hash.split("/")[1];
+      loadProfileView(npub);
+    } else {
+      loadHomeGrid();
+    }
+  };
+
+  window.addEventListener("hashchange", renderView);
+  window.addEventListener("load", renderView);
+  ```
+
+---
+
+## **View Templates**
+### **Template System**
+1. **Home Grid Template:**
+   - Container: `#homeGrid`.
+   - Dynamically populate the grid with all videos fetched from Nostr relays.
+
+2. **Profile Template:**
+   - Container: `#profileView`.
+   - Display user details and their videos based on the `npub`.
+
+3. **Shared Components:**
+   - Header, footer, and optional sidebar remain static.
+   - Use `display: none` and `block` to toggle view visibility.
+
+### **HTML Structure**
+Add placeholders for different views in `index.html`:
+```html
+<div id="homeGrid" class="view hidden">
+  <!-- Home grid content -->
+</div>
+
+<div id="profileView" class="view hidden">
+  <header class="profile-header">
+    <img id="profileBanner" src="" alt="Banner" />
+    <img id="profileImage" src="" alt="Profile" />
+    <h1 id="profileName"></h1>
+    <p id="profileBio"></p>
+    <button id="subscribeBtn">Subscribe</button>
+    <button id="shareProfileBtn">Share</button>
+    <button id="blockProfileBtn">Block</button>
+  </header>
+  <div id="profileVideos" class="videos-grid">
+    <!-- User's videos -->
+  </div>
+</div>
+```
+
+---
+
+## **Functionality**
+### **Profile Fetching**
+- Use Nostr protocol (`kind 0`) to fetch profile details.
+- Display:
+  - Profile picture, name, bio, and website link.
+  - Action buttons for Subscribe, Share, and Block.
+
+### **Videos Fetching**
+- Fetch videos (`kind 30078`) filtered by the user's `npub`.
+
+### **Subscriptions**
+- Use `kind 30002` to manage the subscription list:
+  - Subscribe: Add user to the list.
+  - Unsubscribe: Remove user.
+
+### **Implementation Example**
+```javascript
+const loadProfileView = async (npub) => {
+  // Fetch profile details
+  const profileEvent = await nostrClient.fetchProfile(npub);
+  const { name, picture, about } = profileEvent.content;
+
+  // Update profile view
+  document.getElementById("profileImage").src = picture;
+  document.getElementById("profileName").textContent = name;
+  document.getElementById("profileBio").textContent = about;
+
+  // Fetch and display user videos
+  const userVideos = await nostrClient.fetchVideosByNpub(npub);
+  renderVideos(userVideos, "profileVideos");
+
+  // Show profile view
+  showView("profileView");
+};
+
+const showView = (viewId) => {
+  document.querySelectorAll(".view").forEach((view) => {
+    view.classList.toggle("hidden", view.id !== viewId);
+  });
+};
+```
+
+---
+
+## **Unique Profile URLs**
+- Format: `https://bitvid.network/#profile/{npub}`.
+- Navigation to this URL will directly load the profile view.
+- Use `history.pushState` or `location.hash` to set the URL.
+
+---
+
+## **Next Steps**
+- **Integrate Dynamic Routing**: Update `app.js` with route handling for views.
+- **Refactor HTML**: Add placeholders for views in `index.html`.
+- **Build Profile Fetching Logic**: Use Nostr client to fetch and display user details dynamically.
+- **Enhance UX**: Smooth transitions between views with CSS animations.
+
+This setup achieves a modular SPA-like architecture while keeping development lightweight and aligned with your project’s goals.