- TRip: various ui/ux enhancements

- other minor changes

src/components/BaseHead.astro

@@ -11,34 +11,50 @@ import { JoyUIRootIsland } from "./Components"
 import { useHtmlThemeAttr } from "../hooks/useHtmlThemeAttr"; 
 import { usePrimeReactThemeSwitcher } from "../hooks/usePrimeReactThemeSwitcher";
 
-const { title, description = metaData.description, image } = Astro.props;
+const { title, description, image } = Astro.props;
 
-const { url, site } = Astro;
+const { url } = Astro;
+
+const shareTitle = title ? `${title} | ${metaData.title}` : metaData.shareTitle ?? metaData.title;
+const shareDescription = description ?? metaData.shareDescription ?? metaData.description;
+const canonicalUrl = url?.href ?? metaData.baseUrl;
+const shareImage = new URL(image ?? metaData.ogImage, metaData.baseUrl).toString();
+const shareImageAlt = metaData.shareImageAlt ?? metaData.shareTitle ?? metaData.title;
 
 ---
 
 <SEO
-  title={title}
+  title={shareTitle}
   titleTemplate=`%s | ${metaData.title}`
   titleDefault={metaData.title}
-  description={description}
+  description={shareDescription}
   charset="UTF-8"
   openGraph={{
     basic: {
-      title: title || metaData.title,
+      title: shareTitle,
       type: "website",
-      image: "",
-      url: url,
+      image: shareImage,
+      url: canonicalUrl,
     },
     optional: {
-      description,
-      siteName: "codey.lol",
+      description: shareDescription,
+      siteName: metaData.name,
       locale: "en_US",
     },
   }}
   extend={{
-    // extending the default link tags
-    link: [{ rel: "icon", href: "https://codey.lol/images/favicon.png" }],
+    link: [
+      { rel: "icon", href: "https://codey.lol/images/favicon.png" },
+      { rel: "canonical", href: canonicalUrl },
+    ],
+    meta: [
+      { property: "og:image:alt", content: shareImageAlt },
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:title", content: shareTitle },
+      { name: "twitter:description", content: shareDescription },
+      { name: "twitter:image", content: shareImage },
+      { name: "twitter:image:alt", content: shareImageAlt },
+    ],
   }}
 />