refactor: static

.env.example

@@ -1,10 +1,5 @@
 NODE_ENV=development|production
 
-# S3 Bucket
-S3_ACCESS_KEY=1S818EZOZ4BEX8UT06E1
-S3_SECRET_KEY=CRzsEo8XzmFu271DTzTbD33budBZ863T2sBEspkK
-S3_ENDPOINT=s3.eu-central-1.wasabisys.com
-
 # Dump database (costumes, weapons...)
 DATABASE_URL=
 

.nvmrc

@@ -1 +1 @@
-16.17.0
+18

next.config.js

@@ -3,13 +3,12 @@ const withPWA = require('next-pwa')({
 })
 
 module.exports = withPWA({
+  output: 'export',
   reactStrictMode: false,
+  staticPageGenerationTimeout: 1000,
   experimental: {
     largePageDataBytes: 1028 * 1000,
   },
-  api: {
-    responseLimit: "16mb",
-  },
   images: {
     domains: [
       "reinguide-assets.s3.eu-central-1.wasabisys.com",

package.json

@@ -85,7 +85,6 @@
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/marked": "^4.0.8",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.32",

src/components/CharacterInfo.tsx

@@ -1,4 +1,4 @@
-import Image from "next/legacy/image";
+
 import HR from "./decorations/HR";
 import Star from "./decorations/Star";
 import SVG from "react-inlinesvg";
@@ -62,7 +62,6 @@ import { Event } from "../models/types/index";
 import { EventItem } from "pages/events";
 import StatDisplay from "./StatDisplay";
 import getCostumeLevelsByRarity from "@utils/getCostumeLevelsByRarity";
-import switchImg from "../../public/icons/switch.png";
 import { chaptersIcons } from "@utils/chaptersIcons";
 import { LimitedCostume } from "./LimitedCostume";
 import { SingleWeapon } from "./WeaponInfo";
@@ -259,8 +258,7 @@ function CostumeDetails({
                   <Element size={32} type={costume.attribute} />
                 </Tooltip>
                 <div className="w-8">
-                  <Image
-                    layout="responsive"
+                  <img
                     src={weaponsIcons[costume.weapon_type]}
                     alt={costume.weapon_type}
                   />
@@ -459,12 +457,12 @@ function CostumeDetails({
                     "opacity-0 pointer-events-none": isShowingModel,
                   })}
                 >
-                  <Image
+                  <img
                     key={`${CDN_URL}${costume.image_path_base}full${
                       isReplaced ? "_replace" : ""
                     }.png`}
                     layout="fill"
-                    objectFit="contain"
+                    className="object-contain"
                     src={`${CDN_URL}${costume.image_path_base}full${
                       isReplaced ? "_replace" : ""
                     }.png`}
@@ -535,9 +533,9 @@ function CostumeDetails({
                   title="Switch costume artwork"
                   onClick={() => setIsReplaced(!isReplaced)}
                 >
-                  <Image
-                    objectFit="contain"
-                    src={switchImg}
+                  <img
+                    className="object-contain"
+                    src="/icons/switch.png"
                     alt="Switch costume design"
                   />
                 </button>
@@ -923,8 +921,7 @@ function SingleStat({ name, value, type, icon }): JSX.Element {
   return (
     <div className="flex items-center justify-between pl-4 pr-8">
       <div className="flex items-center gap text-beige-light">
-        <Image
-          layout="intrinsic"
+        <img
           src={icon}
           alt={name}
           width={48}

src/components/CommunityTierlists.tsx

@@ -1,15 +1,6 @@
 import { tierlists } from "@prisma/client-nrg";
 import TierlistListingItem from "@components/TierlistListingItem";
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import ATTRIBUTES from "@utils/attributes";
-import { useEffect, useRef, useState } from "react";
-import TextField from "@mui/material/TextField";
-import { useRouter } from "next/router";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
 import { sub } from "date-fns";
-import Link from "next/link";
 
 interface LoadoutProps {
   tierlists: tierlists[];
@@ -22,114 +13,14 @@ export const defaultFromDate = sub(new Date(), {
 export default function ListingLoadout({
   tierlists = [],
 }: LoadoutProps): JSX.Element {
-  const router = useRouter();
-  const isFirstMount = useRef(true);
-
-  const [sortBy, setSortBy] = useState("votes");
-  const [fromDate, setFromDate] = useState<Date | null>(defaultFromDate);
-  const [attribute, setAttribute] = useState("all");
-  const [type, setType] = useState("all");
-
-  useEffect(() => {
-    if (isFirstMount.current) {
-      return;
-    }
-
-    router.push(
-      `/tierlists/community?attribute=${attribute}&type=${type}&from=${fromDate.toISOString()}&sortBy=${sortBy}`
-    );
-  }, [attribute, type, fromDate, sortBy]);
-
-  useEffect(() => {
-    if (type === "costumes") {
-      setAttribute("all");
-    }
-  }, [type]);
-
-  useEffect(() => {
-    isFirstMount.current = false;
-  }, []);
 
   return <>
-    <div className="flex flex-col items-center md:flex-row gap-y-4 gap-x-4 bg-grey-dark border border-beige border-opacity-50 p-4 mb-8">
-      <FormControl className="mt-8 md:mt-0">
-        <InputLabel id="sort-select-label">Sort by</InputLabel>
-        <Select
-          labelId="sort-select-label"
-          value={sortBy}
-          label="sort"
-          onChange={(e) => setSortBy(e.target.value)}
-        >
-          <MenuItem value="updated_at">Last updated</MenuItem>
-          <MenuItem value="created_at">Created date</MenuItem>
-          <MenuItem value="votes">Votes</MenuItem>
-        </Select>
-      </FormControl>
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <MobileDatePicker
-          className="mt-4 md:mt-0"
-          label="Updated after"
-          inputFormat="MM/dd/yyyy"
-          value={fromDate}
-          onChange={(newValue) => setFromDate(newValue)}
-          renderInput={(params) => <TextField {...params} />}
-        />
-      </LocalizationProvider>
-      <FormControl className="w-32 mt-8 md:mt-0">
-        <InputLabel id="attribute-select-label">Type</InputLabel>
-        <Select
-          labelId="attribute-select-label"
-          value={type}
-          label="Type"
-          onChange={(e) => setType(e.target.value)}
-        >
-          <MenuItem value="all">All</MenuItem>
-          <MenuItem value="costumes">Costumes</MenuItem>
-          <MenuItem value="weapons">Weapons</MenuItem>
-        </Select>
-      </FormControl>
-      {type === "weapons" && (
-        <FormControl className="w-32 mt-8 md:mt-0">
-          <InputLabel id="attribute-select-label">Attribute</InputLabel>
-          <Select
-            labelId="attribute-select-label"
-            value={attribute}
-            label="Attribute"
-            onChange={(e) => setAttribute(e.target.value)}
-          >
-            <MenuItem value="all">All</MenuItem>
-            {ATTRIBUTES.map((attribute) => (
-              <MenuItem key={attribute} value={attribute}>
-                {attribute}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      )}
-    </div>
-
     {tierlists.length > 0 && (
-      <div className="grid grid-cols-1 place-items-center md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 place-items-center md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8">
         {tierlists.map((tierlist) => (
           <TierlistListingItem key={tierlist.tierlist_id} {...tierlist} />
         ))}
       </div>
     )}
-
-    {tierlists.length === 0 && (
-      <div className="bg-grey-dark text-beige transition-colors w-full border-b border-beige-inactive border-opacity-50 p-8 text-center rounded-lg">
-        <img
-          className="inline-block"
-          src="/decorations/fio-confused.png"
-          alt="Fio confused"
-        />
-        <p className="mt-4">Sorry, no tierlist found.</p>
-        <div className="flex justify-center mt-4">
-          <Link href="/tools/tierlist-builder" passHref className="btn">
-            Create one!
-          </Link>
-        </div>
-      </div>
-    )}
   </>;
 }

src/components/CompanionThumbnail.tsx

@@ -1,4 +1,4 @@
-import Image from "next/legacy/image";
+
 import SVG from "react-inlinesvg";
 import getModelPath from "@utils/getModelPath";
 import dynamic from "next/dynamic";
@@ -56,7 +56,7 @@ export default function CompanionThumbnail({
         }}
       >
         {companion?.name && (
-          <Image
+          <img
             className="z-10"
             layout="fill"
             src={`/decorations/corners_rarity_2.png`}

src/components/CostumeArtwork.tsx

@@ -1,4 +1,4 @@
-import Image from "next/legacy/image";
+
 import SVG from "react-inlinesvg";
 import getModelPath from "@utils/getModelPath";
 import Star from "@components/decorations/Star";
@@ -40,9 +40,8 @@ export default function CostumeArtwork({
               path={getModelPath("character", "costume.costume_id")}
             />
           )) || (
-            <Image
-              layout="fill"
-              objectFit="cover"
+            <img
+              className="object-cover"
               src={`${CDN_URL}${costume.image_path_base}full.png`}
               alt={`${costume.title} (${costume.title}) illustration`}
             />

src/components/CostumePanel.tsx

@@ -15,7 +15,7 @@ import {
   weapon,
 } from "@prisma/client";
 import { Event } from "@models/types";
-import Image from "next/legacy/image";
+
 import weaponsIcons from "@utils/weaponsIcons";
 import classNames from "classnames";
 import { CDN_URL } from "@config/constants";
@@ -120,7 +120,7 @@ export function CostumePanel({ costumeId }) {
             <div className="flex flex-col gap-x-2 ml-2">
               <span className="inline-flex items-center gap-x-2">
                 <span className="inline-block w-8">
-                  <Image
+                  <img
                     layout="responsive"
                     src={weaponsIcons[costume.weapon_type]}
                     alt={costume.weapon_type}
@@ -157,7 +157,7 @@ export function CostumePanel({ costumeId }) {
               <div className="relative mr-4">
                 <SVG src="/decorations/frame.svg" className="h-16 w-16" />
                 <div className="h-8 w-8 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <Image
+                  <img
                     layout="fixed"
                     width={32}
                     height={32}