#615 - support for astro:assets added

CHANGELOG.md

@@ -19,6 +19,7 @@
 - [#424](https://github.com/estruyf/vscode-front-matter/issues/424): Snippet wrapping to allow easier updates or changes to previously set snippets in the content
 - [#585](https://github.com/estruyf/vscode-front-matter/issues/585): New content relationship field type (`contentRelationship`)
 - [#598](https://github.com/estruyf/vscode-front-matter/issues/598): Multilingual support
+- [#615](https://github.com/estruyf/vscode-front-matter/issues/615): Added support for `astro:assets` - [Astro Assets](https://docs.astro.build/en/guides/assets/)
 
 ### 🎨 Enhancements
 

src/commands/Folders.ts

@@ -56,6 +56,13 @@ export class Folders {
       );
     }
 
+    if (startPath.includes(STATIC_FOLDER_PLACEHOLDER.astro.placeholder)) {
+      startPath = startPath.replace(
+        STATIC_FOLDER_PLACEHOLDER.astro.placeholder,
+        STATIC_FOLDER_PLACEHOLDER.astro.assetsFolder
+      );
+    }
+
     const folderName = await window.showInputBox({
       title: `Add media folder`,
       prompt: `Which name would you like to give to your folder (use "/" to create multi-level folders)?`,

src/constants/StaticFolderPlaceholder.ts

@@ -2,5 +2,9 @@ export const STATIC_FOLDER_PLACEHOLDER = {
   hexo: {
     postsFolder: 'source/_posts',
     placeholder: 'hexo:post_asset_folder'
+  },
+  astro: {
+    placeholder: 'astro:assets',
+    assetsFolder: 'src/assets'
   }
 };

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -2,7 +2,7 @@ import { CollectionIcon } from '@heroicons/react/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
@@ -33,8 +33,12 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
     const { wsFolder, staticFolder, contentFolders } = settings;
 
     const isValid = (folderPath: string) => {
-      if (staticFolder) {
-        const staticPath = parseWinPath(join(wsFolder, staticFolder)) as string;
+      let crntStaticFolder = staticFolder;
+      if (staticFolder === STATIC_FOLDER_PLACEHOLDER.astro.placeholder) {
+        crntStaticFolder = STATIC_FOLDER_PLACEHOLDER.astro.assetsFolder;
+      }
+      if (crntStaticFolder) {
+        const staticPath = parseWinPath(join(wsFolder, crntStaticFolder)) as string;
         const relPath = folderPath.replace(staticPath, '') as string;
 
         if (relPath.length > 1 && folderPath.startsWith(staticPath)) {

src/dashboardWebView/components/Media/Media.tsx

@@ -47,6 +47,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       let staticFolderPath = join('/', settings?.staticFolder || '', '/');
       if (settings?.staticFolder === STATIC_FOLDER_PLACEHOLDER.hexo.placeholder) {
         staticFolderPath = join('/', STATIC_FOLDER_PLACEHOLDER.hexo.postsFolder, '/');
+      } else if (settings?.staticFolder === STATIC_FOLDER_PLACEHOLDER.astro.placeholder) {
+        staticFolderPath = join('/', STATIC_FOLDER_PLACEHOLDER.astro.assetsFolder, '/');
       }
       return staticFolderPath;
     }
@@ -60,7 +62,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       viewData.data &&
       typeof viewData.data.pageBundle !== 'undefined' &&
       !viewData.data.pageBundle &&
-      settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder
+      settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder &&
+      settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.astro.placeholder
     ) {
       return [];
     }

src/helpers/FrameworkDetector.ts

@@ -1,7 +1,7 @@
 import { parseWinPath } from './parseWinPath';
 import * as jsoncParser from 'jsonc-parser';
 import jsyaml = require('js-yaml');
-import { join, resolve } from 'path';
+import { join, resolve, relative, dirname } from 'path';
 import { commands, Uri } from 'vscode';
 import { Folders } from '../commands/Folders';
 import {
@@ -128,6 +128,19 @@ export class FrameworkDetector {
         relAssetPath = relAssetPath.substring(1);
       }
     }
+    // Support for the Astro assets folder
+    else if (staticFolder === STATIC_FOLDER_PLACEHOLDER.astro.placeholder) {
+      const absAssetPath = parseWinPath(
+        join(Folders.getWorkspaceFolder()?.fsPath || '', relAssetPath)
+      );
+
+      const fileDir = dirname(filePath);
+      const assetDir = dirname(absAssetPath);
+      const fileName = parse(absAssetPath);
+
+      relAssetPath = relative(fileDir, assetDir);
+      relAssetPath = join(relAssetPath, `${fileName.name}${fileName.ext}`);
+    }
 
     return parseWinPath(relAssetPath);
   }

src/helpers/MediaHelpers.ts

@@ -109,7 +109,11 @@ export class MediaHelpers {
 
       allMedia = [...media];
     } else {
-      if (staticFolder && staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder) {
+      if (
+        staticFolder &&
+        staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder &&
+        staticFolder !== STATIC_FOLDER_PLACEHOLDER.astro.placeholder
+      ) {
         const folderSearch = join(staticFolder || '', '/*');
         const files = await workspace.findFiles(folderSearch);
         const media = await MediaHelpers.updateMediaData(MediaHelpers.filterMedia(files));
@@ -120,6 +124,12 @@ export class MediaHelpers {
         const files = await workspace.findFiles(folderSearch);
         const media = await MediaHelpers.updateMediaData(MediaHelpers.filterMedia(files));
 
+        allMedia = [...media];
+      } else if (staticFolder && staticFolder === STATIC_FOLDER_PLACEHOLDER.astro.placeholder) {
+        const folderSearch = join(STATIC_FOLDER_PLACEHOLDER.astro.assetsFolder, '/*');
+        const files = await workspace.findFiles(folderSearch);
+        const media = await MediaHelpers.updateMediaData(MediaHelpers.filterMedia(files));
+
         allMedia = [...media];
       }
 
@@ -225,6 +235,11 @@ export class MediaHelpers {
         parseWinPath(wsFolder?.fsPath || ''),
         STATIC_FOLDER_PLACEHOLDER.hexo.postsFolder
       );
+    } else if (staticFolder === STATIC_FOLDER_PLACEHOLDER.astro.placeholder) {
+      staticPath = join(
+        parseWinPath(wsFolder?.fsPath || ''),
+        STATIC_FOLDER_PLACEHOLDER.astro.assetsFolder
+      );
     }
 
     if (staticPath && (await existsAsync(staticPath))) {