hotfix for article image 404 (#31)

Author: Kuinox

src/app/blog/[articleName]/page.tsx

@@ -8,11 +8,13 @@ import { Metadata } from "next";
 import sharp from "sharp";
 import { promises as fs } from "fs";
 import ArticleNameParams from "@/utils/ArticleNameParams";
+import path from "path";
 
 export async function generateStaticParams() {
   const articles = await getBlogArticles();
   return articles.map((article) => ({
-    articleName: article.path,
+    // get filename without extension from path
+    articleName: encodeURIComponent(path.basename(path.dirname(article.path))),
   }));
 }
 
@@ -25,7 +27,7 @@ export async function generateMetadata({ params }: ArticleNameParams): Promise<M
   }
 
   const articles = await getBlogArticles();
-  const article = articles.find((article) => article.path === articleName)!;
+  const article = articles.find((article) => path.basename(path.dirname(article.path)) === articleName)!;
   if (article.image !== undefined) {
     const filePath = `./public${article.image}`;
     const svgBuffer = await fs.readFile(filePath);
@@ -57,7 +59,7 @@ export default async function Page({ params }: ArticleNameParams) {
   }
 
   const articles = await getBlogArticles();
-  const article = articles.find((article) => article.path === articleName)!;
+  const article = articles.find((article) => path.basename(path.dirname(article.path)) === articleName)!;
   articles.sort((a, b) => (a.date > b.date ? -1 : 1));
   const articleIndex = articles.indexOf(article);
   const previousArticle = articles[articleIndex + 1];
@@ -103,7 +105,7 @@ export default async function Page({ params }: ArticleNameParams) {
         )}
       </div>
 
-      <Article markdown={article.markdown} />
+      <Article markdown={article.markdown} markdownFilePath={article.path} />
       <div className="article-footer">
         <div className="footer-oldnew">
           {previousArticle === undefined ? (

src/app/specs/[articleName]/page.tsx

@@ -15,7 +15,7 @@ export default async function Page({ params }: ArticleNameParams) {
   const spec = specs.find((spec) => spec.name === articleName)!;
   return (
     <div className={`article-${articleName}`}>
-      <Article markdown={spec.markdown} />
+      <Article markdown={spec.markdown} markdownFilePath={null} />
       <style>
         {`
           @media (max-width: 650px) {

src/app/specs/page.tsx

@@ -7,7 +7,7 @@ export default async function Page() {
   const intro = articles.find((article) => article.name === "Introduction")!;
   return (
     <>
-      <Article markdown={intro.markdown} className="article-Introduction" />
+      <Article markdown={intro.markdown} markdownFilePath={null} className="article-Introduction" />
       <style>
         {`
       @media (max-width: 650px) {

src/components/Article.tsx

@@ -4,9 +4,9 @@ import "./Article.css";
 import { HTMLProps } from "react";
 import TableOfContentScrollEffect from "./TableOfContentScrollEffect";
 import "highlight.js/styles/atom-one-dark.css";
-
-export default async function Article(params: HTMLProps<HTMLDivElement> & { markdown: string }) {
-  const { markdown, className, ...restProps } = params;
+import path from "path";
+export default function Article(params: HTMLProps<HTMLDivElement> & { markdown: string, markdownFilePath: string|null}) {
+  const { markdown, className, markdownFilePath, ...restProps } = params;
   const headingsMapPoc = {};
   const headingsMapArticle = {};
   const html = marked(markdown, {
@@ -77,6 +77,12 @@ export default async function Article(params: HTMLProps<HTMLDivElement> & { mark
       const str = `<a href="#${hashName}" class="not-a-link"> <h${level} id="${hashName}" class="article-heading heading-${hashName}">${text}</h${level}> </a>`;
       return str;
     };
+    renderer.image = (href, title) => {
+      if (markdownFilePath === null) return `<img src="${href}" title="${title || ''}" />`;
+      const markdownDir = markdownFilePath.substring(0, markdownFilePath.lastIndexOf('/'));
+      const resolvedPath = path.join(path.relative('blog/', markdownDir),href);
+      return `<img src="${resolvedPath}" title="${title || ''}" />`;
+    };
     return renderer;
   }
 

src/utils/blog.ts

@@ -19,7 +19,8 @@ export interface BlogArticle {
 export async function getBlogArticles(): Promise<BlogArticle[]> {
     // list directories in /blog
     // for each directory, read the markdown file article.md
-    const dir = await fs.promises.opendir(path.join(process.cwd(), "public/blog"));
+    const publicDir = path.join(process.cwd(), "public");
+    const dir = await fs.promises.opendir(path.join(publicDir, "blog"));
     const articles: BlogArticle[] = [];
     for await (const dirEntry of dir) {
         if (dirEntry.isDirectory()) {
@@ -53,6 +54,8 @@ export async function getBlogArticles(): Promise<BlogArticle[]> {
             if (attributes.authors !== undefined && !Array.isArray(attributes.authors)) {
                 attributes.authors = [attributes.authors];
             }
+            // blogPath relative to public
+            const blogPath = path.relative(publicDir, articlePath).replace(/\\/g, "/");
 
             articles.push({
                 title: attributes.title ?? "Untitled",
@@ -64,7 +67,7 @@ export async function getBlogArticles(): Promise<BlogArticle[]> {
                 image: attributes.image,
                 imageMargin: attributes.imageMargin,
                 imageHeight: attributes.imageHeight,
-                path: encodeURIComponent(dirEntry.name),
+                path: blogPath,
                 makeSocialEmbedBig: attributes.makeSocialEmbedBig ?? false,
             });
         }