Links page

app/components/layout/nav-items.json

@@ -124,5 +124,14 @@
       "invert(99%) sepia(3%) saturate(615%) hue-rotate(199deg) brightness(115%) contrast(88%)",
       "invert(23%) sepia(90%) saturate(2049%) hue-rotate(329deg) brightness(95%) contrast(107%)"
     ]
+  },
+  {
+    "name": "links",
+    "url": "links",
+    "prefetch": true,
+    "filters": [
+      "invert(76%) sepia(19%) saturate(6678%) hue-rotate(55deg) brightness(106%) contrast(122%)",
+      "invert(99%) sepia(57%) saturate(1676%) hue-rotate(333deg) brightness(86%) contrast(79%)"
+    ]
   }
 ]

app/features/links/links.json

@@ -0,0 +1,67 @@
+[
+  {
+    "title": "Salmon Run.ink",
+    "url": "https://www.salmonrun.ink",
+    "description": "website that aims to educate players to optimise their Salmon Run gameplay for best results"
+  },
+  {
+    "title": "Inkipedia",
+    "url": "https://splatoonwiki.org",
+    "description": "Splatoon wiki. Useful for looking up random information about the game"
+  },
+  {
+    "title": "Lean's Home",
+    "url": "https://leanny.github.io",
+    "description": "Lean's datamines provide the most comprehensive collection of collectables and parameters. Also includes the gear seed checker"
+  },
+  {
+    "title": "Splatoon Stronghold",
+    "url": "https://www.splatoonstronghold.com",
+    "description": "provides competitive Splatoon resouces to longtimers and newcomers a like"
+  },
+  {
+    "title": "stat.ink",
+    "url": "https://stat.ink",
+    "description": "upload matches you play to stat.ink to track your stats"
+  },
+  {
+    "title": "Community Callouts List",
+    "url": "https://drive.google.com/drive/folders/1qJ2j1VtQnHWvJEqf0Qv0L0WiLHADV0Bv",
+    "description": "if you want to learn precise callouts this list contains some for all maps"
+  },
+  {
+    "title": "Splashtag Creator",
+    "url": "https://seymourschlong.github.io/splashtags/",
+    "description": "create your own splashtags featuring in-game as well as custom assets"
+  },
+  {
+    "title": "Yaga's Weapon Kit Generator",
+    "url": "https://yagaa.itch.io/yagas-weapon-kit-generator",
+    "description": "create your own dream weapon kit images"
+  },
+  {
+    "title": "Splatoon3.ink",
+    "url": "https://splatoon3.ink/",
+    "description": "view rotations and Splatnet gear rotation without needing the phone app"
+  },
+  {
+    "title": "Tableturf Battle Server",
+    "url": "https://discord.gg/fRT8ydhhxT",
+    "description": "a server dedicated to Tableturf Battle with a lot of helpful resources and events! Also a good place to find opponents to play"
+  },
+  {
+    "title": "Inkopolis Crosswalk",
+    "url": "https://discord.gg/45DsKetYNM",
+    "description": "a server dedicated to making it easier for players to find the resources they need in order to improve, find teams, find events, and meet new people"
+  },
+  {
+    "title": "splat_zone jp",
+    "url": "https://www.youtube.com/channel/UCLN8s9Ogn71QcCYIPtb9mtw",
+    "description": "subscribe to watch Area Cup which is considered one of the highest level tournaments in Japan and the world"
+  },
+  {
+    "title": "Fluid Priorities and Roles",
+    "url": "https://docs.google.com/document/d/1t97IZrN0pI_ceUtJrB-8clapCp1P3oddyFzSQ2lGICg",
+    "description": "outlines how FLC thinks about the game regarding team compositions and player roles"
+  }
+]

app/features/links/routes/links.tsx

@@ -0,0 +1,56 @@
+import { Main } from "~/components/Main";
+import { useSetTitle } from "~/hooks/useSetTitle";
+import { useTranslation } from "~/hooks/useTranslation";
+import type { SendouRouteHandle } from "~/utils/remix";
+import { LINKS_PAGE, navIconUrl } from "~/utils/urls";
+import links from "../links.json";
+import { DiscordIcon } from "~/components/icons/Discord";
+import { YouTubeIcon } from "~/components/icons/YouTube";
+
+export const handle: SendouRouteHandle = {
+  breadcrumb: () => ({
+    imgPath: navIconUrl("links"),
+    href: LINKS_PAGE,
+    type: "IMAGE",
+  }),
+};
+
+export default function LinksPage() {
+  const { t } = useTranslation(["common"]);
+  useSetTitle(t("common:pages.links"));
+
+  return (
+    <Main>
+      <div className="stack md">
+        {links
+          .sort((a, b) => a.title.localeCompare(b.title))
+          .map((link) => {
+            const isDiscord = link.url.includes("discord");
+            const isYoutube = link.url.includes("youtube");
+
+            return (
+              <div key={link.url}>
+                <h2 className="text-sm">
+                  <a
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="stack sm horizontal items-center"
+                  >
+                    {link.title}
+                    {isDiscord ? (
+                      <DiscordIcon className="discord-icon" />
+                    ) : null}
+                    {isYoutube ? (
+                      <YouTubeIcon className="youtube-icon" />
+                    ) : null}
+                  </a>
+                </h2>
+                <div className="text-sm text-lighter">{link.description}</div>
+              </div>
+            );
+          })}
+      </div>
+    </Main>
+  );
+}

app/styles/common.css

@@ -1119,6 +1119,18 @@ dialog::backdrop {
   margin-left: 0.25em;
 }
 
+.discord-icon {
+  width: 1rem;
+  display: inline;
+  fill: #7289da;
+}
+
+.youtube-icon {
+  width: 1rem;
+  display: inline;
+  fill: #f00;
+}
+
 #nprogress .bar {
   margin-top: 3rem !important;
   background: var(--theme) !important;

app/utils/urls.ts

@@ -84,6 +84,7 @@ export const ANALYZER_URL = "/analyzer";
 export const OBJECT_DAMAGE_CALCULATOR_URL = "/object-damage-calculator";
 export const VODS_PAGE = "/vods";
 export const LEADERBOARDS_PAGE = "/leaderboards";
+export const LINKS_PAGE = "/links";
 
 export const BLANK_IMAGE_URL = "/static-assets/img/blank.gif";
 export const COMMON_PREVIEW_IMAGE =

public/locales/en/common.json

@@ -19,6 +19,7 @@
   "pages.vods": "Videos",
   "pages.xsearch": "Top Search",
   "pages.leaderboards": "Leaderboards",
+  "pages.links": "Links",
 
   "header.profile": "Profile",
   "header.logout": "Log out",

remix.config.js

@@ -95,6 +95,8 @@ module.exports = {
       );
 
       route("/leaderboards", "features/leaderboards/routes/leaderboards.tsx");
+
+      route("/links", "features/links/routes/links.tsx");
     });
   },
   serverModuleFormat: "cjs",