Merge pull request #216 from estruyf/dev

estruyf · Jan 1, 2022 · 1b24c12 · 1b24c12
2 parents 4d38a08 + e675020
commit 1b24c12
Show file tree

Hide file tree

Showing 33 changed files with 589 additions and 324 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Change Log
 
+## [5.9.0] - 2022-01-01 - 🎇🎆
+
+### 🎨 Enhancements
+
+- Fixing the spinner which overlaps the global navigation bar
+- Quick actions added for media files (edit, delete, insert markdown, insert snippet)
+- [#199](https://github.com/estruyf/vscode-front-matter/issues/199): Search media files in the currently selected folder
+- [#211](https://github.com/estruyf/vscode-front-matter/issues/211): Replace text selection on media inserts
+- [#212](https://github.com/estruyf/vscode-front-matter/issues/212): Create folder watchers for content folders. When new content gets created, the dashboard updates.
+- [#213](https://github.com/estruyf/vscode-front-matter/issues/213): New media folder overview design
+
+### 🐞 Fixes
+
+- [#210](https://github.com/estruyf/vscode-front-matter/issues/210): Fix for adding media files with uppercase file extensions
+- [#214](https://github.com/estruyf/vscode-front-matter/issues/214): Fix for opening markdown file after creating it for the specified content type
+
 ## [5.8.0] - 2021-12-21 - 🎄
 
 ### 🎨 Enhancements

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "vscode-front-matter-beta",
   "displayName": "Front Matter",
-  "description": "An essential Visual Studio Code extension when you want to manage the markdown pages of your static site like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
+  "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -113,12 +113,12 @@
               "type": "string"
             }
           ],
-          "markdownDescription": "Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.sorting.default)",
+          "markdownDescription": "Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.defaultSorting)",
           "scope": "Content"
         },
         "frontMatter.content.draftField": {
           "type": "object",
-          "markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.draftField)",
+          "markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.draftfield)",
           "default": {
             "name": "draft",
             "type": "boolean"
@@ -156,7 +156,7 @@
         "frontMatter.content.fmHighlight": {
           "type": "boolean",
           "default": true,
-          "markdownDescription": "Specify if you want to highlight the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.fmhighlight)",
+          "markdownDescription": "Specify if you want to highlight the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.fmhighlight)",
           "scope": "Content"
         },
         "frontMatter.content.pageFolders": {
@@ -197,7 +197,7 @@
         "frontMatter.content.sorting": {
           "type": "array",
           "default": [],
-          "markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.sorting)",
+          "markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.sorting)",
           "items": {
             "type": "object",
             "properties": {
@@ -243,7 +243,7 @@
         "frontMatter.content.wysiwyg": {
           "type": "boolean",
           "default": true,
-          "markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.wysiwyg)",
+          "markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.wysiwyg)",
           "scope": "Content"
         },
         "frontMatter.custom.scripts": {
@@ -303,7 +303,7 @@
         "frontMatter.dashboard.mediaSnippet": {
           "type": "array",
           "default": [],
-          "markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.dashboard.mediaSnippet)",
+          "markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.mediasnippet)",
           "items": {
             "type": "string",
             "description": "The parts of your snippet. Use `{mediaUrl}` as placeholder where the path of the image needs to be inserted."
@@ -322,7 +322,7 @@
         "frontMatter.framework.id": {
           "type": "string",
           "default": "",
-          "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.framework.id)"
+          "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.id)"
         },
         "frontMatter.media.defaultSorting": {
           "type": "string",
@@ -333,7 +333,7 @@
             "FileNameAsc",
             "FileNameDesc"
           ],
-          "markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.media.sorting.default)",
+          "markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.media.defaultsorting)",
           "scope": "Content"
         },
         "frontMatter.panel.freeform": {
@@ -357,7 +357,7 @@
         "frontMatter.site.baseURL": {
           "type": "string",
           "default": "",
-          "markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.site.baseURL)",
+          "markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.site.baseurl)",
           "scope": "Site"
         },
         "frontMatter.taxonomy.alignFilename": {
@@ -376,7 +376,7 @@
         },
         "frontMatter.taxonomy.commaSeparatedFields": {
           "type": "array",
-          "markdownDescription": "Specify the fields names that Front Matter should treat as a comma-separated array. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.commaSeparatedFields)",
+          "markdownDescription": "Specify the fields names that Front Matter should treat as a comma-separated array. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.commaSeparatedFields)",
           "items": {
             "type": "string",
             "description": "Name of the fields you want to use as comma-separated arrays."
@@ -388,7 +388,7 @@
             "array",
             "null"
           ],
-          "markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.contentTypes)",
+          "markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.contentTypes)",
           "items": {
             "type": "object",
             "description": "Define the content types you want to use in Front Matter.",
@@ -725,7 +725,7 @@
             "warning",
             "error"
           ],
-          "markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.global.notifications)",
+          "markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.global.notifications)",
           "scope": "Templates"
         }
       }

diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
@@ -12,7 +12,7 @@ import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
-import { MediaListener } from '../listeners';
+import { MediaListener, PagesListener } from '../listeners';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -288,6 +288,9 @@ export class Folders {
     }));
 
     await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folderDetails, true);
+
+    // Reinitialize the folder listeners
+    PagesListener.startWatchers();
   }
 
   /**

diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
@@ -26,7 +26,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
-        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md hover:shadow-xl dark:hover:bg-vulcan-100`}
+        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-100 dark:border-vulcan-50`}
                 onClick={openFile}>
           <div className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200">
             {

diff --git a/src/dashboardWebView/components/Header/Breadcrumb.tsx b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -1,28 +1,32 @@
-import {CollectionIcon} from '@heroicons/react/outline';
+import { CollectionIcon } from '@heroicons/react/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Sorting } from '.';
 import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import { NavigationType } from '../../models';
-import { SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 
 export interface IBreadcrumbProps {}
 
 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: React.PropsWithChildren<IBreadcrumbProps>) => {
   const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
-  const settings = useRecoilValue(SettingsAtom);
+  const [ , setSearchValue ] = useRecoilState(SearchAtom);
   const [ folders, setFolders ] = React.useState<string[]>([]);
+  const settings = useRecoilValue(SettingsAtom);
 
-  if (!settings?.wsFolder) {
-    return null;
+  const updateFolder = (folder: string) => {
+    setSearchValue('');
+    setSelectedFolder(folder);
   }
 
   React.useEffect(() => {
+    if (!settings) {
+      return;
+    }
+
     const { wsFolder, staticFolder, contentFolders } = settings;
 
-    const isValid = (folderPath: string) => {      
+    const isValid = (folderPath: string) => {
       if (staticFolder) {
         const staticPath = parseWinPath(join(wsFolder, staticFolder)) as string;
         const relPath = folderPath.replace(staticPath, '') as string;
@@ -33,7 +37,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
           return false;
         }
       }
-1
+
       for (let i = 0; i < contentFolders.length; i++) {
         const folder = contentFolders[i];
         const contentFolder = parseWinPath(folder.path) as string;
@@ -62,45 +66,40 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
 
       setFolders(allFolders);
     }
-  }, [selectedFolder]);
-
+  }, [selectedFolder, settings]);
+  
   return (
-    <nav className="w-full bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex justify-between py-2" aria-label="Breadcrumb">
-      <ol role="list" className="flex space-x-4 px-5">
-        <li className="flex">
+    <ol role="list" className="flex space-x-4 px-5 flex-1">
+      <li className="flex">
+        <div className="flex items-center">
+          <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
+            <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+            <span className="sr-only">Home</span>
+          </button>
+        </div>
+      </li>
+
+      {folders.map((folder) => (
+        <li key={folder} className="flex">
           <div className="flex items-center">
-            <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
-              <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
-              <span className="sr-only">Home</span>
+            <svg
+              className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+            >
+              <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+            </svg>
+            <button
+              onClick={() => updateFolder(folder)}
+              className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+            >
+              {basename(folder)}
             </button>
           </div>
         </li>
-        {folders.map((folder) => (
-          <li key={folder} className="flex">
-            <div className="flex items-center">
-              <svg
-                className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-              >
-                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-              </svg>
-              <button
-                onClick={() => setSelectedFolder(folder)}
-                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
-              >
-                {basename(folder)}
-              </button>
-            </div>
-          </li>
-        ))}
-      </ol>
-
-      <div className={`flex px-5`}>
-        <Sorting view={NavigationType.Media} disableCustomSorting />
-      </div>
-    </nav>
+      ))}
+    </ol>
   );
 };