Fix image in meta and other details

astro.config.mjs

@@ -1,4 +1,6 @@
-import * as url from "url";
+import path from "path";
+import { fileURLToPath } from "url";
+
 import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
@@ -7,7 +9,7 @@ import image from "@astrojs/image";
 
 import { SITE } from "./src/config.mjs";
 
-const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // https://astro.build/config
 export default defineConfig({
@@ -30,7 +32,7 @@ export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        "~/": `${__dirname}src/`,
+        "~": path.resolve(__dirname, "./src"),
       },
     },
   },

src/components/core/MetaTags.astro

@@ -18,7 +18,7 @@ const {
 const image =
   typeof _image === "string"
     ? new URL(_image, Astro.site)
-    : typeof _image["src"] !== "undefined"
+    : _image && typeof _image["src"] !== "undefined"
     ? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
     : null;
 ---

src/components/core/Picture.astro

@@ -16,7 +16,7 @@ const {
 
 let picture = null;
 try {
-  picture = await getPicture({
+  picture = src && await getPicture({
     src,
     widths,
     formats,
@@ -24,7 +24,6 @@ try {
   })
 }
 catch (e) {
-  console.log(e);
 }
 
 const { image = {}, sources = [] } = picture || {}

src/components/widgets/BlogPost.astro

@@ -24,14 +24,18 @@ const { post } = Astro.props;
         {post.title}
       </h1>
 
-      <Picture
+      {
-        src={post.image}
+        post.image && (
-        class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+          <Picture
-        widths={[400, 768, 900]}
+            src={post.image}
-        sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
+            class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
-        alt={post.description}
+            widths={[400, 900]}
-        aspectRatio="16:9"
+            sizes="(max-width: 900px) 400px, 900px"
-      />
+            alt={post.description}
+            aspectRatio="16:9"
+          />
+        )
+      }
     </header>
     <div
       class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"

src/components/widgets/HighlightedPosts.astro

@@ -25,8 +25,7 @@ const {} = Astro.props;
       <Picture
         src={import("~/assets/images/steps.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-        widths={[400, 768]}
+        widths={[400]}
-        sizes="(max-width: 767px) 400px, 768px"
         alt="Post 2 Image"
         aspectRatio="16:9"
       />
@@ -49,8 +48,7 @@ const {} = Astro.props;
       <Picture
         src={import("~/assets/images/colors.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-        widths={[400, 768]}
+        widths={[400]}
-        sizes="(max-width: 767px) 400px, 768px"
         alt="Post 1 Image"
         aspectRatio="16:9"
       />
@@ -72,8 +70,7 @@ const {} = Astro.props;
       <Picture
         src={import("~/assets/images/tools.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-        widths={[400, 768]}
+        widths={[400]}
-        sizes="(max-width: 767px) 400px, 768px"
         alt="Post 3 Image"
         aspectRatio="16:9"
       />
@@ -95,8 +92,7 @@ const {} = Astro.props;
       <Picture
         src={import("~/assets/images/hero.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-        widths={[400, 768]}
+        widths={[400]}
-        sizes="(max-width: 767px) 400px, 768px"
         alt="Post 2 Image"
         aspectRatio="16:9"
       />

src/pages/blog/[...page].astro

@@ -2,12 +2,12 @@
 import Layout from "~/layouts/PageLayout.astro";
 
 import { SITE } from "~/config.mjs";
-import { getPosts } from "~/utils/getPosts";
+import { fetchPosts } from "~/utils/fetchPosts";
 
 import BlogList from "~/components/widgets/BlogList.astro";
 
 export async function getStaticPaths({ paginate }) {
-  const posts = await getPosts();
+  const posts = await fetchPosts();
 
   return paginate(posts, {
     pageSize: SITE.postsPerPage,

src/pages/blog/[slug].astro

@@ -1,13 +1,13 @@
 ---
 import { SITE } from "~/config.mjs";
-import { getPosts } from "~/utils/getPosts";
+import { fetchPosts } from "~/utils/fetchPosts";
 import { findImage } from "~/utils/findImage";
 
 import Layout from "~/layouts/PageLayout.astro";
 import BlogPost from "~/components/widgets/BlogPost.astro";
 
 export async function getStaticPaths() {
-  const posts = await getPosts();
+  const posts = await fetchPosts();
 
   return posts.map((post) => ({
     params: { slug: post.slug },

src/pages/rss.xml.js

@@ -1,9 +1,9 @@
 import rss from "@astrojs/rss";
 
 import { SITE } from "~/config.mjs";
-import { getPosts } from "~/utils/getPosts";
+import { fetchPosts } from "~/utils/fetchPosts";
 
-const posts = await getPosts();
+const posts = await fetchPosts();
 
 export const get = () =>
   rss({

src/utils/fetchPosts.js

@@ -18,7 +18,7 @@ const load = async function () {
 
 let _posts;
 
-export const getPosts = async () => {
+export const fetchPosts = async () => {
   _posts = _posts || load();
 
   return await _posts;

src/utils/findImage.js

@@ -1,19 +1,22 @@
 import { getAllImages } from "~/utils/getAllImages";
 
-export const findImage = async (imageRoute) => {
+export const findImage = async (imagePath) => {
+  if (typeof imagePath !== "string") {
+    return null;
+  }
+
+  if (imagePath.startsWith("http://") || imagePath.startsWith("https://")) {
+    return imagePath;
+  }
+
+  if (!imagePath.startsWith("~/assets")) {
+    return null;
+  } // For now only consume images using ~/assets alias (or absolute)
+
   const images = await getAllImages();
+  const key = imagePath.replace("~/", "/src/");
 
-  const key = imageRoute.replace("~/", "/src/");
+  return typeof images[key] === "function"
-
+    ? (await images[key]())["default"]
-  const image =
+    : null;
-    typeof imageRoute === "string" &&
-    (imageRoute.startsWith("/") ||
-      imageRoute.startsWith("http://") ||
-      imageRoute.startsWith("https://"))
-      ? imageRoute
-      : typeof images[key] === "function"
-      ? (await images[key]())["default"]
-      : null;
-
-  return image;
 };

src/utils/getAllImages.js

@@ -1,6 +1,8 @@
 const load = async function () {
-  const images = import.meta.glob("~/assets/images/*");
+  let images = [];
-
+  try {
+    images = import.meta.glob("~/assets/images/*");
+  } catch (e) {}
   return images;
 };
 
@@ -8,6 +10,5 @@ let _images;
 
 export const getAllImages = async () => {
   _images = _images || load();
-
   return await _images;
 };

src/utils/getProjectRootDir.js

@@ -0,0 +1,12 @@
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export const getProjectRootDir = () => {
+  const mode = import.meta.env.MODE;
+
+  return mode === "production"
+    ? path.join(__dirname, "../")
+    : path.join(__dirname, "../../");
+};

src/utils/getRelativeUrlByFilePath.js

@@ -1,10 +1,11 @@
-import * as url from "url";
+import path from "path";
+import { getProjectRootDir } from "./getProjectRootDir";
 
-const __src = url.fileURLToPath(new URL("../", import.meta.url));
+const __srcFolder = path.join(getProjectRootDir(), "/src");
 
 export const getRelativeUrlByFilePath = (filepath) => {
   if (filepath) {
-    return "/" + filepath.substring(__src.length);
+    return filepath.replace(__srcFolder, "");
   }
 
   return null;