Update documentation + images + icons

README.md

@@ -45,16 +45,40 @@ The extension will automatically verify if your title and description are SEO co
 
 The Front Matter panel allows you to perform most of the extension actions by just a click on the button and it shows the SEO statuses of your title, description, and more.
 
-<p align="center">
-  <img src="./assets/frontmatter-panel.png" alt="Front Matter Panel" style="display: inline-block" />
-</p>
-
 Initially, this panel has been created to make it easier to add tags and categories to your articles as the current VSCode multi-select is not optimal to use.
 
 To leverage most of the capabilities of the extension. SEO information and everyday actions like slug optimization, updating the date, and publish/drafting the article.
 
+The panel consists of the following sections:
+
+**SEO Status**
+
+<p align="center">
+  <img src="./assets/v2.0.0/seo.png" alt="SEO article status" style="display: inline-block" />
+</p>
+
+**Actions**
+
+<p align="center">
+  <img src="./assets/v2.0.0/actions.png" alt="Actions" style="display: inline-block" />
+</p>
+
+**Metadata: Keywords, Tags, Categories**
+
+<p align="center">
+  <img src="./assets/v2.0.0/metadata.png" alt="Article metadata" style="display: inline-block" />
+</p>
+
 > **Info**: By default, the tags/categories picker allows you to insert existing and none tags/categories. When you enter a none existing tag/category, the panel shows an add `+` icon in front of that button. This functionality allows you to store this tag/category in your settings. If you want to disable this feature, you can do that by setting the `frontMatter.panel.freeform` setting to `false`.
 
+**Other actions**
+
+At the bottom of the panel you can find the following actions:
+
+<p align="center">
+  <img src="./assets/v2.0.0/other-actions.png" alt="Other actions" style="display: inline-block" />
+</p>
+
 ## Custom actions
 
 Since version `1.15.0`, the extension allows you to create your own custom actions, by running Node.js scripts from your project. In order to use this functionality, you will need to configure the [`frontMatter.custom.scripts`](#frontmattercustomscripts) setting for your project.
@@ -62,7 +86,7 @@ Since version `1.15.0`, the extension allows you to create your own custom actio
 Once a custom action has been configured, it will appear on the Front Matter panel.
 
 <p align="center">
-  <img src="./assets/custom-actions.png" alt="Custom actions" style="display: inline-block" />
+  <img src="./assets/v2.0.0/custom-action.png" alt="Custom action" style="display: inline-block" />
 </p>
 
 The current workspace-, file-path, and front matter data will be passed as an argument. In your script fetch these arguments as follows:

assets/media/styles.css

@@ -97,7 +97,7 @@
   position: relative;
 }
 
-.section h3 i {
+.section h3 svg {
   margin-right: 0.5rem;
 }
 
@@ -255,7 +255,7 @@
   align-items: center;
 }
 
