refactor: rebuild splash page for /developers

astro.config.mjs

@@ -7,7 +7,7 @@ export default defineConfig({
   base: "/developers",
   integrations: [
     starlight({
-      title: "Interledger Protocol (ILP)",
+      title: "Interledger",
       description: "Enable seamless exchange of value across payment networks.",
       customCss: [
         "./node_modules/@interledger/docs-design-system/src/styles/green-theme.css",

package.json

@@ -9,12 +9,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.12.0",
-    "@interledger/docs-design-system": "^0.1.2",
-    "@types/showdown": "^2.0.3",
-    "astro": "^3.4.3",
+    "@astrojs/starlight": "^0.15.0",
+    "@interledger/docs-design-system": "^0.2.1",
+    "@types/showdown": "^2.0.6",
+    "astro": "^4.0.3",
     "node-html-parser": "^6.1.11",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.0",
     "showdown": "^2.1.0"
   }
 }

src/components/DevelopersLogo.astro

@@ -0,0 +1,4 @@
+---
+const { class: className } = Astro.props;
+---
+<svg role="img" class={className} fill="none" viewBox="0 0 200 59"><path fill="#fff" d="M49.56 23.355c.828 4.047 1.38 8.755 0 12.962-1.361 4.151-4.458 7.303-7.47 10.081-3.63 2.03-7.89 3.978-12.355 3.978-4.406 0-8.476-1.916-12.071-3.896-3.071-2.793-6.246-5.956-7.626-10.163-1.361-4.152-.788-8.832 0-12.832 1.73-3.755 4.015-7.94 7.626-10.539 3.564-2.565 8.003-3.26 12.087-3.753 4.14.471 8.725 1.397 12.339 3.999 3.564 2.565 5.738 6.466 7.47 10.163Z"/><path fill="#B4EEE0" d="M29.805 49.587c-4.404 0-8.544-1.129-12.141-3.107.139 2.792 5.6 6.102 12.234 6.102 6.633 0 11.786-4.068 12.192-6.184a25.1 25.1 0 0 1-12.285 3.19Z"/><path fill="#D3D6E2" d="M17.664 46.48a24.66 24.66 0 0 1-6.858-10.592 24.453 24.453 0 0 1-.768-12.401c-2.41.573-3.687 8.695-2.076 13.414 1.612 4.715 7.306 10.608 9.702 9.579Z"/><path fill="#FFC9DD" d="M18.086 13.748a25.047 25.047 0 0 1 11.666-4.555c-1.986-1.737-10.026-.452-13.517 2.19-3.49 2.641-7.605 9.63-6.197 12.104a24.711 24.711 0 0 1 8.048-9.739Z"/><path fill="#FFEBB2" d="M29.752 9.193a25.02 25.02 0 0 1 11.83 4.576 24.701 24.701 0 0 1 7.976 9.586c1.498-2.517-1.844-9.164-6.276-12.06-4.432-2.897-12.4-3.653-13.53-2.102Z"/><path fill="#C6E4A2" d="M49.56 23.352a24.459 24.459 0 0 1-.735 12.564 24.666 24.666 0 0 1-6.735 10.48c3.423.327 8.177-4.181 9.636-9.643 1.459-5.46-.03-13.108-2.166-13.4Z"/><path fill="#A4BFDD" d="M7.962 36.899c-1.46 1.828.388 9.516 6.578 13.869s14.001 3.404 15.358 1.811a25.249 25.249 0 0 1-12.234-6.1 25.043 25.043 0 0 1-9.702-9.58Z"/><path fill="#99E2D1" d="M51.726 36.753a25.005 25.005 0 0 1-9.636 9.643 25.227 25.227 0 0 1-12.192 6.183c1.635 1.972 10.529.974 15.344-1.91 4.814-2.886 7.419-11.411 6.484-13.916Z"/><path fill="#FFA7B3" d="M10.038 23.485a24.85 24.85 0 0 1 6.197-12.104c-3.24-1.186-9.377 4.186-11.28 10.482C3.05 28.16 4.58 35.366 7.961 36.897a24.706 24.706 0 0 1 2.076-13.412Z"/><path fill="#FCA" d="M29.752 9.193a25.36 25.36 0 0 1 13.53 2.1C44.667 8.694 35.877 3.9 29.735 3.9c-6.141 0-13.395 4.2-13.5 7.48a25.324 25.324 0 0 1 13.517-2.188Z"/><path fill="#E9D59E" d="M51.726 36.753c2.925-.564 5.1-7.76 2.909-15.05-2.194-7.289-8.98-11.16-11.35-10.41a24.833 24.833 0 0 1 6.278 12.06 24.72 24.72 0 0 1 2.163 13.4Z"/><path fill="#A499D7" d="M14.54 50.768a24.879 24.879 0 0 1-1.988-2.387A24.562 24.562 0 0 1 7.965 36.9a24.5 24.5 0 0 1-3.18-12.104c0-.99.06-1.97.174-2.93-2.347.648-5.179 9.962-2.61 16.861 2.568 6.903 10.013 12.43 12.19 12.042Z"/><path fill="#56B8B6" d="M45.242 50.668c-.933.434-1.902.814-2.906 1.137a25.125 25.125 0 0 1-12.438.774 25.114 25.114 0 0 1-12.6-.744 25.528 25.528 0 0 1-2.758-1.07c1.101 3.356 6.693 7.668 15.379 7.668 8.685.002 13.716-4.226 15.323-7.765Z"/><path fill="#68C280" d="M54.632 21.703a24.68 24.68 0 0 1 .193 3.09c0 4.337-1.125 8.414-3.101 11.96a24.52 24.52 0 0 1-4.608 11.645 25.19 25.19 0 0 1-1.879 2.268c4.022.26 9.947-4.138 12.113-12.123 2.166-7.985-.535-15.859-2.718-16.84Z"/><path fill="#FF7A7F" d="M4.957 21.863a24.766 24.766 0 0 1 1.676-2.611 24.868 24.868 0 0 1 9.602-7.871 24.932 24.932 0 0 1 10.636-6.738c.95-.306 1.909-.552 2.864-.742-3.395-1.681-11.69-.684-16.99 2.753-5.297 3.437-8.762 11.967-7.788 15.21Z"/><path fill="#FFBA86" d="M29.735 3.903a25.37 25.37 0 0 1 3.025.773 24.947 24.947 0 0 1 10.522 6.616 24.839 24.839 0 0 1 9.752 7.941c.587.803 1.12 1.628 1.598 2.47 1.53-2.892-3.114-11.589-7.892-15.16-4.778-3.572-13.445-4.233-17.005-2.64Z"/><path fill="#835283" d="M4.957 21.863c.71-5.98 3.567-11.308 7.79-15.21C7.468 9.6 3.25 14.438 1.232 20.594a24.492 24.492 0 0 0 1.116 18.131 24.538 24.538 0 0 1 2.609-16.86Z"/><path fill="#8075B4" d="M14.54 50.768A24.84 24.84 0 0 1 2.35 38.726a24.69 24.69 0 0 0 9.82 15.159c5.332 3.838 11.684 5.288 17.749 4.55-5.738-.658-11.23-3.272-15.379-7.667Z"/><path fill="#2E9D87" d="M45.242 50.668c-4.121 4.425-9.595 7.072-15.323 7.767a25.103 25.103 0 0 0 17.584-4.569c5.332-3.84 8.686-9.376 9.852-15.32a24.857 24.857 0 0 1-12.113 12.122Z"/><path fill="#549558" d="M54.632 21.703a24.539 24.539 0 0 1 2.72 16.843C59.875 33.09 60.42 26.72 58.4 20.565 56.362 14.35 52.086 9.48 46.74 6.545c4.251 3.873 7.143 9.186 7.892 15.158Z"/><path fill="#FF9952" d="M29.735 3.903A25.156 25.156 0 0 1 46.74 6.545 25.053 25.053 0 0 0 29.805 0a25.062 25.062 0 0 0-17.058 6.656 25.143 25.143 0 0 1 16.988-2.753Z"/><path class="logo-text" fill="#000" d="M192.584 29.483V15.056h2.136v1.962c1.673-1.154 3.433-1.914 5.28-2.28v2.193c-.808.154-1.654.395-2.539.722-.866.327-1.529.615-1.991.865l-.721.375v10.59h-2.165ZM187.827 27.694l.837-.087.057 1.703c-2.192.308-4.068.461-5.626.461-2.078 0-3.549-.596-4.415-1.789-.865-1.212-1.298-3.087-1.298-5.626 0-5.06 2.01-7.589 6.03-7.589 1.943 0 3.395.549 4.357 1.645.962 1.077 1.443 2.78 1.443 5.107l-.115 1.645h-9.522c0 1.596.288 2.78.865 3.549.577.77 1.578 1.154 3.001 1.154 1.443 0 2.905-.058 4.386-.173Zm-.779-6.261c0-1.77-.289-3.02-.866-3.751-.558-.731-1.481-1.097-2.77-1.097-1.269 0-2.231.385-2.885 1.154-.635.77-.962 2-.981 3.694h7.502ZM168.764 36.264c-2.308 0-3.924-.318-4.847-.953-.904-.615-1.356-1.75-1.356-3.404 0-.79.173-1.433.519-1.934.346-.48.933-1.029 1.76-1.644-.539-.366-.808-1.03-.808-1.991 0-.327.241-.933.721-1.818l.26-.462c-1.52-.692-2.279-2.145-2.279-4.357 0-3.289 1.798-4.934 5.395-4.934.924 0 1.78.097 2.568.289l.433.086 4.271-.115v1.847l-2.742-.058c.635.635.953 1.597.953 2.885 0 1.808-.452 3.078-1.357 3.81-.884.71-2.289 1.067-4.212 1.067-.52 0-.991-.039-1.414-.116-.346.847-.519 1.395-.519 1.645 0 .596.182.971.548 1.125.365.135 1.471.202 3.318.202s3.174.289 3.982.866c.808.577 1.212 1.702 1.212 3.376 0 3.058-2.136 4.588-6.406 4.588Zm-4.068-4.53c0 1.019.279 1.721.836 2.106.578.404 1.626.606 3.146.606 1.538 0 2.635-.212 3.289-.635.673-.423 1.01-1.135 1.01-2.135 0-.981-.241-1.616-.722-1.905-.48-.288-1.423-.433-2.827-.433l-3.116-.144c-.635.462-1.068.866-1.299 1.212-.211.346-.317.789-.317 1.327Zm.202-12.033c0 1.135.25 1.943.75 2.424.519.481 1.366.721 2.539.721s2.01-.24 2.51-.72c.5-.482.751-1.29.751-2.425 0-1.154-.251-1.971-.751-2.452-.5-.481-1.337-.722-2.51-.722-1.173 0-2.02.25-2.539.75-.5.482-.75 1.29-.75 2.424ZM159.003 8.766v20.717h-2.135v-.981c-1.481.846-2.943 1.27-4.386 1.27-.769 0-1.443-.097-2.02-.29-.577-.191-1.115-.538-1.616-1.038-1.038-1.039-1.558-2.953-1.558-5.742 0-2.808.462-4.828 1.385-6.06.943-1.25 2.491-1.875 4.646-1.875 1.115 0 2.298.125 3.549.376V8.765h2.135Zm-8.483 18.12c.308.366.635.616.981.75.346.135.789.202 1.327.202.558 0 1.174-.086 1.847-.26.692-.192 1.231-.375 1.616-.548l.577-.26v-9.78c-1.231-.232-2.376-.347-3.434-.347-1.462 0-2.481.471-3.058 1.414-.577.923-.866 2.366-.866 4.328 0 2.231.337 3.731 1.01 4.501ZM143.166 27.694l.836-.087.058 1.703c-2.193.308-4.068.461-5.626.461-2.078 0-3.549-.596-4.415-1.789-.866-1.212-1.299-3.087-1.299-5.626 0-5.06 2.011-7.589 6.031-7.589 1.943 0 3.395.549 4.357 1.645.962 1.077 1.443 2.78 1.443 5.107l-.116 1.645h-9.522c0 1.596.289 2.78.866 3.549.577.77 1.577 1.154 3.001 1.154 1.442 0 2.904-.058 4.386-.173Zm-.779-6.261c0-1.77-.289-3.02-.866-3.751-.558-.731-1.481-1.097-2.77-1.097-1.27 0-2.231.385-2.885 1.154-.635.77-.962 2-.981 3.694h7.502ZM126.85 29.483V8.766h2.164v20.717h-2.164ZM116.702 29.483V15.056h2.136v1.962c1.673-1.154 3.433-1.914 5.28-2.28v2.193c-.808.154-1.654.395-2.539.722-.866.327-1.53.615-1.991.865l-.722.375v10.59h-2.164ZM111.945 27.694l.837-.087.057 1.703c-2.193.308-4.068.461-5.626.461-2.078 0-3.549-.596-4.415-1.789-.865-1.212-1.298-3.087-1.298-5.626 0-5.06 2.01-7.589 6.03-7.589 1.943 0 3.395.549 4.357 1.645.962 1.077 1.443 2.78 1.443 5.107l-.116 1.645h-9.521c0 1.596.288 2.78.865 3.549.577.77 1.578 1.154 3.001 1.154 1.443 0 2.905-.058 4.386-.173Zm-.779-6.261c0-1.77-.289-3.02-.866-3.751-.558-.731-1.481-1.097-2.77-1.097-1.269 0-2.231.385-2.885 1.154-.635.77-.962 2-.981 3.694h7.502ZM99.492 16.931h-4.588v6.896c0 1.655.115 2.742.346 3.26.25.52.827.78 1.731.78l2.569-.173.144 1.789c-1.289.211-2.27.317-2.943.317-1.5 0-2.54-.365-3.117-1.096-.577-.731-.865-2.126-.865-4.184V16.93H90.72v-1.875h2.049V10.64h2.135v4.415h4.588v1.875ZM78.77 29.483h-2.164V15.056h2.135v1.01c1.558-.866 3.049-1.299 4.472-1.299 1.924 0 3.212.52 3.866 1.558.674 1.04 1.01 2.886 1.01 5.54v7.618h-2.135v-7.56c0-2-.202-3.366-.606-4.097-.385-.75-1.221-1.125-2.51-1.125a7.34 7.34 0 0 0-1.962.288c-.673.173-1.193.346-1.558.52l-.549.26v11.714ZM69.88 29.483V9.516h2.222v19.967H69.88ZM148.703 41.002c-1.237 0-1.855.434-1.855 1.3 0 .449.146.77.438.965.292.185.935.419 1.928.701 1.004.273 1.71.604 2.119.994.409.38.613.983.613 1.811 0 1.052-.301 1.841-.905 2.367-.594.516-1.408.774-2.44.774-.828 0-1.744-.097-2.747-.292l-.526-.102.161-1.3c1.315.175 2.318.263 3.01.263 1.207 0 1.811-.536 1.811-1.607 0-.42-.136-.726-.409-.92-.273-.206-.886-.425-1.841-.658-.954-.244-1.665-.575-2.133-.994-.467-.419-.701-1.08-.701-1.987 0-.906.292-1.587.877-2.045.594-.468 1.412-.701 2.454-.701.75 0 1.636.087 2.659.263l.511.087-.131 1.315c-1.364-.156-2.328-.234-2.893-.234ZM138.357 46.189v3.565h-1.621V39.746h3.798c2.26 0 3.389 1.062 3.389 3.185 0 1.422-.545 2.386-1.636 2.893l1.651 3.93h-1.782l-1.447-3.565h-2.352Zm3.901-3.243c0-1.198-.575-1.797-1.724-1.797h-2.177v3.637h2.206c.585 0 1.013-.165 1.286-.496.273-.341.409-.79.409-1.344ZM128.66 49.754V39.746h6.312v1.417h-4.69v2.834h3.813V45.4h-3.813v2.922h4.69v1.432h-6.312ZM123.696 46.642h-2.046v3.112h-1.621V39.746h3.667c2.269 0 3.404 1.12 3.404 3.36 0 1.15-.287 2.026-.862 2.63-.565.604-1.412.906-2.542.906Zm-2.046-1.403h2.031c1.169 0 1.753-.71 1.753-2.133 0-.681-.141-1.178-.423-1.49-.283-.312-.726-.468-1.33-.468h-2.031v4.091ZM112.18 47.635c.331.575.964.862 1.899.862s1.563-.282 1.885-.847c.331-.565.496-1.51.496-2.834 0-1.335-.17-2.304-.511-2.908-.331-.604-.954-.906-1.87-.906-.916 0-1.544.302-1.885.906-.341.604-.511 1.568-.511 2.893 0 1.315.166 2.26.497 2.834Zm5.055 1.052c-.594.818-1.646 1.227-3.156 1.227-1.51 0-2.566-.409-3.17-1.227-.604-.828-.906-2.123-.906-3.886s.302-3.073.906-3.93c.613-.857 1.67-1.286 3.17-1.286s2.552.429 3.156 1.286c.604.847.905 2.157.905 3.93 0 1.773-.301 3.068-.905 3.886ZM109.289 49.754h-5.61V39.746h1.621v8.561h3.989v1.447ZM95.603 49.754V39.746h6.312v1.417h-4.69v2.834h3.813V45.4h-3.813v2.922h4.69v1.432h-6.312ZM92.466 39.746h1.695l-2.455 10.008h-3.184l-2.455-10.008h1.695l1.987 8.576h.73l1.987-8.576ZM78.854 49.754V39.746h6.311v1.417h-4.69v2.834h3.814V45.4h-3.814v2.922h4.69v1.432h-6.311ZM72.957 49.754h-3.462V39.746h3.462c1.539 0 2.59.39 3.156 1.169.565.779.847 2.001.847 3.667 0 .847-.058 1.568-.175 2.162a4.795 4.795 0 0 1-.585 1.593c-.555.944-1.636 1.417-3.243 1.417Zm2.323-5.172c0-1.208-.151-2.08-.453-2.615-.302-.536-.925-.804-1.87-.804h-1.84v7.159h1.84c.964 0 1.607-.356 1.929-1.067.155-.36.258-.745.306-1.154.059-.409.088-.915.088-1.52Z"/></svg>

src/components/Header.astro

@@ -2,12 +2,24 @@
 import type { Props } from '@astrojs/starlight/props';
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
-import FoundationLogo from "../components/FoundationLogo.astro";
+import DevelopersLogo from "../components/DevelopersLogo.astro";
 ---
 
 <div class="header sl-flex">
-  <a href="/" class="site-title">
-    <FoundationLogo />
+  <a href="/developers" class="site-title">
+    <DevelopersLogo />
+  </a>
+  <a href="/" class="home-link overflower">
+      <span
+        class="overflower-short"
+        aria-hidden="true"
+        title="Interledger Foundation"
+      >
+        ILF
+      </span>
+      <span class="overflower-long">
+        Interledger Foundation
+      </span>
   </a>
   <div class="secondary-wrap">
     <SocialIcons {...Astro.props} />
@@ -18,10 +30,16 @@ import FoundationLogo from "../components/FoundationLogo.astro";
 </div>
 
 <style>
+  :global(header) {
+    border-block-start: 2px solid var(--color-primary-fallback);
+    border-block-start: 2px solid var(--color-primary);
+    box-shadow: 0px 0px 12px -4px var(--color-primary-fallback);
+    box-shadow: 0px 0px 12px -4px var(--color-primary);
+  }
+
   .header { 
     gap: var(--sl-nav-gap);
     align-items: center;
-    justify-content: space-between;
     height: 100%;
   }
 
@@ -36,8 +54,45 @@ import FoundationLogo from "../components/FoundationLogo.astro";
     flex: none;
   }
 
-  .secondary-wrap {
+  .overflower {
+    display: inline-flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
     margin-left: auto;
+    height: 1.5em;
+  }
+
+  .overflower-short {
+    display: block;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 0;
+    text-overflow: ellipsis;
+    text-align: right;
+  }
+
+  .overflower-long {
+    display: inline;
+    flex: 0 1 100%;
+  }
+
+  .home-link {
+    color: var(--color-primary-fallback);
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+
+  :global([data-theme="dark"]) .home-link {
+    color: var(--sl-color-text-accent);
+  }
+
+  .home-link:hover {
+    text-decoration: underline;
+  }
+
+  .secondary-wrap {
     display: flex;
     align-items: center;
     gap: var(--sl-nav-gap);