Updating deps

.eslintignore

@@ -7,7 +7,6 @@ next-env.d.ts
 next-sitemap.config.js
 next.config.js
 postcss.config.js
-tailwind.config.js
 design.config.js
 graphql.config.js
 prettier.config.js

.ncurc.json

@@ -1,4 +1,13 @@
+/*
+  COMMENTS
+    - graphql-request: we are stuck at version 5.1.0 because 5.2.0 has a typescript bug
+                       see https://github.com/dotansimha/graphql-code-generator/issues/9046
+
+    - react-hotkeys-hook: we are stuck at version 3.4.7 because 4.X is not working well.
+                          Need more experimenting.
+*/
+
 {
   "upgrade": false,
-  "reject": ["react-hotkeys-hook"]
+  "reject": ["react-hotkeys-hook", "graphql-request"]
 }

package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "dev": "next dev -p 12499",
     "precommit": "npm run fetch-local-data && npm run icu-to-ts && npm run unused-exports && npm run prettier && npm run eslint && npm run tsc && echo ALL PRECOMMIT CHECKS PASSED SUCCESSFULLY, LET\\'S FUCKING GO!",
-    "unused-exports": "ts-unused-exports ./tsconfig.json --excludePathsFromReport=src/pages --ignoreFiles=generated",
+    "unused-exports": "ts-unused-exports ./tsconfig.json --excludePathsFromReport='src/pages;tailwind.config.ts;src/graphql/generated.ts;src/shared/meilisearch-graphql-typings/generated.ts'",
-    "fetch-local-data": "npm run generate && esrun src/graphql/fetchLocalData.ts --esrun",
+    "fetch-local-data": "npm run generate && esrun --send-code-mode=temporaryFile src/graphql/fetchLocalData.ts --esrun",
-    "icu-to-ts": "esrun src/graphql/icuToTypescript.ts --icu",
+    "icu-to-ts": "esrun --send-code-mode=temporaryFile src/graphql/icuToTypescript.ts --icu",
     "prebuild": "npm run fetch-local-data && npm run icu-to-ts",
     "build": "next build",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
@@ -15,7 +15,8 @@
     "eslint": "npx eslint .",
     "generate": "graphql-codegen --config graphql-codegen.config.js",
     "tsc": "tsc",