-.ext_link_block i {
+.ext_link_block svg {
   margin-right: .5rem;
 }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter",
-	"version": "1.18.0",
+	"version": "2.0.0",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -392,7 +392,8 @@
 		"@vscode/codicons": {
 			"version": "0.0.20",
 			"resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.20.tgz",
-			"integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw=="
+			"integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==",
+			"dev": true
 		},
 		"@webassemblyjs/ast": {
 			"version": "1.9.0",

package.json

@@ -3,7 +3,7 @@
 	"displayName": "Front Matter",
 	"description": "Simplifies working with front matter of your articles. Useful extension when you are using a static site generator like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
 	"icon": "assets/front-matter.png",
-	"version": "1.18.0",
+	"version": "2.0.0",
 	"preview": false,
 	"publisher": "eliostruyf",
 	"galleryBanner": {
@@ -255,6 +255,7 @@
 		"@types/react": "17.0.0",
 		"@types/react-dom": "17.0.0",
 		"@types/vscode": "1.51.0",
+		"@vscode/codicons": "0.0.20",
 		"date-fns": "2.0.1",
 		"downshift": "6.0.6",
 		"glob": "7.1.6",
@@ -271,7 +272,5 @@
 		"webpack": "4.44.2",
 		"webpack-cli": "3.3.12"
 	},
-	"dependencies": {
-		"@vscode/codicons": "0.0.20"
-	}
+	"dependencies": {}
 }

src/viewpanel/ViewPanel.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { CommandToCode } from './CommandToCode';
 import { Actions } from './components/Actions';
 import { Collapsible } from './components/Collapsible';
-import { Icon } from './components/Icon';
+import { BugIcon } from './components/Icons/BugIcon';
+import { FileIcon } from './components/Icons/FileIcon';
+import { FolderOpenedIcon } from './components/Icons/FolderOpenedIcon';
+import { ListUnorderedIcon } from './components/Icons/ListUnorderedIcon';
+import { SettingsIcon } from './components/Icons/SettingsIcon';
+import { SymbolKeywordIcon } from './components/Icons/SymbolKeywordIcon';
+import { TagIcon } from './components/Icons/TagIcon';
 import { SeoStatus } from './components/SeoStatus';
 import { Spinner } from './components/Spinner';
 import { TagPicker } from './components/TagPicker';
@@ -55,7 +61,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
         <Collapsible title="Metadata">
           {
             <TagPicker type={TagType.keywords} 
-                       icon={<Icon name="symbol-keyword" />}
+                       icon={<SymbolKeywordIcon />}
                        crntSelected={metadata.keywords || []} 
                        options={[]} 
                        freeform={true} 
@@ -66,7 +72,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           {
             (settings && settings.tags && settings.tags.length > 0) && (
               <TagPicker type={TagType.tags} 
-                        icon={<Icon name="tag" />}
+                        icon={<TagIcon />}
                         crntSelected={metadata.tags || []} 
                         options={settings.tags} 
                         freeform={settings.freeform} 
@@ -77,7 +83,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           {
             (settings && settings.categories && settings.categories.length > 0) && (
               <TagPicker type={TagType.categories}
-                        icon={<Icon name="list-unordered" />}
+                        icon={<ListUnorderedIcon />}
                         crntSelected={metadata.categories || []} 
                         options={settings.categories} 
                         freeform={settings.freeform} 
@@ -90,19 +96,19 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
 
       <div className={`ext_settings`}>
         <div className="ext_link_block">
-          <button onClick={openSettings}><Icon name={`settings`} /> Open settings</button>
+          <button onClick={openSettings}><SettingsIcon /> Open settings</button>
         </div>
 
         <div className="ext_link_block">
-          <button onClick={openFile}><Icon name={`file`} /> Reveal file in folder</button>
+          <button onClick={openFile}><FileIcon /> Reveal file in folder</button>
         </div>
 
         <div className="ext_link_block">
-          <button onClick={openProject}><Icon name={`folder-opened`} /> Reveal project folder</button>
+          <button onClick={openProject}><FolderOpenedIcon /> Reveal project folder</button>
         </div>
 
         <div className="ext_link_block">
-          <a href="https://github.com/estruyf/vscode-front-matter/issues" title="Open an issue on GitHub"><Icon name={`bug`} /> Report an issue</a>
+          <a href="https://github.com/estruyf/vscode-front-matter/issues" title="Open an issue on GitHub"><BugIcon /> Report an issue</a>
         </div>
       </div>
     </div>

src/viewpanel/components/Icons/BugIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IBugIconProps {}
+
+export const BugIcon: React.FunctionComponent<IBugIconProps> = (props: React.PropsWithChildren<IBugIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M10.877 4.5v-.582a2.918 2.918 0 1 0-5.836 0V4.5h-.833L2.545 2.829l-.593.59 1.611 1.619-.019.049a8.03 8.03 0 0 0-.503 2.831c0 .196.007.39.02.58l.003.045H1v.836h2.169l.006.034c.172.941.504 1.802.954 2.531l.034.055L2.2 13.962l.592.592 1.871-1.872.058.066c.868.992 2.002 1.589 3.238 1.589 1.218 0 2.336-.579 3.199-1.544l.057-.064 1.91 1.92.593-.591-1.996-2.006.035-.056c.467-.74.81-1.619.986-2.583l.006-.034h2.171v-.836h-2.065l.003-.044a8.43 8.43 0 0 0 .02-.58 8.02 8.02 0 0 0-.517-2.866l-.019-.05 1.57-1.57-.592-.59L11.662 4.5h-.785zm-5 0v-.582a2.082 2.082 0 1 1 4.164 0V4.5H5.878zm5.697.837l.02.053c.283.753.447 1.61.447 2.528 0 1.61-.503 3.034-1.274 4.037-.77 1.001-1.771 1.545-2.808 1.545-1.036 0-2.037-.544-2.807-1.545-.772-1.003-1.275-2.427-1.275-4.037 0-.918.164-1.775.448-2.528l.02-.053h7.229z"/></svg>
+  );
+};

src/viewpanel/components/Icons/CheckIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ICheckIconProps {}
+
+export const CheckIcon: React.FunctionComponent<ICheckIconProps> = (props: React.PropsWithChildren<ICheckIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z"/></svg>
+  );
+};

src/viewpanel/components/Icons/FileIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IFileIconProps {}
+
+export const FileIcon: React.FunctionComponent<IFileIconProps> = (props: React.PropsWithChildren<IFileIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M13.71 4.29l-3-3L10 1H4L3 2v12l1 1h9l1-1V5l-.29-.71zM13 14H4V2h5v4h4v8zm-3-9V2l3 3h-3z"/></svg>
+  );
+};

src/viewpanel/components/Icons/FolderOpenedIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IFolderOpenedIconProps {}
+
+export const FolderOpenedIcon: React.FunctionComponent<IFolderOpenedIconProps> = (props: React.PropsWithChildren<IFolderOpenedIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M1.5 14h11l.48-.37 2.63-7-.48-.63H14V3.5l-.5-.5H7.71l-.86-.85L6.5 2h-5l-.5.5v11l.5.5zM2 3h4.29l.86.85.35.15H13v2H8.5l-.35.15-.86.85H3.5l-.47.34-1 3.08L2 3zm10.13 10H2.19l1.67-5H7.5l.35-.15.86-.85h5.79l-2.37 6z"/></svg>
+  );
+};

src/viewpanel/components/Icons/ListUnorderedIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IListUnorderedIconProps {}
+
+export const ListUnorderedIcon: React.FunctionComponent<IListUnorderedIconProps> = (props: React.PropsWithChildren<IListUnorderedIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M2 3H1v1h1V3zm0 3H1v1h1V6zM1 9h1v1H1V9zm1 3H1v1h1v-1zm2-9h11v1H4V3zm11 3H4v1h11V6zM4 9h11v1H4V9zm11 3H4v1h11v-1z"/></svg>
+  );
+};

src/viewpanel/components/Icons/SettingsIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ISettingsIconProps {}
+
+export const SettingsIcon: React.FunctionComponent<ISettingsIconProps> = (props: React.PropsWithChildren<ISettingsIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M3.5 2h-1v5h1V2zm6.1 5H6.4L6 6.45v-1L6.4 5h3.2l.4.5v1l-.4.5zm-5 3H1.4L1 9.5v-1l.4-.5h3.2l.4.5v1l-.4.5zm3.9-8h-1v2h1V2zm-1 6h1v6h-1V8zm-4 3h-1v3h1v-3zm7.9 0h3.19l.4-.5v-.95l-.4-.5H11.4l-.4.5v.95l.4.5zm2.1-9h-1v6h1V2zm-1 10h1v2h-1v-2z"/></svg>
+  );
+};

