Updated deps + removed pointer/coarse for hover instead

next.config.js

@@ -1,11 +1,10 @@
-/** @type {import('next').NextConfig} */
-
 /* CONFIG */
 
 const locales = ["en", "es", "fr", "pt-br", "ja"];
 
 /* END CONFIG */
 
+/** @type {import('next').NextConfig} */
 module.exports = {
   swcMinify: true,
   reactStrictMode: true,

package.json

@@ -5,21 +5,21 @@
     "dev": "next dev -p 12499",
     "prebuild": "npm run generate",
     "build": "next build",
-    "postbuild": "next-sitemap",
+    "postbuild": "next-sitemap --config next-sitemap.config.js",
     "start": "next start -p 12500",
     "lint": "next lint",
-    "generate": "graphql-codegen --config graphql-codegen.js",
+    "generate": "graphql-codegen --config graphql-codegen.config.js",
     "tsc": "tsc",
     "prettier": "prettier --end-of-line auto --write ."
   },
   "dependencies": {
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/opendyslexic": "^4.5.4",
-    "@fontsource/vollkorn": "^4.5.9",
+    "@fontsource/vollkorn": "^4.5.10",
     "@fontsource/zen-maru-gothic": "^4.5.11",
     "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.7",
-    "graphql-request": "^4.2.0",
+    "graphql-request": "^4.3.0",
     "markdown-to-jsx": "^7.1.7",
     "meilisearch": "^0.25.1",
     "next": "^12.1.6",
@@ -32,24 +32,24 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "2.4.11",
+    "@graphql-codegen/typescript": "2.5.1",
-    "@graphql-codegen/typescript-graphql-request": "^4.4.8",
+    "@graphql-codegen/typescript-graphql-request": "^4.4.10",
-    "@graphql-codegen/typescript-operations": "^2.4.0",
+    "@graphql-codegen/typescript-operations": "^2.4.2",
-    "@types/node": "17.0.35",
+    "@types/node": "17.0.41",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "18.0.9",
+    "@types/react": "18.0.12",
-    "@types/react-dom": "^18.0.4",
+    "@types/react-dom": "^18.0.5",
     "@types/turndown": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.25.0",
+    "@typescript-eslint/parser": "^5.27.1",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-next": "12.1.6",
     "graphql": "^16.5.0",
-    "next-sitemap": "^2.5.21",
+    "next-sitemap": "^3.0.5",
     "prettier": "^2.6.2",
     "prettier-plugin-organize-imports": "^2.3.4",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.3"
   }
 }

src/components/PreviewCard.tsx

@@ -126,7 +126,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
         drop-shadow-shade-xl [--bg-opacity:0] [--play-opacity:0]
         [--stacked-top:0] hover:scale-[1.02] hover:[--cover-opacity:1]
         hover:[--bg-opacity:0.5] hover:[--play-opacity:100]
