MDX Improvements (#200)

* feat: contributors component for mdx

* feat: initial mdx download button component

* Add backup banner component, misc refinements

* fix border inconsistency

* Adjust DownloadButton news component, use it

* Make news page layout closer match news index, add back link

* Allow breaking words when wrapping news content if absolutely needed (very long words/phrases

---------

Co-authored-by: Jason Penilla <11360596+jpenilla@users.noreply.github.com>

Author: darbyjack

src/assets/icons/fontawesome/patreon-brands.svg

@@ -6,9 +6,10 @@ export interface Props {
   label: string;
   href?: string;
   external?: boolean;
+  className?: string;
 }
 
-const { icon, label, href } = Astro.props;
+const { icon, label, href, className } = Astro.props;
 ---
 
 {
@@ -17,13 +18,13 @@ const { icon, label, href } = Astro.props;
       href={href}
       rel="noreferrer"
       target="_blank"
-      class="inline-block h-min w-min rounded-full p-2 leading-0 transition-colors hover:bg-gray-800/20 dark:hover:bg-gray-400/20"
+      class={`inline-block h-min w-min rounded-full p-2 leading-0 transition-colors hover:bg-gray-800/20 dark:hover:bg-gray-400/20 ${className}`}
       aria-label={label}
     >
       <Icon name={icon} class="size-6 text-gray-700 dark:text-gray-300" />
     </a>
   ) : (
-    <button class="h-min w-min rounded-full p-2 transition-colors hover:bg-gray-800/20" aria-label={label}>
+    <button class={`h-min w-min rounded-full p-2 transition-colors hover:bg-gray-800/20 ${className}`} aria-label={label}>
       <img src={icon} class="gray-700 h-6 w-6" alt="" />
     </button>
   )

src/assets/icons/fontawesome/paypal-brands.svg

@@ -5,15 +5,16 @@ interface Props {
   avatarUrl: string;
   name: string;
   link?: string;
+  class?: string;
 }
-const { avatarUrl, name, link } = Astro.props;
+const { avatarUrl, name, link, class: extra } = Astro.props;
 const Tag = link ? "a" : "div";
 const initial = (name?.trim?.()[0] ?? "?").toUpperCase();
 ---
 
 <Tag
   role={link ? "button" : undefined}
-  class="user-image relative flex aspect-square items-center justify-center overflow-hidden rounded-full bg-gray-600 font-bold text-white uppercase transition-transform hover:scale-105 hover:shadow-lg"
+  class={`user-image relative flex aspect-square items-center justify-center overflow-hidden rounded-full bg-gray-600 font-bold text-white uppercase transition-transform hover:scale-103 active:translate-y-[0.5px] shadow-md active:shadow-none ${extra ?? ""}`}
   href={link}
   rel={link && "noreferrer"}
   target={link && "_blank"}

src/assets/icons/lucide/octagon-alert.svg

@@ -0,0 +1,105 @@
+---
+import UserImage from "src/components/data/UserImage.astro";
+import GitHubIcon from "@/assets/icons/fontawesome/github-brands.svg";
+import PatreonIcon from "@/assets/icons/fontawesome/patreon-brands.svg";
+import PayPalIcon from "@/assets/icons/fontawesome/paypal-brands.svg";
+
+type Contributor = {
+  username: string;
+  sponsor?: string;
+};
+
+const { contributors = [] as Contributor[] } = Astro.props as {
+  contributors?: Contributor[];
+};
+
+const ghProfile = (u: string) => `https://github.com/${u}`;
+const ghAvatar = (u: string, size = 48) => `https://avatars.githubusercontent.com/${u}?size=${size}`;
+
+type SponsorKind = "ghs" | "patreon" | "paypal" | "other";
+const sponsorKind = (url: string): SponsorKind => {
+  if (url.includes("github.com/sponsors")) return "ghs";
+  if (url.includes("patreon.com")) return "patreon";
+  if (url.includes("paypal.me")) return "paypal";
+  return "other";
+};
+
+const sponsorMeta = (url: string) => {
+  const kind = sponsorKind(url);
+  const label = kind === "ghs" ? "GitHub Sponsors" : kind === "patreon" ? "Patreon" : kind === "paypal" ? "PayPal" : "Sponsor";
+  return { kind, label } as const;
+};
+---
+
+<ul
+  class="bg-background-light-10 dark:bg-background-dark-90 contributors m-0 grid list-none grid-cols-1 gap-x-6 gap-y-3 rounded-md border p-3.5 sm:grid-cols-2 lg:grid-cols-4"
+>
+  {
+    contributors.map((c) => {
+      const profile = ghProfile(c.username);
+      const avatar = ghAvatar(c.username);
+      const display = `@${c.username}`;
+
+      return (
+        <li class="flex items-center gap-3">
+          <UserImage avatarUrl={avatar} name={c.username} link={profile} class="size-11 sm:size-12" />
+
+          <div class="min-w-0">
+            <a
+              href={profile}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-sm font-medium text-slate-900 hover:underline dark:text-slate-100"
+            >
+              {display}
+            </a>
+
+            {c.sponsor && (
+              <div class="mt-0.5 flex items-center gap-1.5">
+                <span class="text-xs text-slate-500 dark:text-slate-400">Sponsor:</span>
+                {(() => {
+                  const { kind, label } = sponsorMeta(c.sponsor!);
+                  const baseClass = "size-4 fill-slate-500 dark:fill-slate-400";
+                  return (
+                    <a
+                      href={c.sponsor}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={`${label} for ${display}`}
+                      title={label}
+                      class="inline-flex items-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                    >
+                      {kind === "ghs" ? (
+                        <GitHubIcon class={baseClass} />
+                      ) : kind === "patreon" ? (
+                        <PatreonIcon class={baseClass} />
+                      ) : kind === "paypal" ? (
+                        <PayPalIcon class={baseClass} />
+                      ) : (
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                          <path
+                            d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM2 12h20"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </svg>
+                      )}
+                    </a>
+                  );
+                })()}
+              </div>
+            )}
+          </div>
+        </li>
+      );
+    })
+  }
+</ul>
+
+<style>
+  .contributors li {
+    align-items: center;
+  }
+</style>

src/assets/icons/lucide/rss.svg

@@ -0,0 +1,30 @@
+---
+import DocumentDownloadIcon from "@/assets/icons/heroicons/document-download.svg";
+
+interface Props {
+  project: string;
+}
+
+const { project } = Astro.props;
+
+const href = "/downloads/" + project.toLowerCase();
+const label = "Download " + project;
+---
+
+<a
+  href={href}
+  rel="noopener noreferrer"
+  target="_blank"
+  class="btn btn-primary group relative isolate mb-2 inline-flex w-full items-center justify-center gap-3 rounded-lg px-8 py-4 text-lg font-semibold sm:w-auto"
+>
+  <DocumentDownloadIcon />
+
+  <span>{label}</span>
+</a>
+
+<style>
+  a {
+    color: #ffffff;
+    text-decoration: none;
+  }
+</style>

src/components/IconButton.astro

@@ -0,0 +1,18 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  version: string;
+}
+
+const { version } = Astro.props;
+---
+
+<div class="border-danger bg-danger/30 flex gap-3.5 rounded-md border p-3.5">
+  <Icon name="icons/lucide/octagon-alert" class="text-danger size-6 shrink-0" />
+  <div>
+    As always, <span class="font-semibold">backups are absolutely mandatory</span>. <span class="font-semibold"
+      >After upgrading your world to {version}, you cannot downgrade back to a lower version!</span
+    >
+  </div>
+</div>

src/components/data/UserImage.astro

@@ -6,21 +6,27 @@ author: "Paper Team"
 
 ## The 1.21.3 Update
 
-Paper and Velocity 1.21.3 builds are out of the experimental phase! As always, **backups are absolutely mandatory**. **After upgrading your world to 1.21.3, you cannot downgrade back to a lower version!**
+Paper and Velocity 1.21.3 builds are out of the experimental phase!
+
+<MandatoryBackups version="1.21.3" />
 
 We would like to thank everyone that worked on this update:
 
-- [Gerrygames](https://github.com/Gerrygames) for his work on Velocity
-- [@electronicboy](https://github.com/sponsors/electronicboy)
-- [@jmp](https://github.com/sponsors/jpenilla)
-- [kennytv](https://github.com/kennytv)
-- [Lulu13022002](https://github.com/Lulu13022002)
-- [@lynxplay](https://github.com/lynxplay)
-- [@Machine Maker](https://github.com/sponsors/Machine-Maker)
-- [@Noah](https://github.com/sponsors/NoahvdAa)
-- [@Owen1212055](https://github.com/sponsors/Owen1212055)
-- [SpaceWalkerRS](https://github.com/SpaceWalkerRS)
-- [@Spottedleaf](https://www.patreon.com/Spottedleaf)
+<Contributors
+  contributors={[
+    { username: "Gerrygames" },
+    { username: "electronicboy", sponsor: "https://github.com/sponsors/electronicboy" },
+    { username: "jpenilla", sponsor: "https://github.com/sponsors/jpenilla" },
+    { username: "kennytv" },
+    { username: "Lulu13022002" },
+    { username: "lynxplay" },
+    { username: "Machine-Maker", sponsor: "https://github.com/sponsors/Machine-Maker" },
+    { username: "NoahvdAa", sponsor: "https://github.com/sponsors/NoahvdAa" },
+    { username: "Owen1212055", sponsor: "https://github.com/sponsors/Owen1212055" },
+    { username: "SpaceWalkerRS" },
+    { username: "Spottedleaf", sponsor: "https://www.patreon.com/Spottedleaf" },
+  ]}
+/>
 
 If you'd like to support PaperMC as a whole, you can find more information at https://papermc.io/sponsors.
 
@@ -93,3 +99,5 @@ itemStack.setData(DataComponentTypes.FOOD, food);
 - `EntityDamageEvent` now has the `INVULNERABILITY_REDUCTION` cause
 - Our auto-generated Vanilla key classes (e.g. `SoundEventKeys`) now implement `Key`, so they can be used in API like the data componenents API directly
 - You can now create custom painting art via API and the new `RegistryEvents.PAINTING_VARIANT`. More are coming over time as well - see https://docs.papermc.io/paper/dev/registries for more info on how to use them
+
+<DownloadButton project="Paper" />