feat: use image named like the folder as cover

package.json

@@ -32,7 +32,6 @@
     "highlight.js": "^11.4.0",
     "iconoir": "^1.0.0",
     "marked": "^4.0.12",
-    "slugify": "^1.6.5",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   },

src/components/DirEntry.vue

@@ -38,7 +38,7 @@ const getDirPreview = async () => {
 
   const entries = await setupDirEntries(props.entry.handle);
 
-  const coverEntry = getDirCoverEntry(entries, props.entry.handle.name);
+  const coverEntry = getDirCoverEntry(entries, props.entry.displayName);
   if (coverEntry?.isFile) return setFileAsImage(coverEntry.file);
 
   const firstImage = getFirstImageEntry(entries);

src/features/useDir.ts

@@ -1,6 +1,5 @@
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-import slugify from 'slugify';
 import { getTagsFromString, removeTagsFromString } from '@/features/useDirFilter';
 
 interface CurrentDirEntryBase {
@@ -53,11 +52,8 @@ export const getDirCoverEntry = (
   entries: CurrentDirEntry[],
   dirName: string
 ): CurrentDirEntry | undefined => {
-  const dirNameSlugged = slugify(dirName, { lower: true });
-
   const cover = entries.find(
-    (e) =>
-      e.type === 'image' && e.file.name.toLowerCase().replace(/\.[^/.]+$/, '') === dirNameSlugged
+    (e) => e.type === 'image' && e.displayName.replace(/\.[^/.]+$/, '') === dirName
   );
   if (cover) return cover;
 };

src/views/Dir.vue

@@ -69,7 +69,7 @@ watch(readmeEntry, async (entry) => {
 });
 
 const dirThumbEntry = computed(() =>
-  getDirCoverEntry(currentDirEntries.value, currentDir.value?.name || '')
+  getDirCoverEntry(currentDirEntries.value, removeTagsFromString(currentDir.value?.name || ''))
 );
 const dirThumbSrc = computed(
   () => dirThumbEntry.value?.isFile && URL.createObjectURL(dirThumbEntry.value.file)