feat: announce waterfall eol (#96)

Author: MiniDigger

assets/icons/fontawesome/box-archive.svg

@@ -12,12 +12,14 @@ export interface SoftwareBuildsProps {
   project: string;
   version: string;
   builds?: Build[];
+  eol?: boolean;
 }
 
 const SoftwareBuilds = ({
   project,
   version,
   builds,
+  eol,
 }: SoftwareBuildsProps): ReactElement => (
   <div className="flex flex-col gap-1">
     {builds &&
@@ -42,7 +44,9 @@ const SoftwareBuilds = ({
               target="_blank"
               className={clsx(
                 "text-gray-100 text-sm text-center font-medium rounded-full p-2 min-w-16 mr-4 inline-flex items-center gap-1",
-                build.channel === "default" ? "bg-gray-800" : "bg-red-500",
+                build.channel === "default" && !eol
+                  ? "bg-gray-800"
+                  : "bg-red-500",
               )}
             >
               <DownloadIcon className="w-4 h-4" />#{build.build}

src/components/data/SoftwareBuilds.tsx

@@ -11,12 +11,14 @@ export interface SoftwareBuildsTableProps {
   project: string;
   version: string;
   builds: Build[];
+  eol?: boolean;
 }
 
 const SoftwareBuildsTable = ({
   project,
   version,
   builds,
+  eol,
 }: SoftwareBuildsTableProps) => {
   return (
     <table className="w-full relative">
@@ -38,7 +40,7 @@ const SoftwareBuildsTable = ({
                 <span
                   className={clsx(
                     "text-sm font-medium text-gray-100 rounded-full py-2 px-3 min-w-16",
-                    build.channel === "experimental"
+                    build.channel === "experimental" || eol
                       ? "bg-red-500"
                       : "bg-gray-800",
                   )}
@@ -59,6 +61,7 @@ const SoftwareBuildsTable = ({
                   build={build}
                   stable={build.channel === "default"}
                   compact
+                  eol={eol}
                 />
               </td>
             </tr>

src/components/data/SoftwareBuildsTable.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import type { FunctionComponent } from "react";
 
+import ArchiveIcon from "@/assets/icons/fontawesome/box-archive.svg";
+
 export interface SoftwarePreviewProps {
   id: string;
   name: string;
@@ -9,6 +11,7 @@ export interface SoftwarePreviewProps {
   description?: string;
   download?: boolean;
   javadocs?: string;
+  eol?: boolean;
 }
 
 const SoftwarePreview = ({
@@ -18,6 +21,7 @@ const SoftwarePreview = ({
   description,
   download,
   javadocs,
+  eol,
 }: SoftwarePreviewProps) => (
   <Link
     href={
@@ -33,7 +37,9 @@ const SoftwarePreview = ({
         <div className="rounded-lg w-12 h-12 bg-gray-800 p-3">
           <Icon />
         </div>
-        <h3 className="font-medium flex-1">{name}</h3>
+        <h3 className="font-medium flex-1 flex gap-4 items-center">
+          {name} {eol && <ArchiveIcon className="fill-current h-6" />}
+        </h3>
       </div>
 
       {description && (

src/components/data/SoftwarePreview.tsx

@@ -18,6 +18,7 @@ export interface SoftwareDownloadButtonProps {
   version: string;
   stable: boolean;
   compact?: boolean;
+  eol?: boolean;
 }
 
 const SoftwareDownloadButton = ({
@@ -27,6 +28,7 @@ const SoftwareDownloadButton = ({
   version,
   stable,
   compact,
+  eol,
 }: SoftwareDownloadButtonProps) => {
   const [copied, setCopied] = useState("");
   const [timeoutHandler, setTimeoutHandler] = useState<NodeJS.Timeout | null>(
@@ -47,7 +49,7 @@ const SoftwareDownloadButton = ({
         className={clsx(
           "rounded-lg flex flex-row ransition-shadow text-white transition-color hover:shadow-lg",
           !compact && "w-full md:w-100",
-          stable
+          stable && !eol
             ? "bg-blue-600 hover:bg-blue-500"
             : "bg-red-500 hover:bg-red-400",
         )}

src/components/input/SoftwareDownloadButton.tsx

@@ -1,10 +1,12 @@
 import clsx from "clsx";
 
+import ArchiveIcon from "@/assets/icons/fontawesome/box-archive.svg";
 import { useProject } from "@/lib/service/v2";
 
 interface ProjectSubTreeProps {
   id: string;
   name: string;
+  eol?: boolean;
 }
 
 const ProjectSubTree = ({
@@ -13,13 +15,15 @@ const ProjectSubTree = ({
   selectedProject,
   selectedVersion,
   onSelect,
+  eol,
 }: ProjectSubTreeProps & DownloadsTreeProps) => {
   const { data: project } = useProject(id);
 
   return (
     <>
-      <div className="pl-3 py-1 rounded-md font-bold">
-        {project?.project_name ?? name}
+      <div className="pl-3 py-1 rounded-md font-bold flex gap-2 items-center">
+        {project?.project_name ?? name}{" "}
+        {eol && <ArchiveIcon className="fill-current h-4" />}
       </div>
       {project?.versions
         ?.slice()
@@ -28,10 +32,15 @@ const ProjectSubTree = ({
           <button
             key={version}
             className={clsx(
-              "pl-6 py-1 rounded-md hover:bg-blue-100 hover:dark:bg-gray-900 transition-colors text-gray-800 dark:text-gray-200 block w-full text-left",
+              "pl-6 py-1 rounded-md transition-colors text-gray-800 dark:text-gray-200 block w-full text-left",
+              eol
+                ? "hover:bg-red-100 hover:dark:bg-red-900"
+                : "hover:bg-blue-100 hover:dark:bg-gray-900",
               selectedProject === id &&
                 selectedVersion === version &&
-                "bg-blue-100 dark:bg-blue-900",
+                (eol
+                  ? "bg-red-100 dark:bg-red-900"
+                  : "bg-blue-100 dark:bg-blue-900"),
             )}
             onClick={() => onSelect(id, version)}
           >
@@ -54,7 +63,7 @@ const DownloadsTree = (props: DownloadsTreeProps) => {
     <nav className="w-50 p-2 border-r border-gray-300 overflow-auto">
       <ProjectSubTree id="paper" name="Paper" {...props} />
       <ProjectSubTree id="velocity" name="Velocity" {...props} />
-      <ProjectSubTree id="waterfall" name="Waterfall" {...props} />
+      <ProjectSubTree id="waterfall" name="Waterfall" eol {...props} />
     </nav>
   );
 };

src/components/layout/DownloadsTree.tsx

@@ -83,7 +83,7 @@ const NavBar = ({ component }: NavBarProps) => {
             <NavDropDownLink href="/software/velocity">
               Velocity
             </NavDropDownLink>
-            <NavDropDownLink href="/software/waterfall">
+            <NavDropDownLink href="/software/waterfall" eol>
               Waterfall
             </NavDropDownLink>
           </NavDropDown>

src/components/layout/NavBar.tsx

@@ -2,32 +2,40 @@ import clsx from "clsx";
 import Link from "next/link";
 import type { ReactElement, ReactNode } from "react";
 
+import ArchiveIcon from "@/assets/icons/fontawesome/box-archive.svg";
+
 export interface NavDropDownLinkProps {
   href: string;
   target?: string;
   className?: string;
   children: ReactNode;
+  eol?: boolean;
 }
 
 const NavDropDownLink = ({
   href,
   target,
   className,
   children,
+  eol,
 }: NavDropDownLinkProps): ReactElement => (
   <li
     className={clsx(
       "color-gray-200 text-gray-800 hover:text-blue-600 text-sm transition-colors dark:(text-gray-200 hover:text-blue-400)",
+      eol && "hover:(text-red-600 dark:text-red-400)",
       className,
     )}
   >
     <Link
       href={href}
-      className="px-4 py-2 w-full block"
+      className={clsx(
+        "px-4 py-2 w-full",
+        eol ? "flex items-center gap-2" : "block",
+      )}
       role="button"
       target={target}
     >
-      {children}
+      {children} {eol && <ArchiveIcon className="fill-current h-4" />}
     </Link>
   </li>
 );

src/components/layout/NavDropDownLink.tsx

@@ -12,8 +12,9 @@ export interface SoftwareDownloadProps {
   id: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   icon?: FunctionComponent<any>;
-  description: string;
+  description: ReactElement | string;
   experimentalWarning?: string;
+  eol?: boolean;
 }
 
 const SoftwareDownload = ({
@@ -22,6 +23,7 @@ const SoftwareDownload = ({
   icon: Icon,
   description,
   experimentalWarning,
+  eol,
 }: SoftwareDownloadProps & ProjectProps): ReactElement => {
   const [isStable, setStable] = useState(true);
   const version = isStable
@@ -36,7 +38,13 @@ const SoftwareDownload = ({
 
   return (
     <>
-      <header className="max-w-7xl flex flex-row mx-auto px-4 pt-32 pb-16 lg:(pt-48 pb-26) gap-16">
+      <header className="max-w-7xl flex flex-row flex-wrap mx-auto px-4 pt-32 pb-16 lg:(pt-48 pb-26) gap-16">
+        {eol && (
+          <div className="text-center px-4 py-8 -mt-16 font-bold bg-red-400 dark:bg-red-500 shadow-md rounded-lg w-full">
+            {project.name} has reached end of life! It is no longer maintained
+            or supported.
+          </div>
+        )}
         <div className="flex-1">
           <div className="flex flex-row mb-6 gap-4 items-center">
             <div className="w-12 h-12 rounded-lg bg-gray-800 p-3">
@@ -46,7 +54,9 @@ const SoftwareDownload = ({
           </div>
           <h2 className="font-medium leading-normal lg:(text-5xl leading-normal) text-4xl">
             Get {project.name}&nbsp;
-            <span className={isStable ? "text-blue-600" : "text-red-500"}>
+            <span
+              className={isStable && !eol ? "text-blue-600" : "text-red-500"}
+            >
               {version}
             </span>
           </h2>
@@ -60,6 +70,7 @@ const SoftwareDownload = ({
               build={latestBuild}
               version={version}
               stable={!latestBuild || latestBuild?.channel === "default"}
+              eol={eol}
             />
             {project.latestExperimentalVersion && (
               <button
@@ -103,6 +114,7 @@ const SoftwareDownload = ({
           project={id}
           version={version}
           builds={builds?.builds}
+          eol={eol}
         />
       </section>
     </>

src/components/layout/SoftwareDownload.tsx

@@ -1,5 +1,6 @@
 import type { FunctionComponent, ReactElement } from "react";
 
+import ArchiveIcon from "@/assets/icons/fontawesome/box-archive.svg";
 import Button from "@/components/input/Button";
 
 export interface SoftwareHeaderProps {
@@ -9,8 +10,9 @@ export interface SoftwareHeaderProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   icon?: FunctionComponent<any>;
   header: ReactElement;
-  description: string;
+  description: ReactElement | string;
   github?: string;
+  eol?: boolean;
 }
 
 const SoftwareHeader = ({
@@ -21,14 +23,22 @@ const SoftwareHeader = ({
   header,
   description,
   github,
+  eol,
 }: SoftwareHeaderProps): ReactElement => (
-  <header className="max-w-7xl flex flex-row mx-auto px-4 pt-32 pb-26 lg:(pt-48 pb-46) gap-16">
+  <header className="max-w-7xl flex flex-row flex-wrap mx-auto px-4 pt-32 pb-26 lg:(pt-48 pb-46) gap-16">
+    {eol && (
+      <div className="text-center px-4 py-8 -mt-16 font-bold bg-red-400 dark:bg-red-500 shadow-md rounded-lg w-full">
+        {name} has reached end of life! It is no longer maintained or supported.
+      </div>
+    )}
     <div className="flex-1">
       <div className="flex flex-row mb-6 gap-4 items-center">
         <div className="w-12 h-12 rounded-lg bg-gray-800 p-3">
           {Icon && <Icon />}
         </div>
-        <h1 className="font-medium text-xl">{name}</h1>
+        <h1 className="font-medium text-xl flex gap-4 items-center">
+          {name} {eol && <ArchiveIcon className="fill-current h-6" />}
+        </h1>
       </div>
       <h2 className="font-medium leading-normal lg:(text-5xl leading-normal) text-4xl">
         {header}
@@ -39,6 +49,7 @@ const SoftwareHeader = ({
           variant="filled"
           href={github ?? `/downloads/${id}`}
           external={Boolean(github)}
+          className={eol ? "!bg-red-500 !hover:bg-red-400" : ""}
         >
           {github ? "GitHub" : "Downloads"}
         </Button>

src/components/layout/SoftwareHeader.tsx

@@ -33,6 +33,8 @@ const LegacyDownloads: NextPage<LegacyDownloadProps> = ({
   const [selectedVersion, setSelectedVersion] = useState(initialProjectVersion);
   const { data: builds } = useVersionBuilds(selectedProject, selectedVersion);
 
+  const eol = selectedProject === "waterfall";
+
   return (
     <>
       <SEO
@@ -55,10 +57,16 @@ const LegacyDownloads: NextPage<LegacyDownloadProps> = ({
             }}
           />
           <div className="flex-1 overflow-auto">
+            {eol && (
+              <div className="text-center px-4 py-2 font-bold bg-yellow-400 dark:bg-yellow-500 shadow-md">
+                EOL builds are not supported. Proceed at your own risk!
+              </div>
+            )}
             <SoftwareBuildsTable
               project={selectedProject}
               version={selectedVersion}
               builds={builds?.builds ?? []}
+              eol={eol}
             />
           </div>
         </div>

src/pages/downloads/all.tsx

@@ -65,6 +65,7 @@ const Downloads: NextPage = () => {
             icon={WaterfallIcon}
             description="Waterfall is a legacy drop-in BungeeCord replacement with some additional improvements to performance and stability."
             download
+            eol
           />
         </div>
       </header>

src/pages/downloads/index.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import type { ReactElement } from "react";
 
 import WaterfallIcon from "@/assets/brand/waterfall.svg";
@@ -26,7 +27,27 @@ const WaterfallDownloads = ({ project }: ProjectProps): ReactElement => {
         id="waterfall"
         project={project}
         icon={WaterfallIcon}
-        description="Download Waterfall, our Bungee-compatible upgrade, offering better performance and full compatibility."
+        description={
+          <>
+            Waterfall has reached end of life. We recommend you transition to{" "}
+            <Link
+              className="text-blue-500 hover:text-blue-400 hover:underline"
+              href="/software/velocity"
+            >
+              Velocity
+            </Link>
+            . For more information see the{" "}
+            <a
+              className="text-blue-500 hover:text-blue-400 hover:underline"
+              href="https://forums.papermc.io/threads/1088/"
+            >
+              announcement
+            </a>
+            . <br />
+            Download unsupported, archived Waterfall builds below.
+          </>
+        }
+        eol
       />
     </>
   );

src/pages/downloads/waterfall.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 
 import PaperIcon from "@/assets/brand/paper.svg";
 import VelocityIcon from "@/assets/brand/velocity.svg";
-import WaterfallIcon from "@/assets/brand/waterfall.svg";
 import HomeImage1 from "@/assets/images/home-1.png";
 import HomeImage2 from "@/assets/images/home-2.png";
 import HomeImage3 from "@/assets/images/home-3.png";
@@ -73,12 +72,6 @@ const Home: NextPage<ProjectProps> = ({ project }) => {
               icon={VelocityIcon}
               description="Velocity is a high-performance, scalable Minecraft proxy server that allows players to connect to multiple Minecraft servers under the proxy."
             />
-            <SoftwarePreview
-              id="waterfall"
-              name="Waterfall"
-              icon={WaterfallIcon}
-              description="Waterfall is a legacy drop-in BungeeCord replacement with some additional improvements to performance and stability."
-            />
           </div>
         </div>
       </section>

src/pages/index.tsx

@@ -1,14 +1,10 @@
 import Image from "next/image";
+import Link from "next/link";
 import type { ReactElement } from "react";
 
 import WaterfallIcon from "@/assets/brand/waterfall.svg";
-import BoltIcon from "@/assets/icons/heroicons/bolt.svg";
-import ChatBubbleLeftRightIcon from "@/assets/icons/heroicons/chat-bubble-left-right.svg";
-import CodeBracketIcon from "@/assets/icons/heroicons/code-bracket.svg";
 import CommunityImage from "@/assets/images/community.png";
-import HomeImage1 from "@/assets/images/home-1.png";
 import VelocityImage from "@/assets/images/velocity.png";
-import FeatureCard from "@/components/data/FeatureCard";
 import Button from "@/components/input/Button";
 import SoftwareHeader from "@/components/layout/SoftwareHeader";
 import SEO from "@/components/util/SEO";
@@ -35,36 +31,28 @@ const WaterfallHome = ({ project }: HangarProjectProps): ReactElement => {
         name="Waterfall"
         versionGroup={project.latestVersionGroup}
         icon={WaterfallIcon}
-        header={<>The Bungee-compatible upgrade</>}
-        description="Waterfall is an upgraded BungeeCord, offering full compatibility with improvements to performance and stability."
+        header={<>Waterfall has reached end of life</>}
+        description={
+          <>
+            We recommend you transition to{" "}
+            <Link
+              className="text-blue-500 hover:text-blue-400 hover:underline"
+              href="/software/velocity"
+            >
+              Velocity
+            </Link>
+            . For more information see the{" "}
+            <a
+              className="text-blue-500 hover:text-blue-400 hover:underline"
+              href="https://forums.papermc.io/threads/1088/"
+            >
+              announcement
+            </a>
+            . <br /> Archived Waterfall builds and docs are available here.
+          </>
+        }
+        eol
       />
-      <section
-        id="why"
-        className="w-full pt-10 pb-5 bg-primary-200 dark:bg-background-dark-80"
-      >
-        <div className="max-w-7xl mx-auto">
-          <h2 className="font-semibold text-xl md:text-2xl px-6 lg:px-4">
-            Why Waterfall?
-          </h2>
-          <div className="grid md:grid-cols-3 mt-6 gap-2 px-2 xl:gap-4">
-            <FeatureCard
-              icon={BoltIcon}
-              label="Fast, smooth, and easy"
-              description="Waterfall is a simple BungeeCord fork with additional improvements to stability and performance."
-            />
-            <FeatureCard
-              icon={ChatBubbleLeftRightIcon}
-              label="An active and growing community"
-              description="If you encounter any problems, you can come talk with us on Discord and get real time support."
-            />
-            <FeatureCard
-              icon={CodeBracketIcon}
-              label="Compatible with Bungee"
-              description="Everything that works with BungeeCord works with Waterfall. The switch is seamless and easy: Simply swap out the relevant downloads and you’re good to go."
-            />
-          </div>
-        </div>
-      </section>
       <section
         id="facts"
         className="flex flex-col max-w-7xl mx-auto px-4 py-8 gap-8 md:(gap-12 py-16)"
@@ -82,13 +70,13 @@ const WaterfallHome = ({ project }: HangarProjectProps): ReactElement => {
           </div>
           <div className="flex-1">
             <h2 className="font-semibold text-2xl md:text-4xl">
-              Don&apos;t need BungeeCord compatibility?
+              Need an updated proxy? Use Velocity!
             </h2>
             <p className="md:(mt-6 text-xl) text-gray-900 dark:text-gray-100 mt-3">
-              If you don’t desperately need BungeeCord plugins on your proxy,
-              Velocity is the best proxy software available. Designed with
-              performance and scalability in mind, Velocity is a lot faster and
-              much more stable than BungeeCord.
+              All the experience the PaperMC team has gained from working on
+              Waterfall has applied to Velocity. Designed with performance and
+              scalability in mind, Velocity is the best proxy software
+              available.
             </p>
             <div className="flex flex-row gap-4 mt-8">
               <Button variant="filled" href="/software/velocity" dense>
@@ -97,41 +85,6 @@ const WaterfallHome = ({ project }: HangarProjectProps): ReactElement => {
             </div>
           </div>
         </div>
-        <div className="flex flex-col gap-6 md:(flex-row-reverse gap-8) xl:gap-24 items-center">
-          <div className="w-full flex-1 rounded-xl bg-gray-900 aspect-video relative overflow-clip">
-            <Image
-              alt=""
-              src={HomeImage1}
-              placeholder="blur"
-              fill
-              sizes="(min-width: 80rem) 40rem, (min-width: 768px) 40vw, 100vw"
-              className="object-cover"
-            />
-          </div>
-          <div className="flex-1">
-            <h2 className="font-semibold text-2xl md:text-4xl">
-              Getting Started
-            </h2>
-            <p className="md:(mt-6 text-xl) text-gray-900 dark:text-gray-100 mt-3">
-              To get started with Waterfall, you will need to download and
-              install the latest version of the proxy software. Once you&apos;re
-              ready, take a look at our documentation.
-            </p>
-            <div className="flex flex-row gap-4 mt-8">
-              <Button variant="filled" href="/downloads/waterfall" dense>
-                Downloads
-              </Button>
-              <Button
-                variant="outlined"
-                href="https://docs.papermc.io/waterfall/getting-started"
-                external
-                dense
-              >
-                Documentation
-              </Button>
-            </div>
-          </div>
-        </div>
         <div className="flex flex-col gap-6 md:(flex-row-reverse gap-8) xl:gap-24 items-center">
           <div className="flex-1">
             <h2 className="font-semibold text-2xl md:text-4xl">