Skip to content

feat: implement project pages with content and UI#16

Merged
toddeTV merged 12 commits into
mainfrom
feat/add-projects
Mar 7, 2026
Merged

feat: implement project pages with content and UI#16
toddeTV merged 12 commits into
mainfrom
feat/add-projects

Conversation

@toddeTV
Copy link
Copy Markdown
Owner

@toddeTV toddeTV commented Mar 7, 2026

This PR expands the portfolio's content by adding projects. It also includes the necessary UI components, pages, and OG image templates to support this new content type.

Summary by CodeRabbit

  • New Features

    • Added a Projects section with a listing page and individual project detail pages.
    • Project cards show title, period, description, tags, repo stars, and action links.
    • Dynamic Open Graph preview images for projects.
  • Content

    • Bulk-added multiple project pages with metadata (dates, URLs, tags, stars, testimonials).
  • Navigation

    • Renamed "Open Source" to "Projects" and removed "Client Work" and "Publications" from navigation.

@toddeTV toddeTV self-assigned this Mar 7, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 7, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Lite

Run ID: 161b8700-c2b1-421b-90cf-7c144b5f0d69

📥 Commits

Reviewing files that changed from the base of the PR and between e7e0a6a and 7ce2de1.

📒 Files selected for processing (5)
  • app/components/OgImage/OgImageProject.vue
  • app/components/OgImage/components/OgImageCategoryLabel.vue
  • app/components/content/ProjectCard.vue
  • app/components/layout/SiteHeader.vue
  • app/pages/projects/index.vue

📝 Walkthrough

Walkthrough

Adds a projects feature: OG-image components, a ProjectCard, project listing and detail pages, a new "projects" content collection, sample project markdown files, and removes the "Client Work" navigation link.

Changes

Cohort / File(s) Summary
OG Image Components
app/components/OgImage/OgImageProject.vue, app/components/OgImage/components/OgImageCategoryLabel.vue, app/components/OgImage/components/OgImageDescription.vue
New presentational Vue SFCs for deterministic OG image rendering (1200×630). OgImageProject composes glow, avatar, category label, description, footer; supports props: title, description, repoStars, tags. Category label and description are small inline-styled components with truncation and size options.
Project Card Component
app/components/content/ProjectCard.vue
New ProjectCard SFC displaying project period, title, optional star count, tags, description, and Live/Repo actions; includes computed displayPeriod logic and uses existing UI primitives.
Project Pages
app/pages/projects/index.vue, app/pages/projects/[slug].vue
New Nuxt pages: index fetches and sorts projects collection (ongoing first, then endDate, startDate, repoStars) and renders ProjectCard grid; detail page fetches by slug, sets SEO/OG metadata (using OG image component), renders content, media, and optional testimonials.
Content Configuration
content.config.ts
Adds projects content collection (page type) with schema: name, startDate, endDate?, image?, liveUrl?, repoUrl?, repoStars?, tags, testimonials.
Navigation Update
app/components/layout/SiteHeader.vue
Renames '/projects' label from "Open Source" to "Projects" and removes active "/clients" and "/publications" links (kept as commented placeholders).
Project Content Files
content/projects/fmadb.md, content/projects/gltf-type-toolkit.md, content/projects/quick-conf.md, content/projects/scroll-persistence.md, content/projects/stage-flow-tools.md, content/projects/todde-tv.md, content/projects/zlig.md
Adds seven new project markdown files with front-matter metadata (name, dates, URLs, repoStars, tags, testimonials where present) and short descriptive content.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Browser
    participant ProjectsIndex as /projects Index Page
    participant ContentAPI as Content API
    participant ProjectCard

    User->>Browser: Navigate to /projects
    Browser->>ProjectsIndex: Mount component
    ProjectsIndex->>ContentAPI: useAsyncData('projects') -> fetch collection
    ContentAPI-->>ProjectsIndex: Return projects array
    ProjectsIndex->>ProjectsIndex: Sort projects (ongoing, endDate DESC, startDate DESC, repoStars DESC)
    ProjectsIndex->>ProjectCard: Render ProjectCard for each project
    ProjectCard-->>Browser: Render card UI
    Browser-->>User: Display projects list

    rect rgba(100, 150, 200, 0.5)
    Note over User,ProjectCard: User clicks a project card
    end

    User->>Browser: Navigate to /projects/[slug]
    Browser->>ProjectsIndex: Mount detail page
    ProjectsIndex->>ContentAPI: useAsyncData(slug) -> fetch project
    ContentAPI-->>ProjectsIndex: Return project data
    ProjectsIndex->>ProjectsIndex: Set SEO & OG metadata (title, description, OG image)
    ProjectsIndex-->>Browser: Render project detail, content, media, testimonials
    Browser-->>User: Display project page
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/components/content/ProjectCard.vue`:
- Around line 37-40: The v-if on the stars span currently hides zero values
because it relies on truthiness; change the check to explicitly test for
null/undefined so 0 renders. Update the conditional around the span that
references project.repoStars (in ProjectCard.vue) to use an explicit
null/undefined check (e.g., project.repoStars != null or project.repoStars !==
null && project.repoStars !== undefined) so valid 0 is displayed while still
omitting absent data.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: ASSERTIVE

Plan: Lite

Run ID: adbeeb3e-9988-42d9-b27e-3403d305962f

📥 Commits

Reviewing files that changed from the base of the PR and between d895cae and e7e0a6a.

📒 Files selected for processing (15)
  • app/components/OgImage/OgImageProject.vue
  • app/components/OgImage/components/OgImageCategoryLabel.vue
  • app/components/OgImage/components/OgImageDescription.vue
  • app/components/content/ProjectCard.vue
  • app/components/layout/SiteHeader.vue
  • app/pages/projects/[slug].vue
  • app/pages/projects/index.vue
  • content.config.ts
  • content/projects/fmadb.md
  • content/projects/gltf-type-toolkit.md
  • content/projects/quick-conf.md
  • content/projects/scroll-persistence.md
  • content/projects/stage-flow-tools.md
  • content/projects/todde-tv.md
  • content/projects/zlig.md

Comment thread app/components/content/ProjectCard.vue Outdated
@toddeTV toddeTV merged commit c3a911b into main Mar 7, 2026
5 checks passed
@toddeTV toddeTV deleted the feat/add-projects branch March 7, 2026 14:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant