diff --git a/assets/css/main.css b/assets/css/main.css index c73d279..e0cca73 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,12 +1,340 @@ /* Override colors from CSS library */ :root { - --accent: green; - --accent-hover: darkgreen; + --accent: green; + --accent-hover: darkgreen; } /* Custom style for the logo */ img.icon { - max-width: 128px; - max-height: 128px; - margin-top: 10px; + max-width: 128px; + max-height: 128px; + margin-top: 10px; +} + +:root { + --activity-bg: transparent; + --activity-panel: rgba(255, 255, 255, 0.03); + --activity-card: rgba(255, 255, 255, 0.04); + --activity-border: rgba(255, 255, 255, 0.08); + --activity-muted: rgba(255, 255, 255, 0.58); + --activity-accent: rgba(255, 255, 255, 0.82); + --activity-accent-soft: rgba(255, 255, 255, 0.1); + --activity-warning: #b9986a; + --activity-tag: rgba(255, 255, 255, 0.06); +} + +.activities-shell { + margin-top: 2.5rem; + padding: 0; + background: transparent; + border: none; + border-radius: 0; + box-shadow: none; +} + +.activities-header { + display: flex; + flex-wrap: wrap; + gap: 2rem; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 2.5rem; +} + +.activities-kicker { + letter-spacing: 0.14em; + text-transform: uppercase; + font-size: 0.62rem; + color: var(--activity-muted); + margin-bottom: 0.6rem; +} + +.activities-title { + margin-top: 0; + margin-bottom: 0.8rem; + font-size: clamp(1.7rem, 2vw + 1.2rem, 2.4rem); +} + +.activities-lead { + max-width: 38rem; + color: var(--activity-muted); +} + +.activities-actions { + display: flex; + flex-wrap: wrap; + gap: 0.8rem; + align-items: center; +} + +.activities-actions .button { + background: transparent; + border: 1px solid var(--activity-border); + color: #e7e9ec; + padding: 0.45rem 0.9rem; + border-radius: 999px; + transition: all 0.2s ease; +} + +.activities-actions .button:hover { + border-color: rgba(255, 255, 255, 0.22); + color: #f5f7fa; +} + +.activities-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.25rem; +} + +.activity-card { + border-radius: 12px; + padding: 1.25rem; + background: var(--activity-card); + border: 1px solid var(--activity-border); + position: relative; + overflow: hidden; + min-height: 210px; + display: flex; + flex-direction: column; + gap: 0.8rem; + transition: border-color 0.2s ease; +} + +.activity-card:hover { + border-color: rgba(255, 255, 255, 0.18); +} + +.activity-card h3 { + margin: 0; + font-size: 1.1rem; +} + +.activity-card p { + margin: 0; + color: var(--activity-muted); + font-size: 0.92rem; +} + +.activity-head { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; +} + +.activity-status { + display: inline-flex; + align-items: center; + gap: 0.4rem; + font-size: 0.7rem; + padding: 0.18rem 0.5rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.8); +} + +.activity-status::before { + content: "●"; + font-size: 0.6rem; +} + +.activity-status.status-closed { + background: rgba(185, 152, 106, 0.25); + color: var(--activity-warning); +} + +.activity-status.status-cooking { + background: green; + color: #f5f7fa; +} + +.activity-meta { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + font-size: 0.75rem; + color: var(--activity-muted); +} + +.activity-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +.activity-tags .activity-tag:nth-child(n + 3) { + display: none; +} + +.activity-tag { + padding: 0.2rem 0.5rem; + border-radius: 999px; + background: var(--activity-tag); + color: #d5d9e0; + font-size: 0.68rem; +} + +.activity-link { + margin-top: auto; + color: #f5f7fa; + font-weight: 600; + text-decoration: none; +} + +.activity-link:hover { + text-decoration: underline; +} + +.activities-section { + margin-bottom: 2.5rem; +} + +.activities-section-head { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: baseline; + gap: 0.8rem; + margin-bottom: 1.2rem; +} + +.activities-section-head h3 { + margin: 0; + font-size: 1.05rem; +} + +.activities-section-head p { + margin: 0; + color: var(--activity-muted); + font-size: 0.88rem; +} + +.activities-ideas { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 0.75rem; +} + +.activities-idea { + padding: 0.75rem 0.9rem; + border-radius: 10px; + border: 1px solid var(--activity-border); + background: var(--activity-panel); + display: flex; + flex-wrap: wrap; + gap: 0.6rem 1rem; + justify-content: space-between; + align-items: center; + color: #e0e5ea; + font-size: 0.92rem; +} + +.activities-idea a { + color: #f5f7fa; + font-weight: 600; + text-decoration: none; +} + +.activities-idea a:hover { + text-decoration: underline; +} + +.activities-footer { + margin-top: 2.4rem; + padding: 1.4rem 1.6rem; + border-radius: 16px; + background: var(--activity-panel); + border: 1px solid var(--activity-border); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.activities-footer p { + margin: 0; + color: var(--activity-muted); +} + +.activities-footer .button { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.22); + color: #f5f7fa; + padding: 0.5rem 1.1rem; + border-radius: 999px; +} + +.skeleton { + position: relative; + overflow: hidden; +} + +.skeleton::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(110deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); + animation: shimmer 1.8s infinite; +} + +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } +} + +.activities-empty { + grid-column: 1 / -1; + padding: 1.5rem; + text-align: center; + background: var(--activity-panel); + border-radius: 12px; + border: 1px dashed var(--activity-border); + color: var(--activity-muted); +} + +.activities-fallback { + margin-top: 1.2rem; + padding: 1rem 1.2rem; + border-radius: 12px; + border: 1px solid var(--activity-border); + color: var(--activity-muted); + font-size: 0.9rem; +} + +.activities-fallback a { + color: #f5f7fa; +} + +@media (max-width: 720px) { + .activities-shell { + padding: 0; + } + + .activities-actions { + width: 100%; + } + + .activities-actions .button { + width: 100%; + text-align: center; + } + + .activities-idea { + flex-direction: column; + align-items: flex-start; + } + + .activities-footer { + flex-direction: column; + align-items: flex-start; + } } diff --git a/content/en/activities/_index.md b/content/en/activities/_index.md new file mode 100644 index 0000000..bd65683 --- /dev/null +++ b/content/en/activities/_index.md @@ -0,0 +1,42 @@ +--- +title: Activities in progress +--- + +See what we are preparing and the current status of each proposal. Everything lives in our public Gitea board. + +
+
+
+ View board + View issues +
+
+ +
+
+

In development

+
+
+
+
+ Loading +
+

Loading...

+
+
+
+ +
+
+

Backlog

+
+ +
+ + +
diff --git a/content/es/activities/_index.md b/content/es/activities/_index.md new file mode 100644 index 0000000..82a7324 --- /dev/null +++ b/content/es/activities/_index.md @@ -0,0 +1,42 @@ +--- +title: Actividades en marcha +--- + +Descubre lo que estamos preparando y en qué punto está cada propuesta. Todo esto se coordina en nuestro tablero público de Gitea. + +
+
+
+ Ver tablero + Ver issues +
+
+ +
+
+

En desarrollo

+
+
+
+
+ Cargando +
+

Cargando...

+
+
+
+ +
+
+

En el tintero

+
+ +
+ + +
diff --git a/hugo.toml b/hugo.toml index 206d72b..a943506 100644 --- a/hugo.toml +++ b/hugo.toml @@ -34,6 +34,12 @@ buildFuture = true url = "/en/projects" weight = 30 + [[languages.en.menu.main]] + identifier = "activities" + name = "Activities" + url = "/en/activities" + weight = 35 + [[languages.en.menu.main]] identifier = "contact" name = "Contact" @@ -65,6 +71,12 @@ buildFuture = true url = "/es/projects" weight = 30 + [[languages.es.menu.main]] + identifier = "activities" + name = "Actividades" + url = "/es/activities" + weight = 35 + [[languages.es.menu.main]] identifier = "contact" name = "Contacto" @@ -76,3 +88,8 @@ buildFuture = true [params] [params.social] twitter = 'OpenBokeron' + +[markup] + [markup.goldmark] + [markup.goldmark.renderer] + unsafe = true diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9bf1e11..7f10ec4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,6 @@ - + {{ partial "head.html" . -}} @@ -15,6 +16,9 @@ + {{ if eq .Section "activities" }} + + {{ end }} diff --git a/static/assets/js/activities.js b/static/assets/js/activities.js new file mode 100644 index 0000000..1ffb74c --- /dev/null +++ b/static/assets/js/activities.js @@ -0,0 +1,235 @@ +const ACTIVITIES_CONFIG = { + apiBase: "https://openbokeron.uma.es/gitea/api/v1", + repo: "OpenBokeron/Actividades", + state: "open", +}; + +const ACTIVITY_LABELS = { + cooking: "cocinando", +}; + +const ACTIVITY_BADGES = { + es: { + cooking: "Cocinando", + }, + en: { + cooking: "Cooking", + }, +}; + +const ACTIVITY_BADGE_STYLE = { + cooking: "status-cooking", +}; + +const ACTIVITY_CTA = { + es: "Ver en Gitea", + en: "View on Gitea", +}; + +const ACTIVITY_EMPTY = { + es: "Ahora mismo no hay actividades abiertas. Vuelve pronto o mira el tablero completo.", + en: "There are no open activities right now. Come back soon or check the full board.", +}; + + +const FALLBACK_TEXT = { + es: "Oops, la hemos liado al querer cargar el tablero. Puedes verlo directamente en Gitea:", + en: "Oops, we messed up while trying to load the board. You can still open it in Gitea:", +}; + +const FALLBACK_LINK = { + es: "Abrir tablero", + en: "Open board", +}; + +const LANGUAGE_LABELS = { + es: { + milestone: "Hito", + comments: "comentarios", + updated: "Actualizado", + noCooking: "No hay actividades en desarrollo. Mira el tablero completo.", + noIdeas: "No hay ideas nuevas ahora mismo.", + }, + en: { + milestone: "Milestone", + comments: "comments", + updated: "Updated", + noCooking: "No activities in development. Check the full board.", + noIdeas: "There are no new ideas right now.", + }, +}; + +const escapeHtml = (value) => { + if (value === null || value === undefined) { + return ""; + } + + return String(value).replace(/[&<>"']/g, (char) => { + const map = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'", + }; + return map[char] || char; + }); +}; + +const container = document.querySelector("[data-activities-root]"); +if (container) { + const grid = container.querySelector("[data-activities-grid]"); + const lang = document.documentElement.lang.startsWith("es") ? "es" : "en"; + const labels = LANGUAGE_LABELS[lang]; + + const fetchActivities = async () => { + const url = `${ACTIVITIES_CONFIG.apiBase}/repos/${ACTIVITIES_CONFIG.repo}/issues?state=${ACTIVITIES_CONFIG.state}`; + const response = await fetch(url, { + headers: { + Accept: "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`Request failed: ${response.status}`); + } + + return response.json(); + }; + + const formatDate = (value) => { + const date = new Date(value); + if (Number.isNaN(date.getTime())) { + return value; + } + return new Intl.DateTimeFormat(lang, { + year: "numeric", + month: "short", + day: "numeric", + }).format(date); + }; + + const getLabelNames = (issue) => (issue.labels || []).map((label) => label.name.toLowerCase()); + + const hasLabel = (issue, label) => getLabelNames(issue).includes(label); + + const renderTags = (tags) => { + if (!tags || tags.length === 0) { + return ""; + } + + return tags + .filter((label) => label.name.toLowerCase() !== ACTIVITY_LABELS.cooking) + .slice(0, 3) + .map((label) => `${label.name}`) + .join(""); + }; + + const getBadge = (issue) => { + if (hasLabel(issue, ACTIVITY_LABELS.cooking)) { + return { + text: ACTIVITY_BADGES[lang].cooking, + className: ACTIVITY_BADGE_STYLE.cooking, + }; + } + return null; + }; + + const renderActivity = (issue) => { + const tags = renderTags(issue.labels); + const milestone = issue.milestone?.title; + const updated = formatDate(issue.updated_at); + const badge = getBadge(issue); + const comments = issue.comments || 0; + + return ` +
+
+ ${badge ? `${badge.text}` : ""} +
+

${escapeHtml(issue.title)}

+

${issue.body ? escapeHtml(issue.body.replace(/\s+/g, " ").slice(0, 140) + "...") : ""}

+
+ ${labels.updated} ${updated} + ${comments} ${labels.comments} + #${issue.number} +
+ ${milestone ? `
${labels.milestone}: ${milestone}
` : ""} + ${tags ? `
${tags}
` : ""} + ${ACTIVITY_CTA[lang]} +
+ `; + }; + + const renderIdeas = (ideas) => { + const ideasList = container.querySelector("[data-activities-ideas-list]"); + + if (!ideasList) { + return; + } + + if (!ideas || ideas.length === 0) { + ideasList.innerHTML = `
  • ${labels.noIdeas}
    • `; + return; + } + + ideasList.innerHTML = ideas + .map( + (issue) => ` +
  • +
    + ${escapeHtml(issue.title)} + #${issue.number} +
    + ${ACTIVITY_CTA[lang]} +
    • + ` + ) + .join(""); + }; + + const renderActivities = (issues) => { + if (!issues || issues.length === 0) { + grid.innerHTML = `
    ${ACTIVITY_EMPTY[lang]}
    `; + renderIdeas([]); + return; + } + + const cooking = issues.filter((issue) => hasLabel(issue, ACTIVITY_LABELS.cooking)); + const ideas = issues.filter((issue) => !hasLabel(issue, ACTIVITY_LABELS.cooking)); + + const cookingTitles = new Set(cooking.map((issue) => issue.title)); + const filteredIdeas = ideas.filter((issue) => !cookingTitles.has(issue.title)); + + if (cooking.length === 0) { + grid.innerHTML = `
    ${labels.noCooking}
    `; + } else { + grid.innerHTML = cooking.map(renderActivity).join(""); + } + + renderIdeas(filteredIdeas); + }; + + const renderFallback = () => { + grid.innerHTML = ` +
    + ${FALLBACK_TEXT[lang]} + ${FALLBACK_LINK[lang]} +
    + `; + + const ideasList = container.querySelector("[data-activities-ideas-list]"); + if (ideasList) { + ideasList.innerHTML = `
  • ${labels.noIdeas}
    • `; + } + }; + + fetchActivities() + .then((issues) => { + const sorted = [...issues].sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)); + renderActivities(sorted); + }) + .catch(() => { + renderFallback(); + }); +}