feat: file icon for references, wrap at / (FabricMC#542)

Author: its-miroma

.vitepress/theme/components/References.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from "@iconify/vue";
 import { useData } from "vitepress";
 import VPLink from "vitepress/dist/client/theme-default/components/VPLink.vue";
 import { computed } from "vue";
@@ -39,6 +40,9 @@ const getFileHref = (path: string) =>
 
 const getFileTitle = (path: string) =>
   path.replace(/^@[/]reference[/][^/]+[/]/, "").replace("com/example/docs", "...");
+
+const getFileExtension = (path: string) =>
+  path.replace(/^.*[.]([^.]+)$/, "$1").replace(/^classtweaker$/, "document");
 </script>
 
 <template>
@@ -49,8 +53,13 @@ const getFileTitle = (path: string) =>
   </VPLink>
 
   <h2 v-if="files.length">{{ options.files }}</h2>
-  <VPLink v-for="(f, i) in files" :key="f" :href="getFileHref(f)" :title="getFileTitle(f)">
-    <code>{{ shortestUniquePaths[i] }}</code>
+  <VPLink v-for="(f, i) in files" :key="f" :href="getFileHref(f)" :title="getFileTitle(f)" noIcon>
+    <Icon :icon="`material-icon-theme:${getFileExtension(f)}`" />
+    <code>
+      <template v-for="(seg, j) in shortestUniquePaths[i].split('/')" :key="j">
+        <template v-if="j !== 0">/<wbr /></template>{{ seg }}
+      </template>
+    </code>
   </VPLink>
 
   <div />
@@ -80,14 +89,15 @@ h2 {
   color: var(--vp-c-text-2);
 }
 
-.VPLink:has(code) {
-  align-items: center;
-}
-
 .VPLink:hover {
   color: var(--vp-c-text-1);
 }
 
+svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
 img {
   margin-top: 1px;
 }

.vitepress/theme/style.css

@@ -61,6 +61,12 @@ pre {
   scrollbar-color: var(--vp-c-gray-1) var(--vp-c-bg-alt);
 }
 
+@media (min-width: 1525px) {
+  .aside-container {
+    width: 300px !important;
+  }
+}
+
 .aside-container::-webkit-scrollbar {
   display: block;
 }