@mel000000/weweb-dynamic-metadata 1.0.7 → 1.0.9

package/README.md

@@ -173,12 +173,23 @@ FOR SELECT
 TO anon 
 USING (true);
 ```
-#### 2. Set Up Environment Variables
+#### 2. Get Your Supabase API Key
+In your Supabase dashboard, go to **Project Settings > API Keys**. You'll see two types of keys:
+
+| Key Type | Format | When to Use |
+|----------|--------|-------------|
+| **Project URL** | `https://your-project.supabase.co` | Always needed |
+| **anon / publishable key** | `sb_publishable_...` or JWT | Legacy option (being phased out) |
+| **secret key** (recommended) | `sb_secret_...` | ✅ **Recommended for new projects** |
+
+> **Note:** Supabase is transitioning away from the legacy anon key. For new projects, use the **secret key** (starts with `sb_secret_...`). If you're using an older project, the anon key will continue working for now, but consider migrating to the new key format.
+
+#### 3. Set Up Environment Variables
 Create a ``.env`` file in your project root to store your Supabase credentials securely:
 ```.env
 # .env file
 SUPABASE_URL=https://your-project.supabase.co
-SUPABASE_ANON_KEY=your-anon-key-here
+SUPABASE_KEY=your-secret-or-anon-key-here
 ```
 ⚠️ Important: Never commit your .env file to version control. Add it to your .gitignore:
 ```text
@@ -187,14 +198,14 @@ SUPABASE_ANON_KEY=your-anon-key-here
 ```
 The package uses dotenv to automatically load these environment variables when you run the generator.
 
-#### 3. Create Config File
+#### 4. Create Config File
 Create ``weweb.config.js`` in your project root:
 ```javascript
 export default {
   // Your Supabase configuration
   supabase: {
     url: process.env.SUPABASE_URL,
-    anonKey: process.env.SUPABASE_ANON_KEY
+    apikey: process.env.SUPABASE_KEY  // Works with both anon and secret keys
   },
   
   // Optional: Specify your build folder (defaults to ./dist)
@@ -203,8 +214,8 @@ export default {
   // Define your dynamic routes
   pages: [
     {
-      route: "/article/:id",
-      table: "articles",              // Your Supabase table name
+      route: "/your-page-name/:id",
+      table: "table-view-name",              // Your Supabase table name
       metadata: {
         title: "title",                // Database field for title 
         content: "excerpt",            // Database field for description
@@ -214,13 +225,12 @@ export default {
   ]
 };
 ```
-#### 4. Run the Generator
+#### 5. Run the Generator
 ```bash
 # One-time generation
 npx @mel000000/weweb-dynamic-metadata
 
 ```
-
 ## How It Works
 
 ### 1. Reads Your Config

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mel000000/weweb-dynamic-metadata",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "description": "Generate dynamic metadata for WeWeb static exports",
   "main": "src/index.js",

package/src/core/file-processor.js

