feat: add icons to external community links

Author: vbuxbaum

assets/css/site.css

@@ -41,12 +41,32 @@
   const pick = (value) => value && typeof value === 'object'
     ? (value[lang] || value.pt || value.en || '') : (value || '');
   const text = (key) => COPY[lang][key];
+  const externalIcon = (href) => {
+    const value = String(href || '').toLowerCase();
+    if (value.startsWith('mailto:')) return 'bi-envelope';
+    if (value.includes('meetup.com')) return 'bi-calendar-event';
+    if (value.includes('github.com')) return 'bi-github';
+    if (value.includes('instagram.com')) return 'bi-instagram';
+    if (value.includes('youtube.com') || value.includes('youtu.be')) return 'bi-youtube';
+    if (value.includes('telegram.me') || value.includes('t.me/')) return 'bi-telegram';
+    if (value.includes('linkedin.com')) return 'bi-linkedin';
+    if (value.includes('twitter.com') || value.includes('x.com')) return 'bi-twitter-x';
+    if (value.includes('facebook.com')) return 'bi-facebook';
+    if (value.includes('bsky.app')) return 'bi-cloud';
+    if (value.includes('threads.net')) return 'bi-threads';
+    if (value.includes('mastodon')) return 'bi-mastodon';
+    return 'bi-box-arrow-up-right';
+  };
   const external = (href, label, className) => {
-    const link = element('a', { href: safeHref(href), text: label, class: className });
+    const link = element('a', { href: safeHref(href), class: className });
     if (/^https?:/i.test(link.href)) {
       link.target = '_blank';
       link.rel = 'noreferrer';
     }
+    if (label) link.append(
+      element('i', { class: `bi ${externalIcon(href)} external-link-icon`, 'aria-hidden': 'true' }),
+      document.createTextNode(label)
+    );
     return link;
   };
   const safeHref = (href) => /^(https?:|mailto:|#)/i.test(href || '') ? href : '#';

assets/js/site.js

@@ -11,15 +11,14 @@
   "home": {
     "heading": { "pt": "O que fazemos", "en": "What we do" },
     "cards": [
-      { "route": "comunidade", "title": { "pt": "Comunidade", "en": "Community" }, "text": { "pt": "Conversamos na lista de emails e no Telegram, e promovemos almoços, coding dojos e palestras.", "en": "We connect through the mailing list and Telegram, and run lunches, coding dojos and talks." }, "cta": { "pt": "Saiba mais", "en": "Learn more" } },
+      { "route": "comunidade", "title": { "pt": "Comunidade", "en": "Community" }, "text": { "pt": "Conversamos no Telegram e nas redes sociais, e promovemos almoços, coding dojos e palestras.", "en": "We connect through Telegram and social media, and run lunches, coding dojos and talks." }, "cta": { "pt": "Saiba mais", "en": "Learn more" } },
       { "route": "membros", "title": { "pt": "Membros", "en": "Members" }, "text": { "pt": "Colaboradores mantêm a comunicação ativa e ajudam a organizar e divulgar os encontros.", "en": "Contributors keep communication active and help organise and share our events." }, "cta": { "pt": "Conheça", "en": "Meet them" } },
       { "route": "projetos", "title": { "pt": "Projetos", "en": "Projects" }, "text": { "pt": "Iniciativas colaborativas para levar conhecimento e Python a mais pessoas.", "en": "Collaborative initiatives that bring Python and knowledge to more people." }, "cta": { "pt": "Ver projetos", "en": "View projects" } }
     ]
   },
   "community": [
-    { "title": { "pt": "Mídias sociais", "en": "Social media" }, "text": { "pt": "Acompanhe encontros, novidades e publicações da comunidade.", "en": "Follow meetups, news and community posts." }, "links": [{ "text": "Telegram", "href": "https://telegram.me/pythonmg" }, { "text": "Twitter", "href": "https://twitter.com/PythonMG" }, { "text": "Facebook", "href": "https://facebook.com/uaipython" }] },
-    { "title": { "pt": "Meetup", "en": "Meetup" }, "text": { "pt": "Nos encontramos regularmente para trocar conhecimento e experiências.", "en": "We meet regularly to share knowledge and experience." }, "links": [{ "text": "Meetup", "href": "http://www.meetup.com/Belo-Horizonte-Python-User-Group/" }] },
-    { "title": { "pt": "Lista de emails", "en": "Mailing list" }, "text": { "pt": "A lista oficial no Google Groups continua aberta para toda a comunidade.", "en": "The official Google Groups list is open to the entire community." }, "links": [{ "text": "Google Groups", "href": "https://groups.google.com/forum/#!forum/python-mg" }] }
+    { "title": { "pt": "Mídias sociais", "en": "Social media" }, "text": { "pt": "Acompanhe encontros, novidades e publicações da comunidade.", "en": "Follow meetups, news and community posts." }, "links": [{ "text": "Instagram", "href": "https://www.instagram.com/python.mg" }, { "text": "YouTube", "href": "https://www.youtube.com/c/PythonMinasGerais" }, { "text": "Telegram", "href": "https://telegram.me/pythonmg" }, { "text": "Twitter", "href": "https://twitter.com/PythonMG" }, { "text": "Facebook", "href": "https://facebook.com/uaipython" }] },
+    { "title": { "pt": "Meetup", "en": "Meetup" }, "text": { "pt": "Nos encontramos regularmente para trocar conhecimento e experiências.", "en": "We meet regularly to share knowledge and experience." }, "links": [{ "text": "Meetup", "href": "https://www.meetup.com/pythonmg/events" }] }
   ],
   "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." } },
