Skip to content

PHASE_3.md

Latest commit

 

History

History
154 lines (113 loc) · 5.67 KB

PHASE_3.md

File metadata and controls

154 lines (113 loc) · 5.67 KB
Raw

Phase 3: Public Blog Frontend

Objective

Build the public-facing blog interface for OpenBlog, including the blog feed with featured content, individual post views, and the foundational navigation. This phase implements the "Digital Curator" aesthetic defined in DESIGN.md using the ui_reference/public_blog_feed as the primary visual guide.

Scope

Deliverables

  1. Blog Feed Page

    • Featured hero section with asymmetrical editorial layout
    • Bento-grid style card layout for recent posts
    • Featured post card (larger, prominent placement)
    • Side cards for additional content
    • Load more / pagination functionality

  2. Individual Post View

    • Full Markdown content rendering
    • LaTeX mathematical notation support
    • Author information and metadata
    • Reading time indicator
    • Related posts suggestions

  3. Navigation

    • Top navigation bar with glassmorphism effect
    • Mobile-responsive hamburger menu
    • Bottom navigation bar for mobile devices (per ui_reference)

  4. Footer

    • Site links (Privacy, Terms, API, Contact)
    • Copyright notice

UI/UX Governance

CRITICAL: This phase must strictly follow DESIGN.md and ui_reference files.

Visual Authority

  1. Primary Reference: ui_reference/public_blog_feed/code.html and screen.png

    • The featured hero section must match the asymmetrical layout
    • The bento-grid card system must follow the 12-column grid structure
    • Typography, spacing, and component placement must match the reference

  2. Design System Compliance:

    Color Palette:

    • Background: #131315 (surface)
    • Primary: #d2bbff
    • Primary Container: #7c3aed
    • Surface Container Low: #1b1b1d
    • Surface Container: #201f21
    • Surface Container Highest: #353437
    • On Surface: #e5e1e4
    • On Surface Variant: #ccc3d8

    Typography:

    • Headlines: Manrope (font-headline)
    • Body: Inter (font-body)
    • Labels: Inter (font-label)
    • Use Sentence Case or Title Case, NEVER SCREAMING_SNAKE_CASE

    The "No-Line Rule":

    • NO 1px solid borders for sectioning
    • Use background color shifts for boundaries
    • Use the "Ghost Border" fallback (outline-variant at 15% opacity) only when absolutely necessary for accessibility

    Surface Hierarchy:

    • Base: surface (#131315)
    • Secondary: surface-container-low (#1b1b1d)
    • Cards: surface-container (#201f21)
    • Floating: surface-container-highest (#353437) at 80% opacity with 20px backdrop blur

    Button Styles:

    • Primary: Gradient (primary to primary-container at 135°), 8px radius, no border
    • Secondary: surface-container-highest background, ghost border at 15% opacity
    • Tertiary: Ghost style, text only in primary color

    Input Fields:

    • surface-container-low fill
    • 2px bottom accent in outline-variant
    • On focus: bottom accent transitions to primary with subtle outer glow

    Featured Blog Header (Signature Component):

    • Asymmetrical layout
    • display-md headline overlaps the edge of primary-container image mask

Spacing Rules

  • Use spacing scale: 8 (2rem) between major content themes
  • Minimum corner radius: 4px (0.25rem/lg)

Agent Verification Checklist

Complete all checkpoints before proceeding to Phase 4:

  • I have verified the featured hero section matches ui_reference/public_blog_feed (asymmetrical layout, overlapping headline)
  • I have implemented the bento-grid card layout following the 12-column structure in the reference
  • I have applied the DESIGN.md color palette correctly (surface #131315, primary #d2bbff, etc.)
  • I have used Manrope for headlines and Inter for body text
  • I have implemented the "No-Line Rule" - no 1px solid borders for sectioning
  • I have applied surface hierarchy for cards and containers
  • I have implemented glassmorphism on the top navigation bar (backdrop-blur-xl, 70% opacity)
  • I have created the gradient primary button style (135° gradient)
  • I have verified responsive behavior matches the reference (mobile bottom nav, desktop top nav)
  • I have implemented the load more / pagination functionality
  • I have verified Markdown and LaTeX rendering in post views
  • I have implemented basic SEO meta tags for the blog feed and post pages

Testing & Validation

Success Criteria

Criteria Validation Method
Visual matches ui_reference Side-by-side comparison with reference screenshots
Design tokens applied correctly Browser dev tools inspection
Responsive layout works Test on mobile, tablet, desktop viewports
Content renders correctly Test with sample Markdown and LaTeX
Navigation functions Manual testing of all links

Visual Verification Checklist

  • Hero section has asymmetrical layout with overlapping headline
  • Cards use surface hierarchy (surface-container-low to surface-container transition on hover)
  • Buttons have gradient fill with 135° angle
  • Navigation has glassmorphism effect
  • No 1px solid borders visible anywhere
  • Typography uses Manrope and Inter correctly
  • Spacing follows the design system

Dependencies

  • Phase 2: Content Management & API Layer (completed)

Next Phase Preview

Phase 4 will implement the Admin Dashboard and CMS Manager, utilizing:

  • The admin_dashboard reference for the analytics overview
  • The admin_cms_manager reference for the post management interface
  • Maintaining consistency with the DESIGN.md system