feat(posts-list): show the metadata of post in tree view (#78)

* feat(posts-list): show the metadata of post

* refactor: rename PostDataProviderItem to PostTreeViewItem

* refactor: rename extensionViews.visiblePostList to visiblePostsList

* fix: update metadata in posts list of the post when post updated

* chore(eslint): disable no-dupe-class-members for typescript

Author: laggage

.eslintrc.json

@@ -19,5 +19,13 @@
         "no-undef": "off",
         "@typescript-eslint/no-floating-promises": "warn"
     },
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {
+                "no-dupe-class-members": "off"
+            }
+        }
+    ],
     "ignorePatterns": ["out", "dist", "src/test/**", "**/*.d.ts"]
 }

.vscode/settings.json

@@ -11,7 +11,7 @@
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
     "typescript.tsc.autoDetect": "off",
     "editor.formatOnSave": true,
-    "cSpell.words": ["ASPNETCORE", "fluentui", "randomstring", "singleline", "tailwindcss"],
+    "cSpell.words": ["ASPNETCORE", "fluentui", "iconfont", "randomstring", "singleline", "tailwindcss"],
     "json.format.enable": false,
     "eslint.alwaysShowStatus": true,
     "eslint.lintTask.enable": true,

download-iconfont.mjs

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+import fetch from 'node-fetch';
+import fs from 'fs';
+import AdmZip from 'adm-zip';
+const url =
+    'https://www.iconfont.cn/api/project/download.zip?spm=a313x.7781069.1998910419.d7543c303&pid=2996691&ctoken=ndNRCUzYy381Rxk59b1LjTrg';
+const cookie =
+    'EGG_SESS_ICONFONT=X2bT0AZ-TAIilwY-GdJPZzopst30wSOteTYESbBaXxbdSzdNvsW9cIk8Rv2OFK9WB4P6YDevBbM0tOZXSeQ-PlBr9j4tU6xOUFjFBJ0DQn-bvfiHQ9VToJtqTPiCmSRpfaiJg2PNK_U65bOD27CiBF0XriLwpr2VwR2IdTxDcEjB_TASVO4TZeLD4yutVl7F-HAekMbP05tFgoqkHKErlg==; cna=G1LxGnOXCnwCAXPBn9cnCizc; hasViewVideo=true; ctoken=tpg9HdfcXbaBj1GRmc0B9X0-; u=5429096; u.sig=TNtkaPPSd2m-XekHonfzX8cnJ4FYtYu3NQ3Ic536XRI; locale=en-us; isg=BOPj3u3ohSIY2UmfHCh8ajjwciGN2HcatGxS7hVBlcK5VAB2nKxAa4fCTizadM8S';
+const filename = 'download.zip';
+
+fetch(url, { headers: { cookie: cookie } }).then(f => {
+    const dest = fs.createWriteStream('./download.zip');
+    f.body?.pipe(dest);
+    dest.on('finish', () => {
+        try {
+            const zip = AdmZip(filename, {});
+            const outFileName = 'icons.woff2';
+            zip.getEntries()
+                .filter(e => !e.isDirectory && e.name.startsWith('iconfont.woff2'))
+                .forEach(e => {
+                    zip.extractEntryTo(e, './dist/assets', false, true, undefined, outFileName);
+                    zip.extractEntryTo(e, 'src/assets', false, true, undefined, outFileName);
+                });
+            fs.unlink(filename, err => {
+                if (err) {
+                    console.log(err);
+                }
+                console.log('iconfont assets downloaded');
+            });
+        } catch (ex) {
+            console.warn('Failed to unzip iconfont assets! Some icons may not work correctly.', ex);
+        }
+    });
+}, undefined);

package-lock.json

