Merge pull request #167 from sergiocarracedo/feat/revamp

feat(site): revamp VigoTech website

Author: sergiocarracedo

.agents/DESIGN.md

@@ -0,0 +1,95 @@
+# Design System Document: The Editorial Node
+
+## 1. Overview & Creative North Star
+
+This design system moves away from the "standard bootstrap" look of tech communities toward a high-end editorial experience.
+
+**Creative North Star: "The Editorial Node"**
+Our vision is to treat community information as curated content rather than a database. We bridge the gap between technical precision and human-centric connection. The aesthetic utilizes intentional asymmetry, generous whitespace (derived from our `Spacing Scale`), and a sophisticated layering of surfaces to create a sense of digital "physicality." We don't just list events; we showcase a movement.
+
+## 2. Colors & Surface Architecture
+
+The palette is rooted in the high-energy `#e84a5f`, supported by a nuanced spectrum of architectural neutrals.
+
+### The "No-Line" Rule
+
+**Explicit Instruction:** You are prohibited from using 1px solid borders for sectioning or containment.
+Boundaries must be defined solely through:
+
+- **Background Color Shifts:** A `surface-container-low` section sitting on a `surface` background.
+- **Tonal Transitions:** Using the `surface-container` tiers (Lowest to Highest) to define nesting.
+
+### Surface Hierarchy & Nesting
+
+Treat the UI as a series of stacked sheets of fine material.
+
+- **The Base:** Use `surface` (#f1fbff) for the primary background.
+- **The Section:** Use `surface-container-low` (#eaf5fa) for large content areas.
+- **The Detail:** Use `surface-container-highest` (#e84a5f) for interactive elements like input fields or active state cards.
+
+### The "Glass & Gradient" Rule
+
+To elevate the experience, floating elements (Modals, Navigation Bars, Hovering Tooltips) should utilize **Glassmorphism**.
+
+- **Backdrop Blur:** 12px to 20px.
+- **Fill:** A semi-transparent version of `surface` (e.g., 80% opacity).
+- **Signature Gradient:** For high-impact CTAs, use a subtle linear gradient from `primary` (#b11f3b) to `primary_container` (#d33b51) at a 135-degree angle. This adds "soul" to the technical interface.
+
+## 3. Typography
+
+The typography system balances the technical nature of developers with the premium feel of a lifestyle brand.
+
+- **Display & Headlines (Space Grotesk):** This typeface offers a "technical-humanist" feel. Its geometric traps and expressive terminals convey innovation. Use `display-lg` for hero statements with tight letter-spacing (-0.02em).
+- **Body & Titles (Inter):** Chosen for its exceptional legibility and neutral tone. It provides the "clean" developer-friendly feel requested.
+- **Technical Details:** Where code snippets or technical metadata (e.g., repo sizes, timestamps) appear, use a monospace font-family at `label-sm` scale to provide a subtle "hacker" nod.
+
+## 4. Elevation & Depth
+
+Depth is achieved through **Tonal Layering** rather than structural shadows.
+
+- **The Layering Principle:** Place a `surface-container-lowest` card on a `surface-container-low` section. This creates a soft, natural lift that feels like high-quality paper.
+- **Ambient Shadows:** If a floating effect is required (e.g., a "Join Us" button or a featured Event Card), use an extra-diffused shadow:
+- _Blur:_ 32px
+- _Spread:_ -4px
+- _Opacity:_ 6% of the `on_surface` color.
+- **The "Ghost Border" Fallback:** If accessibility demands a container edge, use a Ghost Border: `outline_variant` at **15% opacity**. Never 100%.
+
+## 5. Components
+
+### Buttons
+
+- **Primary:** High-polish gradient (`primary` to `primary_container`). Large padding (Scale 3 on sides, 2 on top/bottom). `Roundedness: md`.
+- **Secondary:** No fill. `Ghost Border` (15% opacity `outline`). `on_surface` text.
+- **Tertiary:** No fill, no border. Underline only on hover.
+
+### Community Group Cards
+
+Forbid the use of divider lines.
+
+- **Style:** A `surface-container-low` base that shifts to `surface-container-highest` on hover.
+- **Layout:** Use asymmetrical spacing—more padding at the top (Scale 6) than the bottom (Scale 4) to create an editorial "header" feel within the card.
+
+### Filtered Video Library & Chips
+
+- **Chips:** Use `secondary_container` with `on_secondary_container` text. When selected, use `primary` with `on_primary`.
+- **Video Cards:** Use a 16:9 aspect ratio for thumbnails. Overlay a glassmorphic "Play" button in the center. Metadata should use `body-sm` for the description and a monospace `label-sm` for the video duration.
+
+### Input Fields & Search
+
+- **Style:** Minimalist. No border. Use `surface-container-highest` as the fill.
+- **State:** On focus, the background remains, but a 2px `primary` underline animates from the center.
+
+## 6. Do’s and Don’ts
+
+### Do:
+
+- **Embrace Whitespace:** If you think there is enough space, add one more step from the `Spacing Scale`. Space is a luxury.
+- **Nesting Surfaces:** Use the `surface-container` tiers to guide the eye. The darker/more saturated the container, the more "nested" it should feel.
+- **Intentional Asymmetry:** Align text to the left but allow imagery or decorative branding elements to "break" the grid and bleed off-screen.
+
+### Don’t:
+
+- **No Hard Outlines:** Never use a 100% opaque border to separate a sidebar or a card. It breaks the editorial flow.
+- **No Pure Black:** Even in Dark Mode, use the `surface` and `on_surface` tokens. Pure #000000 kills the "premium" depth.
+- **No Standard Shadows:** Avoid the "fuzzy grey" shadow. If you must use a shadow, tint it with the primary or surface color to keep it integrated with the environment.
+- **No Over-Crowding:** Don't try to fit 5 event cards in a row. Use 2 or 3 to allow the brand's personality to breathe.

.editorconfig

@@ -1,9 +1,6 @@
-VIGOTECH_MEMBERS_SOURCE = '/vigotech.json'
-VIGOTECH_MEMBERS_SOURCE_FILE = 'static/vigotech.json'
-VIGOTECH_MEMBERS_SOURCE_GENERATED = '/vigotech-generated.json'
-VIGOTECH_MEMBERS_SOURCE_GENERATED_FILE = 'static/vigotech-generated.json'
-VIGOTECH_FRIENDS_SOURCE = '/friends.json'
-MEETUP_API_BASE = 'http://api.meetup.com'
-YOUTUBE_API_KEY = '[YOUR YOUTUBE API KEY HERE]'
-GA = '[YOUR GOOGLE ANALYTICS PROPERTY ID HERE]'
-EVENTBRITE_OAUTH_TOKEN = '[YOUR EVENTBRITE PERSONAL OAUTH TOKEN HERE]'
+VIGOTECH_MOCK_EVENTS=true
+PUBLIC_BASE_PATH=
+PUBLIC_NOINDEX=false
+EVENTBRITE_OAUTH_TOKEN=
+YOUTUBE_API_KEY=
+GOOGLE_CALENDAR_API_KEY=

.env.example

@@ -0,0 +1,40 @@
+# Project Development Guidelines
+
+## Testing Strategy
+
+- Use Vitest for unit tests and Playwright for e2e tests.
+- Keep unit tests focused and small.
+- Maintain 95% coverage thresholds for lines, statements, functions, and branches.
+
+## Folder Structure
+
+- Keep source code in `src/`.
+- Place reusable components under `src/components/`.
+- Place e2e tests under `playwright/`.
+- Place test setup in `test/`.
+
+## Code Organization
+
+- Keep one component per file when adding components.
+- Prefer named exports for utilities and components.
+- Keep files focused on a single responsibility.
+
+## Formatting
+
+- No semicolons.
+- Single quotes for strings.
+- Double quotes for JSX attributes.
+- Trailing commas in multi-line arrays and objects.
+- 100 character line width.
+- Arrow functions always use parentheses.
+
+## Linting
+
+- Use `oxlint` with `.oxlintrc.json`.
+- Ensure linting passes before commit.
+
+## Commit Convention
+
+- Follow Conventional Commits.
+- Types: feat, fix, docs, style, refactor, test, chore.
+- Format: `type(scope): description`.

.eslintrc.js

@@ -0,0 +1,142 @@
+name: Deploy Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+  PUBLIC_BASE_PATH: ${{ vars.PUBLIC_BASE_PATH }}
+  PUBLIC_NOINDEX: ${{ vars.PUBLIC_NOINDEX || 'true' }}
+
+jobs:
+  refresh-data:
+    if: github.actor != 'github-actions[bot]'
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path)" >> "$GITHUB_OUTPUT"
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate vigotech data
+        run: pnpm generate:data
+        env:
+          EVENTBRITE_OAUTH_TOKEN: ${{ secrets.EVENTBRITE_OAUTH_TOKEN }}
+          YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
+
+      - name: Sync Astro content types
+        run: pnpm astro sync
+
+      - name: Format generated content
+        run: pnpm format src/content/events src/content/videos
+
+      - name: Commit generated data
+        run: |
+          if git diff --quiet -- public/vigotech-generated.json src/content/videos src/content/events; then
+            echo "No generated changes to commit"
+            exit 0
+          fi
+
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add public/vigotech-generated.json src/content/videos src/content/events
+          git commit -m "chore: refresh generated community history"
+          git push
+
+  build:
+    needs: refresh-data
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path)" >> "$GITHUB_OUTPUT"
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate vigotech data
+        run: pnpm generate:data
+        env:
+          EVENTBRITE_OAUTH_TOKEN: ${{ secrets.EVENTBRITE_OAUTH_TOKEN }}
+          YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
+
+      - name: Build site
+        run: pnpm build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4