diff --git a/README.md b/README.md index ded2984d..ee541199 100644 --- a/README.md +++ b/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. -

- Front Matter Panel -

- 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** + +

+ SEO article status +

+ +**Actions** + +

+ Actions +

+ +**Metadata: Keywords, Tags, Categories** + +

+ Article metadata +

+ > **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: + +

+ Other actions +

+ ## 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.

- Custom actions + Custom action

The current workspace-, file-path, and front matter data will be passed as an argument. In your script fetch these arguments as follows: diff --git a/assets/media/styles.css b/assets/media/styles.css index c51d6d9b..9047669b 100644 --- a/assets/media/styles.css +++ b/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; } diff --git a/assets/v2.0.0/actions.png b/assets/v2.0.0/actions.png new file mode 100644 index 00000000..86f19488 Binary files /dev/null and b/assets/v2.0.0/actions.png differ diff --git a/assets/v2.0.0/custom-action.png b/assets/v2.0.0/custom-action.png new file mode 100644 index 00000000..baf4383d Binary files /dev/null and b/assets/v2.0.0/custom-action.png differ diff --git a/assets/v2.0.0/metadata.png b/assets/v2.0.0/metadata.png new file mode 100644 index 00000000..2c6ca0cd Binary files /dev/null and b/assets/v2.0.0/metadata.png differ diff --git a/assets/v2.0.0/other-actions.png b/assets/v2.0.0/other-actions.png new file mode 100644 index 00000000..11d9bd20 Binary files /dev/null and b/assets/v2.0.0/other-actions.png differ diff --git a/assets/v2.0.0/seo.png b/assets/v2.0.0/seo.png new file mode 100644 index 00000000..e526da19 Binary files /dev/null and b/assets/v2.0.0/seo.png differ diff --git a/package-lock.json b/package-lock.json index 8d06c4d5..5390844b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index fa8c8b5c..c70aa312 100644 --- a/package.json +++ b/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": {} } diff --git a/src/viewpanel/ViewPanel.tsx b/src/viewpanel/ViewPanel.tsx index 1172458a..88ec64dc 100644 --- a/src/viewpanel/ViewPanel.tsx +++ b/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 = (props: React { } + icon={} crntSelected={metadata.keywords || []} options={[]} freeform={true} @@ -66,7 +72,7 @@ export const ViewPanel: React.FunctionComponent = (props: React { (settings && settings.tags && settings.tags.length > 0) && ( } + icon={} crntSelected={metadata.tags || []} options={settings.tags} freeform={settings.freeform} @@ -77,7 +83,7 @@ export const ViewPanel: React.FunctionComponent = (props: React { (settings && settings.categories && settings.categories.length > 0) && ( } + icon={} crntSelected={metadata.categories || []} options={settings.categories} freeform={settings.freeform} @@ -90,19 +96,19 @@ export const ViewPanel: React.FunctionComponent = (props: React
- +
- +
- +
diff --git a/src/viewpanel/components/Icons/BugIcon.tsx b/src/viewpanel/components/Icons/BugIcon.tsx new file mode 100644 index 00000000..fa438c38 --- /dev/null +++ b/src/viewpanel/components/Icons/BugIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IBugIconProps {} + +export const BugIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/CheckIcon.tsx b/src/viewpanel/components/Icons/CheckIcon.tsx new file mode 100644 index 00000000..4382e9d1 --- /dev/null +++ b/src/viewpanel/components/Icons/CheckIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ICheckIconProps {} + +export const CheckIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/FileIcon.tsx b/src/viewpanel/components/Icons/FileIcon.tsx new file mode 100644 index 00000000..42388d21 --- /dev/null +++ b/src/viewpanel/components/Icons/FileIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IFileIconProps {} + +export const FileIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/FolderOpenedIcon.tsx b/src/viewpanel/components/Icons/FolderOpenedIcon.tsx new file mode 100644 index 00000000..e3bc4f44 --- /dev/null +++ b/src/viewpanel/components/Icons/FolderOpenedIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IFolderOpenedIconProps {} + +export const FolderOpenedIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/ListUnorderedIcon.tsx b/src/viewpanel/components/Icons/ListUnorderedIcon.tsx new file mode 100644 index 00000000..751b6e0a --- /dev/null +++ b/src/viewpanel/components/Icons/ListUnorderedIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IListUnorderedIconProps {} + +export const ListUnorderedIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/SettingsIcon.tsx b/src/viewpanel/components/Icons/SettingsIcon.tsx new file mode 100644 index 00000000..0e4b30e1 --- /dev/null +++ b/src/viewpanel/components/Icons/SettingsIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ISettingsIconProps {} + +export const SettingsIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/SymbolKeywordIcon.tsx b/src/viewpanel/components/Icons/SymbolKeywordIcon.tsx new file mode 100644 index 00000000..b100bfe4 --- /dev/null +++ b/src/viewpanel/components/Icons/SymbolKeywordIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ISymbolKeywordIconProps {} + +export const SymbolKeywordIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/TagIcon.tsx b/src/viewpanel/components/Icons/TagIcon.tsx new file mode 100644 index 00000000..4178de59 --- /dev/null +++ b/src/viewpanel/components/Icons/TagIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ITagIconProps {} + +export const TagIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/Icons/WarningIcon.tsx b/src/viewpanel/components/Icons/WarningIcon.tsx new file mode 100644 index 00000000..84b3dde8 --- /dev/null +++ b/src/viewpanel/components/Icons/WarningIcon.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface IWarningIconProps {} + +export const WarningIcon: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + + ); +}; \ No newline at end of file diff --git a/src/viewpanel/components/ValidInfo.tsx b/src/viewpanel/components/ValidInfo.tsx index 0fc13c15..9936018a 100644 --- a/src/viewpanel/components/ValidInfo.tsx +++ b/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 = ({isValid}: R <> { isValid ? ( - + ) : ( - + ) } diff --git a/src/viewpanel/index.tsx b/src/viewpanel/index.tsx index 28bf3f1a..55182aad 100644 --- a/src/viewpanel/index.tsx +++ b/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'; diff --git a/src/webview/ExplorerView.ts b/src/webview/ExplorerView.ts index c7f34bc0..9c7b8cc2 100644 --- a/src/webview/ExplorerView.ts +++ b/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 { - Front Matter diff --git a/webpack.config.js b/webpack.config.js index 966ec999..9dbe39bd 100644 --- a/webpack.config.js +++ b/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,