@@ -33,6 +33,50 @@
     ],
     "main": "./dist/extension.js",
     "contributes": {
+        "icons": {
+            "vscode-cnb-date": {
+                "description": "date",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e697"
+                }
+            },
+            "vscode-cnb-image-upload": {
+                "description": "image upload",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e80e"
+                }
+            },
+            "vscode-cnb-cloud-upload": {
+                "description": "cloud upload",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e7d9"
+                }
+            },
+            "vscode-cnb-icon-seek": {
+                "description": "icon seek",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e662"
+                }
+            },
+            "vscode-cnb-folders": {
+                "description": "folders",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e74a"
+                }
+            },
+            "vscode-cnb-folder-close": {
+                "description": "folder close",
+                "default": {
+                    "fontPath": "dist/assets/icons.woff2",
+                    "fontCharacter": "\\e65b"
+                }
+            }
+        },
         "commands": [
             {
                 "title": "登录到博客园",
@@ -56,10 +100,7 @@
             {
                 "command": "vscode-cnb.seek-posts-list",
                 "title": "跳页",
-                "icon": {
-                    "light": "dist/assets/icon-seek.svg",
-                    "dark": "dist/assets/icon-seek-dark.svg"
-                },
+                "icon": "$(vscode-cnb-icon-seek)",
                 "enablement": "vscode-cnb.isAuthorized && !vscode-cnb.posts-list.refreshing && vscode-cnb.posts-list.pageCount > 0",
                 "category": "Cnblogs Posts List"
             },
@@ -108,10 +149,7 @@
                 "command": "vscode-cnb.upload-image",
                 "title": "上传图片到博客园",
                 "category": "Cnblogs",
-                "icon": {
-                    "light": "dist/assets/icon-image-upload.svg",
-                    "dark": "dist/assets/icon-image-upload-dark.svg"
-                },
+                "icon": "$(vscode-cnb-image-upload)",
                 "enablement": "vscode-cnb.isAuthorized"
             },
             {
@@ -134,10 +172,7 @@
             {
                 "command": "vscode-cnb.save-post-file-to-cnblogs",
                 "title": "保存到博客园",
-                "icon": {
-                    "light": "dist/assets/icon-upload.svg",
-                    "dark": "dist/assets/icon-upload-dark.svg"
-                },
+                "icon": "$(vscode-cnb-cloud-upload)",
                 "enablement": "vscode-cnb.isAuthorized",
                 "category": "Cnblogs"
             },
@@ -721,7 +756,8 @@
         "lint": "eslint src --ext ts",
         "test": "node ./out/test/runTest.js",
         "format": "prettier --write .",
-        "format-check": "prettier --check ."
+        "format-check": "prettier --check .",
+        "download-icons": "node ./download-iconfont.mjs"
     },
     "devDependencies": {
         "@types/express": "^4.17.1",
@@ -738,6 +774,7 @@
         "@typescript-eslint/eslint-plugin": "^5.1.0",
         "@typescript-eslint/parser": "^5.1.0",
         "@vscode/test-electron": "^1.6.2",
+        "adm-zip": "^0.5.9",
         "autoprefixer": "^10.4.4",
         "babel-plugin-module-resolver": "^4.1.0",
         "clean-webpack-plugin": "^4.0.0",

package.json

@@ -144,7 +144,7 @@ const inputTargetFolder = async (): Promise<Uri | undefined> => {
 
 const handlePostInput = (post: Post): Promise<Post[]> => {
     const posts: Post[] = [post];
-    extensionViews.visiblePostList()?.selection.map(item => {
+    extensionViews.visiblePostsList()?.selection.map(item => {
         if (item instanceof Post && !posts.includes(item)) {
             posts.push(item);
         }

src/assets/icon-seek-dark.svg

@@ -40,7 +40,7 @@ const confirmDelete = async (
 
 export const deleteSelectedPosts = async (post: Post) => {
     const selectedPosts: Post[] = post ? [post] : [];
-    extensionViews.visiblePostList()?.selection.map(post => {
+    extensionViews.visiblePostsList()?.selection.map(post => {
         if (post instanceof Post && !selectedPosts.includes(post)) {
             postsDataProvider.pagedPosts?.items.find(item => item === post);
             selectedPosts.push(post);

src/assets/icon-seek.svg

@@ -9,6 +9,7 @@ import path from 'path';
 import fs from 'fs';
 import { LocalDraft } from '../../services/local-draft.service';
 import { saveFilePendingChanges } from '../../utils/save-file-pending-changes';
+import { postsDataProvider } from '../../tree-view-providers/posts-data-provider';
 
 export const modifyPostSettings = async (input: Post | Uri) => {
     let post: Post | undefined;
@@ -43,8 +44,9 @@ export const modifyPostSettings = async (input: Post | Uri) => {
         breadcrumbs: ['更新博文设置', editDto.post.title],
         post: postEditDto,
         localFileUri: localFilePath ? Uri.file(localFilePath) : undefined,
-        successCallback: () => {
+        successCallback: ({ id }) => {
             AlertService.info('博文已更新');
+            postsDataProvider.fireTreeDataChangedEvent(id);
         },
         beforeUpdate: async post => {
             if (localFilePath && fs.existsSync(localFilePath)) {

src/assets/icon-upload-dark.svg

@@ -1,3 +1,5 @@
+import { parseISO } from 'date-fns';
+
 export class Post {
     id: number = -1;
     author: string = '';
@@ -8,7 +10,20 @@ export class Post {
     categoryIds: number[] | null = [];
     changeCreatedTime: boolean = false;
     changePostType: boolean = false;
-    datePublished?: Date;
+    private _datePublished?: Date | undefined;
+    get datePublished(): Date | undefined {
+        return this._datePublished;
+    }
+    set datePublished(value: Date | string | undefined) {
+        this._datePublished = typeof value === 'string' ? parseISO(value) : value;
+    }
+    private _dateUpdated?: Date | undefined;
+    get dateUpdated(): Date | undefined {
+        return this._dateUpdated;
+    }
+    set dateUpdated(value: Date | string | undefined) {
+        this._dateUpdated = typeof value === 'string' ? parseISO(value) : value;
+    }
     description: string = '';
     featuredImage: string = '';
     displayOnHomePage: boolean = false;

src/assets/icon-upload.svg

@@ -17,6 +17,16 @@ export class PostCategoryService {
 
     private constructor() {}
 
+    async findCategories(ids: number[], { useCache = true } = {}): Promise<PostCategories> {
+        ids = ids.filter(x => x > 0);
+        if (ids.length <= 0) {
+            return [];
+        }
+
+        const categories = await this.fetchCategories(!useCache);
+        return categories.filter(({ categoryId }) => ids.includes(categoryId));
+    }
+
     async fetchCategories(forceRefresh = false): Promise<PostCategories> {
         if (this._cached && !forceRefresh) {
             return this._cached;

src/assets/icons.woff2

@@ -9,6 +9,6 @@ export const revealPostsListItem = async (
         return;
     }
 
-    const view = extensionViews.visiblePostList();
+    const view = extensionViews.visiblePostsList();
     await view?.reveal(post, options);
 };