Combine the title, description and artilce length details

CHANGELOG.md

@@ -1,7 +1,8 @@
 # Change Log
 
-## [1.19.0] - 2020-07-22
+## [2.0.0] - 2020-07-23
 
+- Redesigned sidebar panel
 - Sidebar background styling match the VSCode defined sidebar color
 - Added support for `mdx` files
 - Added support for `enter` press in the combobox

README.md

@@ -26,6 +26,10 @@ The extension will automatically verify if your title and description are SEO co
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 2**
+
+In version two we released the new redesigned sidebar panel with improved SEO support.
+
 <h2 id="table-of-contents">Table of Contents</h2>
 
 <details open="open">

assets/media/styles.css

@@ -153,6 +153,9 @@
   width: 30px;
   padding-bottom: 2px; 
   padding-top: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .article__tags ul {
@@ -289,6 +292,10 @@
   overflow: hidden;
 }
 
+.table__title {
+  text-transform: capitalize;
+}
+
 .table__cell__validation {
   text-align: center;
 }

src/viewpanel/components/Icons/AddIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IAddIconProps {}
+
+export const AddIcon: React.FunctionComponent<IAddIconProps> = (props: React.PropsWithChildren<IAddIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg>
+  );
+};

src/viewpanel/components/Icons/ArchiveIcon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IArchiveIconProps {}
+
+export const ArchiveIcon: React.FunctionComponent<IArchiveIconProps> = (props: React.PropsWithChildren<IArchiveIconProps>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fillRule="evenodd" clipRule="evenodd" d="M14.5 1h-13l-.5.5v3l.5.5H2v8.5l.5.5h11l.5-.5V5h.5l.5-.5v-3l-.5-.5zm-1 3H2V2h12v2h-.5zM3 13V5h10v8H3zm8-6H5v1h6V7z"/></svg>
+  );
+};

src/viewpanel/components/SeoFieldInfo.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ValidInfo } from './ValidInfo';
+import { VsTableCell, VsTableRow } from './VscodeComponents';
+
+export interface ISeoFieldInfoProps {
+  title: string;
+  value: any;
+  recommendation: any;
+  isValid?: boolean;
+}
+
+export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ title, value, recommendation, isValid }: React.PropsWithChildren<ISeoFieldInfoProps>) => {
+  return (
+    <VsTableRow>
+      <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
+      <VsTableCell className={`table__cell`}>{value}</VsTableCell>
+      <VsTableCell className={`table__cell`}>{recommendation}</VsTableCell>
+      <VsTableCell className={`table__cell table__cell__validation`}>
+        { isValid !== undefined ? <ValidInfo isValid={isValid} /> : <span>-</span> }
+      </VsTableCell>
+    </VsTableRow>
+  );
+};

src/viewpanel/components/SeoStatus.tsx

@@ -3,7 +3,10 @@ import { SEO } from '../../models/PanelSettings';
 import { ArticleDetails } from './ArticleDetails';
 import { Collapsible } from './Collapsible';
 import { SeoDetails } from './SeoDetails';
+import { SeoFieldInfo } from './SeoFieldInfo';
 import { SeoKeywords } from './SeoKeywords';
+import { ValidInfo } from './ValidInfo';
+import { VsTable, VsTableBody, VsTableCell, VsTableHeader, VsTableHeaderCell, VsTableRow } from './VscodeComponents';
 
 export interface ISeoStatusProps {
   seo: SEO;
@@ -28,19 +31,37 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
 
     return (
       <div>
-        { (title && seo.title > 0) && <SeoDetails title="Title" valueTitle="Length" allowedLength={seo.title} value={title.length} /> }
-        
-        { (data[descriptionField] && seo.description > 0) && <SeoDetails title="Description" valueTitle="Length" allowedLength={seo.description} value={data[descriptionField].length} /> }
+        <div className={`seo__status__details`}>
+          <h4>Recommendations</h4>
 
-        {
-          seo.content > 0 && data?.articleDetails?.wordCount && (
-            <SeoDetails title="Article length" 
-                        valueTitle="Words" 
-                        allowedLength={seo.content} 
-                        value={data?.articleDetails?.wordCount}
-                        noValidation />
-          )
-        }
+          <VsTable bordered>
+            <VsTableHeader slot="header">
+              <VsTableHeaderCell className={`table__cell`}>Property</VsTableHeaderCell>
+              <VsTableHeaderCell className={`table__cell`}>Length</VsTableHeaderCell>
+              <VsTableHeaderCell className={`table__cell`}>Recommended</VsTableHeaderCell>
+              <VsTableHeaderCell className={`table__cell`}>Valid</VsTableHeaderCell>
+            </VsTableHeader>
+            <VsTableBody slot="body">
+              { 
+                (title && seo.title > 0) && (
+                  <SeoFieldInfo title={`title`} value={`${title.length} chars`} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
+                )
+              }
+
+              {
+                (data[descriptionField] && seo.description > 0) && (
+                  <SeoFieldInfo title={descriptionField} value={`${data[descriptionField].length} chars`} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
+                )
+              }
+
+              {
+                (seo.content > 0 && data?.articleDetails?.wordCount) && (
+                  <SeoFieldInfo title={`Article length`} value={`${data?.articleDetails?.wordCount} words`} recommendation={`${seo.content} words`} />
+                )
+              }
+            </VsTableBody>
+          </VsTable>
+        </div>
 
         <SeoKeywords keywords={data?.keywords}
                      title={title} 

src/viewpanel/components/TagPicker.tsx

@@ -5,6 +5,7 @@ import { CommandToCode } from '../CommandToCode';
 import { TagType } from '../TagType';
 import { MessageHelper } from '../helper/MessageHelper';
 import Downshift from 'downshift';
+import { AddIcon } from './Icons/AddIcon';
 
 export interface ITagPickerProps {
   type: string;
@@ -165,7 +166,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                             title={`Add the unknown tag`}
                             disabled={!inputValue} 
                             onClick={() => insertUnkownTag(closeMenu)}>
-                      {icon}
+                      <AddIcon />
                     </button>
                   )
                 }