Add timezone formatting support and related settings #887

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### 🎨 Enhancements
 
+- [#887](https://github.com/estruyf/vscode-front-matter/issues/887): Added new `frontMatter.global.timezone` setting, by default it is set to `UTC` for date formatting
 - [#888](https://github.com/estruyf/vscode-front-matter/issues/888): Added the ability to prompt GitHub Copilot from a custom script/action
 
 ### 🐞 Fixes

package.json

@@ -1056,7 +1056,7 @@
             "error"
           ],
           "markdownDescription": "%setting.frontMatter.global.notifications.markdownDescription%",
-          "scope": "Templates"
+          "scope": "Global"
         },
         "frontMatter.global.disabledNotifications": {
           "type": "array",
@@ -1066,6 +1066,12 @@
             "requiredFieldValidation"
           ]
         },
+        "frontMatter.global.timezone": {
+          "default": "UTC",
+          "type": "string",
+          "markdownDescription": "%setting.frontMatter.global.timezone.markdownDescription%",
+          "scope": "Global"
+        },
         "frontMatter.media.defaultSorting": {
           "type": "string",
           "default": "",
@@ -2855,7 +2861,8 @@
     "cheerio": "1.0.0-rc.12",
     "clsx": "^2.1.0",
     "css-loader": "5.2.7",
-    "date-fns": "2.23.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "dotenv": "^16.3.1",
     "downshift": "6.0.6",
     "eslint": "^8.33.0",

package.nls.json

@@ -166,6 +166,7 @@
   "setting.frontMatter.global.modes.items.properties.features.description": "The features you want to use for your mode.",
   "setting.frontMatter.global.notifications.markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.global.notifications%22%5D)",
   "setting.frontMatter.global.disabledNotifications.markdownDescription": "This is an array with the notifications types that can be disabled for Front Matter CMS. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.global.disablednotifications%22%5D)",
+  "setting.frontMatter.global.timezone.markdownDescription": "Specify the timezone for your date formatting. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datetimezone) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.taxonomy.datetimezone%22%5D)",
   "setting.frontMatter.media.defaultSorting.markdownDescription": "Specify the default sorting option for the media dashboard. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.media.defaultsorting%22%5D)",
   "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "Specify the mime types to support for the media files. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.media.supportedmimetypes%22%5D)",
 

src/commands/Article.ts

@@ -23,7 +23,6 @@ import {
   SETTING_SLUG_TEMPLATE
 } from './../constants';
 import { CustomPlaceholder, Field } from '../models';