src/viewpanel/components/Icons/SymbolKeywordIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ISymbolKeywordIconProps {}
+
+export const SymbolKeywordIcon: React.FunctionComponent<ISymbolKeywordIconProps> = (props: React.PropsWithChildren<ISymbolKeywordIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M15 4h-5V3h5v1zm-1 3h-2v1h2V7zm-4 0H1v1h9V7zm2 6H1v1h11v-1zm-5-3H1v1h6v-1zm8 0h-5v1h5v-1zM8 2v3H1V2h7zM7 3H2v1h5V3z"/></svg>
+  );
+};

src/viewpanel/components/Icons/TagIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ITagIconProps {}
+
+export const TagIcon: React.FunctionComponent<ITagIconProps> = (props: React.PropsWithChildren<ITagIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M13.2 2H8.017l-.353.146L1 8.81v.707L6.183 14.7h.707l2.215-2.215A4.48 4.48 0 0 0 15.65 9c.027-.166.044-.332.051-.5a4.505 4.505 0 0 0-2-3.74V2.5l-.5-.5zm-.5 2.259A4.504 4.504 0 0 0 11.2 4a.5.5 0 1 0 0 1 3.5 3.5 0 0 1 1.5.338v2.138L8.775 11.4a.506.506 0 0 0-.217.217l-2.022 2.022-4.475-4.476L8.224 3H12.7v1.259zm1 1.792a3.5 3.5 0 0 1 1 2.449 3.438 3.438 0 0 1-.051.5 3.487 3.487 0 0 1-4.793 2.735l3.698-3.698.146-.354V6.051z"/></svg>
+  );
+};

