0227637 | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

0227637 — pyrossh 2025-11-23T15:43:18+05:30

update file icons

Generated files not shown: bun.lock

Files changed (6) hide show

package.json +4 -2
src/components/RecursiveList.astro +14 -4
src/layouts/FileLayout.astro +13 -7
src/pages/repos/[...repoId]/files/[...file]/index.astro +9 -11
src/utils/commit.ts +5 -1
src/utils/files.ts +33 -1

package.json CHANGED Viewed

@@ -28,16 +28,18 @@
     "timeago.js": "^4.0.2"
   },
   "devDependencies": {
-    "@types/bun": "^1.3.2",
     "@astrojs/rss": "^4.0.12",
     "@astrojs/sitemap": "^3.4.1",
     "@aws-sdk/client-s3": "^3.932.0",
     "@aws-sdk/client-sts": "^3.932.0",
     "@iconify-json/material-symbols": "^1.2.39",
     "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/vscode-icons": "^1.2.36",
     "@playwright/test": "^1.52.0",
     "@tauri-apps/cli": "^2.9.1",
+    "@types/bun": "^1.3.2",
     "alchemy": "^0.77.5",
-    "diff2html": "^3.4.52"
+    "diff2html": "^3.4.52",
+    "vscode-icons": "https://github.com/vscode-icons/vscode-icons.git"
   }
 }

src/components/RecursiveList.astro CHANGED Viewed

@@ -1,15 +1,17 @@
 ---
 import { Icon } from "astro-icon/components";
+import allIcons from "@iconify-json/vscode-icons/icons.json" assert { type: "json" };
 import prettyBytes from "pretty-bytes";
