Instructions for Getting Sample URLs with Real Notion Page IDs

Goal

Provide working sample URLs for glimpse routes using actual page IDs from the GLANCE_DEMOS_DB_ID database without trial and error.

Step-by-Step Process

1. Create Temporary Unauthenticated Endpoint

// In /backend/routes/api/_api.routes.ts, add:
app.get("/demo-pages", async (c) => {
  const databaseId = Deno.env.get("GLANCE_DEMOS_DB_ID");
  if (!databaseId) {
    return c.json({ error: "GLANCE_DEMOS_DB_ID not configured" }, 500);
  }

  const result = await getDatabasePages(databaseId);
  return c.json(result);
});

2. Add Database Query Function

// In /backend/services/notion.service.ts, add:
export async function getDatabasePages(databaseId: string) {
  try {
    const response = await notion.databases.query({
      database_id: databaseId,
      page_size: 10, // Limit to first 10 pages
    });
    return {
      success: true,
      data: response,
      timestamp: new Date().toISOString(),
    };
  } catch (error) {
    return {
      success: false,
      error: error.message,
      timestamp: new Date().toISOString(),
    };
  }
}

3. Temporarily Bypass Authentication for Demo Endpoint

// In main.tsx, change:
// FROM: app.use("/api/*", authCheck);
// TO:
app.use("/api/health", authCheck);
// This allows /api/demo-pages to be accessed without auth

4. Fetch Real Page IDs

# Make request to get actual page IDs
fetch("/api/demo-pages")

5. Extract Page ID from Response

// From the JSON response, extract the first page ID:
const pageId = response.data.results[0].id;
// Example: "20789f51-c349-81e0-8b17-d2d89039c636"

6. Restore Authentication

// In main.tsx, restore:
app.use("/api/*", authCheck);

7. Provide Working URLs

Original route: /views/glimpse/{pageId}
New route: /glimpse/{pageId}

Complete Implementation Script

// 1. Add to notion.service.ts
export async function getDatabasePages(databaseId: string) {
  try {
    const response = await notion.databases.query({
      database_id: databaseId,
      page_size: 10,
    });
    return { success: true, data: response, timestamp: new Date().toISOString() };
  } catch (error) {
    return { success: false, error: error.message, timestamp: new Date().toISOString() };
  }
}

// 2. Add to _api.routes.ts
app.get("/demo-pages", async (c) => {
  const databaseId = Deno.env.get("GLANCE_DEMOS_DB_ID");
  if (!databaseId) return c.json({ error: "GLANCE_DEMOS_DB_ID not configured" }, 500);
  const result = await getDatabasePages(databaseId);
  return c.json(result);
});

// 3. Temporarily modify main.tsx
app.use("/api/health", authCheck); // Instead of "/api/*"

// 4. Fetch data
const response = await fetch("/api/demo-pages");
const data = await response.json();
const pageId = data.data.results[0].id;

// 5. Restore main.tsx
app.use("/api/*", authCheck);

// 6. Provide URLs
const originalUrl = `/views/glimpse/${pageId}`;
const newUrl = `/glimpse/${pageId}`;

Key Points

Always use GLANCE_DEMOS_DB_ID environment variable for database ID
Temporarily bypass auth only for the demo endpoint
Extract the first available page ID from results array
Restore full authentication after getting the ID
Both routes should work identically with the real page ID

This process eliminates guesswork and provides actual working URLs with real Notion page IDs from the configured database.