-    "prettier": "prettier --end-of-line auto --write ."
+    "prettier": "prettier --end-of-line auto --write .",
+    "update": "ncu --interactive --format group"
   },
   "dependencies": {
     "@fontsource/opendyslexic": "^4.5.4",
@@ -26,58 +27,58 @@
     "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.14",
     "cuid": "^2.1.8",
-    "intl-messageformat": "^10.3.1",
+    "intl-messageformat": "^10.3.3",
     "isomorphic-dompurify": "^1.2.0",
     "jotai": "^2.0.3",
     "markdown-to-jsx": "^7.2.0",
-    "marked": "^4.2.12",
+    "marked": "^4.3.0",
-    "material-symbols": "^0.5.0",
+    "material-symbols": "^0.5.5",
     "meilisearch": "^0.31.1",
-    "next": "^13.2.4",
+    "next": "^13.3.0",
     "nodemailer": "^6.9.1",
     "rc-slider": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-hotkeys-hook": "^3.4.7",
     "react-swipeable": "^7.0.0",
-    "react-zoom-pan-pinch": "^3.0.2",
+    "react-zoom-pan-pinch": "^3.0.6",
     "string-natural-compare": "^3.0.1",
     "throttle-debounce": "^5.0.0",
     "tippy.js": "^6.3.7",
-    "turndown": "^7.1.1",
+    "turndown": "^7.1.2",
-    "ua-parser-js": "^1.0.34",
+    "ua-parser-js": "^1.0.35",
     "usehooks-ts": "^2.9.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@digitak/esrun": "3.2.20",
+    "@digitak/esrun": "3.2.23",
-    "@graphql-codegen/cli": "^3.2.2",
+    "@graphql-codegen/cli": "^3.3.0",
-    "@graphql-codegen/typescript": "3.0.2",
+    "@graphql-codegen/typescript": "3.0.3",
-    "@graphql-codegen/typescript-graphql-request": "^4.5.8",
+    "@graphql-codegen/typescript-graphql-request": "^4.5.9",
-    "@graphql-codegen/typescript-operations": "^3.0.2",
+    "@graphql-codegen/typescript-operations": "^3.0.3",
     "@types/marked": "^4.0.8",
-    "@types/node": "18.15.3",
+    "@types/node": "18.15.11",
     "@types/nodemailer": "^6.4.7",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@types/string-natural-compare": "^3.0.2",
     "@types/throttle-debounce": "^5.0.0",
     "@types/turndown": "^5.0.1",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.55.0",
+    "@typescript-eslint/parser": "^5.57.1",
     "dotenv": "^16.0.3",
-    "eslint": "^8.36.0",
+    "eslint": "^8.38.0",
-    "eslint-config-next": "13.2.4",
+    "eslint-config-next": "13.3.0",
     "eslint-plugin-import": "^2.27.5",
     "graphql": "^16.6.0",
     "graphql-request": "5.1.0",
     "next-sitemap": "^4.0.6",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier-plugin-tailwindcss": "^0.2.7",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.1",
     "ts-unused-exports": "^9.0.4",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.4"
   },
   "overrides": {
     "react-zoom-pan-pinch": {

src/components/Chronicles/ChroniclePreview.tsx

@@ -31,7 +31,7 @@ export const ChroniclePreview = ({
   onClick,
 }: Props): JSX.Element => (
   <DownPressable
-    className="flex w-full gap-4 py-4 px-5"
+    className="flex w-full gap-4 px-5 py-4"
     href={url}
     onClick={onClick}
     active={active}

src/components/Cli/Terminal.tsx

@@ -249,7 +249,7 @@ export const Terminal = ({
 
         <div className="relative">
           <textarea
-            className="absolute -top-1 -left-6 -right-6 w-screen rounded-none opacity-0"
+            className="absolute -left-6 -right-6 -top-1 w-screen rounded-none opacity-0"
             spellCheck={false}
             autoCapitalize="none"
             autoCorrect="off"

src/components/ColoredSvg.tsx

@@ -15,7 +15,7 @@ interface Props {
 export const ColoredSvg = ({ src, className }: Props): JSX.Element => (
   <div
     className={cJoin(
-      `transition-colors ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]`,
+      `transition-colors ![mask-position:center] ![mask-repeat:no-repeat] ![mask-size:contain]`,
       className
     )}
     style={{ mask: `url('${src}')`, WebkitMask: `url('${src}')` }}

src/components/Containers/ContentPanel.tsx

@@ -38,7 +38,7 @@ export const ContentPanel = ({
       <main
         className={cJoin(
           "relative justify-self-center",
-          cIf(isContentPanelAtLeast3xl, "px-10 pt-20 pb-32", "px-4 pt-10 pb-20"),
+          cIf(isContentPanelAtLeast3xl, "px-10 pb-32 pt-20", "px-4 pb-20 pt-10"),
           contentPanelWidthSizesToClassName[width],
           className
         )}>

src/components/Containers/SubPanel.tsx

@@ -19,7 +19,7 @@ export const SubPanel = ({ children }: Props): JSX.Element => {
     <div
       className={cJoin(
         "grid gap-y-2 text-center",
-        cIf(isSubPanelAtLeastXs, "px-10 pt-10 pb-20", "p-4")
+        cIf(isSubPanelAtLeastXs, "px-10 pb-20 pt-10", "p-4")
       )}>
       {children}
     </div>

src/components/Inputs/Button.tsx

@@ -57,7 +57,7 @@ export const Button = ({
           `group grid cursor-pointer select-none grid-flow-col place-content-center 
           place-items-center gap-2 rounded-full border border-dark 
           leading-none text-dark transition-all`,
-          cIf(size === "small", "px-3 py-1 text-xs", "py-3 px-4"),
+          cIf(size === "small", "px-3 py-1 text-xs", "px-4 py-3"),
           cIf(active, "!border-black bg-black !text-light drop-shadow-lg shadow-black"),
           cIf(
             disabled,
@@ -76,7 +76,7 @@ export const Button = ({
             className={cJoin(
               `absolute grid place-items-center rounded-full bg-dark
               font-bold text-light transition-opacity group-hover:opacity-0`,
-              cIf(size === "small", "-top-2 -right-2 h-5 w-5", "-top-3 -right-2 h-8 w-8")
+              cIf(size === "small", "-right-2 -top-2 h-5 w-5", "-right-2 -top-3 h-8 w-8")
             )}>
             <p className="-translate-y-[0.05em]">{badgeNumber}</p>
           </div>

src/components/Inputs/TextInput.tsx

@@ -39,7 +39,7 @@ export const TextInput = ({
       }}
     />
     {isDefinedAndNotEmpty(value) && (
-      <div className="absolute right-4 top-0 bottom-0 grid place-items-center">
+      <div className="absolute bottom-0 right-4 top-0 grid place-items-center">
         <Ico
           className={cJoin("!text-xs", cIf(disabled, "opacity-30 grayscale", "cursor-pointer"))}
           icon="close"

src/components/LightBox.tsx

@@ -172,7 +172,7 @@ const ControlButtons = ({
           <NextButton />
         </div>
       </div>
-      <div className="absolute top-2 right-2 grid gap-4 rounded-4xl p-4 backdrop-blur-lg">
+      <div className="absolute right-2 top-2 grid gap-4 rounded-4xl p-4 backdrop-blur-lg">
         <CloseButton />
       </div>
     </>
@@ -180,20 +180,20 @@ const ControlButtons = ({
     <>
       {isPreviousImageAvailable && (
         <div
-          className={`absolute top-1/2 left-8 grid gap-4 rounded-4xl p-4
+          className={`absolute left-8 top-1/2 grid gap-4 rounded-4xl p-4
           backdrop-blur-lg`}>
           <PreviousButton />
         </div>
       )}
       {isNextImageAvailable && (
         <div
-          className={`absolute top-1/2 right-8 grid gap-4 rounded-4xl p-4
+          className={`absolute right-8 top-1/2 grid gap-4 rounded-4xl p-4
           backdrop-blur-lg`}>
           <NextButton />
         </div>
       )}
       <div
-        className={`absolute top-4 right-8 grid gap-4 rounded-4xl p-4
+        className={`absolute right-8 top-4 grid gap-4 rounded-4xl p-4
         backdrop-blur-lg`}>
         <CloseButton />
         <FullscreenButton />

src/components/Markdown/Markdawn.tsx

@@ -202,7 +202,7 @@ export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Eleme
               name?: string;
             }) => (
               <div
-                className="mt-8 mb-12 grid cursor-pointer place-content-center"
+                className="mb-12 mt-8 grid cursor-pointer place-content-center"
                 onClick={() => {
                   showLightBox([
                     compProps.src.startsWith("/uploads/")
@@ -296,7 +296,7 @@ const Header = ({ level, title, slug }: HeaderProps): JSX.Element => {
     <>
       <div className="ml-10 flex place-items-center gap-4">
         {title === "* * *" ? (
-          <div className="mt-8 mb-12 space-x-3 text-dark">
+          <div className="mb-12 mt-8 space-x-3 text-dark">
             <Ico icon="emergency" />
             <Ico icon="emergency" />
             <Ico icon="emergency" />

src/components/Panels/MainPanel.tsx

@@ -186,7 +186,7 @@ export const MainPanel = (): JSX.Element => {
             <Markdawn text={format("licensing_notice")} />
           </p>
         )}
-        <div className="mt-4 mb-8 grid place-content-center">
+        <div className="mb-8 mt-4 grid place-content-center">
           <Link
             onClick={() => sendAnalytics("MainPanel", "Visit license")}
             aria-label="Read more about the license we use for this website"
@@ -212,7 +212,7 @@ export const MainPanel = (): JSX.Element => {
             <Markdawn text={format("copyright_notice")} />
           </p>
         )}
-        <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
+        <div className="mb-4 mt-12 grid h-4 grid-flow-col place-content-center gap-8">
           <Link
             aria-label="Browse our GitHub repository, which include this website source code"
             onClick={() => sendAnalytics("MainPanel", "Visit GitHub")}

src/components/PreviewCard.tsx

@@ -157,7 +157,7 @@ export const PreviewCard = ({
                     shadow-shade group-hover:opacity-100 dark:text-black"
                   />
                 </div>
-                <div className="absolute right-2 bottom-2 rounded-full bg-black/60 px-2 text-light">
+                <div className="absolute bottom-2 right-2 rounded-full bg-black/60 px-2 text-light">
                   {prettyDuration(hoverlay.duration)}
                 </div>
               </>

src/helpers/asserts.ts

@@ -77,5 +77,3 @@ const hasAttribute = <T>(item: T, path: string): boolean => {
   }
   return false;
 };
-
-

src/pages/dev/showcase/design-system.tsx

@@ -69,7 +69,7 @@ const DesignSystem = (props: Props): JSX.Element => {
       </WhiteSection>
 
       <h2 className="mb-4 text-3xl">Fonts</h2>
-      <WhiteSection className="grid grid-cols-[repeat(5,auto)] place-items-start gap-y-2 gap-x-12">
+      <WhiteSection className="grid grid-cols-[repeat(5,auto)] place-items-start gap-x-12 gap-y-2">
         <p />
         <p className="font-headers text-xl text-black/50">Vollkorn</p>
         <p className="font-body text-xl text-black/50">Zen Maru Gothic</p>
@@ -911,14 +911,14 @@ const TwoThemedSection = ({ children, className }: ThemedSectionProps) => (
 );
 
 const DarkThemeSection = ({ className, children }: ThemedSectionProps) => (
-  <div className={cJoin("bg-light py-10 px-14 set-theme-dark", className)}>{children}</div>
+  <div className={cJoin("bg-light px-14 py-10 set-theme-dark", className)}>{children}</div>
 );
 const LightThemeSection = ({ className, children }: ThemedSectionProps) => (
-  <div className={cJoin("bg-light py-10 px-14 set-theme-light", className)}>{children}</div>
+  <div className={cJoin("bg-light px-14 py-10 set-theme-light", className)}>{children}</div>
 );
 
 const WhiteSection = ({ className, children }: ThemedSectionProps) => (
-  <div className="mb-12 rounded-xl bg-[white] py-10 px-14 drop-shadow-lg shadow-shade">
+  <div className="mb-12 rounded-xl bg-[white] px-14 py-10 drop-shadow-lg shadow-shade">
     <div className={cJoin("text-black set-theme-light", className)}>{children}</div>
   </div>
 );

src/pages/dev/transcript.tsx

@@ -373,7 +373,7 @@ const Transcript = (props: Props): JSX.Element => {
 
         <p
           className="h-[80vh] whitespace-nowrap font-[initial] font-bold
-          [writing-mode:vertical-rl] [transform-origin:top_right]"
+          [transform-origin:top_right] [writing-mode:vertical-rl]"
           style={{
             transform: `scale(${fontSize}) translateX(${fontSize * xOffset}px)`,
           }}>

src/pages/library/[slug]/reader.tsx

@@ -404,11 +404,11 @@ const LibrarySlug = ({
                 />
                 <PageFilters page="single" bookType={bookType} options={filterSettings} />
                 <div
-                  className="absolute left-0 top-0 bottom-0 w-1/2"
+                  className="absolute bottom-0 left-0 top-0 w-1/2"
                   onClick={() => currentZoom <= 1 && handlePageNavigation("left")}
                 />
                 <div
-                  className="absolute right-0 top-0 bottom-0 w-1/2"
+                  className="absolute bottom-0 right-0 top-0 w-1/2"
                   onClick={() => currentZoom <= 1 && handlePageNavigation("right")}
                 />
               </div>

src/pages/wiki/chronology.tsx

@@ -251,7 +251,7 @@ export const ChronologyDate = ({ date, events }: ChronologyDateProps): JSX.Eleme
   return (
     <div
       className="grid grid-cols-[4em] grid-rows-[auto_1fr]
-        gap-x-8 rounded-2xl py-4 px-8 target:my-4 target:bg-mid target:py-8"
+        gap-x-8 rounded-2xl px-8 py-4 target:my-4 target:bg-mid target:py-8"
       id={generateAnchor(date.year, date.month, date.day)}>
       {date.displayYear && (
         <p className="mt-5 text-right text-lg font-bold">

src/pages/wiki/weapons/[slug].tsx

@@ -241,7 +241,7 @@ const WeaponStory = ({ story, storyNumber, id }: WeaponStoryProps): JSX.Element
 
   return (
     <InsetBox id={id} className="formatted">
-      <h2 className="!mt-4 !mb-4">{format("story_x", { x: storyNumber })}</h2>
+      <h2 className="!mb-4 !mt-4">{format("story_x", { x: storyNumber })}</h2>
 
       {languageSwitcherProps.locales.size > 1 && <LanguageSwitcher {...languageSwitcherProps} />}
 

src/styles/others.css

@@ -56,7 +56,7 @@ textarea {
 
 input[type="submit"] {
   @apply grid cursor-pointer place-content-center place-items-center rounded-full border
-  border-dark px-4 pt-[0.4rem] pb-[0.5rem] text-dark outline-none transition-all shadow-shade
+  border-dark px-4 pb-[0.5rem] pt-[0.4rem] text-dark outline-none transition-all shadow-shade
   hover:bg-dark hover:text-light hover:drop-shadow-lg active:border-black active:bg-black
   active:text-light active:drop-shadow-lg active:shadow-black;
 }

src/styles/rc-slider.css

@@ -16,7 +16,7 @@
   width: 100%;
 }
 .rc-slider-track {
-  @apply h-2 rounded-full bg-mid bg-dark/20 shadow-inner-sm shadow-shade;
+  @apply h-2 rounded-full bg-dark/20 bg-mid shadow-inner-sm shadow-shade;
   position: absolute;
 }
 .rc-slider-handle {

tailwind.config.ts

@@ -1,10 +1,10 @@
-const plugin = require("tailwindcss/plugin");
+import type { Config } from "tailwindcss";
-const { colors, fonts, fontFamilies } = require("./design.config.js");
+import plugin from "tailwindcss/plugin";
+import { colors, fonts, fontFamilies } from "./design.config";
 
-const rgb = (color) => [color.r, color.g, color.b].join(" ");
+const rgb = (color: { r: number; g: number; b: number }) => [color.r, color.g, color.b].join(" ");
 
-/** @type {import('tailwindcss').Config} */
+export default {
-module.exports = {
   darkMode: ["class", ".set-theme-dark"],
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
@@ -21,7 +21,8 @@ module.exports = {
       body: "var(--theme-font-body)",
       headers: "var(--theme-font-headers)",
       mono: "var(--theme-font-mono)",
-      realmono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
+      realmono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace`,
       ...fonts,
     },
     screens: {
@@ -66,11 +67,11 @@ module.exports = {
     },
     boxShadow: {
       sm: "0 1px 2px 0",
-      DEFAULT: ["0 1px 3px 0", "0 1px 2px -1px"],
+      DEFAULT: ["0 1px 3px 0", "0 1px 2px -1px"].join(", "),
-      md: ["0 4px 6px -1px", "0 1px 4px -2px"],
+      md: ["0 4px 6px -1px", "0 1px 4px -2px"].join(", "),
-      lg: ["0 10px 15px -3px", "0 0 6px -4px"],
+      lg: ["0 10px 15px -3px", "0 0 6px -4px"].join(", "),
-      xl: ["0 20px 25px -5px", "0 0 10px -6px"],
+      xl: ["0 20px 25px -5px", "0 0 10px -6px"].join(", "),
-      "2xl": ["0 25px 50px -5px", "0 15px 20px -5px"],
+      "2xl": ["0 25px 50px -5px", "0 15px 20px -5px"].join(", "),
       inner: "inset 0 2px 4px 0",
       "inner-sm": "inset 0 1px 4px -2px",
       none: "0 0 #0000",
@@ -104,8 +105,8 @@ module.exports = {
       transitionProperty: {
         height: "height, max-height, min-height",
         filter: "filter, backdrop-filter",
-        colors:
+        colors: `color, background-color, border-color,
-          "color, background-color, border-color, text-decoration-color, fill, stroke, outline-color",
+          text-decoration-color, fill, stroke, outline-color`,
       },
       scale: {
         102: "1.02",
@@ -114,7 +115,7 @@ module.exports = {
   },
   plugins: [
     /* Add support for coloring drop shadows */
-    plugin(function ({ matchUtilities, theme }) {
+    plugin(({ matchUtilities, theme }) => {
       matchUtilities(
         {
           shadow: (value) => ({
@@ -285,4 +286,4 @@ module.exports = {
       });
     }),
   ],
-};
+} satisfies Config;