Add multiple social media links to the footer (#1667)

* improve social media * improve style.css * include in other langs
expressjs · Oct 28, 2024 · 6923c2e · 6923c2e
1 parent fac7900
commit 6923c2e
Show file tree

Hide file tree

Showing 26 changed files with 597 additions and 81 deletions.
diff --git a/_includes/footer/footer-de.html b/_includes/footer/footer-de.html
@@ -4,7 +4,8 @@
     <div id="footer-content">
         <div id="footer-copyright">
             <a href="https://openjsf.org/">   
-              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
             </a>
             <div id="footer-policy">
               <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -17,9 +18,35 @@
           </div>
         <div id="footer-links">
             <div class="footer-social">
-              <div id="github">
-                <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-              </div>  
+              <div>
+                <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+                  <span class="hidden-dark">
+                    {% include icons/github-light.svg %}
+                  </span>
+                  <span class="hidden-light">
+                    {% include icons/github-dark.svg %}
+                  </span>
+                </a>
+              </div>
+              <div>
+                <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+              </div>
+              <div>
+                <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+                  <span class="hidden-dark">
+                    {% include icons/x-light.svg %}
+                  </span>
+                  <span class="hidden-light">
+                    {% include icons/x-dark.svg %}
+                  </span>
+                </a>
+              </div>
+              <div>
+                <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+              </div>
+              <div>
+                <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+              </div>
             </div>
             <a href="https://www.netlify.com">
               <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-en.html b/_includes/footer/footer-en.html
@@ -10,7 +10,8 @@
   <section id="footer-content">
     <div id="footer-copyright">
       <a href="https://openjsf.org/">   
-        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -23,9 +24,35 @@
     </div>
     <div id="footer-links">
       <div class="footer-social">
-        <div id="github">
-          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-        </div>  
+        <div>
+          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+            <span class="hidden-dark">
+              {% include icons/github-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/github-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+        </div>
+        <div>
+          <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+            <span class="hidden-dark">
+              {% include icons/x-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/x-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+        </div>
+        <div>
+          <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+        </div>
       </div>
       <a href="https://www.netlify.com">
         <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-es.html b/_includes/footer/footer-es.html
@@ -4,7 +4,8 @@
   <section id="footer-content">
     <div id="footer-copyright">
       <a href="https://openjsf.org/">   
-        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">Condiciones de uso</a>
@@ -17,9 +18,35 @@
     </div>
     <div id="footer-links">
       <div class="footer-social">
-        <div id="github">
-          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-        </div>  
+        <div>
+          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+            <span class="hidden-dark">
+              {% include icons/github-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/github-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+        </div>
+        <div>
+          <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+            <span class="hidden-dark">
+              {% include icons/x-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/x-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+        </div>
+        <div>
+          <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+        </div>
       </div>
       <a href="https://www.netlify.com">
         <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-fr.html b/_includes/footer/footer-fr.html
@@ -4,7 +4,8 @@
     <div id="footer-content">
         <div id="footer-copyright">
             <a href="https://openjsf.org/">   
-              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+              <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
             </a>
             <div id="footer-policy">
               <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -17,9 +18,35 @@
         </div>
         <div id="footer-links">
             <div class="footer-social">
-              <div id="github">
-                <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-              </div>  
+              <div>
+                <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+                  <span class="hidden-dark">
+                    {% include icons/github-light.svg %}
+                  </span>
+                  <span class="hidden-light">
+                    {% include icons/github-dark.svg %}
+                  </span>
+                </a>
+              </div>
+              <div>
+                <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+              </div>
+              <div>
+                <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+                  <span class="hidden-dark">
+                    {% include icons/x-light.svg %}
+                  </span>
+                  <span class="hidden-light">
+                    {% include icons/x-dark.svg %}
+                  </span>
+                </a>
+              </div>
+              <div>
+                <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+              </div>
+              <div>
+                <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+              </div>
             </div>
             <a href="https://www.netlify.com">
               <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-id.html b/_includes/footer/footer-id.html
@@ -10,7 +10,8 @@
   <section id="footer-content">
     <div id="footer-copyright">
       <a href="https://openjsf.org/">   
-        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+        <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
       </a>
       <div id="footer-policy">
         <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -23,9 +24,35 @@
     </div>
     <div id="footer-links">
       <div class="footer-social">
-        <div id="github">
-          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-        </div>  
+        <div>
+          <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+            <span class="hidden-dark">
+              {% include icons/github-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/github-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+        </div>
+        <div>
+          <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+            <span class="hidden-dark">
+              {% include icons/x-light.svg %}
+            </span>
+            <span class="hidden-light">
+              {% include icons/x-dark.svg %}
+            </span>
+          </a>
+        </div>
+        <div>
+          <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+        </div>
+        <div>
+          <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+        </div>
       </div>
       <a href="https://www.netlify.com">
         <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-it.html b/_includes/footer/footer-it.html
@@ -4,7 +4,8 @@
     <section id="footer-content">
         <div id="footer-copyright">
           <a href="https://openjsf.org/">   
-            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
           </a>
           <div id="footer-policy">
             <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -17,9 +18,35 @@
         </div>
         <div id="footer-links">
           <div class="footer-social">
-            <div id="github">
-              <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-            </div>  
+            <div>
+              <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+                <span class="hidden-dark">
+                  {% include icons/github-light.svg %}
+                </span>
+                <span class="hidden-light">
+                  {% include icons/github-dark.svg %}
+                </span>
+              </a>
+            </div>
+            <div>
+              <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+            </div>
+            <div>
+              <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+                <span class="hidden-dark">
+                  {% include icons/x-light.svg %}
+                </span>
+                <span class="hidden-light">
+                  {% include icons/x-dark.svg %}
+                </span>
+              </a>
+            </div>
+            <div>
+              <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+            </div>
+            <div>
+              <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+            </div>
           </div>
           <a href="https://www.netlify.com">
             <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />

diff --git a/_includes/footer/footer-ja.html b/_includes/footer/footer-ja.html
@@ -4,7 +4,8 @@
     <section id="footer-content">
         <div id="footer-copyright">
           <a href="https://openjsf.org/">   
-            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39"/>
+            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-color.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-dark"/>
+            <img src="https://raw.githubusercontent.com/openjs-foundation/artwork/main/openjs_foundation/openjs_foundation-logo-horizontal-white.svg" alt="OpenJS Foundation" width="125" height="39" class="hidden-light"/>
           </a>
           <div id="footer-policy">
             <a href="https://terms-of-use.openjsf.org">Terms of Use</a>
@@ -17,9 +18,35 @@
         </div>
         <div id="footer-links">
           <div class="footer-social">
-            <div id="github">
-              <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub"><i class="fa fa-github"></i></a>
-            </div>  
+            <div>
+              <a href="https://github.com/expressjs/express" aria-label="Go to the repository on GitHub">
+                <span class="hidden-dark">
+                  {% include icons/github-light.svg %}
+                </span>
+                <span class="hidden-light">
+                  {% include icons/github-dark.svg %}
+                </span>
+              </a>
+            </div>
+            <div>
+              <a href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g" aria-label="Go to the repository on Youtube">{% include icons/youtube.svg %}</a>
+            </div>
+            <div>
+              <a href="https://x.com/UseExpressJS" aria-label="Go to the repository on X">
+                <span class="hidden-dark">
+                  {% include icons/x-light.svg %}
+                </span>
+                <span class="hidden-light">
+                  {% include icons/x-dark.svg %}
+                </span>
+              </a>
+            </div>
+            <div>
+              <a href="https://openjs-foundation.slack.com/archives/C02QB1731FH" aria-label="Go to the repository on Slack">{% include icons/slack.svg %}</a>
+            </div>
+            <div>
+              <a href="https://opencollective.com/express" aria-label="Go to the repository on Open Collective">{% include icons/opencollective.svg %}</a>
+            </div>
           </div>
           <a href="https://www.netlify.com">
             <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Preview Deploys by Netlify" width="80" />