Fixed the anchor link problems, maybe

src/contexts/AppLayoutContext.tsx

@@ -14,6 +14,7 @@ import { Currencies, Languages, Langui } from "helpers/localData";
 import { useCurrencies, useLanguages, useLangui } from "hooks/useLocalData";
 import { getDefaultPreferredLanguages } from "helpers/locales";
 import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
+import { useScrollIntoView } from "hooks/useScrollIntoView";
 
 interface AppLayoutState {
   subPanelOpen: boolean;
@@ -301,12 +302,14 @@ export const AppContextProvider = (props: Props): JSX.Element => {
 
   useEffect(() => {
     router.events.on("routeChangeStart", () => {
+      console.log("[Router Events] on routeChangeStart");
       setConfigPanelOpen(false);
       setMainPanelOpen(false);
       setSubPanelOpen(false);
     });
 
     router.events.on("hashChangeStart", () => {
+      console.log("[Router Events] on hashChangeStart");
       setSubPanelOpen(false);
     });
   }, [router.events, setConfigPanelOpen, setMainPanelOpen, setSubPanelOpen]);
@@ -317,6 +320,8 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     }%`;
   }, [fontSize]);
 
+  useScrollIntoView();
+
   return (
     <AppContext.Provider
       value={{

src/helpers/img.ts

@@ -5,6 +5,11 @@ export enum ImageQuality {
   Og = "og",
 }
 
+interface ImageProperties {
+  maxSize: number;
+  extension: "jpg" | "webp";
+}
+
 export interface OgImage {
   image: string;
   width: number;
@@ -12,6 +17,13 @@ export interface OgImage {
   alt: string;
 }
 
+export const imageQualityProperties: Record<ImageQuality, ImageProperties> = {
+  small: { maxSize: 512, extension: "webp" },
+  medium: { maxSize: 1024, extension: "webp" },
+  large: { maxSize: 2048, extension: "webp" },
+  og: { maxSize: 512, extension: "jpg" },
+};
+
 export const getAssetFilename = (path: string): string => {
   let result = path.split("/");
   result = result[result.length - 1].split(".");
@@ -23,13 +35,13 @@ export const getAssetFilename = (path: string): string => {
 };
 
 export const getAssetURL = (url: string, quality: ImageQuality): string => {
-  let newUrl = url;
-  newUrl = newUrl.replace(/^\/uploads/u, `/${quality}`);
-  newUrl = newUrl.replace(/.jpg$/u, ".webp");
-  newUrl = newUrl.replace(/.jpeg$/u, ".webp");
-  newUrl = newUrl.replace(/.png$/u, ".webp");
-  if (quality === ImageQuality.Og) newUrl = newUrl.replace(/.webp$/u, ".jpg");
-  return process.env.NEXT_PUBLIC_URL_IMG + newUrl;
+  const indexEndPath = url.indexOf("/uploads/") + "/uploads/".length;
+  const indexStartExtension = url.lastIndexOf(".");
+  const assetPathWithoutExtension = url.slice(
+    indexEndPath,
+    indexStartExtension
+  );
+  return `${process.env.NEXT_PUBLIC_URL_IMG}/${quality}/${assetPathWithoutExtension}.${imageQualityProperties[quality].extension}`;
 };
 
 const getImgSizesByMaxSize = (
@@ -49,17 +61,5 @@ export const getImgSizesByQuality = (
   width: number,
   height: number,
   quality: ImageQuality
-): { width: number; height: number } => {
-  switch (quality) {
-    case ImageQuality.Og:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Small:
-      return getImgSizesByMaxSize(width, height, 512);
-    case ImageQuality.Medium:
-      return getImgSizesByMaxSize(width, height, 1024);
-    case ImageQuality.Large:
-      return getImgSizesByMaxSize(width, height, 2048);
-    default:
-      return { width: 0, height: 0 };
-  }
-};
+): { width: number; height: number } =>
+  getImgSizesByMaxSize(width, height, imageQualityProperties[quality].maxSize);

src/hooks/useOnResize.ts

@@ -1,4 +1,4 @@
-import { useMemo, useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { useIsClient } from "usehooks-ts";
 import { isDefined } from "helpers/others";
 
@@ -7,23 +7,19 @@ export const useOnResize = (
   onResize: (width: number, height: number) => void
 ): void => {
   const isClient = useIsClient();
-  const elem = useMemo(
-    () => (isClient ? document.querySelector(`#${id}`) : null),
-    [id, isClient]
-  );
-
-  const listener = useCallback(() => {
-    console.log("useOnResize");
-    if (elem?.clientWidth && elem.clientHeight) {
-      onResize(elem.clientWidth, elem.clientHeight);
-    }
-  }, [elem?.clientHeight, elem?.clientWidth, onResize]);
 
   useEffect(() => {
-    const ro = new ResizeObserver(listener);
+    console.log("[useOnResize]", id);
+    const elem = isClient ? document.querySelector(`#${id}`) : null;
+    const ro = new ResizeObserver((resizeObserverEntry) =>
+      onResize(
+        resizeObserverEntry[0].contentRect.width,
+        resizeObserverEntry[0].contentRect.height
+      )
+    );
     if (isDefined(elem)) {
       ro.observe(elem);
     }
     return () => ro.disconnect();
-  }, [elem, listener]);
+  }, [id, isClient, onResize]);
 };

src/hooks/useScrollIntoView.ts

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useBoolean, useCounter } from "usehooks-ts";
+import { isDefined } from "helpers/others";
+
+export const useScrollIntoView = (): void => {
+  const router = useRouter();
+  const { count, increment } = useCounter(0);
+  const { value: hasReachedElem, setTrue: setHasReachedElem } = useBoolean();
+  useEffect(() => {
+    if (!hasReachedElem) {
+      const indexHash = router.asPath.indexOf("#");
+      if (indexHash > 0) {
+        const hash = router.asPath.slice(indexHash + 1);
+        const element = document.getElementById(hash);
+        console.log(element);
+        if (isDefined(element)) {
+          console.log(`[useScrollIntoView] ${hash} found`);
+          element.scrollIntoView();
+          setHasReachedElem();
+        } else {
+          console.log(`[useScrollIntoView] ${hash} not found`);
+          setTimeout(() => {
+            increment();
+          }, 100);
+        }
+      }
+    }
+  }, [increment, router.asPath, count, hasReachedElem, setHasReachedElem]);
+};

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

@@ -1,5 +1,5 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { Fragment, useCallback, useMemo } from "react";
+import { Fragment, useCallback, useEffect, useMemo } from "react";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import {