feat: load projects from dedicated JSON file

Author: vbuxbaum

README.md

@@ -20,13 +20,14 @@ editar HTML, CSS ou JavaScript para alterar as listas:
 
 - `data/members.json` — pessoas colaboradoras;
 - `data/posts.json` — posts do blog (opcional);
-- `data/site.json` — textos institucionais, links, projetos e código
-  de conduta.
+- `data/projects.json` — projetos da comunidade (opcional);
+- `data/site.json` — textos institucionais, links e código de conduta.
 
 Depois de mudar um JSON, valide a sintaxe:
 
 ```sh
 python3 -m json.tool data/members.json >/dev/null
+python3 -m json.tool data/projects.json >/dev/null
 ```
 
 ### Membro
@@ -54,6 +55,26 @@ que sempre tem prioridade. Os campos de rede social aceitam um usuário (com ou
 sem `@`) ou a URL completa do perfil. Para `mastodon`, use a URL completa ou o
 formato `@usuario@servidor`.
 
+### Projeto
+
+`data/projects.json` começa como uma lista vazia. Adicione um objeto para cada
+projeto; os campos `name` e `description` são obrigatórios. Ambos podem ser um
+texto simples ou um objeto com traduções `pt` e `en`. `url` é opcional e torna
+o card clicável; `image` é opcional e aceita uma URL HTTPS ou um caminho em
+`assets/` para exibir uma imagem de capa.
+
+```json
+{
+  "name": { "pt": "Nome do projeto", "en": "Project name" },
+  "description": { "pt": "Descrição do projeto.", "en": "Project description." },
+  "url": "https://exemplo.org/projeto",
+  "image": "assets/images/projetos/capa.png"
+}
+```
+
+Sem projetos na lista, a seção Projetos e seus links de navegação não são
+exibidos.
+
 ## Eventos e GitHub Actions
 
 O workflow `.github/workflows/sync-meetup-events.yml` executa toda segunda-feira

assets/css/site.css

@@ -342,6 +342,13 @@ a.card {
   padding-top: 6px;
 }
 
+.project-image {
+  width: 100%;
+  max-height: 148px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
 .pill {
   display: inline-flex;
   align-items: center;
@@ -823,4 +830,4 @@ a.card {
     scroll-behavior: auto !important;
     transition-duration: .01ms !important;
   }
-}
+}

assets/js/site.js

@@ -78,6 +78,7 @@
     return link;
   };
   const safeHref = (href) => /^(https?:|mailto:|#)/i.test(href || '') ? href : '#';
+  const safeImageSrc = (src) => /^(https?:|assets\/)/i.test(src || '') ? src : '';
   const profileUrl = (network, value) => {
     const raw = String(value || '').trim();
     if (!raw) return '';
@@ -137,7 +138,9 @@
     [
       ['comunidade', text('community')], ['conheca-tambem', text('partners')], ['membros', text('members')],
       ['eventos', text('events')], ['projetos', text('projects')], ['blog', text('blog')], ['conduta', text('conduct')]
-    ].filter(([id]) => (id !== 'blog' || state.posts.length) && (id !== 'membros' || state.members.length))
+    ].filter(([id]) => (id !== 'blog' || state.posts.length)
+      && (id !== 'membros' || state.members.length)
+      && (id !== 'projetos' || state.projects.length))
       .forEach(([id, label]) => nav.append(element('a', { href: `#${id}`, text: label, 'data-section': id })));
   }
 
@@ -158,7 +161,8 @@
 
     const cards = byId('home-cards');
     clear(cards);
