[PR #17] [CLOSED] Add VueFlow ecosystem visualization page with content-driven nodes #20

New Issue

arthur · 2026-02-27T16:50:54+01:00

arthur commented

2026-02-27 16:50:54 +01:00

📋 Pull Request Information

Original PR: https://github.com/ArthurDanjou/artsite/pull/17
Author: @Copilot
Created: 12/24/2025
Status: ❌ Closed

Base: master ← Head: copilot/add-vueflow-background-nodes

📝 Commits (5)

edea9af Initial plan
f422af5 Add VueFlow ecosystem page with education, experience, projects, and skills nodes
83aca9b Fix linting issues: add proper TypeScript types and remove trailing spaces
c99736b Fix potential runtime errors with null/undefined date values
1b2eb78 Refactor: add helper functions for year formatting and improve code clarity

📊 Changes

4 files changed (+332 additions, -2 deletions)

View changed files

➕ app/assets/css/vue-flow.css (+3 -0)
📝 app/pages/ecosystem.vue (+325 -1)
📝 nuxt.config.ts (+1 -1)
📝 package.json (+3 -0)

📄 Description

Implements an interactive flow diagram at /ecosystem that visualizes relationships between education, experiences, projects, and skills loaded from the content directory.

Changes

VueFlow integration: Added @vue-flow/core, @vue-flow/background, @vue-flow/controls (v1.x)
Ecosystem page (app/pages/ecosystem.vue):
- Central hub node with radial layout
- Color-coded node types: education (blue), experiences (green), projects (orange), skills (purple)
- Animated smooth-step edges connecting to center
- Dot pattern background with zoom/pan controls
Data loading: Uses existing API endpoints (/api/education, /api/experiences, /api/projects, /api/skills)
Type safety: Added interfaces for EducationItem, ExperienceItem, ProjectItem, SkillCategory
Helper functions: formatYearRange() for null-safe date handling ("?" for missing start, "Present" for missing end)

Implementation

// Node creation with type-safe data fetching
const { data: education } = await useFetch<EducationItem[]>('/api/education')

const educationNodes: Node[] = (education.value || []).map((item, index) => ({
  id: `education-${index}`,
  position: generatePosition(index, education.value?.length || 0, 0),
  label: item.degree,
  data: {
    label: item.degree,
    subtitle: item.institution,
    years: formatYearRange(item.startDate, item.endDate)
  },
  // ... styling
}))

Screenshot

Interactive diagram with 20+ nodes positioned across 5 columns, connected by animated edges. Limited to 8 projects to maintain readability.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

api.fontshare.com

Triggering command: /usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev (dns block)

api.fontsource.org

Triggering command: /usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev (dns block)

fonts.bunny.net

Triggering command: /usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev (dns block)

fonts.google.com

Triggering command: /usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev (dns block)

workers.cloudflare.com

Triggering command: /usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled

Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Add VueFlow background and nodes in /ecosystem page, with education nodes, experience nodes, projects nodes, and skills nodes linked, where the data are loaded from /content directory

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/ArthurDanjou/artsite/pull/17 **Author:** [@Copilot](https://github.com/apps/copilot-swe-agent) **Created:** 12/24/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `copilot/add-vueflow-background-nodes` --- ### 📝 Commits (5) - [`edea9af`](https://github.com/ArthurDanjou/artsite/commit/edea9afe48ed7597aea343caa09468cdb636ede1) Initial plan - [`f422af5`](https://github.com/ArthurDanjou/artsite/commit/f422af5de382ad423344f5f27ffc82c7a7b4b677) Add VueFlow ecosystem page with education, experience, projects, and skills nodes - [`83aca9b`](https://github.com/ArthurDanjou/artsite/commit/83aca9b7100170dddb266f6219920b3f36f48274) Fix linting issues: add proper TypeScript types and remove trailing spaces - [`c99736b`](https://github.com/ArthurDanjou/artsite/commit/c99736b775c2d2854aa864d92ef1739997ef31ea) Fix potential runtime errors with null/undefined date values - [`1b2eb78`](https://github.com/ArthurDanjou/artsite/commit/1b2eb78643a92dd5fd4e4bb73e6b693fa60f01e3) Refactor: add helper functions for year formatting and improve code clarity ### 📊 Changes **4 files changed** (+332 additions, -2 deletions) <details> <summary>View changed files</summary> ➕ `app/assets/css/vue-flow.css` (+3 -0) 📝 `app/pages/ecosystem.vue` (+325 -1) 📝 `nuxt.config.ts` (+1 -1) 📝 `package.json` (+3 -0) </details> ### 📄 Description Implements an interactive flow diagram at `/ecosystem` that visualizes relationships between education, experiences, projects, and skills loaded from the content directory. ## Changes - **VueFlow integration**: Added `@vue-flow/core`, `@vue-flow/background`, `@vue-flow/controls` (v1.x) - **Ecosystem page** (`app/pages/ecosystem.vue`): - Central hub node with radial layout - Color-coded node types: education (blue), experiences (green), projects (orange), skills (purple) - Animated smooth-step edges connecting to center - Dot pattern background with zoom/pan controls - **Data loading**: Uses existing API endpoints (`/api/education`, `/api/experiences`, `/api/projects`, `/api/skills`) - **Type safety**: Added interfaces for `EducationItem`, `ExperienceItem`, `ProjectItem`, `SkillCategory` - **Helper functions**: `formatYearRange()` for null-safe date handling ("?" for missing start, "Present" for missing end) ## Implementation ```typescript // Node creation with type-safe data fetching const { data: education } = await useFetch<EducationItem[]>('/api/education') const educationNodes: Node[] = (education.value || []).map((item, index) => ({ id: `education-${index}`, position: generatePosition(index, education.value?.length || 0, 0), label: item.degree, data: { label: item.degree, subtitle: item.institution, years: formatYearRange(item.startDate, item.endDate) }, // ... styling })) ``` ## Screenshot ![Ecosystem Page](https://github.com/user-attachments/assets/f915de58-01c5-48b7-8569-10301e563808) Interactive diagram with 20+ nodes positioned across 5 columns, connected by animated edges. Limited to 8 projects to maintain readability. > [!WARNING] > > <details> > <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary> > > #### I tried to connect to the following addresses, but was blocked by firewall rules: > > - `api.fontshare.com` > - Triggering command: `/usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev` (dns block) > - `api.fontsource.org` > - Triggering command: `/usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev` (dns block) > - `fonts.bunny.net` > - Triggering command: `/usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev` (dns block) > - `fonts.google.com` > - Triggering command: `/usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev` (dns block) > - `workers.cloudflare.com` > - Triggering command: `/usr/local/bin/node node /home/REDACTED/work/artsite/artsite/node_modules/.bin/nuxi dev` (dns block) > > If you need me to access, download, or install something from one of these locations, you can either: > > - Configure [Actions setup steps](https://gh.io/copilot/actions-setup-steps) to set up my environment, which run before the firewall is enabled > - Add the appropriate URLs or hosts to the custom allowlist in this repository's [Copilot coding agent settings](https://github.com/ArthurDanjou/artsite/settings/copilot/coding_agent) (admins only) > > </details>   <details> <summary>Original prompt</summary> > Add VueFlow background and nodes in /ecosystem page, with education nodes, experience nodes, projects nodes, and skills nodes linked, where the data are loaded from /content directory </details>  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/ArthurDanjou/artsite/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

arthur added the pull-request label 2026-02-27 16:50:54 +01:00

arthur closed this issue

2026-02-27 16:50:54 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: arthur/artsite#20