add option to disable loading open graph data

bump node version

.nvmrc

@@ -1 +1 @@
-18
+20

dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM node:18
+FROM node:20
 WORKDIR /app
 COPY . /app/
 ENV VITE_COMMIT_HASH=""

src/hooks/use-open-graph-data.ts

@@ -1,13 +1,18 @@
 import { useAsync } from "react-use";
 import { fetchWithCorsFallback } from "../helpers/cors";
 import type { OgObjectInteral } from "../lib/open-graph-scraper/types";
+import useAppSettings from "./use-app-settings";
 
 const pageExtensions = [".html", ".php", "htm"];
 
 const openGraphDataCache = new Map<string, OgObjectInteral>();
 
 export default function useOpenGraphData(url: URL) {
+  const { loadOpenGraphData } = useAppSettings();
+
   return useAsync(async () => {
+    if (!loadOpenGraphData) return null;
+
     const { default: extractMetaTags } = await import("../lib/open-graph-scraper/extract");
 
     if (openGraphDataCache.has(url.toString())) return openGraphDataCache.get(url.toString());

src/services/settings/migrations.ts

@@ -27,14 +27,9 @@ export type AppSettingsV1 = Omit<AppSettingsV0, "version"> & {
   mutedWords?: string;
   maxPageWidth: "none" | "md" | "lg" | "xl";
 };
-export type AppSettingsV2 = Omit<AppSettingsV1, "version"> & {
+export type AppSettingsV2 = Omit<AppSettingsV1, "version"> & { version: 2; theme: string };
-  version: 2;
+export type AppSettingsV3 = Omit<AppSettingsV2, "version"> & { version: 3; quickReactions: string[] };
-  theme: string;
+export type AppSettingsV4 = Omit<AppSettingsV3, "version"> & { version: 4; loadOpenGraphData: boolean };
-};
-export type AppSettingsV3 = Omit<AppSettingsV2, "version"> & {
-  version: 3;
-  quickReactions: string[];
-};
 
 export function isV0(settings: { version: number }): settings is AppSettingsV0 {
   return settings.version === undefined || settings.version === 0;
@@ -48,17 +43,21 @@ export function isV2(settings: { version: number }): settings is AppSettingsV2 {
 export function isV3(settings: { version: number }): settings is AppSettingsV3 {
   return settings.version === 3;
 }
+export function isV4(settings: { version: number }): settings is AppSettingsV4 {
+  return settings.version === 4;
+}
 
-export type AppSettings = AppSettingsV3;
+export type AppSettings = AppSettingsV4;
 
 export const defaultSettings: AppSettings = {
-  version: 3,
+  version: 4,
   theme: "default",
   colorMode: "system",
   maxPageWidth: "none",
   blurImages: true,
   autoShowMedia: true,
   proxyUserMedia: false,
+  loadOpenGraphData: true,
   showReactions: true,
   showSignatureVerification: false,
 
@@ -77,10 +76,11 @@ export const defaultSettings: AppSettings = {
 };
 
 export function upgradeSettings(settings: { version: number }): AppSettings | null {
-  if (isV0(settings)) return { ...defaultSettings, ...settings, version: 3 };
+  if (isV0(settings)) return { ...defaultSettings, ...settings, version: 4 };
-  if (isV1(settings)) return { ...defaultSettings, ...settings, version: 3 };
+  if (isV1(settings)) return { ...defaultSettings, ...settings, version: 4 };
-  if (isV2(settings)) return { ...defaultSettings, ...settings, version: 3 };
+  if (isV2(settings)) return { ...defaultSettings, ...settings, version: 4 };
-  if (isV3(settings)) return settings;
+  if (isV3(settings)) return { ...defaultSettings, ...settings, version: 4 };
+  if (isV4(settings)) return settings;
   return null;
 }
 

src/views/settings/privacy-settings.tsx

@@ -12,6 +12,7 @@ import {
   Link,
   FormErrorMessage,
   Code,
+  Switch,
 } from "@chakra-ui/react";
 import { useFormContext } from "react-hook-form";
 import { safeUrl } from "../../helpers/parse";
@@ -148,6 +149,23 @@ export default function PrivacySettings() {
               <Code fontSize="0.9em">{`https://corsproxy.io/?<encoded_url>`}</Code> )
             </FormHelperText>
           </FormControl>
+          <FormControl>
+            <Flex alignItems="center">
+              <FormLabel htmlFor="loadOpenGraphData" mb="0">
+                Load Open Graph data
+              </FormLabel>
+              <Switch id="loadOpenGraphData" {...register("loadOpenGraphData")} />
+            </Flex>
+            <FormHelperText>
+              <span>
+                Whether to load{" "}
+                <Link href="https://ogp.me/" isExternal color="blue.500">
+                  Open Graph
+                </Link>{" "}
+                data for links
+              </span>
+            </FormHelperText>
+          </FormControl>
         </Flex>
       </AccordionPanel>
     </AccordionItem>