Add endorsements

Closes #103

public/images/endorsers/raymmar.webp.license

@@ -0,0 +1,2 @@
+© 2024 Raymmar Tirado
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/endorsers/schickling.webp.license

@@ -0,0 +1,2 @@
+© 2024 Johannes Schickling
+SPDX-License-Identifier: LicenseRef-Restricted

public/images/endorsers/xdamman.webp.license

@@ -0,0 +1,2 @@
+© 2024 Xavier Damman
+SPDX-License-Identifier: LicenseRef-Restricted

src/components/Endorsement.astro

@@ -0,0 +1,73 @@
+---
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+interface Props {
+  name: string;
+  handle: string;
+  imageUrl: string;
+  sourceUrl: string;
+  hidden?: boolean;
+}
+
+const { name, handle, imageUrl, sourceUrl, hidden } = Astro.props;
+---
+
+<figure class="endorsement" hidden={hidden}>
+  <blockquote>
+    <slot></slot>
+  </blockquote>
+  <figcaption>
+    <img src={imageUrl}>
+    <div>
+      <div>{name}</div>
+      <a href={sourceUrl}
+        ><small>{handle}</small></a
+      >
+    </div>
+  </figcaption>
+  <hr>
+</figure>
+
+<style>
+  .endorsement {
+    position: relative;
+    margin: 0;
+    padding-top: 1rem;
+    &:before {
+      content: '“';
+      position: absolute;
+      top: -0.5rem;
+      left: 0;
+      font-size: 5rem;
+      line-height: 1;
+      font-style: italic;
+      color: var(--color-primary);
+    }
+    hr {
+      margin: 1.5rem auto;
+      max-width: 10rem;
+      border-color: var(--color-primary);
+      border-width: 1px;
+    }
+    &:last-child hr {
+      display: none;
+    }
+    blockquote {
+      margin: 0;
+      font-size: 1.2rem;
+    }
+    figcaption {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-top: 0.7rem;
+      line-height: 1.3;
+      img {
+        border-radius: 100%;
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+  }
+</style>

src/components/Endorsements.astro

@@ -0,0 +1,56 @@
+---
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+import Endorsement from "./Endorsement.astro";
+---
+
+<div class="endorsement-group">
+  <Endorsement
+    name="Johannes Schickling"
+    handle="@schickling"
+    imageUrl="/images/endorsers/schickling.webp"
+    sourceUrl="https://x.com/schickling/status/1832361798130954335"
+  >
+    <p>I can't overstate how excited I am about this. ❤️</p>
+  </Endorsement>
+  <Endorsement
+    name="Raymmar"
+    handle="@raymmar_"
+    imageUrl="/images/endorsers/raymmar.webp"
+    sourceUrl="https://x.com/raymmar_/status/1832464000996548806"
+  >
+    <p>Great initiative. [Vital] for the next step of internet growth. 💪</p>
+  </Endorsement>
+  <Endorsement
+    name="Xavier Damman"
+    handle="@xdamman"
+    imageUrl="/images/endorsers/xdamman.webp"
+    sourceUrl="https://x.com/xdamman/status/1837021472499343492"
+  >
+    <p
+      >Great initiative to get companies who wouldn’t exist without the digital public good of open source software to
+      give back.</p
+    >
+  </Endorsement>
+</div>
+
+<style>
+</style>
+
+<script>
+  import { shuffle, range } from "../util.ts";
+
+  const N_TO_CHOOSE = 3;
+
+  const $groups = document.querySelectorAll<HTMLElement>('.endorsement-group');
+  $groups.forEach(($group) => {
+    const $items = $group.querySelectorAll<HTMLElement>('.endorsement');
+    if ($items.length <= N_TO_CHOOSE) { return; }
+    const chosen = shuffle(range($items.length)).slice(0, N_TO_CHOOSE);
+    $items.forEach(($item, idx) => {
+      const isVisible = chosen.includes(idx);
+      $item.hidden = !isVisible;
+    });
+  });
+</script>

src/layouts/Layout.astro

@@ -477,6 +477,7 @@ const { title, navless } = Astro.props;
     background: var(--color-light-bg);
     border-radius: 0.5rem;
     h2, h3 {
+      font-size: 1.2rem;
       line-height: 1.3;
     }
     &.highlight-box--circled {

src/pages/index.astro

@@ -6,6 +6,7 @@
 
 import Blob from "../components/Blob.astro";
 import Button from "../components/Button.astro";
+import Endorsements from "../components/Endorsements.astro";
 import Layout from "../layouts/Layout.astro";
 import MiniLeaderboard from "../components/MiniLeaderboard.astro";
 import TextButton from "../components/TextButton.astro";
@@ -57,6 +58,10 @@ import TextButton from "../components/TextButton.astro";
         </div>
       </section>
 
+      <section>
+        <Endorsements></Endorsements>
+      </section>
+
       <section class="flex-center">
         <div>
           <div class="text-center">

src/util.ts

@@ -0,0 +1,13 @@
+// © 2024 Vlad-Stefan Harbuz <[email protected]>
+// SPDX-License-Identifier: Apache-2.0
+
+export function shuffle(arr: any[]) {
+  return arr
+    .map(value => ({ value, key: Math.random() }))
+    .sort((a, b) => a.key - b.key)
+    .map(({ value }) => value);
+}
+
+export function range(n: number) {
+  return [...Array(n).keys()];
+}