chore: updated Hacktoberfest link on the dev portal (#152)

* chore: updated Hacktoberfest link
* chore: updated the external link styling

Author: JoblersTune

public/img/icon-external.svg

@@ -1,5 +1,6 @@
 ---
 import FoundationLogo from "../logos/FoundationLogo.astro";
+import ExternalIcon from "../../../public/img/icon-external.svg";
 ---
 
 <header class="site-header" role="banner">
@@ -147,13 +148,15 @@ import FoundationLogo from "../logos/FoundationLogo.astro";
                 >Podcast</a
               >
             </li>
-            <li class="menu-item menu-item--level-2 external">
+            <li class="menu-item menu-item--level-2">
               <a
                 href="https://community.interledger.org/"
                 data-umami-event="Site Nav - Community Forem"
                 rel="noopener noreferrer"
-                target="_blank">Community Forem</a
-              >
+                target="_blank"
+                >Community Forem
+                <ExternalIcon class="external" />
+              </a>
             </li>
           </ul>
         </li>
@@ -264,8 +267,7 @@ import FoundationLogo from "../logos/FoundationLogo.astro";
     color: currentColor;
   }
 
-  .external a::after {
-    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"/></svg>');
+  .external {
     display: inline-block;
     height: 0.75em;
     width: 0.75em;

src/components/pages/FoundationHeader.astro

@@ -3,6 +3,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import InterledgerIcon from "../components/logos/InterledgerIcon.astro";
 import OpenPaymentsIcon from "../components/logos/OpenPaymentsIcon.astro";
 import RafikiIcon from "../components/logos/RafikiIcon.astro";
+import ExternalIcon from "../../public/img/icon-external.svg";
 ---
 
 <BaseLayout title="Developers">
@@ -24,11 +25,12 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
               data-umami-event="Devs page link - Get involved">Get involved</a
             >
             <a
-              class="external"
               href="https://github.com/interledger"
               target="_blank"
-              rel="noopener noreferrer">Contribute on Github</a
-            >
+              rel="noopener noreferrer"
+              >Contribute on Github
+              <ExternalIcon class="external" />
+            </a>
           </div>
         </div>
         <div class="image-wrapper">
@@ -60,8 +62,9 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
               data-umami-event="Devs page link - GitHub"
               target="_blank"
               rel="noopener noreferrer"
-              ><OpenPaymentsIcon /> Open Payments Repo</a
-            >
+              ><OpenPaymentsIcon /> Open Payments Repo
+              <ExternalIcon class="external" />
+            </a>
           </h2>
           <p>
             Open Payments is an open API standard that can be implemented by
@@ -76,8 +79,10 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
               href="https://github.com/interledger/rafiki"
               data-umami-event="Devs page link - Rafiki"
               target="_blank"
-              rel="noopener noreferrer"><RafikiIcon /> Rafiki Repo</a
-            >
+              rel="noopener noreferrer"
+              ><RafikiIcon /> Rafiki Repo
+              <ExternalIcon class="external" />
+            </a>
           </h2>
           <p>
             Rafiki is open source software that provides an efficient solution
@@ -93,8 +98,9 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
               data-umami-event="Devs page link - RFCs"
               target="_blank"
               rel="noopener noreferrer"
-              ><InterledgerIcon /> Specifications Repo</a
-            >
+              ><InterledgerIcon /> Specifications Repo
+              <ExternalIcon class="external" />
+            </a>
           </h2>
           <p>
             The <a
@@ -112,8 +118,10 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
               href="https://github.com/interledger/testnet"
               data-umami-event="Devs page link - Testnet"
               target="_blank"
-              rel="noopener noreferrer"><InterledgerIcon /> Test Network Repo</a
-            >
+              rel="noopener noreferrer"
+              ><InterledgerIcon /> Test Network Repo
+              <ExternalIcon class="external" />
+            </a>
           </h2>
           <p>
             The Test Network (Testnet) is an open Interledger network working
@@ -125,10 +133,9 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
         <div class="card">
           <h2 class="heading--6">
             <a
-              href="https://github.com/search?q=topic%3Ahacktoberfest+org%3Ainterledger+fork%3Atrue+repo%3Awicg%2Fwebmonetization&type=repositories"
+              href="/hacktoberfest"
               data-umami-event="Devs page link - Hacktoberfest"
-              target="_blank"
-              rel="noopener noreferrer"><InterledgerIcon /> Hacktoberfest</a
+              ><InterledgerIcon /> Hacktoberfest</a
             >
           </h2>
           <p>
@@ -207,20 +214,19 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
     width: 0.6em;
   }
 
-  .external {
+  a {
     text-decoration-color: transparent;
     text-underline-offset: 4px;
     transition: text-decoration-color ease-in-out 200ms;
     cursor: pointer;
   }
 
-  .external:hover {
+  a:hover {
     color: var(--color-white);
     text-decoration: underline;
   }
 
-  .external::after {
-    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"><path stroke="hsl(180,0%,100%)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"/></svg>');
+  .external {
     height: 0.75em;
     width: 0.75em;
     display: inline-block;
@@ -318,13 +324,11 @@ import RafikiIcon from "../components/logos/RafikiIcon.astro";
   .card h2 a {
     display: flex;
     gap: var(--space-2xs);
+    align-items: center;
   }
 
-  .card h2 a::after {
-    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"/></svg>');
-    height: 0.75em;
-    width: 0.75em;
-    filter: var(--filter-primary);
+  .card h2 a .external {
+    margin-inline: 0;
   }
 
   .card h2,