修正

Author: BreadMotion

WebSite/assets/data/portfolioList.json

@@ -3,14 +3,11 @@
     "id": "portfolio_0003",
     "title": "Develop Utility",
     "date": "",
-    "category": "",
+    "category": "Tool",
     "role": "Full Stack Engineer",
     "description": "開発者用Discord Bot",
     "tech": "Javascript / discord.js",
-    "tags": [
-      "discord",
-      "bot"
-    ],
+    "tags": ["discord", "bot"],
     "thumbnail": "assets/img/ogp.png",
     "links": [],
     "contentPath": "portfolio/portfolio_0003.html"
@@ -19,34 +16,26 @@
     "id": "portfolio_0002",
     "title": "クマの逆転プロ野球",
     "date": "",
-    "category": "",
+    "category": "Game",
     "role": "Full Stack Engineer",
     "description": "カジュアル",
     "tech": "Unity / C#",
-    "tags": [
-      "game",
-      "ios",
-      "android"
-    ],
-    "thumbnail": "https://github.com/user-attachments/assets/f0314371-190f-43a0-981b-a94f501a2adc",
+    "tags": ["game", "ios", "android"],
+    "thumbnail": "assets/img/thumbnails/portfolio_0002.png",
     "links": [],
     "contentPath": "portfolio/portfolio_0002.html"
   },
   {
     "id": "portfolio_0001",
     "title": "霊迷の湯",
     "date": "",
-    "category": "",
+    "category": "Game",
     "role": "Full Stack Engineer",
     "description": "８番ライクホラー",
     "tech": "Unity / C#",
-    "tags": [
-      "game",
-      "steam",
-      "pc"
-    ],
-    "thumbnail": "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2806350/header_japanese.jpg?t=1710480483",
+    "tags": ["game", "steam", "pc"],
+    "thumbnail": "assets/img/thumbnails/portfolio_0001.jpg",
     "links": [],
     "contentPath": "portfolio/portfolio_0001.html"
   }
-]
+]

WebSite/assets/data/products.json

