Fixed readme and updated sample.json

samples/react-advanced-page-properties/README.md

@@ -11,11 +11,16 @@ Attempts to replicate the functionality of Page Properties with the following im
 - Support for currency
 - Improved support for dates
 
-![see the difference](diff-screencap.png)
+![see the difference](./assets/diff-screencap.png)
 
-## Used SharePoint Framework Version
 
-![version](https://img.shields.io/badge/version-1.11-green.svg)
+## Compatibility
+
+![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) 
+![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) 
+![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) 
+![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
+![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
 
 ## Applies to
 
@@ -26,7 +31,7 @@ Attempts to replicate the functionality of Page Properties with the following im
 
 ## Prerequisites
 
-> Any special pre-requisites?
+None
 
 ## Solution
 
@@ -62,7 +67,7 @@ Version|Date|Comments
 
 Once the solution is installed in the app catalog and the app has been added to the site, you should see it available to a page.
 
-![add the part](add-to-page.png)
+![add the part](./assets/add-to-page.png)
 
 > Familiarity is key
 
@@ -70,5 +75,5 @@ This web part tries to mimic the original Page Properties web part as much as po
 
 Basically add and remove properties until you are satisfied and you're good to go!
 
-![configure the part](props.gif)
+![configure the part](./assets/props.gif)
 

samples/react-advanced-page-properties/assets/sample.json

@@ -0,0 +1,75 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-advanced-page-properties",
+    "source": "pnp",
+    "title": "Advanced Page Properties",
+    "shortDescription": "Replicates the functionality of Page Properties with improvements",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-advanced-page-properties",
+    "longDescription": [
+      "Attempts to replicate the functionality of Page Properties with the following improvements:",
+      "- Support for theme variants",
+      "- Updated to standard capsule look for list options",
+      "- Support for image fields",
+      "- Support for hyperlink fields",
+      "- Support for currency",
+      "- Improved support for dates"
+    ],
+    "created": "2021-03-30",
+    "modified": "2021-03-30",
+    "products": [
+      "SharePoint",
+      "Office"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.11.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-advanced-page-properties/assets/diff-screencap.png",
+        "alt": "Web part in action"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-advanced-page-properties/assets/props.gif",
+        "alt": "Web part in action"
+      },
+      {
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-advanced-page-properties/assets/add-to-page.png",
+        "alt": "Adding to a page"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "mhomol",
+        "company": "ThreeWill",
+        "pictureUrl": "https://github.com/mhomol.png",
+        "name": "Mike Homol",
+        "twitter": "homol"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      },
+      {
+        "name": "Supporting section backgrounds",
+        "description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
+        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
+      }
+    ]
+  }
+]