#287 - Show folder name on index.md files

CHANGELOG.md

@@ -17,6 +17,7 @@
 - [#270](https://github.com/estruyf/vscode-front-matter/issues/270): Only show media files from public folder if `pageBundle` is not enabled on any of the content types
 - [#282](https://github.com/estruyf/vscode-front-matter/issues/282): Insert relative paths for media files located in a page bundle (also sub-folders)
 - [#283](https://github.com/estruyf/vscode-front-matter/issues/283): Added published date sorting options for the content dashboard
+- [#287](https://github.com/estruyf/vscode-front-matter/issues/287): Show folder name on `index.md` files for recently modified files
 
 ### 🐞 Fixes
 

src/commands/Folders.ts

@@ -1,7 +1,7 @@
 import { Questions } from './../helpers/Questions';
 import { SETTING_CONTENT_PAGE_FOLDERS, SETTING_CONTENT_STATIC_FOLDER, SETTING_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
-import { basename, join } from "path";
+import { basename, dirname, join, sep } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
 import uniqBy = require("lodash.uniqby");
 import { Template } from "./Template";
@@ -238,12 +238,14 @@ export class Folders {
               for (const file of files) {
                 try {
                   const fileName = basename(file.fsPath);
+                  const folderName = dirname(file.fsPath).split(sep).pop();
                   
                   const stats = await workspace.fs.stat(file);
 
                   fileStats.push({
                     filePath: file.fsPath,
                     fileName,
+                    folderName,
                     ...stats
                   });
                 } catch (error) {

src/models/PanelSettings.ts

@@ -98,6 +98,7 @@ export interface FolderInfo {
 export interface FileInfo extends FileStat {
   filePath: string;
   fileName: string;
+  folderName: string | undefined;
 };
 
 export interface CustomScript {

src/panelWebView/components/FileItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { DEFAULT_FILE_TYPES } from '../../constants/DefaultFileTypes';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
@@ -8,16 +9,25 @@ import { MarkdownIcon } from './Icons/MarkdownIcon';
 export interface IFileItemProps {
   name: string;
   path: string;
+  folderName: string | undefined;
 }
 
-const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React.PropsWithChildren<IFileItemProps>) => {
-  
+const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, folderName, path }: React.PropsWithChildren<IFileItemProps>) => {
+
   const openFile = () => {
     MessageHelper.sendMessage(CommandToCode.openInEditor, path);
   };
 
+  const itemName = useMemo(() => {
+    if (folderName && name === 'index.md') {
+      return folderName;
+    }
+
+    return name;
+  }, [name, folderName]);
+
   // File extension
-  const fileExtension = `.${name.split('.').pop()}`;
+  const fileExtension = useMemo(() => `.${name.split('.').pop()}`, [name]);
 
   return (
     <li className={`file_list__items__item`}
@@ -30,7 +40,7 @@ const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, path }: React
         )
       }
 
-      <span>{name}</span>
+      <span>{itemName}</span>
     </li>
   );
 };

src/panelWebView/components/FileList.tsx

@@ -22,7 +22,7 @@ const FileList: React.FunctionComponent<IFileListProps> = ({files, folderName, t
       <ul className="file_list__items">
         {
           (files && files.length > 0) && files.map(file => (
-            <FileItem key={file.filePath} name={file.fileName} path={file.filePath} />
+            <FileItem key={file.filePath} name={file.fileName} path={file.filePath} folderName={file.folderName} />
           ))
         }
       </ul>