All articles page (#1072)

* Added new Article route that renders all Articles (with a reasonable upper limit for now). - Also added a GoToPageBanner for the main Articles page (/a) on the front page. This is placed above the ArticlesPeek component - Used the sendou_love navItem icon for the moment (this can be replaced at any time once a new art asset is added) * Fixed Prettier CI pipeline error * Ran `npm run check-translation-jsons` to update missing Translations for new key added * Update public/locales/en/front.json Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com> * French localizations * Removed unnecessary comment * Converted h2 to h1 tags for Main Articles page Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com> * Moved GoToPageBanner element for main articles page to below ArticlesPeek element * Refactored some files so that the articles prop is passed into ArticlesPeek - Also added the Articles header title in common.json * Updated translation-progress.md * Cleaned up data type for articles prop in ArticlesPeek * Fixed React hydration error for translations on imported articles - Added in SendouRouteHandle component on new Articles main page * GoToPageBanner now optionally accepts a `navItem` parameter. It does not render the image if navItem is not passed into it * Removed <Outlet /> JSX element on the main Articles page * Removed sendou_love navItem on GoToPageBanner for articles page * Fixed spacing issue by grouping ArticlesPeek and its corresponding GoToPageBanner element into a `stack` div * Fixed pipeline error * Update translation again Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>
2026-08-24 12:06:54 -05:00 · 2022-11-01 02:57:44 -04:00
parent 1888168115
commit 0d8b88ea5a
8 changed files with 264 additions and 31 deletions
--- a/app/routes/a.tsx
+++ b/app/routes/a.tsx
@@ -0,0 +1,38 @@
+import { useLoaderData } from "@remix-run/react";
+import { Main } from "~/components/Main";
+import type { LinksFunction } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { mostRecentArticles } from "~/modules/articles";
+import styles from "~/styles/front.css";
+import { ArticlesPeek } from ".";
+import { useTranslation } from "react-i18next";
+import type { SendouRouteHandle } from "~/utils/remix";
+
+const MAX_ARTICLES_COUNT = 100;
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export const handle: SendouRouteHandle = {
+  i18n: ["front"],
+};
+
+export const loader = async () => {
+  return json({
+    recentArticles: await mostRecentArticles(MAX_ARTICLES_COUNT),
+  });
+};
+
+export default function ArticlesMainPage() {
+  const { t } = useTranslation("common");
+  const data = useLoaderData<typeof loader>();
+  const articles = data.recentArticles;
+
+  return (
+    <Main className="stack lg">
+      <h1>{t("pages.articles")}</h1>
+      <ArticlesPeek articles={articles} />
+    </Main>
+  );
+}
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -16,6 +16,7 @@ import { discordFullName } from "~/utils/strings";
 import {
  analyzerPage,
  articlePage,
+  ARTICLES_MAIN_PAGE,
  BADGES_PAGE,
  BUILDS_PAGE,
  calendarEventPage,
@@ -50,6 +51,8 @@ export const loader = async () => {

 export default function Index() {
  const { t } = useTranslation(["common", "front"]);
+  const data = useLoaderData<typeof loader>();
+  const articles = data.recentArticles;

  return (
    <Main className="stack lg">
@@ -66,7 +69,12 @@ export default function Index() {
          {t("front:calendarGoTo")}
        </GoToPageBanner>
      </div>
-      <ArticlesPeek />
+      <div className="stack md">
+        <ArticlesPeek articles={articles} />
+        <GoToPageBanner to={ARTICLES_MAIN_PAGE}>
+          {t("front:articlesGoTo")}
+        </GoToPageBanner>
+      </div>
      <div className="stack md">
        <h2 className="front__more-features">{t("front:moreFeatures")}</h2>
        <div className="front__feature-cards">
@@ -124,17 +132,19 @@ function GoToPageBanner({
 }: {
  children: React.ReactNode;
  to: string;
-  navItem: string;
+  navItem?: string;
 }) {
  return (
    <Link to={to} className="front__go-to-page-banner">
      <div className="front__go-to-page-banner__nav-img-container">
-        <Image
-          path={navIconUrl(navItem)}
-          alt={navItem}
-          width={32}
-          height={32}
-        />
+        {navItem && (
+          <Image
+            path={navIconUrl(navItem)}
+            alt={navItem}
+            width={32}
+            height={32}
+          />
+        )}
      </div>
      {children}
      <ArrowRightIcon className="front__go-to-page-banner__arrow-right" />
@@ -251,13 +261,21 @@ function Event({
  );
 }

-function ArticlesPeek() {
+export function ArticlesPeek({
+  articles,
+}: {
+  articles: {
+    title: string;
+    author: string;
+    slug: string;
+    dateString: string;
+  }[];
+}) {
  const { t } = useTranslation("front");
-  const data = useLoaderData<typeof loader>();

  return (
    <ul className="front__articles">
-      {data.recentArticles.map((article) => (
+      {articles.map((article) => (
        <li key={article.title}>
          <Link to={articlePage(article.slug)}>{article.title}</Link>
          <div className="text-xs text-lighter">
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -36,6 +36,7 @@ export const ipLabsMaps = (pool: string) =>
 export const LOG_IN_URL = "/auth";
 export const LOG_OUT_URL = "/auth/logout";
 export const ADMIN_PAGE = "/admin";
+export const ARTICLES_MAIN_PAGE = "/a";
 export const FAQ_PAGE = "/faq";
 export const CONTRIBUTIONS_PAGE = "/contributions";
 export const BADGES_PAGE = "/badges";
@@ -85,7 +86,7 @@ export const mapsPage = (eventId?: MapPoolMap["calendarEventId"]) =>
  `/maps${eventId ? `?eventId=${eventId}` : ""}`;
 export const readonlyMapsPage = (eventId: CalendarEvent["id"]) =>
  `/maps?readonly&eventId=${eventId}`;
-export const articlePage = (slug: string) => `/a/${slug}`;
+export const articlePage = (slug: string) => `${ARTICLES_MAIN_PAGE}/${slug}`;
 export const analyzerPage = (args?: {
  weaponId: MainWeaponId;
  abilities: Ability[];
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,5 +1,6 @@
 {
  "pages.admin": "Admin",
+  "pages.articles": "Articles",
  "pages.badges": "Badges",
  "pages.plus": "Plus Server",
  "pages.contributors": "Contributors",
--- a/public/locales/en/front.json
+++ b/public/locales/en/front.json
@@ -10,5 +10,6 @@
  "object-damage-calculator.description": "Calculate damage dealt to different objects",
  "recentWinners": "Recent winners",
  "upcomingEvents": "Upcoming events",
-  "articleBy": "by {{author}}"
+  "articleBy": "by {{author}}",
+  "articlesGoTo": "View all articles from before"
 }
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -1,5 +1,6 @@
 {
  "pages.admin": "Admin",
+  "pages.articles": "Articles",
  "pages.badges": "Badges",
  "pages.plus": "Plus Server",
  "pages.contributors": "Contributeurs",
--- a/public/locales/fr/front.json
+++ b/public/locales/fr/front.json
@@ -6,5 +6,6 @@
  "badges.description": "La liste de tous les badges que vous pouvez recevoir sur votre profil",
  "recentWinners": "Gagnants récents",
  "upcomingEvents": "Événements à venir",
-  "articleBy": "par {{author}}"
+  "articleBy": "par {{author}}",
+  "articlesGoTo": "Voir tous les articles d'avant"
 }
--- a/translation-progress.md
+++ b/translation-progress.md
@@ -1,10 +1,118 @@
 # Translation Progress

-## /da (🟢 Done)
+## /da (🟡 In progress)
+
+### 🟢 analyzer.json
+
+**112/112**
+
+### 🟢 badges.json
+
+**7/7**
+
+### 🟢 builds.json
+
+**11/11**
+
+### 🟢 calendar.json
+
+**46/46**
+
+### 🟡 common.json
+
+**75/76**
+
+<details>
+<summary>Missing</summary>
+
+- pages.articles
+
+</details>
+
+### 🟢 contributions.json
+
+**6/6**
+
+### 🟢 faq.json
+
+**6/6**
+
+### 🟡 front.json
+
+**12/13**
+
+<details>
+<summary>Missing</summary>
+
+- articlesGoTo
+
+</details>
+
+### 🟢 game-misc.json
+
+**22/22**
+
+### 🟢 user.json
+
+**25/25**

 ---

-## /de (🟢 Done)
+## /de (🟡 In progress)
+
+### 🟢 analyzer.json
+
+**112/112**
+
+### 🟢 badges.json
+
+**7/7**
+
+### 🟢 builds.json
+
+**11/11**
+
+### 🟢 calendar.json
+
+**46/46**
+
+### 🟡 common.json
+
+**75/76**
+
+<details>
+<summary>Missing</summary>
+
+- pages.articles
+
+</details>
+
+### 🟢 contributions.json
+
+**6/6**
+
+### 🟢 faq.json
+
+**6/6**
+
+### 🟡 front.json
+
+**12/13**
+
+<details>
+<summary>Missing</summary>
+
+- articlesGoTo
+
+</details>
+
+### 🟢 game-misc.json
+
+**22/22**
+
+### 🟢 user.json
+
+**25/25**

 ---

@@ -62,11 +170,12 @@

 ### 🟡 common.json

-**48/75**
+**48/76**

 <details>
 <summary>Missing</summary>

+- pages.articles
 - pages.s2
 - pages.maps
 - pages.object-damage-calculator
@@ -107,13 +216,14 @@

 ### 🟡 front.json

-**10/12**
+**10/13**

 <details>
 <summary>Missing</summary>

 - maps.description
 - object-damage-calculator.description
+- articlesGoTo

 </details>

@@ -221,7 +331,7 @@

 ### 🟡 common.json

-**46/75**
+**47/76**

 <details>
 <summary>Missing</summary>
@@ -276,7 +386,7 @@

 ### 🟡 front.json

-**8/12**
+**9/13**

 <details>
 <summary>Missing</summary>
@@ -358,7 +468,7 @@

 ### 🔴 common.json

-**0/75**
+**0/76**

 ### 🔴 contributions.json

@@ -370,7 +480,7 @@

 ### 🔴 front.json

-**0/12**
+**0/13**

 ### 🟡 game-misc.json

@@ -398,7 +508,61 @@

 ---

-## /ja (🟢 Done)
+## /ja (🟡 In progress)
+
+### 🟢 analyzer.json
+
+**112/112**
+
+### 🟢 badges.json
+
+**7/7**
+
+### 🟢 builds.json
+
+**11/11**
+
+### 🟢 calendar.json
+
+**46/46**
+
+### 🟡 common.json
+
+**75/76**
+
+<details>
+<summary>Missing</summary>
+
+- pages.articles
+
+</details>
+
+### 🟢 contributions.json
+
+**6/6**
+
+### 🟢 faq.json
+
+**6/6**
+
+### 🟡 front.json
+
+**12/13**
+
+<details>
+<summary>Missing</summary>
+
+- articlesGoTo
+
+</details>
+
+### 🟢 game-misc.json
+
+**22/22**
+
+### 🟢 user.json
+
+**25/25**

 ---

@@ -430,11 +594,12 @@

 ### 🟡 common.json

-**35/75**
+**35/76**

 <details>
 <summary>Missing</summary>

+- pages.articles
 - pages.s2
 - pages.analyzer
 - pages.maps
@@ -495,7 +660,7 @@

 ### 🟡 front.json

-**8/12**
+**8/13**

 <details>
 <summary>Missing</summary>
@@ -504,6 +669,7 @@
 - analyzer.description
 - maps.description
 - object-damage-calculator.description
+- articlesGoTo

 </details>

@@ -600,11 +766,12 @@

 ### 🟡 common.json

-**55/75**
+**55/76**

 <details>
 <summary>Missing</summary>

+- pages.articles
 - pages.object-damage-calculator
 - auth.errors.aborted
 - auth.errors.failed
@@ -638,12 +805,13 @@

 ### 🟡 front.json

-**11/12**
+**11/13**

 <details>
 <summary>Missing</summary>

 - object-damage-calculator.description
+- articlesGoTo

 </details>

@@ -715,11 +883,12 @@

 ### 🟡 common.json

-**61/75**
+**61/76**

 <details>
 <summary>Missing</summary>

+- pages.articles
 - actions.loading
 - actions.clear
 - actions.selectAll
@@ -747,12 +916,13 @@

 ### 🟡 front.json

-**11/12**
+**11/13**

 <details>
 <summary>Missing</summary>

 - object-damage-calculator.description
+- articlesGoTo

 </details>

@@ -828,11 +998,12 @@

 ### 🟡 common.json

-**35/75**
+**35/76**

 <details>
 <summary>Missing</summary>

+- pages.articles
 - pages.s2
 - pages.analyzer
 - pages.maps
@@ -893,7 +1064,7 @@

 ### 🟡 front.json

-**8/12**
+**8/13**

 <details>
 <summary>Missing</summary>
@@ -902,6 +1073,7 @@
 - analyzer.description
 - maps.description
 - object-damage-calculator.description
+- articlesGoTo

 </details>