#678 - Check field type of tags fields for tags rendering on item cards

CHANGELOG.md

@@ -32,6 +32,7 @@
 - [#664](https://github.com/estruyf/vscode-front-matter/issues/664): Fix for parsing draft status in Hexo and Jekyll
 - [#665](https://github.com/estruyf/vscode-front-matter/issues/665): Added `dev` parameter to Nuxt script
 - [#668](https://github.com/estruyf/vscode-front-matter/issues/668): Reset pagination on media search
+- [#678](https://github.com/estruyf/vscode-front-matter/issues/678): Check field type of `tags` fields for tags rendering on item cards
 
 ## [9.2.0] - 2023-09-11
 

src/dashboardWebView/components/Contents/Item.tsx

@@ -62,7 +62,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     if (typeof tagsValue === 'string') {
       return [tagsValue];
     } else if (Array.isArray(tagsValue)) {
-      return tagsValue;
+      const items = tagsValue.map(t => typeof t === 'string' ? t : undefined);
+      return items.filter(t => t !== undefined) as string[];
     }
 
     return [];

src/services/PagesParser.ts

@@ -238,21 +238,32 @@ export class PagesParser {
           previewFieldParents = ['preview'];
         }
       }
+      // Retrieve the tags from the artilce
+      let tagParents = ContentType.findFieldsByTypeDeep(contentType.fields, 'tags');
+      if (tagParents.length > 0) {
+        const firstField = tagParents[0];
+        if (firstField.length > 0) {
+          const tagsValue = ContentType.getFieldValue(
+            article.data,
+            firstField.map((f) => f.name)
+          );
+          page.fmTags = typeof tagsValue === 'string' ? tagsValue.split(',') : tagsValue;
+        }
+      }
 
-      let tagParents = ContentType.findFieldByType(contentType.fields, 'tags');
-      const tagsValue = ContentType.getFieldValue(
-        article.data,
-        tagParents.length !== 0 ? tagParents : ['tags']
-      );
-      page.fmTags = typeof tagsValue === 'string' ? tagsValue.split(',') : tagsValue;
-
-      let categoryParents = ContentType.findFieldByType(contentType.fields, 'categories');
-      const categoriesValue = ContentType.getFieldValue(
-        article.data,
-        categoryParents.length !== 0 ? categoryParents : ['categories']
-      );
-      page.fmCategories =
-        typeof categoriesValue === 'string' ? categoriesValue.split(',') : categoriesValue;
+      // Retrieve the categories from the artilce
+      let categoryParents = ContentType.findFieldsByTypeDeep(contentType.fields, 'categories');
+      if (categoryParents.length > 0) {
+        const firstField = categoryParents[0];
+        if (firstField.length > 0) {
+          const categoriesValue = ContentType.getFieldValue(
+            article.data,
+            firstField.map((f) => f.name)
+          );
+          page.fmCategories =
+            typeof categoriesValue === 'string' ? categoriesValue.split(',') : categoriesValue;
+        }
+      }
 
       // Check if parent fields were retrieved, if not there was no image present
       if (previewFieldParents.length > 0) {