src/viewpanel/components/Icons/WarningIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IWarningIconProps {}
+
+export const WarningIcon: React.FunctionComponent<IWarningIconProps> = (props: React.PropsWithChildren<IWarningIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28L2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z"/></svg>
+  );
+};

src/viewpanel/components/ValidInfo.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Icon } from './Icon';
+import { CheckIcon } from './Icons/CheckIcon';
+import { WarningIcon } from './Icons/WarningIcon';
 
 export interface IValidInfoProps {
   isValid: boolean;
@@ -10,9 +11,9 @@ export const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({isValid}: R
     <>
       {
         isValid ? (
-          <span className="valid"><Icon name="check" /></span>
+          <span className="valid"><CheckIcon /></span>
         ) : (
-          <span className="warning"><Icon name="warning" /></span>
+          <span className="warning"><WarningIcon /></span>
         )
       }
     </>

src/viewpanel/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { render } from "react-dom";
 import { ViewPanel } from "./ViewPanel";
 
+// require('@vscode/codicons/dist/codicon.css');
 import '@bendera/vscode-webview-elements/dist/vscode-table';
 import '@bendera/vscode-webview-elements/dist/vscode-table-header';
 import '@bendera/vscode-webview-elements/dist/vscode-table-header-cell';

src/webview/ExplorerView.ts

@@ -380,7 +380,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     const styleResetUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'reset.css'));
     const stylesUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'styles.css'));
     const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'viewpanel.js'));
-    const codiconsUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css'));
+
     const nonce = this.getNonce();
 
     return `
@@ -392,7 +392,6 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         <link href="${styleResetUri}" rel="stylesheet">
         <link href="${styleVSCodeUri}" rel="stylesheet">
         <link href="${stylesUri}" rel="stylesheet">
-        <link href="${codiconsUri}" rel="stylesheet">
 
         <title>Front Matter</title>
       </head>

webpack.config.js

@@ -49,13 +49,15 @@ module.exports = [
       extensions: ['.ts', '.js', '.tsx', '.jsx']
     },
     module: {
-      rules: [{
-        test: /\.(ts|tsx)$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: 'ts-loader'
-        }]
-      }]
+      rules: [
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: /node_modules/,
+          use: [{
+            loader: 'ts-loader'
+          }]
+        }
+      ]
     },
     performance: {
       maxEntrypointSize: 400000,