-        hover:[--stacked-top:1] fine:[--cover-opacity:0]"
+        hover:[--stacked-top:1] hoverable:[--cover-opacity:0]"
       >
         {stackNumber > 0 && (
           <>
@@ -171,7 +171,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
                 thumbnailRounded
                   ? keepInfoVisible
                     ? "rounded-t-md"
-                    : "rounded-md coarse:rounded-b-none"
+                    : "rounded-md notHoverable:rounded-b-none"
                   : undefined
               }
               image={thumbnail}
@@ -212,7 +212,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
             className={`relative w-full bg-light ${
               keepInfoVisible
                 ? "rounded-t-md"
-                : "rounded-md coarse:rounded-b-none"
+                : "rounded-md notHoverable:rounded-b-none"
             }`}
           >
             {stackNumber > 0 && (
@@ -229,7 +229,7 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
           className={`linearbg-obi ${
             !keepInfoVisible &&
             `-inset-x-0.5 bottom-2 opacity-[var(--cover-opacity)]
-              coarse:rounded-b-md fine:absolute fine:drop-shadow-shade-lg`
+              notHoverable:rounded-b-md hoverable:absolute hoverable:drop-shadow-shade-lg`
           } z-20 grid gap-2 p-4 transition-opacity`}
         >
           {metadata?.position === "Top" && metadataJSX}

src/hooks/useMediaQuery.ts

@@ -45,12 +45,8 @@ export function useMediaDesktop() {
   return useMediaQuery("(min-width: 60rem)");
 }
 
-export function useMediaCoarse() {
+export function useMediaHoverable() {
-  return useMediaQuery("(pointer: coarse)");
+  return useMediaQuery("(hover: hover)");
-}
-
-export function useMediaFine() {
-  return useMediaQuery("(pointer: fine)");
 }
 
 export function usePrefersDarkMode() {

src/pages/archives/videos/c/[uid].tsx

@@ -22,6 +22,8 @@ import {
 } from "next";
 import { Fragment, useState } from "react";
 import { Icon } from "components/Ico";
+import { useMediaHoverable } from "hooks/useMediaQuery";
+import { WithLabel } from "components/Inputs/WithLabel";
 
 interface Props extends AppStaticProps {
   channel: NonNullable<
@@ -32,6 +34,7 @@ interface Props extends AppStaticProps {
 export default function Channel(props: Props): JSX.Element {
   const { langui, channel } = props;
   const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+  const hoverable = useMediaHoverable();
 
   const subPanel = (
     <SubPanel>
@@ -49,10 +52,14 @@ export default function Channel(props: Props): JSX.Element {
         description={langui.archives_description}
       />
 
-      <div className="flex flex-row place-items-center gap-2 coarse:hidden">
+      {hoverable && (
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
+        <WithLabel
+          label={langui.always_show_info}
+          input={
             <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
-      </div>
+          }
+        />
+      )}
     </SubPanel>
   );
 

src/pages/archives/videos/index.tsx

@@ -2,6 +2,7 @@ import { AppLayout } from "components/AppLayout";
 import { Icon } from "components/Ico";
 import { PageSelector } from "components/Inputs/PageSelector";
 import { Switch } from "components/Inputs/Switch";
+import { WithLabel } from "components/Inputs/WithLabel";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import {
   ReturnButton,
@@ -18,6 +19,7 @@ import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
 import { prettyDate } from "helpers/formatters";
 import { getVideoThumbnailURL } from "helpers/videos";
+import { useMediaHoverable } from "hooks/useMediaQuery";
 import { GetStaticPropsContext } from "next";
 import { Fragment, useState } from "react";
 
@@ -27,6 +29,7 @@ interface Props extends AppStaticProps {
 
 export default function Videos(props: Props): JSX.Element {
   const { langui, videos } = props;
+  const hoverable = useMediaHoverable();
 
   videos
     .sort((a, b) => {
@@ -67,10 +70,14 @@ export default function Videos(props: Props): JSX.Element {
         description={langui.archives_description}
       />
 
-      <div className="flex flex-row place-items-center gap-2 coarse:hidden">
+      {hoverable && (
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
+        <WithLabel
+          label={langui.always_show_info}
+          input={
             <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
-      </div>
+          }
+        />
+      )}
     </SubPanel>
   );
 

src/pages/contents/index.tsx

@@ -20,6 +20,7 @@ import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { Button } from "components/Inputs/Button";
 import { TextInput } from "components/Inputs/TextInput";
+import { useMediaHoverable } from "hooks/useMediaQuery";
 
 interface Props extends AppStaticProps {
   contents: NonNullable<GetContentsQuery["contents"]>["data"];
@@ -36,6 +37,7 @@ const defaultFiltersState = {
 
 export default function Contents(props: Immutable<Props>): JSX.Element {
   const { langui, contents, languages } = props;
+  const hoverable = useMediaHoverable();
 
   const [groupingMethod, setGroupingMethod] = useState<number>(
     defaultFiltersState.groupingMethod
@@ -118,10 +120,14 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
         }
       />
 
+      {hoverable && (
         <WithLabel
           label={langui.always_show_info}
-        input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
+          input={
+            <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+          }
         />
+      )}
 
       <Button
         className="mt-8"

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

@@ -46,6 +46,8 @@ import {
 } from "next";
 import { Fragment, useState } from "react";
 import { isUntangibleGroupItem } from "helpers/libraryItem";
+import { useMediaHoverable } from "hooks/useMediaQuery";
+import { WithLabel } from "components/Inputs/WithLabel";
 
 interface Props extends AppStaticProps {
   item: NonNullable<
@@ -59,6 +61,7 @@ interface Props extends AppStaticProps {
 export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
   const { item, itemId, langui, currencies } = props;
   const appLayout = useAppLayout();
+  const hoverable = useMediaHoverable();
 
   useScrollTopOnChange(AnchorIds.ContentPanel, [item]);
 
@@ -401,10 +404,18 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
               {isVariantSet ? langui.variants : langui.subitems}
             </h2>
 
-            <div className="-mt-6 mb-8 flex flex-row place-items-center gap-2 coarse:hidden">
+            {hoverable && (
-              <p className="flex-shrink-0">{langui.always_show_info}:</p>
+              <WithLabel
-              <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+                label={langui.always_show_info}
-            </div>
+                input={
+                  <Switch
+                    setState={setKeepInfoVisible}
+                    state={keepInfoVisible}
+                  />
+                }
+              />
+            )}
+
             <div
               className="grid w-full grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] items-end
               gap-8 mobile:grid-cols-2"

src/pages/library/index.tsx

@@ -29,6 +29,7 @@ import {
   isUntangibleGroupItem,
 } from "helpers/libraryItem";
 import { PreviewCard } from "components/PreviewCard";
+import { useMediaHoverable } from "hooks/useMediaQuery";
 
 interface Props extends AppStaticProps {
   items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@@ -48,6 +49,7 @@ const defaultFiltersState = {
 export default function Library(props: Immutable<Props>): JSX.Element {
   const { langui, items: libraryItems, currencies } = props;
   const appLayout = useAppLayout();
+  const hoverable = useMediaHoverable();
 
   const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
   const [showSubitems, setShowSubitems] = useState<boolean>(
@@ -189,10 +191,14 @@ export default function Library(props: Immutable<Props>): JSX.Element {
         }
       />
 
+      {hoverable && (
         <WithLabel
           label={langui.always_show_info}
-        input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
+          input={
+            <Switch state={keepInfoVisible} setState={setKeepInfoVisible} />
+          }
         />
+      )}
 
       <div className="mt-4 grid grid-flow-col">
         <ToolTip content={langui.only_display_items_i_want}>

src/pages/news/index.tsx

@@ -18,6 +18,7 @@ import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { TextInput } from "components/Inputs/TextInput";
 import { Button } from "components/Inputs/Button";
+import { useMediaHoverable } from "hooks/useMediaQuery";
 
 interface Props extends AppStaticProps {
   posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
@@ -31,6 +32,7 @@ const defaultFiltersState = {
 export default function News(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const posts = sortPosts(props.posts);
+  const hoverable = useMediaHoverable();
 
   const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
   const [keepInfoVisible, setKeepInfoVisible] = useState(
@@ -61,10 +63,14 @@ export default function News(props: Immutable<Props>): JSX.Element {
         setState={setSearchName}
       />
 
+      {hoverable && (
         <WithLabel
           label={langui.always_show_info}
-        input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
+          input={
+            <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+          }
         />
+      )}
 
       <Button
         className="mt-8"

tailwind.config.js

@@ -33,26 +33,22 @@ const fontDyslexic = {
 
 /* END CONFIG */
 
-function withOpacity(variableName) {
+function rgb(color) {
-  return ({ opacityValue }) => {
+  return [color.r, color.g, color.b].join(" ");
-    if (opacityValue) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-    return `rgb(var(${variableName}))`;
-  };
 }
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
     colors: {
-      highlight: withOpacity("--theme-color-highlight"),
+      highlight: "rgb(var(--theme-color-highlight) / <alpha-value>)",
-      light: withOpacity("--theme-color-light"),
+      light: "rgb(var(--theme-color-light) / <alpha-value>)",
-      mid: withOpacity("--theme-color-mid"),
+      mid: "rgb(var(--theme-color-mid) / <alpha-value>)",
-      dark: withOpacity("--theme-color-dark"),
+      dark: "rgb(var(--theme-color-dark) / <alpha-value>)",
-      shade: withOpacity("--theme-color-shade"),
+      shade: "rgb(var(--theme-color-shade) / <alpha-value>)",
-      black: withOpacity("--theme-color-black"),
+      black: "rgb(var(--theme-color-black) / <alpha-value>)",
     },
     fontFamily: {
       body: ["var(--theme-font-body)"],
@@ -65,8 +61,8 @@ module.exports = {
       desktop: breakDektop,
       mobile: breakMobile,
       thin: breakThin,
-      coarse: { raw: "(pointer: coarse)" },
+      hoverable: { raw: "(hover: hover)" },
-      fine: { raw: "(pointer: fine)" },
+      notHoverable: { raw: "(hover: hover)" },
     },
     extend: {
       boxShadow: {
@@ -78,22 +74,22 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".set-theme-light": {
-          "--theme-color-highlight": `${hightlight.r}, ${hightlight.g}, ${hightlight.b}`,
+          "--theme-color-highlight": rgb(hightlight),
-          "--theme-color-light": `${light.r}, ${light.g}, ${light.b}`,
+          "--theme-color-light": rgb(light),
-          "--theme-color-mid": `${mid.r}, ${mid.g}, ${mid.b}`,
+          "--theme-color-mid": rgb(mid),
-          "--theme-color-dark": `${dark.r}, ${dark.g}, ${dark.b}`,
+          "--theme-color-dark": rgb(dark),
-          "--theme-color-shade": `${shade.r}, ${shade.g}, ${shade.b}`,
+          "--theme-color-shade": rgb(shade),
-          "--theme-color-black": `${black.r}, ${black.g}, ${black.b}`,
+          "--theme-color-black": rgb(black),
           "--theme-texture-dots": `url("/paper-dots.webp")`,
           "--theme-texture-dots-blend": `multiply`,
         },
         ".set-theme-dark": {
-          "--theme-color-highlight": `${dark_highlight.r}, ${dark_highlight.g}, ${dark_highlight.b}`,
+          "--theme-color-highlight": rgb(dark_highlight),
-          "--theme-color-light": `${dark_light.r}, ${dark_light.g}, ${dark_light.b}`,
+          "--theme-color-light": rgb(dark_light),
-          "--theme-color-mid": `${dark_mid.r}, ${dark_mid.g}, ${dark_mid.b}`,
+          "--theme-color-mid": rgb(dark_mid),
-          "--theme-color-dark": `${dark_dark.r}, ${dark_dark.g}, ${dark_dark.b}`,
+          "--theme-color-dark": rgb(dark_dark),
-          "--theme-color-shade": `${dark_shade.r}, ${dark_shade.g}, ${dark_shade.b}`,
+          "--theme-color-shade": rgb(dark_shade),
-          "--theme-color-black": `${dark_black.r}, ${dark_black.g}, ${dark_black.b}`,
+          "--theme-color-black": rgb(dark_black),
           "--theme-texture-dots": `url("/paper-dots-dark.webp")`,
           "--theme-texture-dots-blend": `overlay`,
         },
@@ -129,29 +125,41 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".drop-shadow-shade-md": {
-          filter: `drop-shadow(0 4px 3px rgba(var(--theme-color-shade), 0.15)) drop-shadow(0 2px 2px rgba(var(--theme-color-shade), 0.2))`,
+          filter: `
+          drop-shadow(0 4px 3px rgb(var(--theme-color-shade) / 0.15))
+          drop-shadow(0 2px 2px rgb(var(--theme-color-shade) / 0.2))`,
         },
         ".drop-shadow-shade-lg": {
-          filter: `drop-shadow(0 10px 8px rgba(var(--theme-color-shade), 0.2)) drop-shadow(0 4px 3px rgba(var(--theme-color-shade), 0.4))`,
+          filter: `
+          drop-shadow(0 10px 8px rgb(var(--theme-color-shade) / 0.2))
+          drop-shadow(0 4px 3px rgb(var(--theme-color-shade) / 0.4))`,
         },
         ".drop-shadow-shade-xl": {
-          filter: `drop-shadow(0 20px 13px rgba(var(--theme-color-shade), 0.25)) drop-shadow(0 8px 5px rgba(var(--theme-color-shade), 0.7))`,
+          filter: `
+          drop-shadow(0 20px 13px rgb(var(--theme-color-shade) / 0.25))
+          drop-shadow(0 8px 5px rgb(var(--theme-color-shade) / 0.7))`,
         },
         ".drop-shadow-shade-2xl": {
-          filter: `drop-shadow(0 25px 25px rgba(var(--theme-color-shade), 0.8))`,
+          filter: `drop-shadow(0 25px 25px rgb(var(--theme-color-shade) / 0.8))`,
         },
 
         ".drop-shadow-black-md": {
-          filter: `drop-shadow(0 4px 3px rgba(var(--theme-color-black), 0.15)) drop-shadow(0 2px 2px rgba(var(--theme-color-black), 0.2))`,
+          filter: `
+          drop-shadow(0 4px 3px rgb(var(--theme-color-black) / 0.15))
+          drop-shadow(0 2px 2px rgb(var(--theme-color-black) / 0.2))`,
         },
         ".drop-shadow-black-lg": {
-          filter: `drop-shadow(0 10px 8px rgba(var(--theme-color-black), 0.2)) drop-shadow(0 4px 3px rgba(var(--theme-color-black), 0.4))`,
+          filter: `
+          drop-shadow(0 10px 8px rgb(var(--theme-color-black) / 0.2))
+          drop-shadow(0 4px 3px rgb(var(--theme-color-black) / 0.4))`,
         },
         ".drop-shadow-black-xl": {
-          filter: `drop-shadow(0 20px 13px rgba(var(--theme-color-black), 0.25)) drop-shadow(0 8px 5px rgba(var(--theme-color-black), 0.7))`,
+          filter: `
+          drop-shadow(0 20px 13px rgb(var(--theme-color-black) / 0.25))
+          drop-shadow(0 8px 5px rgb(var(--theme-color-black) / 0.7))`,
         },
         ".drop-shadow-black-2xl": {
-          filter: `drop-shadow(0 25px 25px rgba(var(--theme-color-black), 0.8))`,
+          filter: `drop-shadow(0 25px 25px rgb(var(--theme-color-black) / 0.8))`,
         },
       });
     }),
@@ -159,8 +167,13 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".linearbg-obi": {
-          background:
+          background: `linear-gradient(
-            "linear-gradient(to right, rgb(var(--theme-color-mid)), rgb(var(--theme-color-light)) 3%, rgb(var(--theme-color-light)) 97%, rgb(var(--theme-color-mid)))",
+              to right,
+              rgb(var(--theme-color-mid)),
+              rgb(var(--theme-color-light)) 3%,
+              rgb(var(--theme-color-light)) 97%,
+              rgb(var(--theme-color-mid))
+            )`,
         },
       });
     }),