From f74eec954f832534aace8022199efd6cf3b2c5df Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 14 Oct 2021 16:23:28 +0200
Subject: [PATCH 1/2] #149 - Fix keywords

---
 CHANGELOG.md                                |  4 ++++
 src/panelWebView/components/Metadata.tsx    | 19 +++++++++++--------
 src/panelWebView/components/SeoKeywords.tsx | 18 +++++++++++++++++-
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8812d0cd..7b4bbb0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## [5.1.1] - 2021-10-14
+
+- [#149](https://github.com/estruyf/vscode-front-matter/issues/149): Fix panel rendering when incorrect type for keywords is provided
+
 ## [5.1.0] - 2021-10-13
 
 ### 🎨 Enhancements
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 389f32a1..dc42d039 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -186,14 +186,17 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
       }
 
       {
-        <TagPicker type={TagType.keywords} 
-                   icon={<SymbolKeywordIcon />}
-                   crntSelected={metadata.keywords as string[] || []} 
-                   options={[]} 
-                   freeform={true} 
-                   focussed={focusElm === TagType.keywords}
-                   unsetFocus={unsetFocus}
-                   disableConfigurable />
+        <FieldBoundary fieldName={`Keywords`}>
+          <TagPicker 
+            type={TagType.keywords} 
+            icon={<SymbolKeywordIcon />}
+            crntSelected={metadata.keywords as string[] || []} 
+            options={[]} 
+            freeform={true} 
+            focussed={focusElm === TagType.keywords}
+            unsetFocus={unsetFocus}
+            disableConfigurable />
+        </FieldBoundary>
       }
     </Collapsible>
   );
diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx
index 4747ec0b..46af35d9 100644
--- a/src/panelWebView/components/SeoKeywords.tsx
+++ b/src/panelWebView/components/SeoKeywords.tsx
@@ -13,6 +13,22 @@ export interface ISeoKeywordsProps {
 
 export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keywords, ...data}: React.PropsWithChildren<ISeoKeywordsProps>) => {
 
+  const validateKeywords = () => {
+    if (!keywords) {
+      return [];
+    }
+
+    if (typeof keywords === 'string') {
+      return [keywords];
+    }
+
+    if (Array.isArray(keywords)) {
+      return keywords;
+    }
+
+    return [];
+  }
+
   if (!keywords || keywords.length === 0) {
     return null;
   }
@@ -31,7 +47,7 @@ export const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({keyword
         </VsTableHeader>
         <VsTableBody slot="body">
           {
-            keywords.map((keyword, index) => {
+            validateKeywords().map((keyword, index) => {
               return (
                 <SeoKeywordInfo key={index} keyword={keyword} {...data} />
               );

From d3eb7b223c547f9317ad8dc18b36c9e161ba4801 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 14 Oct 2021 16:23:51 +0200
Subject: [PATCH 2/2] 5.1.1

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5be83853..6be4108d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter-beta",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 2d22a508..0bceb0bb 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "description": "An essential Visual Studio Code extension when you want to manage the markdown pages of your static site like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {