add card-view of folder overview

README.md

@@ -2,6 +2,8 @@
 
 Obsidian Plugin: Add description note to a folder. Make your vault to be a hierarchy note system.
 
+![](image/folder-note2.png)
+
 ## Usage
 
 - **Add** description note for a folder: CTRL+Click on a folder node in the file explorer panel.
@@ -21,10 +23,16 @@ Just a simple trick. When create description for a folder, a note file named `_a
 
 - Hide Note: turn off the setting if you want to show the folder note file.
 - Note Name: set the folder note name, like `_overview_` or `index`. You can use {{FOLDER_NAME}} to set the note name same as folder, **BUT** it is not recommended, because you have to manually change all the note file name if you rename a folder.
-- Note inital content: set the initial content for new folder note, {{FOLDER_NAME}} in the content which will be replaced with the folder name.
+- Note inital content: set the initial content for new folder note.
+- {{FOLDER_NAME}} in the content will be replaced with the folder name.
+- {{FOLDER_BRIEF}} in the content will be replaced with the folder overview in card view.
 
 ## Change log
 
+### 0.3.0
+
+- Automatically generate card-view of folder overview (Experimental).
+
 ### 0.2.5
 
 - Fix folder and note name check for hiding.

main.ts

@@ -10,7 +10,7 @@ interface FolderNotePluginSettings {
 const DEFAULT_SETTINGS: FolderNotePluginSettings = {
 	folderNoteHide: true,
 	folderNoteName: '_about_',
-	folderNoteStrInit: '# About {{FOLDER_NAME}}\n'
+	folderNoteStrInit: '# About {{FOLDER_NAME}}\n {{FOLDER_BRIEF}} \n'
 }
 
 export default class FolderNotePlugin extends Plugin {
@@ -88,6 +88,10 @@ export default class FolderNotePlugin extends Plugin {
 		    if(doCreate) {
 				var noteStrInit = this.settings.folderNoteStrInit;
 				noteStrInit = noteStrInit.replace('{{FOLDER_NAME}}', folderName);
+				if (noteStrInit.contains('{{FOLDER_BRIEF}}')) {
+					let folderBrief = await this.generateFolderBrief(folderElem, folderPath);
+					noteStrInit = noteStrInit.replace('{{FOLDER_BRIEF}}', folderBrief);
+				}
 				await this.app.vault.adapter.write(folderNotePath, noteStrInit);
 				showFolderNote = true;
 			}
@@ -100,14 +104,10 @@ export default class FolderNotePlugin extends Plugin {
 		if (showFolderNote) {
 			// modify the element
 			const hideSetting = this.settings.folderNoteHide;
-			// var folderDataPath = folderElem.attributes.getNamedItem('data-path').textContent;
-			// var folderNotePathLast = '/' + noteName + '.md';
 			folderElem.addClass('has-folder-note');
 			folderElem.parentElement
 				.querySelectorAll('div.nav-folder-children > div.nav-file > div.nav-file-title')
 				.forEach(function (fileElem) {
-					// console.log('fileElem:', fileElem);
-					// let fileDataPath = fileElem.attributes.getNamedItem('data-path').textContent;
 					var fileNodeTitle = fileElem.firstElementChild.textContent;
 					if (hideSetting && (fileNodeTitle == noteName)) {
 						fileElem.addClass('is-folder-note');
@@ -121,8 +121,111 @@ export default class FolderNotePlugin extends Plugin {
 			this.app.workspace.openLinkText(folderNotePath, '', false, { active: true });
 		}
 	}
+
+	async generateFolderBrief(folderElem: Element, folderPath: string) {
+		// set note name
+		var noteFileName = this.settings.folderNoteName + '.md';
+		var htmlSubs = '';
+
+		// statistic
+		let pathList = await this.app.vault.adapter.list(folderPath);
+		const subFolderList = pathList.folders;
+		const subFileList = pathList.files;
+
+		// sub folders
+		for (var i = 0; i < subFolderList.length; i++) {
+			var htmlSubSect = '<div class="cute-card-view">\n';
+			htmlSubSect += '<div class="thumb-color thumb-color-folder">Folder</div>\n';
+			htmlSubSect += '<article>\n';
+			// title
+			var subFolderPath = subFolderList[i];
+			var subFolderName = subFolderPath.split('/').pop();
+			htmlSubSect += '<h1>' + subFolderName + '</h1>\n';
+			// how many files
+			let subPathList = await this.app.vault.adapter.list(subFolderPath);
+			htmlSubSect += '<p> ' + subPathList.folders.length.toString() + ' folders, ';
+			htmlSubSect += subPathList.files.length.toString() + ' notes</p>\n';
+			// logo
+			htmlSubSect +=  '<span> ' + subFolderPath + '</span>\n';
+			// close
+			htmlSubSect += '</article>\n</div>\n';
+			htmlSubs += htmlSubSect;
+		}
+
+		// notes
+		for (var i = 0; i < subFileList.length; i++) {
+			var subFilePath = subFileList[i];
+			var subFileName = subFilePath.split('/').pop();
+			if (subFileName != noteFileName) {
+				var htmlSubSect = '<div class="cute-card-view">\n';
+
+				// image
+				let content = await this.app.vault.adapter.read(subFilePath);
+				// console.log(content);
+				let regexImg = new RegExp('!\\[(.*?)\\]\\((.*?)\\)');
+				var match = regexImg.exec(content);
+				if (match != null) {
+					htmlSubSect += '<div class="thumb" style="background-image: url(';
+					var imageUrl = match[2];
+					if (!imageUrl.startsWith('http')) {
+						var headPath = folderPath;
+						while(imageUrl.startsWith('../')) {
+							imageUrl = imageUrl.substring(3);
+							headPath = headPath.substring(0, headPath.lastIndexOf('/'))
+						}
+						imageUrl = headPath + '/' + imageUrl;
+						imageUrl = this.app.vault.adapter.getResourcePath(imageUrl);
+					}
+					htmlSubSect += imageUrl
+					htmlSubSect += ');"></div>\n'
+				}
+				else {
+					htmlSubSect += '<div class="thumb-color thumb-color-note">Note</div>\n';
+				}
+
+				// title
+				htmlSubSect += '<article>\n';
+				var subFileBase = subFileName.substring(0, subFileName.length-3);
+				htmlSubSect += '<a class="internal-link" href="' + subFileName + '"><h1>';
+				htmlSubSect += subFileBase + '</h1></a>\n'
+				// content?
+				var contentBrief = '';
+				let regexHead = new RegExp('^#{1,6}(?!#)(.*)[\r\n]', 'mg');
+				while ((match = regexHead.exec(content)) !== null) {
+					contentBrief += match[1] + ', ';
+					if (contentBrief.length > 32) {
+						break;
+					}
+				}
+				if (contentBrief.length > 0) {
+					htmlSubSect += '<p> ' + contentBrief + ' ... </p>\n';
+				}
+				else {
+					htmlSubSect += '<p> No headings in the file. </p>\n';
+				}
+				// logo
+				htmlSubSect +=  '<span> ' + subFilePath + '</span>\n';
+				// close
+				htmlSubSect += '</article>\n</div>\n';
+				htmlSubs += htmlSubSect;
+			}
+		}
+
+		// return
+		var htmlSect = '';
+		if (htmlSubs.length > 0) {
+			htmlSect = '\n<div class="cute-card-band">\n' + htmlSubs + '</div>\n\n';
+		}
+
+		return htmlSect;
+	}
+
 }
 
+// ------------------------------------------------------------
+// Settings Tab
+// ------------------------------------------------------------
+
 class FolderNoteSettingTab extends PluginSettingTab {
 	plugin: FolderNotePlugin;
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "folder-note-plugin",
 	"name": "Folder Note",
-	"version": "0.2.5",
+	"version": "0.3.0",
 	"minAppVersion": "0.9.12",
 	"description": "Click a folder node to show a note describing the folder.",
 	"author": "xpgo",

styles.css

@@ -7,3 +7,103 @@ div.is-folder-note {
 div.has-folder-note {
   color: var(--text-nav-selected);
 }
+
+/* Cute card view*/
+.cute-card-band {
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+}
+
+@media (min-width: 30em) {
+    .cute-card-band {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (min-width: 60em) {
+    .cute-card-band {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.cute-card-view {
+    background: var(--background-accent);
+    text-decoration: none !important;
+    color: var(--text-normal);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+    top: 0;
+    transition: all 0.1s ease-in;
+    border-radius: 10px;
+}
+
+.cute-card-view:hover {
+    top: -2px;
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+}
+
+.cute-card-view article {
+    padding: 15px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.cute-card-view h1 {
+    font-size: 1.2rem;
+    margin: 0;
+    color: var(--text-accent);
+}
+
+.cute-card-view a {
+    text-decoration: none !important;
+}
+
+.cute-card-view p {
+    flex: 1;
+    line-height: 1.0;
+}
+
+.cute-card-view span {
+    font-size: 0.8rem;
+    font-weight: bold;
+    color: var(--text-faint);
+    letter-spacing: 0.05em;
+}
+
+.cute-card-view .thumb {
+    padding-bottom: 60%;
+    background-size: cover;
+    background-position: center center;
+    border-radius: 10px 10px 0px 0px;
+}
+
+.cute-card-view .thumb-color {
+    padding-bottom: 10%;
+    background-size: cover;
+    background-position: center center;
+    border-radius: 10px 10px 0px 0px;
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-align: center;
+    color: #FFFFFF;
+    padding: 10px;
+}
+
+.cute-card-view .thumb-color-folder {
+    background-color: slateblue;
+}
+
+.cute-card-view .thumb-color-note {
+    background-color: salmon;
+}

versions.json

@@ -5,5 +5,6 @@
 	"0.2.2": "0.9.7",
 	"0.2.3": "0.9.7",
 	"0.2.4": "0.9.7",
-	"0.2.5": "0.9.7"
+	"0.2.5": "0.9.7",
+	"0.3.0": "0.9.7"
 }