closes #276

.gitignore

@@ -42,3 +42,5 @@ locale/**/*.js
 /prisma/scripts/mongo
 /prisma/scripts/data
 dumped.sql
+
+/utils/data/patrons.json

components/layout/FooterContent.tsx

@@ -1,43 +1,70 @@
 import { Box, Flex } from "@chakra-ui/react";
+import { Trans } from "@lingui/macro";
+import MyLink from "components/common/MyLink";
 import { useMyTheme } from "hooks/common";
 import Link from "next/link";
 import { FaGithub, FaTwitter } from "react-icons/fa";
 import { FiInfo } from "react-icons/fi";
 import { DiscordIcon } from "utils/assets/icons";
+import patrons from "utils/data/patrons.json";
+import { getFullUsername } from "utils/strings";
 
 const FooterContent: React.FC = () => {
   const { themeColorHex: themeColor } = useMyTheme();
   return (
-    <Flex
-      mt="-1px"
-      pt={4}
-      pb="50px"
-      flexShrink={0}
-      alignItems="center"
-      fontWeight="bold"
-      letterSpacing="1px"
-      flexWrap="wrap"
-      justifyContent="space-evenly"
-      bg={themeColor}
-      color="black"
-    >
-      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        <Link href="/about">
-          <a>
-            <Box as={FiInfo} size="50px" m="1em" />
+    <Box bg={themeColor} color="black">
+      <Flex
+        mt="-1px"
+        pt={4}
+        pb="50px"
+        flexShrink={0}
+        alignItems="center"
+        fontWeight="bold"
+        letterSpacing="1px"
+        flexWrap="wrap"
+        justifyContent="space-evenly"
+      >
+        <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+          <Link href="/about">
+            <a>
+              <Box as={FiInfo} size="50px" m="1em" />
+            </a>
+          </Link>
+          <a href="https://twitter.com/sendouink">
+            <Box as={FaTwitter} size="50px" m="1em" />
           </a>
-        </Link>
-        <a href="https://twitter.com/sendouink">
-          <Box as={FaTwitter} size="50px" m="1em" />
-        </a>
-        <a href="https://discord.gg/sendou">
-          <DiscordIcon h="50px" w="50px" m="1em" />
-        </a>
-        <a href="https://github.com/Sendouc/sendou.ink">
-          <Box as={FaGithub} size="50px" m="1em" />
-        </a>
+          <a href="https://discord.gg/sendou">
+            <DiscordIcon h="50px" w="50px" m="1em" />
+          </a>
+          <a href="https://github.com/Sendouc/sendou.ink">
+            <Box as={FaGithub} size="50px" m="1em" />
+          </a>
+        </Flex>
       </Flex>
-    </Flex>
+      <Box p={3} textAlign="center">
+        <Box fontWeight="bold">
+          <Trans>Thanks to the patrons for their support ♥</Trans>
+        </Box>
+        <Flex flexWrap="wrap" justify="center" align="center" mt={2}>
+          {patrons.map((patron) => (
+            <MyLink
+              key={patron.discordId}
+              href={`/u/${patron.discordId}`}
+              isColored={false}
+            >
+              <Box
+                fontSize={
+                  ["0", "0.9rem", "1rem", "1.25rem"][patron.patreonTier]
+                }
+                mx={1}
+              >
+                {getFullUsername(patron)}
+              </Box>
+            </MyLink>
+          ))}
+        </Flex>
+      </Box>
+    </Box>
   );
 };
 

package.json

@@ -4,11 +4,12 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "lingui compile && next build",
+    "build": "lingui compile && npm run prebuild && next build",
     "start": "next start",
     "migrate": "prisma migrate deploy --preview-feature",
     "migrate:save": "prisma migrate dev --create-only --preview-feature",
     "gen": "npx prisma generate",
+    "prebuild": "ts-node prisma/scripts/preBuild.ts",
     "mongo": "ts-node prisma/scripts/dataFromMongo.ts",
     "top500": "ts-node prisma/scripts/top500jsons.ts",
     "league": "cross-env NODE_OPTIONS=--max-old-space-size=8192 ts-node prisma/scripts/leagueJsons.ts",

prisma/scripts/preBuild.ts

@@ -0,0 +1,30 @@
+import fs from "fs";
+import path from "path";
+import prisma from "../client";
+
+const main = async () => {
+  const patrons = await prisma.user.findMany({
+    where: { patreonTier: { not: null } },
+    orderBy: { patreonTier: "desc" },
+    select: {
+      username: true,
+      discriminator: true,
+      patreonTier: true,
+      discordId: true,
+    },
+  });
+
+  fs.writeFile(
+    path.resolve(__dirname, "..", "..", "utils", "data", "patrons.json"),
+    JSON.stringify(patrons),
+    function (err) {
+      if (err) throw err;
+    }
+  );
+};
+
+main()
+  .catch((e) => console.error(e))
+  .finally(async () => {
+    await prisma.$disconnect();
+  });