refactor: change Image Optimization to custom url

2025-04-05 07:44:38 +00:00 · 2024-08-23 04:51:47 +05:00 · 2024-08-23 04:51:47 +05:00 · ff11a90a5e
commit ff11a90a5e
parent 61e8b74d11
11 changed files with 100 additions and 28 deletions
--- a/app/components/CollectionInfo/CollectionInfo.Basics.tsx
+++ b/app/components/CollectionInfo/CollectionInfo.Basics.tsx
@ -1,6 +1,7 @@
 import { Card, Button, Avatar } from "flowbite-react";
 import { unixToDate } from "#/api/utils";
 import Link from "next/link";
+import Image from "next/image";

 export const CollectionInfoBasics = (props: {
  image: string;
@ -36,7 +37,12 @@ export const CollectionInfoBasics = (props: {
          </Link>
        </div>
        <div className="min-w-full aspect-video">
-          <img src={props.image} className="w-full rounded-lg" />
+          <Image
+            src={props.image}
+            width={725}
+            height={400}
+            className="w-full rounded-lg"
+          />
        </div>
        <div className="flex flex-col gap-1">
          <p className="text-xl font-bold">{props.title}</p>
--- a/app/components/CollectionLink/CollectionLink.tsx
+++ b/app/components/CollectionLink/CollectionLink.tsx
@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";

 export const CollectionLink = (props: any) => {
  return (
@ -8,9 +9,20 @@ export const CollectionLink = (props: any) => {
        <div
          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
          }}
        >
+          <Image
+            src={props.image}
+            fill={true}
+            alt={props.title}
+            className="-z-[1] object-cover"
+            sizes="
+                  (max-width: 768px) 300px,
+                  (max-width: 1024px) 600px,
+                  900px
+                  "
+          />
          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
            <Chip
              icon_name="material-symbols--favorite"
@ -38,7 +50,9 @@ export const CollectionLink = (props: any) => {
              </p>
            </div>
            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${props.description.length > 125 ? "..." : ""}`}
+              {`${props.description.slice(0, 125)}${
+                props.description.length > 125 ? "..." : ""
+              }`}
            </p>
          </div>
        </div>
--- a/app/components/Comments/Comments.Comment.tsx
+++ b/app/components/Comments/Comments.Comment.tsx
@ -6,6 +6,7 @@ import Link from "next/link";
 import { CommentsAddModal } from "./Comments.Add";
 import { CommentsEditModal } from "./Comments.Edit";
 import { useUserStore } from "#/store/auth";
+import Image from "next/image";

 export const CommentsComment = (props: {
  release_id: number;
@ -155,8 +156,10 @@ export const CommentsComment = (props: {
              href={`/profile/${props.profile.id}`}
              className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white hover:underline"
            >
-              <img
+              <Image
                className="w-6 h-6 mr-2 rounded-full"
+                width={24}
+                height={24}
                src={props.profile.avatar}
                alt=""
              />
--- a/app/components/Navbar/Navbar.tsx
+++ b/app/components/Navbar/Navbar.tsx
@ -11,6 +11,7 @@ import {
  ToggleSwitch,
 } from "flowbite-react";
 import { useState } from "react";
+import Image from "next/image";

 export const Navbar = () => {
  const pathname = usePathname();
@ -110,10 +111,12 @@ export const Navbar = () => {
          </nav>
          {userStore.isAuth ? (
            <div className="flex flex-col items-center justify-end text-sm lg:gap-1 lg:justify-center lg:flex-row lg:text-base">
-              <img
+              <Image
                src={userStore.user.avatar}
                alt=""
                className="w-6 h-6 rounded-full"
+                width={24}
+                height={24}
              />
              <Dropdown
                label={userStore.user.login}
--- a/app/components/RelatedSection/RelatedSection.tsx
+++ b/app/components/RelatedSection/RelatedSection.tsx
@ -1,5 +1,6 @@
 import { numberDeclension } from "#/api/utils";
 import Link from "next/link";
+import Image from "next/image";

 export const RelatedSection = (props: any) => {
  const declension = numberDeclension(
@ -14,12 +15,18 @@ export const RelatedSection = (props: any) => {
        <div className="flex items-center justify-center p-4">
          {props.images.map((item) => {
            return (
-              <img
-                key={item}
-                src={item}
-                alt=""
-                className="w-[100px] lg:w-[300px] object-cover aspect-[9/12] even:scale-110 shadow-md even:shadow-lg even:z-30 origin-center first:[transform:translateX(25%)] last:[transform:translateX(-25%)]"
-              />
+              <div className="w-[100px] lg:w-[300px] aspect-[9/12] even:scale-110 shadow-md even:shadow-lg even:z-30 origin-center first:[transform:translateX(25%)] last:[transform:translateX(-25%)]">
+                <Image
+                  fill={true}
+                  key={item}
+                  src={item}
+                  alt=""
+                  sizes="
+                  (max-width: 1024px) 100px,
+                  300px
+                  "
+                />
+              </div>
            );
          })}
        </div>
@ -29,11 +36,11 @@ export const RelatedSection = (props: any) => {
            {props.release_count} {declension} во франшизе
          </p>
          <Link href={`/related/${props.id}`}>
-          <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
-            <p className="text-xl font-bold">Перейти</p>
-            <span className="w-6 h-6 iconify mdi--arrow-right"></span>
-          </div>
-        </Link>
+            <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
+              <p className="text-xl font-bold">Перейти</p>
+              <span className="w-6 h-6 iconify mdi--arrow-right"></span>
+            </div>
+          </Link>
        </div>
      </div>
    </section>
--- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx
+++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx
@ -62,7 +62,7 @@ export const ReleaseCourusel = (props: {
                  key={release.id}
                  style={{ width: "fit-content" }}
                >
-                  <div className="xl:w-[600px] sm:w-[400px] w-[80vw] aspect-video">
+                  <div className="xl:w-[600px] sm:w-[400px] w-[84vw] aspect-video">
                    <ReleaseLink {...release} />
                  </div>
                </div>
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@ -1,5 +1,6 @@
 import { Card, Button } from "flowbite-react";
 import { useState } from "react";
+import Image from "next/image";

 export const ReleaseInfoBasics = (props: {
  image: string;
@ -12,11 +13,13 @@ export const ReleaseInfoBasics = (props: {
  return (
    <Card className="h-full">
      <div className="flex flex-col w-full h-full gap-4 lg:flex-row">
-        <img
+        <Image
          className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
          src={props.image}
          alt=""
-        ></img>
+          width={285}
+          height={385}
+        />
        <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
          <div className="flex flex-col gap-1">
            <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
--- a/app/components/ReleaseInfo/ReleaseInfo.Screenshots.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Screenshots.tsx
@ -1,13 +1,19 @@
 import { Card, Carousel } from "flowbite-react";
+import Image from "next/image";

-export const ReleaseInfoScreenshots = (props: {
-  images: string[];
-}) => {
+export const ReleaseInfoScreenshots = (props: { images: string[] }) => {
  return (
    <Card>
      <Carousel className="aspect-[16/10]">
        {props.images.map((image: string, index: number) => (
-          <img key={index} className="object-cover" src={image} />
+          <Image
+            key={index}
+            className="object-cover"
+            src={image}
+            width={400}
+            height={300}
+            alt=""
+          />
        ))}
      </Carousel>
    </Card>
--- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
@ -1,6 +1,7 @@
 import Link from "next/link";
 import { sinceUnixDate } from "#/api/utils";
 import { Chip } from "#/components/Chip/Chip";
+import Image from "next/image";

 const profile_lists = {
  // 0: "Не смотрю",
@ -29,10 +30,21 @@ export const ReleaseLink169 = (props: any) => {
        <div
          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
          }}
        >
-          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-2">
+          <Image
+            src={props.image}
+            fill={true}
+            alt={props.title}
+            className="-z-[1] object-cover"
+            sizes="
+                  (max-width: 768px) 300px,
+                  (max-width: 1024px) 600px,
+                  900px
+                  "
+          />
+          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-0 top-0 p-1 sm:p-2">
            <Chip
              bg_color={
                grade == 0
@ -93,7 +105,7 @@ export const ReleaseLink169 = (props: any) => {
              </div>
            )}
          </div>
-          <div className="absolute bottom-0 left-0 p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
+          <div className="absolute bottom-0 left-0 p-1 sm:p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
            <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
              {props.genres && (
                <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
@ -105,7 +117,9 @@ export const ReleaseLink169 = (props: any) => {
              </p>
            </div>
            <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-              {`${props.description.slice(0, 125)}${props.description.length > 125 ? "..." : ""}`}
+              {`${props.description.slice(0, 125)}${
+                props.description.length > 125 ? "..." : ""
+              }`}
            </p>
          </div>
        </div>
--- a/imageLoader.ts
+++ b/imageLoader.ts
@ -0,0 +1,5 @@
+"use client";
+
+export default function imageLoader({ src, width, quality }) {
+  return `https://wsrv.nl/?url=${src}&w=${width}&q=${quality || 75}`;
+}
--- a/next.config.js
+++ b/next.config.js
@ -2,4 +2,15 @@ const { withPlausibleProxy } = require("next-plausible");

 module.exports = withPlausibleProxy({
  customDomain: "https://analytics.wah.su",
-})({});
+})({
+  images: {
+    loader: 'custom',
+    loaderFile: './imageLoader.ts',
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "anixstatic.com",
+      },
+    ],
+  },
+});