Update open graph metadata for Readest WebApp

2024-12-06 22:44:57 +01:00
parent 53db2777af
commit bdf619f2e6
5 changed files with 46 additions and 30 deletions
@@ -1,46 +1,36 @@
-'use client';
-
 import * as React from 'react';
-import { usePathname } from 'next/navigation';
 import { AuthProvider } from '@/context/AuthContext';
 import { EnvProvider } from '@/context/EnvContext';
 import { CSPostHogProvider } from '@/context/PHContext';
-import { useTheme } from '@/hooks/useTheme';
-import { isTauriAppPlatform } from '@/services/environment';
-import { checkForAppUpdates } from '@/helpers/updater';

 import '../styles/globals.css';
 import '../styles/fonts.css';

+const url = 'https://web.readest.com/';
+const title = 'Readest — Where You Read, Digest and Get Insight';
+const description = 'Readest brings your entire library to your fingertips.';
+const previewImage = 'https://cdn.readest.com/images/open_graph_preview_read_now.png';
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  useTheme();
-  const pathname = usePathname();
-  React.useEffect(() => {
-    document.documentElement.setAttribute('data-page', pathname.replace('/', '') || 'default');
-  }, [pathname]);
-
-  React.useEffect(() => {
-    const doAppUpdates = async () => {
-      if (isTauriAppPlatform()) {
-        await checkForAppUpdates();
-      }
-    };
-    doAppUpdates();
-  }, []);
-
-  React.useEffect(() => {
-    // TODO: disabled for now
-    // if (process.env['NODE_ENV'] === 'production') {
-    //   document.oncontextmenu = (event) => {
-    //     event.preventDefault();
-    //   };
-    // }
-  }, []);
-
  return (
    <html lang='en'>
      <head>
+        <title>{title}</title>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
+        <link rel='icon' href='/favicon.ico' />
+        <meta name='description' content={description} />
+        <meta property='og:url' content={url} />
+        <meta property='og:type' content='website' />
+        <meta property='og:title' content={title} />
+        <meta property='og:description' content={description} />
+        <meta property='og:image' content={previewImage} />
+        <meta name='twitter:card' content='summary_large_image' />
+        <meta property='twitter:domain' content='web.readest.com' />
+        <meta property='twitter:url' content={url} />
+        <meta name='twitter:title' content={title} />
+        <meta name='twitter:description' content={description} />
+        <meta name='twitter:image' content={previewImage} />
      </head>
      <CSPostHogProvider>
        <body>
@@ -9,9 +9,11 @@ import { AppService } from '@/types/system';
 import { navigateToReader } from '@/utils/nav';
 import { parseOpenWithFiles } from '@/helpers/cli';
 import { isTauriAppPlatform } from '@/services/environment';
+import { checkForAppUpdates } from '@/helpers/updater';
 import { FILE_ACCEPT_FORMATS, SUPPORTED_FILE_EXTS } from '@/services/constants';

 import { useEnv } from '@/context/EnvContext';
+import { useTheme } from '@/hooks/useTheme';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';

@@ -28,12 +30,22 @@ const LibraryPage = () => {
    checkOpenWithBooks,
    clearOpenWithBooks,
  } = useLibraryStore();
+  useTheme();
  const { setSettings } = useSettingsStore();
  const [loading, setLoading] = useState(false);
  const isInitiating = useRef(false);
  const [libraryLoaded, setLibraryLoaded] = useState(false);
  const [isSelectMode, setIsSelectMode] = useState(false);

+  React.useEffect(() => {
+    const doAppUpdates = async () => {
+      if (isTauriAppPlatform()) {
+        await checkForAppUpdates();
+      }
+    };
+    doAppUpdates();
+  }, []);
+
  const processOpenWithFiles = React.useCallback(
    async (appService: AppService, openWithFiles: string[], libraryBooks: Book[]) => {
      const bookIds: string[] = [];
@@ -1,7 +1,21 @@
 'use client';

+import { useEffect } from 'react';
+import { useTheme } from '@/hooks/useTheme';
+import { isTauriAppPlatform } from '@/services/environment';
+import { checkForAppUpdates } from '@/helpers/updater';
 import Reader from './components/Reader';

 export default function Page() {
+  useTheme();
+  useEffect(() => {
+    const doAppUpdates = async () => {
+      if (isTauriAppPlatform()) {
+        await checkForAppUpdates();
+      }
+    };
+    doAppUpdates();
+  }, []);
+
  return <Reader />;
 }