docs: add the DPG badge to the Rafiki footer (DOCSDEV-78)

packages/documentation/src/components/DpgBadge.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * Official Digital Public Goods Alliance badge.
+ * Source: https://github.com/DPGAlliance/dpg-resources (CC0 1.0 Universal).
+ * The dark theme fills every path white, which matches the official white variant.
+ */
+const { class: className } = Astro.props
+---
+
+<svg role='img' class={className} viewBox='0 0 1188 520'
+  ><title>Digital Public Good badge</title><path
+    class='dpg-navy'
+    fill='#212180'
+    d='M 927.749146 -0.833313 L 234.139755 -0.833313 C 358.050537 21.174927 452.169281 129.351349 452.169281 259.583344 C 452.169281 389.815308 358.050537 497.99173 234.139755 520 L 927.749146 520 C 1071.57312 520 1188.165527 403.407593 1188.165527 259.583588 L 1188.165527 259.583069 C 1188.165527 115.759064 1071.57312 -0.833313 927.749146 -0.833313 Z M 608.232849 356.81842 L 554.133362 356.81842 L 554.133362 162.348236 L 608.232849 162.348236 C 661.848206 162.348236 705.465942 205.968018 705.465942 259.583344 C 705.465942 313.198669 661.848206 356.81842 608.232849 356.81842 Z M 810.269409 272.134216 L 764.46051 272.134216 L 764.46051 356.81842 L 739.995544 356.81842 L 739.995544 162.348236 L 810.269409 162.348236 C 840.624207 162.348236 865.319031 187.045074 865.319031 217.399902 C 865.319031 248.092438 841.138977 272.134216 810.269409 272.134216 Z M 1082.581787 259.583344 C 1082.581787 314.598389 1037.824707 359.355469 982.809692 359.355469 C 927.794617 359.355469 883.037537 314.598389 883.037537 259.583344 C 883.037537 204.568268 927.794617 159.811188 982.809692 159.811188 C 1018.732971 159.811188 1051.87915 179.179688 1069.312744 210.356445 L 1070.325928 212.169189 L 1049.244385 224.052734 L 1048.227173 222.215576 C 1035.26123 198.814697 1010.194153 184.278168 982.809692 184.278168 C 941.285461 184.278168 907.504517 218.059082 907.504517 259.583344 C 907.504517 301.107605 941.285461 334.888489 982.809692 334.888489 C 1018.979126 334.888489 1049.557739 309.845764 1056.438477 274.988586 L 980.408997 274.988586 L 980.408997 251.791168 L 1082.581787 251.791168 L 1082.581787 259.583344 Z'
+  ></path><path
+    class='dpg-teal'
+    fill='#82dbe1'
+    d='M 607.915466 186.815186 L 578.280884 186.815186 L 578.280884 332.351501 L 607.915466 332.351501 C 649.580139 332.351501 681.001038 301.068909 681.001038 259.583344 C 681.001038 218.097748 649.580139 186.815186 607.915466 186.815186 Z'
+  ></path><path
+    class='dpg-teal'
+    fill='#82dbe1'
+    d='M 808.367126 186.18042 L 764.46051 186.18042 L 764.46051 248.619385 L 808.367126 248.619385 C 824.537415 248.619385 840.854126 239.063324 840.854126 217.717285 C 840.854126 199.443359 827.190369 186.18042 808.367126 186.18042 Z'
+  ></path><path
+    class='dpg-navy'
+    fill='#212180'
+    d='M 607.915466 332.351501 L 578.280884 332.351501 L 578.280884 186.815186 L 607.915466 186.815186 C 649.580139 186.815186 681.001038 218.097748 681.001038 259.583344 C 681.001038 301.068909 649.580139 332.351501 607.915466 332.351501 Z'
+  ></path><path
+    class='dpg-navy'
+    fill='#212180'
+    d='M 808.367126 248.619385 L 764.46051 248.619385 L 764.46051 186.18042 L 808.367126 186.18042 C 827.190369 186.18042 840.854126 199.443359 840.854126 217.717285 C 840.854126 239.063324 824.537415 248.619385 808.367126 248.619385 Z'
+  ></path><path
+    class='dpg-teal'
+    fill='#82dbe1'
+    d='M 292.576355 179.365601 L 294.750977 104.623718 L 224.339035 129.788269 L 182.166031 68.042542 L 139.993027 129.788269 L 69.581352 104.623718 L 71.755981 179.365601 L 0 200.393982 L 45.691425 259.583344 L 0 318.772705 L 71.755981 339.801086 L 69.581352 414.543213 L 139.993027 389.378418 L 182.166031 451.124115 L 224.339035 389.378418 L 294.750977 414.543213 L 292.576355 339.801086 L 364.332336 318.772705 L 318.640656 259.583344 L 364.332336 200.393982 L 292.576355 179.365601 Z M 168.731186 322.421082 L 120.881653 282.473572 L 136.901352 263.284088 L 166.261292 287.793762 L 233.200577 213.412262 L 251.783752 230.135895 L 168.731186 322.421082 Z'
+  ></path></svg
+>
+
+<style>
+  /* The dark theme uses the official white variant of the badge. */
+  :global([data-theme='dark']) .dpg-navy,
+  :global([data-theme='dark']) .dpg-teal {
+    fill: #fff;
+  }
+</style>

packages/documentation/src/components/Footer.astro

@@ -1,10 +1,21 @@
 ---
 import Pagination from '@astrojs/starlight/components/Pagination.astro'
+import DpgBadge from './DpgBadge.astro'
 ---
 
 <footer class='footer sl-flex'>
   <Pagination />
   <div class='footer-legal'>
+    <a
+      class='dpg-link'
+      href='https://www.digitalpublicgoods.net/r/rafiki'
+      rel='noopener noreferrer'
+      target='_blank'
+      data-umami-event='Rafiki docs footer - DPG registry'
+    >
+      <DpgBadge class='dpg-badge' />
+      <span>Rafiki is a verified digital public good.</span>
+    </a>
     <p>
       Rafiki is stewarded by the <a
         href='https://interledger.org'
@@ -45,4 +56,22 @@ import Pagination from '@astrojs/starlight/components/Pagination.astro'
   .footer-legal a:hover {
     color: var(--sl-color-white);
   }
+
+  .dpg-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    margin-bottom: var(--space-xs);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .dpg-link:hover span {
+    text-decoration: underline;
+  }
+
+  .dpg-link :global(.dpg-badge) {
+    width: 4.5rem;
+    flex: none;
+  }
 </style>