diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c6548f7..14ea4ad6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Change Log +## [2.5.0] - 2020-08-16 + +- Moved the center layout button the the other actions section +- [#60](https://github.com/estruyf/vscode-front-matter/issues/60): Added the ability to open a site preview in VS Code + ## [2.4.1] - 2020-08-16 - Better editor highlighting functionality diff --git a/README.md b/README.md index 6e7e87c6..4478038d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- Front Matter + Front Matter

@@ -30,6 +30,10 @@ The extension will automatically verify if your title and description are SEO co In version v2.0.0 we released the newly redesigned sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code. +

+ Front Matter - Managing your static sites straight from within VS Code | Product Hunt +

+

Table of Contents

@@ -37,7 +41,8 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
  1. Markdown features
  2. The panel
    3. -
  3. Custom actions
    4. +
  4. Site preview
    5. +
  5. Custom actions/scripts
  6. Create articles from templates
  7. Syntax highlighting for Hugo Shortcodes
  8. Available commands
    9. @@ -75,7 +80,7 @@ To leverage most of the capabilities of the extension. SEO information and every When you open the panel and the current file is not a Markdown file, it will contain the following sections:

    - Base view + Base view

    > **Info**: both **Global Settings** and **Other Actions** sections are shown for the base view as when a Markdown file is openend. @@ -85,7 +90,7 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll **Global Settings**

    - Global settings + Global settings

    **SEO Status** @@ -97,9 +102,11 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll **Actions**

    - Actions + Actions

    +> **Info**: To gain the `open preview` button to show up, you will need to first set the `local preview URL`. You can do this within the `Global Settings` section or by updating the `frontMatter.preview.host` setting. + **Metadata: Keywords, Tags, Categories**

    @@ -111,11 +118,23 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll **Other actions**

    - Other actions + Other actions

    **Info**: The `Enable write settings` action allow you to make Markdown specific changes to optimize the writing of your articles. It will change settings like the `fontSize`, `lineHeight`, `wordWrap`, `lineNumbers` and more. +## Site preview + +The Markdown preview is not consistently delivering the same result as the one you will see on your site. The Front Matter extension provides you a way to show the site result. For this, you will first have to set the `frontMatter.preview.host` setting. You can perform it from the `Global Settings` section in the panel or in your `settings.json` file to set the setting. + +For example, with Hugo, the local server spins up on `http://localhost:1313`. When you set this URL as the value of the `frontMatter.preview.host` setting. You can click on the `open preview` button and the site preview will be shown. + +

    + Site preview +

    + +> **Important**: Be sure to spin up your local server. This is an action the extension currently doesn't do for you. If you want, you create yourself a custom action in order to start it. + ## 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. @@ -241,6 +260,10 @@ You can also specify a prefix and suffix, which can be added to the slug if you > **Info**: At the moment, the extension only supports English stopwords. +**Front Matter: Preview article** + +Opens the site preview for the current article. More information about it can be found in the [site preview](#site-preview) section. + ### Usage - Start by opening the command prompt: @@ -404,12 +427,34 @@ Specify if you want to highlight the Front Matter in the Markdown file. Default: } ``` +### `frontMatter.preview.host` + +Specify the host URL (example: http://localhost:1313) to be used when opening the preview. + +```json +{ + "frontMatter.preview.host": "" +} +``` + +### `frontMatter.preview.pathName` + +Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM` (if not set via the slug). The date will be generated based on the article its date field value. + +```json +{ + "frontMatter.preview.pathName": "" +} +``` + +> **Important**: As the value will be formatted with the article's date, it will try to convert all characters you enter. In case you wan to skip some characters or all of them, you need to wrap that part between two single quotes. Example: `"'blog/'yyyy/MM"` will result in: `blog/2021/08`. + ## Feedback / issues / ideas Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).

    - - + +

    \ No newline at end of file diff --git a/assets/frontmatter-128x128.png b/assets/frontmatter-128x128.png new file mode 100644 index 00000000..9c8ca78b Binary files /dev/null and b/assets/frontmatter-128x128.png differ diff --git a/assets/frontmatter-dark.svg b/assets/frontmatter-dark.svg new file mode 100644 index 00000000..e4a53ab8 --- /dev/null +++ b/assets/frontmatter-dark.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/frontmatter-mag.svg b/assets/frontmatter-mag.svg new file mode 100644 index 00000000..744f1fd8 --- /dev/null +++ b/assets/frontmatter-mag.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/frontmatter.png b/assets/frontmatter.png new file mode 100644 index 00000000..221af287 Binary files /dev/null and b/assets/frontmatter.png differ diff --git a/assets/media/styles.css b/assets/media/styles.css index 141bf2f3..f062f8f9 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -268,6 +268,14 @@ margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.base__action label { + display: block; +} + +.base__action input { + width: 100% !important; +} + .seo__status__details ul > * + *, .ext_settings > * + * { --tw-space-y-reverse: 0; diff --git a/assets/v2.5.0/actions.png b/assets/v2.5.0/actions.png new file mode 100644 index 00000000..42d01903 Binary files /dev/null and b/assets/v2.5.0/actions.png differ diff --git a/assets/v2.5.0/baseview.png b/assets/v2.5.0/baseview.png new file mode 100644 index 00000000..4a8f2d6f Binary files /dev/null and b/assets/v2.5.0/baseview.png differ diff --git a/assets/v2.5.0/global-settings.png b/assets/v2.5.0/global-settings.png new file mode 100644 index 00000000..435e730b Binary files /dev/null and b/assets/v2.5.0/global-settings.png differ diff --git a/assets/v2.5.0/other-actions.png b/assets/v2.5.0/other-actions.png new file mode 100644 index 00000000..7dfb567a Binary files /dev/null and b/assets/v2.5.0/other-actions.png differ diff --git a/assets/v2.5.0/site-preview.png b/assets/v2.5.0/site-preview.png new file mode 100644 index 00000000..1ad6c146 Binary files /dev/null and b/assets/v2.5.0/site-preview.png differ diff --git a/package.json b/package.json index 6ce17a5a..c605992d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vscode-front-matter", "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", + "icon": "assets/frontmatter-128x128.png", "version": "2.4.1", "preview": false, "publisher": "eliostruyf", @@ -58,6 +58,7 @@ "onCommand:frontMatter.createContent", "onCommand:frontMatter.init", "onCommand:frontMatter.collapseSections", + "onCommand:frontMatter.preview", "onView:frontMatter.explorer" ], "main": "./dist/extension", @@ -110,6 +111,16 @@ "default": true, "markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true." }, + "frontMatter.preview.host": { + "type": "string", + "default": "", + "markdownDescription": "Specify the host URL (example: http://localhost:1313) to be used when opening the preview." + }, + "frontMatter.preview.pathName": { + "type": "string", + "default": "", + "markdownDescription": "Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM`. The date will be generated based on the article its date field value." + }, "frontMatter.taxonomy.dateField": { "type": "string", "default": "date", @@ -283,6 +294,11 @@ "light": "assets/icons/close-light.svg", "dark": "assets/icons/close-dark.svg" } + }, + { + "command": "frontMatter.preview", + "title": "Preview article", + "category": "Front matter" } ], "menus": { @@ -312,6 +328,10 @@ "command": "frontMatter.createTemplate", "when": "!frontMatterCanInit" }, + { + "command": "frontMatter.openPreview", + "when": "frontMatterCanOpenPreview" + }, { "command": "frontMatter.collapseSections", "when": "false" diff --git a/src/commands/Article.ts b/src/commands/Article.ts index bf0e2995..c44b27f3 100644 --- a/src/commands/Article.ts +++ b/src/commands/Article.ts @@ -18,13 +18,13 @@ export class Article { * @param type */ public static async insert(type: TaxonomyType) { - const config = vscode.workspace.getConfiguration(CONFIG_KEY); const editor = vscode.window.activeTextEditor; if (!editor) { return; } - const article = ArticleHelper.getFrontMatter(editor); + const article = Article.getCurrent(); + if (!article) { return; } @@ -101,7 +101,7 @@ export class Article { * @param article */ public static updateDate(article: matter.GrayMatterFile, forceCreate: boolean = false) { - const config = vscode.workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); const dateFormat = config.get(SETTING_DATE_FORMAT) as string; const dateField = config.get(SETTING_DATE_FIELD) as string || "date"; const modField = config.get(SETTING_MODIFIED_FIELD) as string || "date"; @@ -116,7 +116,7 @@ export class Article { * Sets the article lastmod date */ public static async setLastModifiedDate() { - const config = vscode.workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); const editor = vscode.window.activeTextEditor; if (!editor) { return; @@ -148,7 +148,7 @@ export class Article { * Generate the slug based on the article title */ public static async generateSlug() { - const config = vscode.workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); const prefix = config.get(SETTING_SLUG_PREFIX) as string; const suffix = config.get(SETTING_SLUG_SUFFIX) as string; const updateFileName = config.get(SETTING_SLUG_UPDATE_FILE_NAME) as string; @@ -231,7 +231,7 @@ export class Article { const editor = vscode.window.activeTextEditor; if (txtChanges.length > 0 && editor && ArticleHelper.isMarkdownFile()) { - const config = vscode.workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); const autoUpdate = config.get(SETTING_AUTO_UPDATE_DATE); if (autoUpdate) { @@ -251,6 +251,23 @@ export class Article { } } + /** + * Get the current article + */ + private static getCurrent(): matter.GrayMatterFile | undefined { + const editor = vscode.window.activeTextEditor; + if (!editor) { + return; + } + + const article = ArticleHelper.getFrontMatter(editor); + if (!article) { + return; + } + + return article; + } + /** * Update the article date and return it * @param article diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts index 8dd4765a..ede94559 100644 --- a/src/commands/Folders.ts +++ b/src/commands/Folders.ts @@ -6,6 +6,7 @@ import uniqBy = require("lodash.uniqby"); import { Template } from "./Template"; import { Notifications } from "../helpers/Notifications"; import { CONTEXT } from "../constants/context"; +import { SettingsHelper } from "../helpers"; export class Folders { @@ -151,7 +152,7 @@ export class Folders { * @returns */ private static get() { - const config = workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); const folders: ContentFolder[] = config.get(SETTINGS_CONTENT_FOLDERS) as ContentFolder[]; return folders; } @@ -161,7 +162,7 @@ export class Folders { * @param folders */ private static async update(folders: ContentFolder[]) { - const config = workspace.getConfiguration(CONFIG_KEY); + const config = SettingsHelper.getConfig(); await config.update(SETTINGS_CONTENT_FOLDERS, folders); } } \ No newline at end of file diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts new file mode 100644 index 00000000..dad21306 --- /dev/null +++ b/src/commands/Preview.ts @@ -0,0 +1,137 @@ +import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME } from './../constants/settings'; +import { ArticleHelper } from './../helpers/ArticleHelper'; +import { join } from "path"; +import { commands, env, Uri, ViewColumn, window } from "vscode"; +import { SettingsHelper } from '../helpers'; +import { PreviewSettings } from '../models'; +import { format } from 'date-fns'; +import { CONTEXT } from '../constants/context'; + + +export class Preview { + + /**  + * Init the preview + */ + public static async init() { + const settings = Preview.getSettings(); + await commands.executeCommand('setContext', CONTEXT.canOpenPreview, !!settings.host); + } + + /** + * Open the markdown preview in the editor + */ + public static async open(extensionPath: string) { + const settings = Preview.getSettings(); + + if (!settings.host) { + return; + } + + const editor = window.activeTextEditor; + const article = editor ? ArticleHelper.getFrontMatter(editor) : null; + let slug = article?.data ? article.data.slug : ""; + + if (settings.pathname) { + const articleDate = ArticleHelper.getDate(article); + try { + slug = join(format(articleDate || new Date(), settings.pathname), slug); + } catch (error) { + slug = join(settings.pathname, slug); + } + } + + // Create the preview webview + const webView = window.createWebviewPanel( + 'frontMatterPreview', + 'FrontMatter Preview', + { + viewColumn: ViewColumn.Beside, + preserveFocus: true + }, + { + enableScripts: true + } + ); + + webView.iconPath = { + dark: Uri.file(join(extensionPath, 'assets/frontmatter-dark.svg')), + light: Uri.file(join(extensionPath, 'assets/frontmatter.svg')) + } + + const localhostUrl = await env.asExternalUri( + Uri.parse(settings.host) + ); + + const cspSource = webView.webview.cspSource; + + webView.webview.html = ` + + + + + +
    + +
    +