+import { resolveFileIcon } from "@/utils/files";
 interface FileNode {
   name: string;
   path: string;
   isDirectory: boolean;
+  size: number;
+  ext: string;
+  absolutePath: string;
   children?: FileNode[];
-  size?: number;
-  ext?: string;
-  absolutePath?: string;
 }
 interface Props {
@@ -46,11 +48,19 @@ const { items, repoId, depth = 0 } = Astro.props;
         </li>
       );
     } else {
+      const iconName = resolveFileIcon(item.name, item.ext);
+      const fileType = allIcons.icons[`file-type-${iconName}`]
+        ? `file-type-${iconName}`
+        : "default-file";
       return (
         <li class="file" style={`padding-left: ${depth * 1}rem;`}>
           <div class="file-content">
             <div class="file-name">
+              <Icon
+                name={`vscode-icons:${fileType}`}
+                size="24px"
-              <Icon name="mdi:file" size="24px" color="hsl(0deg 75% 75%)" />
+                color="hsl(0deg 75% 75%)"
+              />
               <a href={`/repos/${repoId}/files/${item.path}`} rel="nofollow">
                 {item.name}
               </a>

src/layouts/FileLayout.astro CHANGED Viewed

@@ -1,8 +1,9 @@
 ---
 import { Icon } from "astro-icon/components";
 import { type CollectionEntry } from "astro:content";
+import allIcons from "@iconify-json/vscode-icons/icons.json" assert { type: "json" };
 import RepoLayout from "@/layouts/RepoLayout.astro";
-import type { FileNode } from "@/utils/files";
+import { resolveFileIcon, type FileNode } from "@/utils/files";
 type Props = {
   repo: CollectionEntry<"repos">;
@@ -11,6 +12,10 @@ type Props = {
 const { repo, file } = Astro.props;
 const { pathname } = Astro.url;
+const iconName = resolveFileIcon(file.name, file.ext);
+const fileType = allIcons.icons[`file-type-${iconName}`]
+  ? `file-type-${iconName}`
+  : "default-file";
 ---
 <RepoLayout repo={repo}>
@@ -19,8 +24,11 @@ const { pathname } = Astro.url;
       <div>
         <hr />
         <div class="title">
+          <Icon
+            name={`vscode-icons:${fileType}`}
+            size="24px"
-          <span>file:</span>
+            color="hsl(0deg 75% 75%)"
-          <Icon name="mdi:file" size="24px" color="hsl(0deg 75% 75%)" />
+          />
           <h3>{file.name}</h3>
         </div>
         <hr />
@@ -106,11 +114,9 @@ const { pathname } = Astro.url;
     font-size: 1.1rem;
     font-weight: 500;
   }
-  span {
+  svg[data-icon] {
     font-weight: 600;
     margin-right: 4px;
   }
-  h3 {
-    text-decoration: underline;
-  }
 </style>

src/pages/repos/[...repoId]/files/[...file]/index.astro CHANGED Viewed

@@ -1,6 +1,5 @@
 ---
 import fs from "fs/promises";
-import path from "path";
 import { type CollectionEntry, getCollection } from "astro:content";
 import { Code } from "astro-expressive-code/components";
 import FileLayout from "@/layouts/FileLayout.astro";
@@ -12,15 +11,15 @@ export async function getStaticPaths() {
   const routes = [];
   for (const repo of repos) {
     const files = await getFiles(repo.data.absolutePath);
+    for (const file of files) {
-    routes.push(
+      routes.push({
-      ...files.map((file) => ( {
         params: { repoId: repo.id, file: file.name },
         props: {
           repo: repo,
           file: file,
         },
-      }))
+      });
-    );
+    }
   }
   return routes;
 }
@@ -32,8 +31,7 @@ type Props = {
 const { repo, file } = Astro.props;
 const contentBuffer = await fs.readFile(file.absolutePath);
-const ext = path.extname(file.name).replace(".", "");
-const isBinary = ["apk", "dex", "ap_", "jar", "fnt"].includes(ext);
+const isBinary = ["apk", "dex", "ap_", "jar", "fnt"].includes(file.ext);
 const isLarge = file.size > 1024 * 512; // 512KB
 const isImage = [
   "png",
@@ -46,7 +44,7 @@ const isImage = [
   "icns",
   "curve",
   "atlas",
-].includes(ext);
+].includes(file.ext);
 ---
 <FileLayout repo={repo} file={file}>
@@ -56,7 +54,7 @@ const isImage = [
         <p>The file is too large to be displayed ({file.size} bytes).</p>
       ) : isImage ? (
         <img
-          src={`data:image/${ext};base64,${Buffer.from(contentBuffer).toString("base64")}`}
+          src={`data:image/${file.ext};base64,${Buffer.from(contentBuffer).toString("base64")}`}
           alt={file.path}
         />
       ) : (
@@ -65,10 +63,10 @@ const isImage = [
             Buffer.from(contentBuffer).toString("utf-8") ||
             "No content to display."
           }
-          lang={ext || "txt"}
+          lang={file.ext || "txt"}
           wrap
         />
       )
     }
   </div>
-</FileLayout>
+</FileLayout>

src/utils/commit.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import Diff2html from "diff2html";
 import fs from "fs/promises";
+import path from "path";
 import { simpleGit } from "simple-git";
 import { type FileNode } from "./files";
@@ -38,10 +39,13 @@ export const getFiles = async (repoPath: string): Promise<FileNode[]> => {
   for (const p of paths.split("\n").filter((p) => p.length > 0)) {
     try {
       const stat = await fs.stat(`${repoPath}/${p}`);
+      const ext = path.extname(p).replace(".", "");
       files.push({
         name: p,
+        ext,
+        size: stat.size,
+        isDirectory: stat.isDirectory(),
         absolutePath: `${repoPath}/${p}`,
-        ...stat,
       })
     } catch (e) {
       // Ignore files not found

src/utils/files.ts CHANGED Viewed

@@ -1,4 +1,6 @@
 import fs from "fs/promises";
+import { extensions as folderExtensions } from "vscode-icons/src/iconsManifest/supportedFolders.ts";
+import { extensions as fileExtensions } from "vscode-icons/src/iconsManifest/supportedExtensions.ts";
 export interface FileNode {
   name: string;
@@ -73,4 +75,34 @@ export const checkFileExists = async (filePath: string) => {
   } catch (error) {
     return false; // File does not exist or cannot be accessed
   }
-}
+}
+export const resolveFolderIcon = (foldername: string) => {
+  for (const item of folderExtensions.supported) {
+    if (item.extensions?.includes(foldername)) {
+      return item.icon;
+    }
+  }
+  return folderExtensions.default.folder?.icon;
+}
+export const resolveFileIcon = (filename: string, fileExt: string) => {
+  for (const item of fileExtensions.supported) {
+    if (item.filename && item.extensions?.includes(filename)) {
+      return item.icon;
+    }
+  }
+  for (const item of fileExtensions.supported) {
+    if (item.extensions?.includes(fileExt)) {
+      return item.icon;
+    }
+    for (const lang of item.languages ?? []) {
+      if (lang?.knownExtensions?.includes(fileExt)) {
+        return item.icon;
+      }
+    }
+  }
+  return fileExtensions.default.file?.icon;
+}
+console.log(resolveFileIcon('examples/public/index.html', 'html'));