Merge pull request #3 from vinimlo/develop

Develop

Author: vinimlo

gaeia-web/CLAUDE.md

@@ -4,6 +4,15 @@
 
 **IMPORTANT: Always use Docker for all build, dev, and test commands.**
 
+## Tech Stack
+
+- **Astro 5** (SSR with `@astrojs/node` or static for GitHub Pages)
+- **Tailwind CSS v4** (via `@tailwindcss/vite` plugin, not PostCSS)
+- **Shiki** for syntax highlighting (custom neural theme in `src/utils/shiki-neural-theme.ts`)
+- **Marked** for markdown rendering
+- **TypeScript** (strict mode, `astro/tsconfigs/strict`)
+- No test framework configured
+
 ```bash
 # Build the project
 docker compose run --rm gaeia-web npm run build
@@ -20,10 +29,21 @@ docker compose run --rm gaeia-web npm install
 
 ## Project Structure
 
+### Path Aliases (tsconfig.json)
+
+- `@/*` → `src/*`
+- `@components/*` → `src/components/*`
+- `@layouts/*` → `src/layouts/*`
+- `@utils/*` → `src/utils/*`
+
 - `src/components/` - Astro components
 - `src/pages/` - Astro pages (file-based routing)
 - `src/utils/` - Utility functions
 - `src/types/` - TypeScript type definitions
+- `src/scripts/` - Client-side scripts (progress hydration, interactive checklist)
+- `src/styles/` - Global CSS (`global.css`, `markdown.css`, `particles.css`)
+- `src/layouts/` - Base layout (single `BaseLayout.astro`)
+- `docker/` - Dockerfile.dev, Dockerfile.prod, nginx.conf
 
 ## Content Architecture
 
@@ -102,3 +122,15 @@ The `universe/_catalog.json` uses direct JSON file paths:
   "topicos": { "path": "topicos", "indexFile": "_index.json" }
 }
 ```
+
+## Output Modes
+
+Controlled by `PUBLIC_MODE` env var in `astro.config.mjs`:
+- `PUBLIC_MODE=hybrid` (default, Docker) → SSR with node adapter, `base: '/'`
+- `PUBLIC_MODE=static` → Static build for GitHub Pages, `base: '/gaeia'`
+
+## Language
+
+- UI and content are in **Brazilian Portuguese** (pt-BR)
+- Variable/function names use Portuguese terms (trilha, topico, modulo, conquistas)
+- Code comments and logs are in English

gaeia-web/astro.config.mjs

@@ -20,10 +20,16 @@ export default defineConfig({
       'import.meta.env.PUBLIC_MODE': JSON.stringify(process.env.PUBLIC_MODE || 'hybrid'),
     },
     server: {
+      hmr: {
+        host: 'localhost',
+        port: 4322,
+      },
       watch: {
+        usePolling: true,
+        interval: 1000,
         // Watch parent vault for content changes
-        ignored: ['!../**/*.md']
-      }
+        ignored: ['!../**/*.md'],
+      },
     }
   }
 });

gaeia-web/docker-compose.yml

@@ -5,6 +5,7 @@ services:
       dockerfile: docker/Dockerfile.dev
     ports:
       - "4321:4321"
+      - "4322:4322"
     volumes:
       - .:/app
       - /app/node_modules

gaeia-web/src/components/BadgeDisplay.astro

