fix: set Cache-Control header for index.html response

frontend/src/components/gallery.tsx

@@ -78,6 +78,7 @@ export default function Gallery({
       <GalleryFullscreen
         dialogRef={dialogRef}
         images={images}
+        nsfw={nsfw}
         currentIndex={currentIndex}
         direction={direction}
         goToPrevious={goToPrevious}
@@ -124,7 +125,7 @@ export default function Gallery({
               >
                 <GalleryImage
                   src={network.getImageUrl(images[currentIndex])}
-                  nfsw={nsfw.includes(currentIndex)}
+                  nfsw={nsfw.includes(images[currentIndex])}
                 />
               </motion.div>
             </AnimatePresence>
@@ -188,6 +189,7 @@ export default function Gallery({
 function GalleryFullscreen({
   dialogRef,
   images,
+  nsfw,
   currentIndex,
   direction,
   goToPrevious,
@@ -197,6 +199,7 @@ function GalleryFullscreen({
 }: {
   dialogRef: React.RefObject<HTMLDialogElement | null>;
   images: number[];
+  nsfw: number[];
   currentIndex: number;
   direction: number;
   goToPrevious: () => void;
@@ -237,10 +240,12 @@ function GalleryFullscreen({
 
     if (dialogRef.current?.open) {
       window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("touchstart", handleMouseMove);
     }
 
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("touchstart", handleMouseMove);
       if (hideTimeoutRef.current) {
         clearTimeout(hideTimeoutRef.current);
       }
@@ -316,7 +321,7 @@ function GalleryFullscreen({
               <img
                 src={network.getImageUrl(images[currentIndex])}
                 alt=""
-                className="w-full h-full object-contain rounded-xl"
+                className="w-full h-full object-contain rounded-xl select-none"
               />
             </motion.div>
           </AnimatePresence>
@@ -360,8 +365,8 @@ function GalleryFullscreen({
                     key={index}
                     className={`flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden transition-all ${
                       index === currentIndex
-                        ? "ring-2 ring-primary scale-110"
-                        : "opacity-60 hover:opacity-100"
+                        ? "ring-2 ring-primary scale-110 "
+                        : `${nsfw.includes(imageId) ? "blur-sm hover:blur-none" : "opacity-60 hover:opacity-100"}`
                     }`}
                     onClick={(e) => {
                       e.stopPropagation();
@@ -373,7 +378,7 @@ function GalleryFullscreen({
                     <img
                       src={network.getResampledImageUrl(imageId)}
                       alt={`Thumbnail ${index + 1}`}
-                      className="w-full h-full object-cover"
+                      className={`w-full h-full object-cover select-none`}
                     />
                   </button>
                 ))}
@@ -405,7 +410,7 @@ function GalleryImage({ src, nfsw }: { src: string; nfsw: boolean }) {
       <img
         src={src}
         alt=""
-        className={`w-full h-full object-contain transition-all duration-300 ${!show ? "blur-xl" : ""}`}
+        className={`w-full h-full object-cover transition-all duration-300 ${!show ? "blur-xl" : ""}`}
       />
       {!show && (
         <>

frontend/src/i18n.ts

@@ -261,6 +261,7 @@ export const i18nData = {
       "File Size": "文件大小",
       "Tag": "标签",
       "Optional": "可选",
+      "Download": "下载",
     },
   },
   "zh-TW": {
@@ -525,6 +526,7 @@ export const i18nData = {
       "File Size": "檔案大小",
       "Tag": "標籤",
       "Optional": "可選",
+      "Download": "下載",
     },
   },
 };

frontend/src/pages/home_page.tsx

@@ -187,7 +187,7 @@ function PinnedResourcesCarousel({
         </div>
       </div>
       {resources.length > 1 && (
-        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
+        <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
           {resources.map((_, index) => (
             <button
               key={index}

frontend/src/pages/resource_details_page.tsx

@@ -465,141 +465,141 @@ function DeleteResourceDialog({
   );
 }
 
-const context = createContext<() => void>(() => {});
+const context = createContext<() => void>(() => { });
 
 function Article({ resource }: { resource: ResourceDetails }) {
   return (
     <>
-    <article>
-      <Markdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-          p: ({ node, ...props }) => {
-            if (
-              typeof props.children === "object" &&
-              (props.children as ReactElement).type === "strong"
-            ) {
-              // @ts-ignore
-              const child = (
-                props.children as ReactElement
-              ).props.children.toString() as string;
-              if (child.startsWith("<iframe")) {
+      <article>
+        <Markdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            p: ({ node, ...props }) => {
+              if (
+                typeof props.children === "object" &&
+                (props.children as ReactElement).type === "strong"
+              ) {
                 // @ts-ignore
-                let html = child;
-                let splits = html.split(" ");
-                splits = splits.filter((s: string) => {
-                  return !(
-                    s.startsWith("width") ||
-                    s.startsWith("height") ||
-                    s.startsWith("class") ||
-                    s.startsWith("style")
-                  );
-                });
-                html = splits.join(" ");
-                return (
-                  <div
-                    className={`w-full my-3 max-w-xl rounded-xl overflow-clip ${html.includes("youtube") ? "aspect-video" : "h-48 sm:h-64"}`}
-                    dangerouslySetInnerHTML={{
-                      __html: html,
-                    }}
-                  ></div>
-                );
-              }
-            } else if (
-              typeof props.children === "object" &&
-              // @ts-ignore
-              props.children?.props &&
-              // @ts-ignore
-              props.children?.props.href
-            ) {
-              const a = props.children as ReactElement;
-              const childProps = a.props as any;
-              const href = childProps.href as string;
-              // @ts-ignore
-              if (childProps.children?.length === 2) {
-                // @ts-ignore
-                const first = childProps.children[0] as ReactNode;
-                // @ts-ignore
-                const second = childProps.children[1] as ReactNode;
-
-                if (
-                  typeof first === "object" &&
-                  (typeof second === "string" || typeof second === "object")
-                ) {
-                  const img = first as ReactElement;
+                const child = (
+                  props.children as ReactElement
+                ).props.children.toString() as string;
+                if (child.startsWith("<iframe")) {
                   // @ts-ignore
-                  if (img.type === "img") {
-                    return (
-                      <a
-                        className={
-                          "inline-block card shadow bg-base-100 no-underline hover:shadow-md transition-shadow my-2"
-                        }
-                        target={"_blank"}
-                        href={href}
-                      >
-                        <figure className={"max-h-96 min-w-48 min-h-24"}>
-                          {img}
-                        </figure>
-                        <div className={"card-body text-base-content text-lg"}>
-                          <div className={"flex items-center"}>
-                            <span className={"flex-1"}>{second}</span>
-                            <span>
-                              <MdOutlineOpenInNew size={24} />
-                            </span>
+                  let html = child;
+                  let splits = html.split(" ");
+                  splits = splits.filter((s: string) => {
+                    return !(
+                      s.startsWith("width") ||
+                      s.startsWith("height") ||
+                      s.startsWith("class") ||
+                      s.startsWith("style")
+                    );
+                  });
+                  html = splits.join(" ");
+                  return (
+                    <div
+                      className={`w-full my-3 max-w-xl rounded-xl overflow-clip ${html.includes("youtube") ? "aspect-video" : "h-48 sm:h-64"}`}
+                      dangerouslySetInnerHTML={{
+                        __html: html,
+                      }}
+                    ></div>
+                  );
+                }
+              } else if (
+                typeof props.children === "object" &&
+                // @ts-ignore
+                props.children?.props &&
+                // @ts-ignore
+                props.children?.props.href
+              ) {
+                const a = props.children as ReactElement;
+                const childProps = a.props as any;
+                const href = childProps.href as string;
+                // @ts-ignore
+                if (childProps.children?.length === 2) {
+                  // @ts-ignore
+                  const first = childProps.children[0] as ReactNode;
+                  // @ts-ignore
+                  const second = childProps.children[1] as ReactNode;
+
+                  if (
+                    typeof first === "object" &&
+                    (typeof second === "string" || typeof second === "object")
+                  ) {
+                    const img = first as ReactElement;
+                    // @ts-ignore
+                    if (img.type === "img") {
+                      return (
+                        <a
+                          className={
+                            "inline-block card shadow bg-base-100 no-underline hover:shadow-md transition-shadow my-2"
+                          }
+                          target={"_blank"}
+                          href={href}
+                        >
+                          <figure className={"max-h-96 min-w-48 min-h-24"}>
+                            {img}
+                          </figure>
+                          <div className={"card-body text-base-content text-lg"}>
+                            <div className={"flex items-center"}>
+                              <span className={"flex-1"}>{second}</span>
+                              <span>
+                                <MdOutlineOpenInNew size={24} />
+                              </span>
+                            </div>
                           </div>
-                        </div>
-                      </a>
+                        </a>
+                      );
+                    }
+                  }
+                }
+                if (href.startsWith("https://store.steampowered.com/app/")) {
+                  const appId = href
+                    .substring("https://store.steampowered.com/app/".length)
+                    .split("/")[0];
+                  if (!Number.isNaN(Number(appId))) {
+                    return (
+                      <div className={"max-w-xl h-52 sm:h-48 my-2"}>
+                        <iframe
+                          className={"scheme-light"}
+                          src={`https://store.steampowered.com/widget/${appId}/`}
+                        ></iframe>
+                      </div>
                     );
                   }
                 }
               }
-              if (href.startsWith("https://store.steampowered.com/app/")) {
-                const appId = href
-                  .substring("https://store.steampowered.com/app/".length)
-                  .split("/")[0];
-                if (!Number.isNaN(Number(appId))) {
-                  return (
-                    <div className={"max-w-xl h-52 sm:h-48 my-2"}>
-                      <iframe
-                        className={"scheme-light"}
-                        src={`https://store.steampowered.com/widget/${appId}/`}
-                      ></iframe>
-                    </div>
-                  );
-                }
-              }
-            }
-            return <p {...props}>{props.children}</p>;
-          },
-          a: ({ node, ...props }) => {
-            const href = props.href as string;
-            const origin = window.location.origin;
+              return <p {...props}>{props.children}</p>;
+            },
+            a: ({ node, ...props }) => {
+              const href = props.href as string;
+              const origin = window.location.origin;
 
-            if (href.startsWith(origin) || href.startsWith("/")) {
-              let path = href;
-              if (path.startsWith(origin)) {
-                path = path.substring(origin.length);
-              }
-              const content = props.children?.toString();
-              if (path.startsWith("/resources/")) {
-                const id = path.substring("/resources/".length);
-                for (const r of resource.related ?? []) {
-                  if (r.id.toString() === id) {
-                    return <RelatedResourceCard r={r} content={content} />;
+              if (href.startsWith(origin) || href.startsWith("/")) {
+                let path = href;
+                if (path.startsWith(origin)) {
+                  path = path.substring(origin.length);
+                }
+                const content = props.children?.toString();
+                if (path.startsWith("/resources/")) {
+                  const id = path.substring("/resources/".length);
+                  for (const r of resource.related ?? []) {
+                    if (r.id.toString() === id) {
+                      return <RelatedResourceCard r={r} content={content} />;
+                    }
                   }
                 }
               }
-            }
 
-            return <a target={"_blank"} {...props}></a>;
-          },
-        }}
-      >
-        {resource.article.replaceAll("\n", "  \n")}
-      </Markdown>
-    </article>
-    <div className="border-b border-base-300 h-8"></div>
-    <Characters characters={resource.characters} />
+              return <a target={"_blank"} {...props}></a>;
+            },
+          }}
+        >
+          {resource.article.replaceAll("\n", "  \n")}
+        </Markdown>
+      </article>
+      <div className="border-b border-base-300 h-8"></div>
+      <Characters characters={resource.characters} />
     </>
   );
 }
@@ -898,27 +898,18 @@ function CloudflarePopup({ file }: { file: RFile }) {
       <h3 className={"font-bold m-2"}>
         {downloadToken ? t("Verification successful") : t("Verifying your request")}
       </h3>
-      {!downloadToken && (
-        <>
-          <div className={"h-20 w-full"}>
-            <Turnstile
-              siteKey={app.cloudflareTurnstileSiteKey!}
-              onWidgetLoad={() => {
-                setLoading(false);
-              }}
-              onSuccess={(token) => {
-                setDownloadToken(token);
-              }}
-            ></Turnstile>
-          </div>
-          <p className={"text-xs text-base-content/80 m-2"}>
-            {t(
-              "Please check your network if the verification takes too long or the captcha does not appear.",
-            )}
-          </p>
-        </>
-      )}
-      {downloadToken && (
+      <div className={"h-20 w-full"}>
+        <Turnstile
+          siteKey={app.cloudflareTurnstileSiteKey!}
+          onWidgetLoad={() => {
+            setLoading(false);
+          }}
+          onSuccess={(token) => {
+            setDownloadToken(token);
+          }}
+        ></Turnstile>
+      </div>
+      {downloadToken ? (
         <div className="p-2">
           <a
             href={network.getFileDownloadLink(file.id, downloadToken)}
@@ -932,7 +923,11 @@ function CloudflarePopup({ file }: { file: RFile }) {
             {t("Download")}
           </a>
         </div>
-      )}
+      ) : <p className={"text-xs text-base-content/80 m-2"}>
+        {t(
+          "Please check your network if the verification takes too long or the captcha does not appear.",
+        )}
+      </p>}
     </div>
   );
 }

main.go

@@ -19,6 +19,8 @@ func main() {
 		Format: "[${ip}]:${port} ${status} - ${method} ${path}\n",
 	}))
 
+	app.Use(middleware.UnsupportedRegionMiddleware)
+
 	app.Use(middleware.ErrorHandler)
 
 	app.Use(middleware.RealUserMiddleware)

server/middleware/frontend_middleware.go

@@ -32,6 +32,7 @@ func FrontendMiddleware(c fiber.Ctx) error {
 	}
 
 	if _, err := os.Stat(file); path == "/" || os.IsNotExist(err) {
+		c.Set("Cache-Control", "no-cache")
 		return serveIndexHtml(c)
 	} else {
 		c.Set("Cache-Control", "public, max-age=31536000, immutable")

server/middleware/unsupported_region_middleware.go

@@ -0,0 +1,29 @@
+package middleware
+
+import (
+	"strings"
+
+	"github.com/gofiber/fiber/v3"
+)
+
+func UnsupportedRegionMiddleware(c fiber.Ctx) error {
+	path := string(c.Request().URI().Path())
+
+	// Skip static file requests
+	if strings.Contains(path, ".") {
+		return c.Next()
+	}
+
+	// Skip API requests
+	if strings.HasPrefix(path, "/api") {
+		return c.Next()
+	}
+
+	if string(c.Request().Header.Peek("Unsupported-Region")) == "true" {
+		// Return a 403 Forbidden response with an empty html for unsupported regions
+		c.Response().Header.Add("Content-Type", "text/html")
+		c.Status(fiber.StatusForbidden)
+		return c.SendString("<html></html>")
+	}
+	return c.Next()
+}