Project Office

Overview

The Project Office is a dedicated system for following up projects created and managed within the BearLabs ecosystem. Each project gets its own standalone page that can be embedded into bearlabs.net, providing a public-facing view of ongoing learning & creative endeavors.

Purpose

• Follow-Up Projects: Showcase projects created each month with detailed information, progress tracking, and visual elements
• External Embeddability: Generate standalone pages optimized for iframe embedding into bearlabs.net or other external sites

Solution

Implementation Summary

Implemented embed mode functionality for all project kanban board pages to enable iframe embedding into bearlabs.net.

Technical Approach

Query Strategy:

• Monthly Kanban (existing): Fetches tasks by date range and shows all projects within that month using tabs
• Project Office (embed mode): Uses the same kanban board but can be displayed without navigation chrome via ?embed=true URL parameter

Data Fetching:

• Uses existing src/lib/monthly.ts functions (levels()) to fetch backlog items and tasks
• Filters by project name using project.ilike('%project-name%')
• No changes to backend queries required - reuses existing monthly data fetching logic

UI Implementation: The solution adds conditional rendering to project pages:

1. Normal Mode (default): Full layout with navigation, breadcrumbs, and project heading
2. Embed Mode (?embed=true): Minimal layout with just the kanban board and margin

Files Updated

Updated all [...tab].astro files in both locations:

Current Month Projects (/src/pages/2025/12/benben/projects/):

• bearlabs/[...tab].astro
• benben/[...tab].astro
• hygge/[...tab].astro
• walkingweekend/[...tab].astro

Base Projects (/src/pages/benben/projects/):

• bearlabs/[...tab].astro
• benben/[...tab].astro
• hygge/[...tab].astro
• walkingweekend/[...tab].astro

Changes Made

Each file now includes:

1. Import EmbedLayout

   import EmbedLayout from "@/layouts/Layout.astro";

2. Embed Parameter Detection

   let embed = Astro.url.searchParams.get("embed");

3. Conditional Rendering

   {!embed && (
       <Layout menu="Projects" heading="Project Name" focus={focus}>
           <Breadcrumb theme={themes.text} loc={loc} />
           <Board ... />
       </Layout>
   )}
   {embed && (
       <EmbedLayout>
           <div class="m-6">
               <Board ... />
           </div>
       </EmbedLayout>
   )}

Usage

Standalone View:

/2025/12/benben/projects/bearlabs/
/benben/projects/hygge/

Embed View (for bearlabs.net):

/2025/12/benben/projects/bearlabs/?embed=true
/benben/projects/hygge/?embed=true

Embed Code Example:

<iframe 
  src="https://bearlabs.io/benben/projects/bearlabs/?embed=true"
  width="100%"
  height="800px"
  frameborder="0"
  loading="lazy"
></iframe>

Benefits

• ✅ No Backend Changes: Reuses existing monthly data fetching logic
• ✅ Consistent with Existing Architecture: Uses same Board component and data structure
• ✅ Simple Implementation: Single URL parameter controls embed mode
• ✅ Flexible: Works with all existing project pages and tabs (learning, prototyping, coding, testing)
• ✅ Future-Proof: Pattern can be easily replicated for new projects

Next Steps (Optional Enhancements)

• Add project-specific query functions in src/lib/project-office.ts for cross-month aggregation
• Create dedicated project office index page at /project-office/[project]/
• Implement project statistics and progress tracking
• Add project metadata and descriptions via content collections