-    (site.home.cards || []).filter((card) => card.route !== 'membros' || state.members.length).forEach((card, index) => {
+    (site.home.cards || []).filter((card) => (card.route !== 'membros' || state.members.length)
+      && (card.route !== 'projetos' || state.projects.length)).forEach((card, index) => {
       const cardLink = element('a', { class: 'card', href: `#${card.route}` });
       cardLink.append(
         element('span', { class: 'card-index', text: String(index + 1).padStart(2, '0') }),
@@ -263,12 +267,22 @@
     });
   }
 
-  function renderProjectsAndConduct() {
+  function renderProjects() {
+    const section = byId('projetos');
     const projects = byId('project-cards');
     clear(projects);
-    (state.site.projects || []).forEach((project) => {
-      projects.append(element('article', { class: 'card' }, [element('h3', { text: project.title }), element('p', { text: pick(project.text) })]));
+    section.hidden = !state.projects.length;
+    if (!state.projects.length) return;
+    state.projects.forEach((project) => {
+      const card = project.url ? external(project.url, '', 'card') : element('article', { class: 'card' });
+      const imageSrc = safeImageSrc(project.image);
+      if (imageSrc) card.append(element('img', { class: 'project-image', src: imageSrc, alt: '' }));
+      card.append(element('h3', { text: pick(project.name) }), element('p', { text: pick(project.description) }));
+      projects.append(card);
     });
+  }
+
+  function renderConduct() {
     const conduct = byId('conduct-list');
     clear(conduct);
     (state.site.conduct.items || []).forEach((item) => conduct.append(element('li', { text: pick(item) })));
@@ -312,7 +326,7 @@
     const upcoming = events.filter(isUpcoming).sort((a, b) => a.date - b.date);
     const past = events.filter((event) => !isUpcoming(event)).sort((a, b) => b.date - a.date);
     renderNavigation(); renderHome(upcoming); renderCommunity(); renderPartners(); renderMembers();
-    renderEvents(upcoming, past); renderProjectsAndConduct(); renderPosts(); renderFooter(); observeSections();
+    renderEvents(upcoming, past); renderProjects(); renderConduct(); renderPosts(); renderFooter(); observeSections();
   }
 
   let observer;
@@ -327,16 +341,17 @@
   }
 
   async function load() {
-    const files = ['site.json', 'members.json', 'events.json', 'posts.json'];
+    const files = ['site.json', 'members.json', 'events.json', 'projects.json', 'posts.json'];
     try {
       const results = await Promise.all(files.map(async (file) => {
         const response = await fetch(`data/${file}`);
         if (!response.ok) throw new Error(`${file}: ${response.status}`);
         return response.json();
       }));
-      [state.site, state.members, state.events, state.posts] = results;
+      [state.site, state.members, state.events, state.projects, state.posts] = results;
       state.members = Array.isArray(state.members) ? state.members : [];
       state.events = Array.isArray(state.events) ? state.events : [];
+      state.projects = Array.isArray(state.projects) ? state.projects : [];
       state.posts = Array.isArray(state.posts) ? state.posts : [];
       render();
     } catch (error) {

data/projects.json

@@ -0,0 +1 @@
+[]

data/site.json

@@ -27,10 +27,6 @@
     { "title": { "pt": "Associação Python Brasil", "en": "Python Brasil Association" }, "text": { "pt": "A APyB apoia e representa a comunidade Python no Brasil.", "en": "APyB supports and represents the Python community in Brazil." }, "linkText": { "pt": "Conheça a APyB", "en": "Meet APyB" }, "href": "https://apyb.python.org.br/" },
     { "title": { "pt": "Outras comunidades locais", "en": "Other local communities" }, "text": { "pt": "Encontre grupos Python em outras cidades e regiões do país.", "en": "Find Python groups in other cities and regions across Brazil." }, "linkText": { "pt": "Ver comunidades locais", "en": "View local communities" }, "href": "https://python.org.br/comunidades-locais/" }
   ],
-  "projects": [
-    { "title": "Traduções do Django docs", "text": { "pt": "Tradução colaborativa da documentação oficial do Django para o português.", "en": "Collaborative translation of the official Django documentation into Portuguese." } },
-    { "title": "Python on Campus", "text": { "pt": "Palestras e oficinas que levam Python para universidades de Minas Gerais.", "en": "Talks and workshops that bring Python to universities in Minas Gerais." } }
-  ],
   "conduct": {
     "title": { "pt": "Código de conduta", "en": "Code of conduct" },
     "items": [