@@ -13,7 +13,6 @@ interface Props {
 }
 
 const {
-  id,
   name,
   description,
   icon,

gaeia-web/src/components/BadgeShelf.astro

@@ -27,7 +27,6 @@ const {
 } = Astro.props;
 
 const earnedBadges = badges.filter(b => b.earned);
-const lockedBadges = badges.filter(b => !b.earned);
 
 const displayBadges = showLocked
   ? badges

gaeia-web/src/components/ResourcePanel.astro

@@ -0,0 +1,261 @@
+---
+import type { ExtractedResource, ResourceType } from '../types/trilhas';
+
+interface Props {
+  resources: ExtractedResource[];
+}
+
+const { resources } = Astro.props;
+
+if (resources.length === 0) return;
+
+const typeConfig: Record<ResourceType, { label: string; icon: string; color: string }> = {
+  youtube: { label: 'Vídeos', icon: '▶', color: 'cyan' },
+  arxiv: { label: 'Papers', icon: '📄', color: 'violet' },
+  github: { label: 'Código', icon: '⌨', color: 'bright' },
+  documentation: { label: 'Docs', icon: '📖', color: 'emerald' },
+  interactive: { label: 'Ferramentas', icon: '⚡', color: 'amber' },
+  article: { label: 'Artigos', icon: '📝', color: 'blue' },
+  other: { label: 'Outros', icon: '🔗', color: 'dim' },
+};
+
+// Only show types that have resources
+const activeTypes = (Object.keys(typeConfig) as ResourceType[]).filter(
+  type => resources.some(r => r.type === type)
+);
+---
+
+<section class="resource-panel" data-resource-panel>
+  <div class="resource-panel-header">
+    <h3 class="resource-panel-title">
+      <svg class="rp-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+      <span>{resources.length} recursos</span>
+    </h3>
+    <div class="resource-filters">
+      <button class="resource-filter active" data-filter="all">Todos</button>
+      {activeTypes.map(type => (
+        <button class="resource-filter" data-filter={type} data-color={typeConfig[type].color}>
+          <span class="filter-icon">{typeConfig[type].icon}</span>
+          {typeConfig[type].label}
+        </button>
+      ))}
+    </div>
+  </div>
+
+  <div class="resource-grid">
+    {resources.map(resource => (
+      <a
+        href={resource.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        class={`resource-card resource-card--${resource.type}`}
+        data-resource-type={resource.type}
+      >
+        <span class="resource-card-icon">{typeConfig[resource.type].icon}</span>
+        <div class="resource-card-content">
+          <span class="resource-card-title">{resource.title}</span>
+          <span class="resource-card-domain">{resource.domain}</span>
+        </div>
+        <svg class="resource-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+        </svg>
+      </a>
+    ))}
+  </div>
+</section>
+
+<style>
+  .resource-panel {
+    margin-top: 2rem;
+    border-radius: 12px;
+    background: rgba(15, 23, 42, 0.5);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid rgba(136, 146, 176, 0.15);
+    overflow: hidden;
+  }
+
+  .resource-panel-header {
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgba(136, 146, 176, 0.1);
+  }
+
+  .resource-panel-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-bright, #e2e8f0);
+    margin: 0 0 0.75rem 0;
+  }
+
+  .rp-icon {
+    width: 18px;
+    height: 18px;
+    color: var(--synapse-cyan, #00d4ff);
+  }
+
+  .resource-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .resource-filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.625rem;
+    border: 1px solid rgba(136, 146, 176, 0.2);
+    border-radius: 999px;
+    background: transparent;
+    color: var(--text-dim, rgba(136, 146, 176, 0.7));
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 0.6875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .resource-filter:hover {
+    border-color: rgba(0, 212, 255, 0.3);
+    color: var(--text-bright, #e2e8f0);
+  }
+
+  .resource-filter.active {
+    background: rgba(0, 212, 255, 0.1);
+    border-color: rgba(0, 212, 255, 0.3);
+    color: var(--synapse-cyan, #00d4ff);
+  }
+
+  .filter-icon {
+    font-size: 0.75rem;
+  }
+
+  .resource-grid {
+    display: grid;
+    gap: 1px;
+    background: rgba(136, 146, 176, 0.08);
+  }
+
+  .resource-card {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.25rem;
+    background: rgba(15, 23, 42, 0.6);
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  .resource-card:hover {
+    background: rgba(0, 212, 255, 0.05);
+  }
+
+  .resource-card.hidden {
+    display: none;
+  }
+
+  .resource-card-icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+    width: 24px;
+    text-align: center;
+  }
+
+  .resource-card-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .resource-card-title {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--text-bright, #e2e8f0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .resource-card-domain {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.6875rem;
+    color: var(--text-dim, rgba(136, 146, 176, 0.7));
+  }
+
+  .resource-card-arrow {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    color: var(--text-faint, rgba(136, 146, 176, 0.5));
+    transition: color 0.2s ease;
+  }
+
+  .resource-card:hover .resource-card-arrow {
+    color: var(--synapse-cyan, #00d4ff);
+  }
+
+  /* Type-specific hover colors */
+  .resource-card--youtube:hover { background: rgba(0, 212, 255, 0.06); }
+  .resource-card--youtube:hover .resource-card-title { color: var(--synapse-cyan, #00d4ff); }
+
+  .resource-card--arxiv:hover { background: rgba(139, 92, 246, 0.06); }
+  .resource-card--arxiv:hover .resource-card-title { color: var(--dendrite-violet, #8b5cf6); }
+
+  .resource-card--github:hover .resource-card-title { color: var(--text-bright, #e2e8f0); }
+
+  .resource-card--documentation:hover { background: rgba(16, 185, 129, 0.06); }
+  .resource-card--documentation:hover .resource-card-title { color: #10b981; }
+
+  .resource-card--interactive:hover { background: rgba(245, 158, 11, 0.06); }
+  .resource-card--interactive:hover .resource-card-title { color: var(--axon-amber, #f59e0b); }
+
+  .resource-card--article:hover { background: rgba(59, 130, 246, 0.06); }
+  .resource-card--article:hover .resource-card-title { color: #3b82f6; }
+
+  @media (max-width: 640px) {
+    .resource-panel-header {
+      padding: 0.75rem 1rem;
+    }
+    .resource-card {
+      padding: 0.625rem 1rem;
+    }
+  }
+</style>
+
+<script>
+  function initResourcePanel() {
+    document.querySelectorAll<HTMLElement>('[data-resource-panel]').forEach(panel => {
+      const filters = panel.querySelectorAll<HTMLButtonElement>('.resource-filter');
+      const cards = panel.querySelectorAll<HTMLElement>('.resource-card');
+
+      filters.forEach(filter => {
+        filter.addEventListener('click', () => {
+          const type = filter.dataset.filter;
+
+          // Update active state
+          filters.forEach(f => f.classList.remove('active'));
+          filter.classList.add('active');
+
+          // Show/hide cards
+          cards.forEach(card => {
+            if (type === 'all' || card.dataset.resourceType === type) {
+              card.classList.remove('hidden');
+            } else {
+              card.classList.add('hidden');
+            }
+          });
+        });
+      });
+    });
+  }
+
+  initResourcePanel();
+  document.addEventListener('astro:after-swap', initResourcePanel);
+</script>

gaeia-web/src/components/Sidebar.astro

@@ -1,7 +1,7 @@
 ---
 import ProgressRing from './ProgressRing.astro';
 import GaeiaLogo from './GaeiaLogo.astro';
-import { getAllTrilhas, getTrilhaTopicoIds, getAllTopicos } from '../utils/trilhas';
+import { getAllTrilhas, getAllTopicos } from '../utils/trilhas';
 import { url } from '../utils/url';
 
 // Load trilhas for navigation

gaeia-web/src/components/StreakCounter.astro

@@ -9,7 +9,6 @@ interface Props {
 const {
   currentStreak,
   longestStreak,
-  lastActiveDate,
   weekActivity = [false, false, false, false, false, false, false]
 } = Astro.props;