-import { format } from 'date-fns';
 import {
   ArticleHelper,
   Logger,
@@ -44,7 +43,7 @@ import { NavigationType } from '../dashboardWebView/models';
 import { SNIPPET } from '../constants/Snippet';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
-import { getTitleField } from '../utils';
+import { formatInTimezone, getTitleField } from '../utils';
 
 export class Article {
   /**
@@ -407,10 +406,10 @@ export class Article {
 
     if (fieldDateFormat) {
       Logger.verbose(`Article:formatDate:FieldDateFormat - ${fieldDateFormat}`);
-      return format(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string);
+      return formatInTimezone(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string);
     } else if (dateFormat && typeof dateFormat === 'string') {
       Logger.verbose(`Article:formatDate:DateFormat - ${dateFormat}`);
-      return format(dateValue, DateHelper.formatUpdate(dateFormat) as string);
+      return formatInTimezone(dateValue, DateHelper.formatUpdate(dateFormat) as string);
     } else {
       Logger.verbose(`Article:formatDate:toISOString - ${dateValue}`);
       return typeof dateValue.toISOString === 'function'

src/commands/Folders.ts

@@ -23,7 +23,6 @@ import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
 import { Extension, Logger, Settings, processTimePlaceholders } from '../helpers';
 import { existsSync } from 'fs';
-import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
@@ -31,7 +30,7 @@ import { MediaListener, PagesListener, SettingsListener } from '../listeners/das
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
 import { glob } from 'glob';
 import { mkdirAsync } from '../utils/mkdirAsync';
-import { existsAsync, isWindows, lstatAsync } from '../utils';
+import { existsAsync, formatInTimezone, isWindows, lstatAsync } from '../utils';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
 import { Preview } from './Preview';
@@ -85,7 +84,7 @@ export class Folders {
       prompt: l10n.t(LocalizationKey.commandsFoldersAddMediaFolderInputBoxPrompt),
       value: startPath,
       ignoreFocusOut: true,
-      placeHolder: `${format(new Date(), `yyyy/MM`)}`
+      placeHolder: `${formatInTimezone(new Date(), `yyyy/MM`)}`
     });
 
     if (!folderName) {

src/constants/settings.ts

@@ -13,6 +13,7 @@ export const SETTING_GLOBAL_NOTIFICATIONS = 'global.notifications';
 export const SETTING_GLOBAL_NOTIFICATIONS_DISABLED = 'global.disabledNotifications';
 export const SETTING_GLOBAL_MODES = 'global.modes';
 export const SETTING_GLOBAL_ACTIVE_MODE = 'global.activeMode';
+export const SETTING_GLOBAL_TIMEZONE = 'global.timezone';
 
 export const SETTING_TAXONOMY_TAGS = 'taxonomy.tags';
 export const SETTING_TAXONOMY_CATEGORIES = 'taxonomy.categories';

src/helpers/processDateTimePlaceholders.ts

@@ -1,5 +1,4 @@
-import { format } from 'date-fns';
-import { DateHelper } from './DateHelper';
+import { formatInTimezone } from '../utils';
 
 /**
  * Replace the datetime placeholders
@@ -21,10 +20,8 @@ export const processDateTimePlaceholders = (value: string, articleDate?: Date) =
 
             if (dateFormat) {
               if (dateFormat && typeof dateFormat === 'string') {
-                value = value.replace(
-                  match,
-                  format(articleDate || new Date(), DateHelper.formatUpdate(dateFormat) as string)
-                );
+                const formattedDate = formatInTimezone(articleDate || new Date(), dateFormat);
+                value = value.replace(match, formattedDate);
               } else {
                 value = value.replace(match, (articleDate || new Date()).toISOString());
               }

src/helpers/processFmPlaceholders.ts

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { formatInTimezone } from '../utils';
 
 export const processFmPlaceholders = (value: string, fmData: { [key: string]: any }) => {
   // Example: {{fm.date}} or {{fm.date | dateFormat 'DD.MM.YYYY'}}
@@ -27,7 +27,7 @@ export const processFmPlaceholders = (value: string, fmData: { [key: string]: an
 
             // Parse the date value and format it
             if (fieldValue) {
-              const formattedDate = format(new Date(fieldValue), dateFormat);
+              const formattedDate = formatInTimezone(new Date(fieldValue), dateFormat);
               value = value.replace(match, formattedDate);
             }
           } else if (fieldValue) {

src/helpers/processTimePlaceholders.ts

@@ -1,5 +1,4 @@
-import { format } from 'date-fns';
-import { DateHelper } from './DateHelper';
+import { formatInTimezone } from '../utils';
 
 /**
  * Replace the time placeholders
@@ -13,10 +12,7 @@ export const processTimePlaceholders = (value: string, dateFormat?: string, arti
       const regex = new RegExp('{{now}}', 'g');
 
       if (dateFormat && typeof dateFormat === 'string') {
-        value = value.replace(
-          regex,
-          format(articleDate || new Date(), DateHelper.formatUpdate(dateFormat) as string)
-        );
+        value = value.replace(regex, formatInTimezone(articleDate || new Date(), dateFormat));
       } else {
         value = value.replace(regex, (articleDate || new Date()).toISOString());
       }
@@ -24,37 +20,37 @@ export const processTimePlaceholders = (value: string, dateFormat?: string, arti
 
     if (value.includes('{{year}}')) {
       const regex = new RegExp('{{year}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'yyyy'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'yyyy'));
     }
 
     if (value.includes('{{month}}')) {
       const regex = new RegExp('{{month}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'MM'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'MM'));
     }
 
     if (value.includes('{{day}}')) {
       const regex = new RegExp('{{day}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'dd'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'dd'));
     }
 
     if (value.includes('{{hour12}}')) {
       const regex = new RegExp('{{hour12}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'hh'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'hh'));
     }
 
     if (value.includes('{{hour24}}')) {
       const regex = new RegExp('{{hour24}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'HH'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'HH'));
     }
 
     if (value.includes('{{ampm}}')) {
       const regex = new RegExp('{{ampm}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'aaa'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'aaa'));
     }
 
     if (value.includes('{{minute}}')) {
       const regex = new RegExp('{{minute}}', 'g');
-      value = value.replace(regex, format(articleDate || new Date(), 'mm'));
+      value = value.replace(regex, formatInTimezone(articleDate || new Date(), 'mm'));
     }
   }
 

src/utils/formatInTimezone.ts

@@ -0,0 +1,11 @@
+import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { SETTING_GLOBAL_TIMEZONE } from '../constants';
+import { DateHelper, Settings } from '../helpers';
+
+export const formatInTimezone = (date: Date, dateFormat: string) => {
+  const timezone = Settings.get<string>(SETTING_GLOBAL_TIMEZONE);
+  return timezone
+    ? formatInTimeZone(date, timezone, DateHelper.formatUpdate(dateFormat) as string)
+    : format(date, DateHelper.formatUpdate(dateFormat) as string);
+};

src/utils/index.ts

@@ -6,6 +6,7 @@ export * from './existsAsync';
 export * from './fetchWithTimeout';
 export * from './fieldWhenClause';
 export * from './flattenObjectKeys';
+export * from './formatInTimezone';
 export * from './getDescriptionField';
 export * from './getExtensibilityScripts';
 export * from './getLocalizationFile';