@@ -172,7 +172,7 @@ export async function processFiles() {
             
             // Ensure template exists and inject script
             await ensureTemplateExists(templatePath);
-            await injectScriptInTemplate(templatePath);
+            await injectScriptInTemplate(templatePath, page);
             
             // Fetch all metadata
             const metadataMap = new Map();

package/src/templates/metadata-injector.js

@@ -1,53 +1,33 @@
 // src/templates/metadata-injector.js
-export const METADATA_INJECTOR_SCRIPT = `
+export async function metadata_injector_script(page) {
+    return `
 <!-- METADATA INJECTOR -->
-<script src="/article/metadata.js"></script>
+<script src="/${page.route}/metadata.js"></script>
 
 <script>
 (function() {
     'use strict';
     
     // Prevent duplicate execution
-    if (window.__METADATA_INJECTOR_LOADED) {
-        console.log('🔄 Metadata injector already loaded, skipping...');
-        return;
-    }
+    if (window.__METADATA_INJECTOR_LOADED) return;
     window.__METADATA_INJECTOR_LOADED = true;
     
-    console.log('🚀 Metadata injector starting...');
-    
-    // Configuration
-    const CONFIG = {
-        DEBUG: true,
-        META_TIMEOUT: 2000
-    };
-    
-    // State
-    let currentMetadata = null;
-    let appliedId = null;
-    
-    // Debug logging
-    function debugLog(...args) {
-        if (CONFIG.DEBUG) console.log('[Metadata]', ...args);
-    }
-    
-    // Get ID from URL
-    function getArticleId() {
+    function getId() {
         const path = window.location.pathname;
         const parts = path.split('/').filter(p => p.length);
         
-        // Case 1: /article/2
-        if (parts[0] === 'article' && parts[1] && parts[1] !== '_param') {
+        // Case 1: /content/2
+        if (parts[0] === ${JSON.stringify(page.route)} && parts[1] && parts[1] !== '_param') {
             return parts[1];
         }
         
-        // Case 2: /article/_param/?id=2
-        if (parts[0] === 'article' && parts[1] === '_param') {
+        // Case 2: /content/_param/?id=2
+        if (parts[0] === ${JSON.stringify(page.route)} && parts[1] === '_param') {
             return new URLSearchParams(window.location.search).get('id');
         }
         
         // Case 3: Reference mode (ID stored in global)
-        return window.__REFERENCE_ARTICLE_ID;
+        return window.__REFERENCE_CONTENT_ID;
     }
     
     // Update meta tags
@@ -62,32 +42,21 @@ export const METADATA_INJECTOR_SCRIPT = `
         el.setAttribute('content', String(value).replace(/[<>]/g, ''));
     }
     
-    // Apply metadata
     function applyMetadata() {
-        const id = getArticleId();
+        const id = getId();
         if (!id || !window.METADATA) return false;
         
         const meta = window.METADATA[id];
-        if (!meta) {
-            console.warn('⚠️ No metadata for ID:', id);
-            return false;
-        }
+        if (!meta) return false;
         
-        // Don't reapply if same ID
-        if (id === appliedId) return true;
-        
-        debugLog('Applying metadata for ID:', id);
-        
-        // Set title - FIXED: Don't remove the title tag, just update it
+        // Set title
         if (meta.title) {
-            // Find existing title tag or create new one
             let titleTag = document.querySelector('title');
             if (!titleTag) {
                 titleTag = document.createElement('title');
                 document.head.appendChild(titleTag);
             }
             titleTag.textContent = meta.title;
-            // Also set document.title for good measure
             document.title = meta.title;
         }
         
@@ -123,9 +92,8 @@ export const METADATA_INJECTOR_SCRIPT = `
         }
         canonical.setAttribute('href', window.location.href.split('?')[0]);
         
-        // Structured data - FIXED: Don't remove if we don't have data
+        // Structured data
         if (meta.title || desc || img) {
-            // Remove existing JSON-LD
             document.querySelectorAll('script[type="application/ld+json"]').forEach(el => el.remove());
             
             const ldJson = {
@@ -142,10 +110,6 @@ export const METADATA_INJECTOR_SCRIPT = `
             document.head.appendChild(script);
         }
         
-        currentMetadata = meta;
-        appliedId = id;
-        
-        console.log('✅ Metadata applied for', id);
         return true;
     }
     
@@ -155,15 +119,9 @@ export const METADATA_INJECTOR_SCRIPT = `
         
         // Wait for metadata if not loaded
         if (!window.METADATA) {
-            const timeout = setTimeout(() => {
-                console.log('⏰ Metadata timeout');
-                clearInterval(checkInterval);
-            }, CONFIG.META_TIMEOUT);
-            
             const checkInterval = setInterval(() => {
                 if (window.METADATA && applyMetadata()) {
                     clearInterval(checkInterval);
-                    clearTimeout(timeout);
                 }
             }, 50);
         }
@@ -176,16 +134,7 @@ export const METADATA_INJECTOR_SCRIPT = `
         init();
     }
     
-    // Handle SPA navigation
-    let lastUrl = location.href;
-    setInterval(() => {
-        if (location.href !== lastUrl) {
-            lastUrl = location.href;
-            appliedId = null;
-            init();
-        }
-    }, 500);
-    
 })();
 </script>
-`;
+`;
+}

package/src/utils/template-injector.js

@@ -1,9 +1,9 @@
 // src/utils/template-injector.js
 import fs from 'fs-extra';
 import path from 'path';
-import { METADATA_INJECTOR_SCRIPT } from '../templates/metadata-injector.js';
+import { metadata_injector_script } from '../templates/metadata-injector.js';
 
-export async function injectScriptInTemplate(templatePath) {
+export async function injectScriptInTemplate(templatePath, page) {
     try {
         // Check if file exists
         if (!await fs.pathExists(templatePath)) {
@@ -34,7 +34,7 @@ export async function injectScriptInTemplate(templatePath) {
         }
         
         // Insert script before </head>
-        template = template.replace('</head>', METADATA_INJECTOR_SCRIPT + '\n</head>');
+        template = template.replace('</head>', metadata_injector_script(page) + '\n</head>');
         
         // Write back
         await fs.writeFile(templatePath, template, 'utf-8');