text highlight and og image

app/layout.tsx

@@ -1,9 +1,12 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ogDefault } from "@/lib/og";
 import { ThemeProvider } from "@/components/theme-provider";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { SiteFooter } from "@/components/site-footer";
 import { TextSelectionToolbar } from "@/components/text-selection-toolbar";
+import { TextHighlighter } from "@/components/text-highlighter";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -20,6 +23,7 @@ export const metadata: Metadata = {
   title: "Prabhupāda Says",
   description:
     "Browse the books and teachings of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda",
+  ...ogDefault(),
 };
 
 export default function RootLayout({
@@ -43,6 +47,9 @@ export default function RootLayout({
           <TooltipProvider>
             {children}
             <TextSelectionToolbar />
+            <Suspense fallback={null}>
+              <TextHighlighter />
+            </Suspense>
             <SiteFooter />
           </TooltipProvider>
         </ThemeProvider>