feat: announce waterfall eol (#314)

Co-authored-by: SandwichBtw <robinprotonme@proton.me>
Co-authored-by: MiniDigger | Martin <admin@benndorf.dev>
Co-authored-by: Matouš Kučera <mk@kcra.me>

Author: 4 people

docs/velocity/admin/reference/comparison.md

@@ -13,9 +13,8 @@ may be somewhat biased in our favor.
 
 :::danger
 
-**The Paper team strongly recommends using Velocity over Waterfall and BungeeCord**. Waterfall is a legacy solution,
-and only receives critical updates and whatever is released from upstream BungeeCord. All future
-development by PaperMC is done on Velocity.
+**The Paper team strongly recommends using Velocity over Waterfall and BungeeCord**. Waterfall has reached end of life. All future
+development by PaperMC is done on Velocity. For more information, see the [announcement](https://forums.papermc.io/threads/1088/).
 
 :::
 

docs/waterfall/README.mdx

@@ -1,18 +1,15 @@
+---
+eol: true
+eol_message: We recommend you transition to [Velocity](https://papermc.io/software/velocity). For more information, see the [announcement](https://forums.papermc.io/threads/1088/).
+---
+
 import DocCardList from "@theme/DocCardList";
 import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
 
 # Welcome to the Waterfall Docs
 
 Waterfall is the BungeeCord fork that aims to improve performance and stability.
 
-:::danger
-
-**The Paper team strongly recommends using [Velocity](../velocity) over Waterfall**. Waterfall is a legacy solution,
-and only receives critical updates and whatever is released from upstream BungeeCord. All future
-development by PaperMC is done on [Velocity](../velocity).
-
-:::
-
 ---
 
 <DocCardList items={useCurrentSidebarCategory().items} />

docs/waterfall/configuration.mdx

@@ -1,6 +1,8 @@
 ---
 slug: /configuration
 description: Configuration guide for Waterfall.
+eol: true
+eol_message: We recommend you transition to [Velocity](https://papermc.io/software/velocity). For more information, see the [announcement](https://forums.papermc.io/threads/1088/).
 ---
 
 import React from 'react';

docs/waterfall/getting-started.md

@@ -1,6 +1,8 @@
 ---
 slug: /getting-started
 description: How to get started with running Waterfall.
+eol: true
+eol_message: We recommend you transition to [Velocity](https://papermc.io/software/velocity). For more information, see the [announcement](https://forums.papermc.io/threads/1088/).
 ---
 
 # Getting Started

src/components/Projects.tsx

@@ -1,6 +1,7 @@
 import Link from "@docusaurus/Link";
 import React from "react";
-import styles from "../css/projects.module.css";
+import { Icon } from "@iconify/react";
+import "../css/projects.css";
 
 const projects: Project[] = [
   {
@@ -22,31 +23,37 @@ const projects: Project[] = [
     repo: "PaperMC/Velocity",
     link: "/velocity",
   },
-  {
-    title: "Waterfall",
-    description: "BungeeCord proxy fork that aims to improve performance and stability.",
-    repo: "PaperMC/Waterfall",
-    link: "/waterfall",
-  },
   {
     title: "Miscellaneous",
     description: "Documentation that does not apply to any specific project.",
     repo: "PaperMC",
     link: "/misc",
   },
+  {
+    title: "Waterfall",
+    description:
+      "A Discontinued BungeeCord proxy fork that aimed to improve performance and stability.",
+    repo: "PaperMC/Waterfall",
+    link: "/waterfall",
+    eol: true,
+  },
 ];
 
 function Project(project: Project) {
   return (
-    <div className={styles.project}>
-      <div className={styles.flex}>
-        <Link className={styles.projectGitHub} to={`https://github.com/${project.repo}`}>
+    <div className={"project"}>
+      <div className={"flex"}>
+        <Link
+          className={"projectGitHub archivedProjectTitle"}
+          to={`https://github.com/${project.repo}`}
+        >
           {project.title}
+          {project.eol && <Icon style={{ marginLeft: "8px" }} icon={"mdi:archive"} height={25} />}
         </Link>
         <p>{project.description}</p>
       </div>
       <div>
-        <Link className="button button--primary" to={project.link}>
+        <Link className={"button button--primary archivedProjectButton"} to={project.link}>
           Go
         </Link>
       </div>
@@ -56,8 +63,8 @@ function Project(project: Project) {
 
 export default function Projects(): JSX.Element {
   return (
-    <section className={styles.projects}>
-      <div className={styles.projectsContainer}>
+    <section className={"projects"}>
+      <div className={"projectsContainer"}>
         {projects.map((project, index) => (
           <Project key={index} {...project} />
         ))}
@@ -71,4 +78,5 @@ interface Project {
   description: string;
   repo: string;
   link: string;
+  eol?: boolean;
 }

src/css/custom.css

@@ -14,6 +14,9 @@
   --default-config-node-text-color: rgb(148, 148, 148);
   --config-node-highlight-text-color: black;
   --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.03);
+
+  /* EOL Message */
+  --eol-message-background-color: rgb(255, 112, 119);
 }
 
 html[data-theme="dark"] {
@@ -30,7 +33,28 @@ html[data-theme="dark"] {
   /* Config Node */
   --default-config-node-text-color: rgb(128, 128, 128);
   --config-node-highlight-text-color: white;
-  --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.1);
+  --config-explorer-file-node-text-color: rgba(0, 0, 0, 0.03);
+
+  /* EOL Message */
+  --eol-message-background-color: rgb(92, 15, 18);
+}
+
+.eol-message {
+  width: 100%;
+  min-height: 5rem;
+  margin: 10px 0 20px 0;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: var(--eol-message-background-color);
+  text-align: center;
+  flex-direction: column;
+}
+
+.eol-message p {
+  margin: 0;
 }
 
 .button.button--secondary {

src/css/projects.module.css renamed to src/css/projects.css

@@ -22,6 +22,16 @@
   font-size: 1rem;
   margin-bottom: 0.25rem;
   font-weight: bold;
+  display: flex;
+}
+
+.archivedProjectTitle:hover {
+  color: rgb(239, 68, 68);
+}
+
+.archivedProjectButton:hover {
+  background-color: rgb(239, 68, 68);
+  border: 1px solid rgb(239, 68, 68);
 }
 
 .projects {

src/theme/DocItem/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { HtmlClassNameProvider } from "@docusaurus/theme-common";
+import { DocProvider } from "@docusaurus/theme-common/internal";
+import DocItemMetadata from "@theme/DocItem/Metadata";
+import DocItemLayout from "@theme/DocItem/Layout";
+import ReactMarkdown from "react-markdown";
+import style from "@site/src/css/markdown-styles.module.css";
+import type { Props } from "@theme/DocItem";
+
+function EOLMessage(message: string): JSX.Element {
+  return (
+    <div className={"eol-message"}>
+      <p>
+        <strong>This project has reached end of life and is no longer maintained.</strong>
+      </p>
+      <ReactMarkdown className={style.reactMarkDown}>{"**" + message + "**"}</ReactMarkdown>
+    </div>
+  );
+}
+
+export default function DocItem(props: Props): JSX.Element {
+  const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
+  const MDXComponent = props.content;
+  const eolPage = props.content?.frontMatter?.eol === true;
+  const eolMessage = props.content?.frontMatter?.eol_message || "";
+
+  return (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <>
+            {eolPage && EOLMessage(eolMessage)}
+            <MDXComponent />
+          </>
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  );
+}