@@ -2,7 +2,7 @@
   {
     "id": "product_0001",
     "title": "Develop Utility",
-    "type": "Discord",
+    "type": "Tool",
     "platform": ["Android", "iOS", "PC<Client, Browser>"],
     "description": "PanKUNがDiscordで開発コミュニケーションを扱う際に使用するボット",
     "tags": ["tool", "discord", "bot"],

WebSite/assets/img/thumbnails/portfolio_0001.jpg

@@ -225,9 +225,11 @@ document.addEventListener("DOMContentLoaded", () => {
         if (isEn) {
           return {
             ...work,
-            thumbnail: work.thumbnail
-              ? `${relativePrefix}${work.thumbnail}`
-              : work.thumbnail,
+            thumbnail:
+              work.thumbnail &&
+              !work.thumbnail.startsWith("http")
+                ? `${relativePrefix}${work.thumbnail}`
+                : work.thumbnail,
             contentPath: work.contentPath
               ? `${relativePrefix}${work.contentPath}`
               : work.contentPath,

WebSite/assets/img/thumbnails/portfolio_0002.png

@@ -28,7 +28,11 @@ document.addEventListener("DOMContentLoaded", () => {
       const rawProducts = await res.json();
 
       allProducts = rawProducts.map((p) => {
-        if (isEn && p.thumbnail) {
+        if (
+          isEn &&
+          p.thumbnail &&
+          !p.thumbnail.startsWith("http")
+        ) {
           return {
             ...p,
             thumbnail: `${relativePrefix}${p.thumbnail}`,

WebSite/assets/js/portfolio.js

@@ -11,9 +11,17 @@ document.addEventListener("DOMContentLoaded", async () => {
     window.location.pathname.includes("/blog/") &&
     !window.location.pathname.endsWith("blog.html");
 
-  let basePath = isBlogDir ? "../" : "";
-  if (isBlogDir && isEn) {
-    basePath = "../../";
+  let basePath = "";
+  if (isBlogDir) {
+    // ブログ詳細ページなど (/blog/xxx.html)
+    // 日本語: /WebSite/blog/xxx.html -> ../assets/...
+    // 英語: /WebSite/en/blog/xxx.html -> ../../assets/...
+    basePath = isEn ? "../../" : "../";
+  } else {
+    // 一覧ページやトップページ
+    // 日本語: /WebSite/index.html -> assets/...
+    // 英語: /WebSite/en/index.html -> ../assets/...
+    basePath = isEn ? "../" : "";
   }
 
   // データパス

WebSite/assets/js/products.js

@@ -20,10 +20,14 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   if (!blogListEl && !portListEl && !slideshowEl) return;
 
+  const lang = document.documentElement.lang;
+  const isEn = lang === "en";
+  const relativePrefix = isEn ? "../" : "";
+
   if (slideshowEl) {
     try {
       const res = await fetch(
-        "assets/data/portfolioList.json",
+        `${relativePrefix}assets/data/portfolioList.json`,
       );
       if (res.ok) {
         let items = await res.json();
@@ -41,7 +45,17 @@ document.addEventListener("DOMContentLoaded", async () => {
             const item = items[currentIndex];
             const slide = document.createElement("div");
             slide.className = "hero-slide";
-            slide.style.backgroundImage = `url('${item.thumbnail}')`;
+
+            let thumbUrl = item.thumbnail;
+            if (
+              isEn &&
+              thumbUrl &&
+              !thumbUrl.startsWith("http")
+            ) {
+              thumbUrl = relativePrefix + thumbUrl;
+            }
+
+            slide.style.backgroundImage = `url('${thumbUrl}')`;
 
             slideshowEl.appendChild(slide);
 
@@ -74,7 +88,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   if (blogListEl) {
     try {
-      const res = await fetch("assets/data/blogList.json");
+      const res = await fetch(
+        `${relativePrefix}assets/data/blogList.json`,
+      );
       if (!res.ok) throw new Error(res.statusText);
       const posts = await res.json();
 
@@ -126,7 +142,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   if (portListEl) {
     try {
       const res = await fetch(
-        "assets/data/portfolioList.json",
+        `${relativePrefix}assets/data/portfolioList.json`,
       );
       if (!res.ok) throw new Error(res.statusText);
       const works = await res.json();

WebSite/assets/js/recommend.js

@@ -15,6 +15,13 @@ const LIST_JSON = path.join(
   "portfolioList.json",
 );
 
+const THUMBNAIL_DIR = path.join(
+  ROOT,
+  "assets",
+  "img",
+  "thumbnails",
+);
+
 function escapeHtml(str = "") {
   return String(str).replace(/[&<>"]/g, (c) => {
     return {
@@ -145,12 +152,17 @@ ${bodyHtml}
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
   }
 
+  if (!fs.existsSync(THUMBNAIL_DIR)) {
+    fs.mkdirSync(THUMBNAIL_DIR, { recursive: true });
+  }
+
   const works = [];
   const files = fs.existsSync(CONTENT_DIR)
     ? fs
         .readdirSync(CONTENT_DIR)
         .filter((f) => f.endsWith(".md"))
     : [];
+  const usedThumbnails = new Set();
 
   for (const file of files) {
     const id = path.basename(file, ".md"); // work_0001 など
@@ -166,7 +178,72 @@ ${bodyHtml}
     const category = data.category || "";
     const role = data.role || "";
     const tech = data.tech || "";
-    const thumbnail = data.thumbnail || "";
+    let thumbnail = data.thumbnail || "";
+
+    if (thumbnail) {
+      try {
+        if (thumbnail.startsWith("data:image")) {
+          const matches = thumbnail.match(
+            /^data:image\/([a-zA-Z0-9]+);base64,(.+)$/,
+          );
+          if (matches) {
+            const ext =
+              matches[1] === "jpeg" ? "jpg" : matches[1];
+            const filename = `${id}.${ext}`;
+            const thumbPath = path.join(
+              THUMBNAIL_DIR,
+              filename,
+            );
+            fs.writeFileSync(
+              thumbPath,
+              Buffer.from(matches[2], "base64"),
+            );
+            thumbnail = `assets/img/thumbnails/${filename}`;
+            usedThumbnails.add(filename);
+          }
+        } else if (thumbnail.startsWith("http")) {
+          const urlObj = new URL(thumbnail);
+          let ext = path
+            .extname(urlObj.pathname)
+            .substring(1);
+          if (!ext) ext = "png";
+
+          const filename = `${id}.${ext}`;
+          const thumbPath = path.join(
+            THUMBNAIL_DIR,
+            filename,
+          );
+
+          console.log(
+            `Downloading thumbnail for ${id} from ${thumbnail}`,
+          );
+          const res = await fetch(thumbnail);
+          if (res.ok) {
+            const buffer = Buffer.from(
+              await res.arrayBuffer(),
+            );
+            fs.writeFileSync(thumbPath, buffer);
+            thumbnail = `assets/img/thumbnails/${filename}`;
+            usedThumbnails.add(filename);
+          } else {
+            console.error(
+              `Failed to fetch thumbnail for ${id}: ${res.statusText}`,
+            );
+          }
+        } else if (
+          thumbnail.includes("assets/img/thumbnails/")
+        ) {
+          const filename = path.basename(thumbnail);
+          usedThumbnails.add(filename);
+        }
+      } catch (e) {
+        console.error(
+          `Failed to process thumbnail for ${id}:`,
+          e,
+        );
+      }
+    }
+
     const tagsRaw = data.tags || [];
     const tags = Array.isArray(tagsRaw)
       ? tagsRaw
@@ -226,6 +303,20 @@ ${bodyHtml}
     "utf8",
   );
   console.log(`updated: assets/data/portfolioList.json`);
+
+  // Clean up unused portfolio thumbnails
+  if (fs.existsSync(THUMBNAIL_DIR)) {
+    const allThumbnails = fs.readdirSync(THUMBNAIL_DIR);
+    for (const file of allThumbnails) {
+      if (
+        file.startsWith("portfolio_") &&
+        !usedThumbnails.has(file)
+      ) {
+        console.log(`Removing unused thumbnail: ${file}`);
+        fs.unlinkSync(path.join(THUMBNAIL_DIR, file));
+      }
+    }
+  }
 })().catch((err) => {
   console.error(err);
   process.exit(1);