@@ -35,8 +34,10 @@
   },
   "social": [
     { "text": "GitHub", "href": "https://github.com/pythonmg" },
-    { "text": "Telegram", "href": "https://telegram.me/pythonmg" },
-    { "text": "Mailing list", "href": "https://groups.google.com/forum/#!forum/python-mg" }
+    { "text": "Meetup", "href": "https://www.meetup.com/pythonmg/events" },
+    { "text": "Instagram", "href": "https://www.instagram.com/python.mg" },
+    { "text": "YouTube", "href": "https://www.youtube.com/c/PythonMinasGerais" },
+    { "text": "Telegram", "href": "https://telegram.me/pythonmg" }
   ],
   "footer": { "credit": { "pt": "Feito com Python, JSON e HTML.", "en": "Made with Python, JSON and HTML." }, "repo": "https://github.com/pythonmg/pythonmg.github.io" }
 }

data/site.json

@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="assets/css/site.css">
   </head>
   <body>
@@ -33,8 +34,8 @@
           <h1 id="hero-title">Python-MG</h1>
           <p class="hero-text" id="hero-text"></p>
           <div class="hero-actions">
-            <a class="button button-primary" href="https://www.meetup.com/pythonmg/events" target="_blank" rel="noreferrer" data-i18n="seeEvents">Ver eventos</a>
-            <a class="button button-secondary" href="https://telegram.me/pythonmg" target="_blank" rel="noreferrer">Telegram <span aria-hidden="true">↗</span></a>
+            <a class="button button-primary" href="https://www.meetup.com/pythonmg/events" target="_blank" rel="noreferrer"><i class="bi bi-calendar-event" aria-hidden="true"></i><span data-i18n="seeEvents">Ver eventos</span></a>
+            <a class="button button-secondary" href="https://telegram.me/pythonmg" target="_blank" rel="noreferrer"><i class="bi bi-telegram" aria-hidden="true"></i>Telegram <span aria-hidden="true">↗</span></a>
           </div>
         </div>
       </section>
@@ -68,7 +69,7 @@ <h3 class="subheading" data-i18n="upcoming">Próximos</h3>
           <div class="event-list" id="upcoming-events"></div>
           <h3 class="subheading subdued" data-i18n="past">Eventos anteriores</h3>
           <div class="past-events" id="past-events"></div>
-          <a class="section-external-link" href="https://www.meetup.com/pythonmg/events" target="_blank" rel="noreferrer" data-i18n="seeMoreEvents">Ver mais no Meetup ↗</a>
+          <a class="section-external-link" href="https://www.meetup.com/pythonmg/events" target="_blank" rel="noreferrer"><i class="bi bi-calendar-event" aria-hidden="true"></i><span data-i18n="seeMoreEvents">Ver mais no Meetup ↗</span></a>
         </section>
 
         <section class="section" id="projetos" aria-labelledby="projects-title">
@@ -83,7 +84,7 @@ <h3 class="subheading subdued" data-i18n="past">Eventos anteriores</h3>
 
         <section class="section" id="conduta" aria-labelledby="conduct-title">
           <div class="section-heading"><h2 id="conduct-title"></h2><span></span></div>
-          <div class="conduct-content"><ol class="conduct-list" id="conduct-list"></ol><a class="section-external-link" href="https://github.com/pythonmg/codigo-de-conduta" target="_blank" rel="noreferrer" data-i18n="fullConduct">Ver Código de Conduta completo ↗</a></div>
+          <div class="conduct-content"><ol class="conduct-list" id="conduct-list"></ol><a class="section-external-link" href="https://github.com/pythonmg/codigo-de-conduta" target="_blank" rel="noreferrer"><i class="bi bi-github" aria-hidden="true"></i><span data-i18n="fullConduct">Ver Código de Conduta completo ↗</span></a></div>
         </section>
       </div>
     </main>
@@ -92,7 +93,7 @@ <h3 class="subheading subdued" data-i18n="past">Eventos anteriores</h3>
       <div class="shell footer-main">
         <div><img src="assets/images/logo/logo.png" alt="Python-MG"><p id="footer-about"></p></div>
         <div><p class="label">Social</p><div class="footer-links" id="social-links"></div></div>
-        <div><p class="label">Site</p><div class="footer-links"><a href="#conduta" data-i18n="conduct">Código de conduta</a><a id="repository-link" href="https://github.com/pythonmg/pythonmg.github.io" target="_blank" rel="noreferrer">GitHub Pages repo</a></div></div>
+        <div><p class="label">Site</p><div class="footer-links"><a href="#conduta" data-i18n="conduct">Código de conduta</a><a id="repository-link" href="https://github.com/pythonmg/pythonmg.github.io" target="_blank" rel="noreferrer"><i class="bi bi-github" aria-hidden="true"></i>GitHub Pages repo</a></div></div>
       </div>
       <div class="footer-credit"><div class="shell"><span id="footer-credit"></span><a class="avatar-credit" href="https://unavatar.io" target="_blank" rel="noreferrer">Avatares por Unavatar</a></div></div>
     </footer>