Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## [9.2.0] - 2023-xx-xx
+
+### ✨ New features
+
+- [#645](https://github.com/estruyf/vscode-front-matter/issues/645): French localization added (thanks to [Clément Barbaza](https://github.com/cba85))
+
+### 🎨 Enhancements
+
+### ⚡️ Optimizations
+
+### 🐞 Fixes
+
+- [#646](https://github.com/estruyf/vscode-front-matter/issues/646): Update the Astro `3000` port to `4321`
+- [#647](https://github.com/estruyf/vscode-front-matter/issues/647): Fix the open in browser action on the preview
+
 ## [9.1.0] - 2023-08-31
 
 ### ✨ New features

src/commands/Preview.ts

@@ -8,7 +8,8 @@ import {
   TelemetryEvent,
   PreviewCommands,
   SETTING_EXPERIMENTAL,
-  SETTING_DATE_FORMAT
+  SETTING_DATE_FORMAT,
+  GeneralCommands
 } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join, parse } from 'path';
@@ -23,6 +24,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { Folders } from './Folders';
 import { DataListener } from '../listeners/panel';
 import { ParsedFrontMatter } from '../parsers';
+import { getLocalizationFile } from '../utils/getLocalizationFile';
 
 export class Preview {
   public static filePath: string | undefined = undefined;
@@ -103,13 +105,27 @@ export class Preview {
       }
     });
 
-    webView.webview.onDidReceiveMessage((message) => {
+    webView.webview.onDidReceiveMessage(async (message) => {
       switch (message.command) {
         case PreviewCommands.toVSCode.open:
-          if (message.data) {
-            commands.executeCommand('vscode.open', message.data);
+          if (message.payload) {
+            commands.executeCommand('vscode.open', message.payload);
           }
           return;
+        case GeneralCommands.toVSCode.getLocalization:
+          const { requestId } = message;
+          if (!requestId) {
+            return;
+          }
+
+          const fileContents = await getLocalizationFile();
+
+          webView.webview.postMessage({
+            command: GeneralCommands.toVSCode.getLocalization,
+            requestId,
+            payload: fileContents
+          });
+          return;
       }
     });
 

src/constants/FrameworkDetectors.ts

@@ -5,7 +5,7 @@ export const FrameworkDetectors = [
       dist: 'dist',
       static: ['public', 'src/assets'],
       build: 'npm run build',
-      server: 'http://localhost:3000'
+      server: 'http://localhost:4321'
     },
     requiredFiles: ['astro.config.mjs'],
     requiredDependencies: ['astro'],

src/dashboardWebView/components/Preview/Preview.tsx

@@ -1,8 +1,8 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { PreviewCommands } from '../../../constants';
+import { GeneralCommands, PreviewCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { EventData } from '@estruyf/vscode/dist/models';
 import * as l10n from '@vscode/l10n';
@@ -18,6 +18,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [crntUrl, setCrntUrl] = useState<string | null>(null);
   const { getColors } = useThemeColors();
+  const [localeReady, setLocaleReady] = useState<boolean>(false);
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
@@ -51,6 +52,15 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   useEffect(() => {
     Messenger.listen(msgListener);
 
+    messageHandler.request<any>(GeneralCommands.toVSCode.getLocalization).then((data) => {
+      if (data) {
+        l10n.config({
+          contents: data
+        });
+      }
+      setLocaleReady(true);
+    });
+
     return () => {
       Messenger.unlisten(msgListener);
     };
@@ -74,31 +84,35 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
           className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
         />
 
-        <div
-          className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
-            }`}
-        >
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
-            onClick={navigateToUrl}
-            className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
-            <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
+        {
+          localeReady && (
+            <div
+              className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
+                }`}
+            >
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+                onClick={navigateToUrl}
+                className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
+                <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
 
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
-            onClick={onRefresh}
-            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
-            <RefreshIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
+                onClick={onRefresh}
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <RefreshIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
 
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
-            onClick={openInBrowser}
-            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
-            <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
-        </div>
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+                onClick={openInBrowser}
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          )
+        }
       </div>
 
       <iframe