From 2738dd1db9f3935b3911e4fa985292d133e1e071 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Wed, 24 Aug 2022 20:03:23 -0400
Subject: [PATCH] Fix image in meta tags

---
 src/components/core/MetaTags.astro    | 16 +++++++++++-----
 src/utils/findImage.js                |  8 +++++---
 src/utils/getAllImages.js             | 13 +++++++++++++
 src/utils/getRelativeUrlByFilePath.js | 11 +++++++++++
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/getAllImages.js
 create mode 100644 src/utils/getRelativeUrlByFilePath.js

diff --git a/src/components/core/MetaTags.astro b/src/components/core/MetaTags.astro
index 8e5f1c6..59dc897 100644
--- a/src/components/core/MetaTags.astro
+++ b/src/components/core/MetaTags.astro
@@ -1,5 +1,6 @@
 ---
 import { getImage } from "@astrojs/image";
+import { getRelativeUrlByFilePath } from "~/utils/getRelativeUrlByFilePath";
 
 const { src: defaultImage } = await getImage({
   src: import("~/assets/images/default.png"),
@@ -10,11 +11,16 @@ const { src: defaultImage } = await getImage({
 const {
   title = "AstroWind",
   description = "",
-  image = defaultImage,
+  image: _image = defaultImage,
   canonical,
 } = Astro.props;
 
-const absoluteImageUrl = new URL(image, Astro.site);
+const image =
+  typeof _image === "string"
+    ? new URL(_image, Astro.site)
+    : typeof _image["src"] !== "undefined"
+    ? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
+    : null;
 ---
 
 <meta charset="UTF-8" />
@@ -28,21 +34,21 @@ const absoluteImageUrl = new URL(image, Astro.site);
 <!-- Google / Search Engine Tags -->
 <meta itemprop="name" content={title} />
 <meta itemprop="description" content={description} />
-<meta itemprop="image" content={absoluteImageUrl} />
+{image && <meta itemprop="image" content={image} />}
 
 <!-- Facebook Meta Tags -->
 {canonical && <meta property="og:url" content={canonical} />}
 <meta property="og:type" content="website" />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={absoluteImageUrl} />
+{image && <meta property="og:image" content={image} />}
 
 <!-- Twitter Meta Tags -->
 {canonical && <meta name="twitter:url" content={canonical} />}
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" content={absoluteImageUrl} />
+{image && <meta name="twitter:image" content={image} />}
 
 <!-- Fonts -->
 <link
diff --git a/src/utils/findImage.js b/src/utils/findImage.js
index ba102d2..f05c590 100644
--- a/src/utils/findImage.js
+++ b/src/utils/findImage.js
@@ -1,7 +1,9 @@
-export const findImage = async (imageRoute) => {
-  const images = import.meta.glob("../assets/images/*");
+import { getAllImages } from "~/utils/getAllImages";
 
-  const key = imageRoute.replace("~/", "../");
+export const findImage = async (imageRoute) => {
+  const images = await getAllImages();
+
+  const key = imageRoute.replace("~/", "/src/");
 
   const image =
     typeof imageRoute === "string" &&
diff --git a/src/utils/getAllImages.js b/src/utils/getAllImages.js
new file mode 100644
index 0000000..6654ae8
--- /dev/null
+++ b/src/utils/getAllImages.js
@@ -0,0 +1,13 @@
+const load = async function () {
+  const images = import.meta.glob("~/assets/images/*");
+
+  return images;
+};
+
+let _images;
+
+export const getAllImages = async () => {
+  _images = _images || load();
+
+  return await _images;
+};
diff --git a/src/utils/getRelativeUrlByFilePath.js b/src/utils/getRelativeUrlByFilePath.js
new file mode 100644
index 0000000..49b73c9
--- /dev/null
+++ b/src/utils/getRelativeUrlByFilePath.js
@@ -0,0 +1,11 @@
+import * as url from "url";
+
+const __src = url.fileURLToPath(new URL("../", import.meta.url));
+
+export const getRelativeUrlByFilePath = (filepath) => {
+  if (filepath) {
+    return "/" + filepath.substring(__src.length);
+  }
+
+  return null;
+};