Merged extensions and webparts

2023-08-07 23:49:21 -04:00 · 2023-08-07 23:49:21 -04:00 · ea0aa3414c
parent befb4900d4
commit ea0aa3414c
21 changed files with 679 additions and 186 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,11 @@
+{
+    "cSpell.words": [
+        "appcustomizer",
+        "commandset",
+        "Customizer",
+        "displayname",
+        "filteroptions",
+        "webpart",
+        "webparts"
+    ]
+}
--- a/.vscode/spellright.dict
+++ b/.vscode/spellright.dict
@ -1 +1,5 @@
 reterive
+displayname
+filteroptions
+appcustomizer
+commandset
--- a/custom_theme/filter.html
+++ b/custom_theme/filter.html
@ -101,6 +101,89 @@
    No results found.
  </div>

+    <div id="loading">
+      <div class="sample-thumbnail">
+        <div class="sample-inner">
+          <div class="shimmer sample-preview">&nbsp;</div>
+          <div class="sample-details">
+            <div class="sample-item ">&nbsp;</div>
+            <div class="producttype-item " >&nbsp;</div>
+            <p class="shimmer sample-title ">&nbsp;</p>
+            <p class="shimmer sample-description" >&nbsp;</p>
+            <div class="sample-activity">
+              <div class="author-avatar">
+              <div role="presentation" class="author-coin">
+                <div role="presentation" class="author-imagearea">
+                  <div class="image-400">
+                    <div class="shimmer author-image" >&nbsp;</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+              <div class="activity-details">
+                <span class="shimmer sample-author"></span>
+                <span class="shimmer sample-date" >&nbsp;</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+            <div class="sample-thumbnail">
+              <div class="sample-inner">
+                <div class="shimmer sample-preview">&nbsp;</div>
+                <div class="sample-details">
+                  <div class="sample-item ">&nbsp;</div>
+                  <div class="producttype-item ">&nbsp;</div>
+                  <p class="shimmer sample-title ">&nbsp;</p>
+                  <p class="shimmer sample-description" >&nbsp;</p>
+                  <div class="sample-activity">
+                    <div class="author-avatar">
+                      <div role="presentation" class="author-coin">
+                        <div role="presentation" class="author-imagearea">
+                          <div class="image-400">
+                            <div class="shimmer author-image">&nbsp;</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="activity-details">
+                      <span class="shimmer sample-author" ></span>
+                      <span class="shimmer sample-date" >&nbsp;</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+                  <div class="sample-thumbnail">
+                    <div class="sample-inner">
+                      <div class="shimmer sample-preview">&nbsp;</div>
+                      <div class="sample-details">
+                        <div class="sample-item ">&nbsp;</div>
+                        <div class="producttype-item ">&nbsp;</div>
+                        <p class="shimmer sample-title ">&nbsp;</p>
+                        <p class="shimmer sample-description" >&nbsp;</p>
+                        <div class="sample-activity">
+                          <div class="author-avatar">
+                            <div role="presentation" class="author-coin">
+                              <div role="presentation" class="author-imagearea">
+                                <div class="image-400">
+                                  <div class="shimmer author-image">&nbsp;</div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="activity-details">
+                            <span class="shimmer sample-author" ></span>
+                            <span class="shimmer sample-date" >&nbsp;</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+    </div>
+
 </section>

 <!-- Last update of source file -->
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@ -55,7 +55,7 @@
  }
 }

-#noresults {
+#noresults, #loading {
    color:#797673;
    animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
@ -64,6 +64,10 @@
  -ms-animation: fadeIn ease 3s;
 }

+#noresults {
+    display:none;
+}
+
 .md-footer-nav__link--prev, .md-footer__link--prev {
    float: left;
 }
@ -531,8 +535,10 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover {
    line-height: 42px;
    font-size: 14px;
    color: #7D7A9E;
-    margin-left: 10px;
+    margin-left: 8px;
    position: relative;
+        padding-left: 8px;
+            padding-right: 8px;
 }

 .producttype-item:hover::after, .sampletype-item:hover::after {
@ -558,25 +564,6 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover {
    pointer-events: none;
    white-space: nowrap;
 }
-/* 
-.sampletype-item::after {
-    content: attr(title);
-    background-color: #0067B8;
-    color: #ffffff;
-    font-size: 14px;
-    border-radius: 2px;
-    box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px;
-    position: absolute;
-    bottom: 40px;
-    height: auto;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0 15px;
-    opacity: 0;
-    transition: all 0.3s ease-in-out;
-    pointer-events: none;
-    white-space: nowrap;
-} */

 .producttype-item, .sampletype-item {
    background-size: 24px 24px;
@ -938,25 +925,13 @@ TODO: Move styles
 .sample-details .producttype-item {
    border: 1px solid #EBEBF2;
    position: absolute;
-    left: 0;
+    left: 58px;
    top: -22px;
    font-size: 0;
 }

-.sample-details .producttype-item::after {
-    background-color: #0067B8;
-    color: #ffffff;
-    font-size: 14px;
-    border-radius: 5px;
-    box-shadow: 1px 14px 18px -15px #232e4c;
-    position: absolute;
-    bottom: 40px;
-    height: auto;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0 15px;
-    opacity: 0;
-    transition: all 0.3s ease-in-out;
+div#filters {
+    margin-bottom: 16px;
 }

 .sample-details .producttype-item {
--- a/docs/css/filter.css
+++ b/docs/css/filter.css
@ -239,4 +239,4 @@ body {

 html {
  overflow-y: scroll;
-}
+}
--- a/docs/css/site.css
+++ b/docs/css/site.css
@ -1,4 +1,3 @@
-
 .sampletype-item.angular {
    background-image: url(../img/frameworks/angularjs.svg);
 }
@ -35,6 +34,30 @@
    background-image: url(../img/products/outlook.svg);
 }

+.sampletype-item.appcustomizer {
+    background-image: url(../img/types/application.svg);
+}
+
+.sampletype-item.commandset {
+    background-image: url(../img/types/toolbar.svg);
+}
+
+.sampletype-item.field {
+    background-image: url(../img/types/field.svg);
+}
+
+.sampletype-item.search {
+    background-image: url(../img/types/search.svg);
+}
+
+.sampletype-item.form {
+    background-image: url(../img/types/form.svg);
+}
+
+.sampletype-item.webpart {
+    background-image: url(../img/types/webpart.svg);
+}
+
 .sample-details .producttype-item.angular {
    background-image: url(../img/frameworks/angularjs.svg);
 }
@ -62,3 +85,186 @@
 .sample-details .producttype-item.other {
    background-image: url(../img/frameworks/other.svg);
 }
+
+.sample-details .sample-item.webpart {
+    background-image: url(../img/types/webpart.svg);
+}
+
+.sample-details .sample-item.appcustomizer {
+    background-image: url(../img/types/application.svg);
+}
+
+.sample-details .sample-item.command {
+    background-image: url(../img/types/toolbar.svg);
+}
+
+.sample-details .sample-item.field {
+    background-image: url(../img/types/field.svg);
+}
+
+.sample-details .sample-item.search {
+    background-image: url(../img/types/search.svg);
+}
+
+.sample-details .sample-item.form {
+    background-image: url(../img/types/form.svg);
+}
+
+.sample-details .sample-item {
+    min-width: 42px;
+    height: 42px;
+    width: 42px;
+    background-color: #F7F7FC;
+    border: 1px solid #ffffff;
+    border-radius: 25px;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 42px;
+    font-size: 14px;
+    color: #7D7A9E;
+    margin-left: 8px;
+    position: relative;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.sample-details .sample-item:hover::after, .sample-details .producttype-item:hover::after {
+    opacity: 1;
+    bottom: 45px;
+}
+
+.sample-details .producttype-item::after, .sample-item::after {
+    content: attr(title);
+    background-color: #0067B8;
+    color: #ffffff;
+    font-size: 14px;
+    border-radius: 2px;
+    box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px;
+    position: absolute;
+    bottom: 40px;
+    height: auto;
+    padding: 0 15px;
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 100;
+} 
+
+
+.sample-item::after {
+ left: 0px;
+}
+
+.sample-details .producttype-item::after {
+    left: 44px;
+}
+
+.sample-details .sample-item {
+    border: 1px solid #EBEBF2;
+    background-color: white;
+    position: absolute;
+    left: 8px;
+    top: -22px;
+    font-size: 0;
+    margin-left: 8px;
+        background-size: 24px 24px;
+            background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 42px;
+}
+
+.shimmer {
+    background: #f6f7f8;
+    /* fallback
+  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+  background-repeat: no-repeat;
+  */
+    animation: shim infinite 1.2s linear;
+}
+
+@keyframes shim {
+    0% {
+        background-position: -468px 0;
+    }
+
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+#loading { 
+    display: flex;
+    gap: 12px;
+ }
+
+#loading .sample-preview {
+    background-color: #f6f7f8;;
+}
+
+#loading .sample-title {
+    width: 75%;
+    width: 200px;
+}
+
+#loading .sample-author{
+    width: 80px;
+    margin-bottom: 4px;
+}
+
+#loading .sample-description {
+    width:240px;
+}
+#loading .sample-date {
+    width: 145px;
+}
+
+.shimmer .author-image {
+    width: 32px;
+        height: 32px;
+        border-radius: 32px;
+}
+
+.shimmer_circle {
+    width: 42px;
+    height: 42px;
+    border-radius: 42px;
+
+}
+
+
+.shimmer_circle_heading .shimmer_heading {
+    width: 90%;
+    margin-left: 3%
+}
+
+.shimmer_circle_heading {
+    display: flex;
+    align-items: center
+}
+
+.shimmer_preview {
+    width: 318px;
+    height: 250px;
+}
+.shimmer_heading {
+    width: 50%;
+    height: 20px;
+}
+
+.shimmer_small_para {
+    height: 24px;
+}
+
+.shimmer_large_para {
+    height: 48px;
+}
+
+.shimmer {
+    background: #e2e3e4;
+    background-image: linear-gradient(to right, #e2e3e4 0%, #f6f7f8 20%, #e2e3e4 40%, #e2e3e4 100%);
+    background-repeat: no-repeat
+}
--- a/docs/gettingstarted/troubleshooting.md
+++ b/docs/gettingstarted/troubleshooting.md
@ -31,7 +31,7 @@ For example, if you have SPFx 1.12.1 installed on your workstation, samples mark

 Conversely, if you plan on using a sample in a SharePoint 2019 environment, you'll want to make sure to use only samples that run on SPFx ![1.4.1](https://img.shields.io/badge/1.4.1-orange.svg) or lower; SharePoint 2016 Feature Pack 2 will only work with ![1.1.0](https://img.shields.io/badge/1.0.0-orange.svg).

-You can find more information about SPFx compatibility on the [Tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) page on the [SharePoint Framework documentation](https://docs.microsoft.com/sharepoint/dev/spfx).
+You can find more information about SPFx compatibility on the [Tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) page on the [SharePoint Framework documentation](https://learn.microsoft.com/sharepoint/dev/spfx).

 ### Minimal Path to Awesome

--- a/docs/img/types/application.svg
+++ b/docs/img/types/application.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M2048 128v1064q-28-31-60-57t-68-50V640H128v1024h868q3 33 10 65t18 63H0V128h2048zm-128 128H128v256h1792V256zM256 1536V768h640v768H256zm128-128h384V896H384v512zm1024-512h-384V768h384v128zm-384 130h384q-122 41-216 126h-168v-126zm1014 462l-124 51q6 30 6 59 0 32-6 63l124 51-49 119-124-52q-17 25-38 47t-48 39l52 124-119 49-51-124q-30 6-61 6-15 0-30-3t-30-6l-52 127-119-49 52-125q-25-17-45-39t-38-47l-127 53-49-119 124-51q-6-30-6-59 0-31 6-63l-124-51 49-119 124 52q17-25 38-47t48-39l-52-124 119-49 51 124q30-6 59-6 31 0 63 6l51-124 119 49-52 124q25 17 47 38t39 48l124-52 49 119zm-438 303q40 0 75-15t61-41 41-61 15-74q0-39-15-74t-41-61-62-42-74-15q-39 0-74 15t-61 41-42 62-15 74q0 40 15 74t41 61 62 41 74 15z" fill="#333333"></path></svg>
--- a/docs/img/types/field.svg
+++ b/docs/img/types/field.svg
@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2048 2048" style="enable-background:new 0 0 2048 2048;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<polygon class="st0" points="0,256 2048,256 2048,1024 1920,1024 1920,384 128,384 128,1152 1024,1152 1024,1280 0,1280 "/>
+<path class="st0" d="M1920,1600c0-20.7-2-41-6-61l124-51l-49-119l-124,52c-23.3-34-52-62.7-86-86l52-124l-119-49l-51,124
+	c-20-4-40.3-6-61-6s-41,2-61,6l-51-124l-119,49l52,124c-34,23.3-62.7,52-86,86l-124-52l-49,119l124,51c-4,20-6,40.3-6,61s2,41,6,61
+	l-124,51l49,119l124-52c23.3,34,52,62.7,86,86l-52,124l119,49l51-124c20,4,40.3,6,61,6s41-2,61-6l51,124l119-49l-52-124
+	c34-23.3,62.7-52,86-86l124,52l49-119l-124-51C1918,1641,1920,1620.7,1920,1600z M1777,1675c-10,23.3-23.7,43.7-41,61
+	s-37.7,31-61,41s-48.3,15-75,15s-51.7-5-75-15s-43.7-23.7-61-41s-31-37.7-41-61s-15-48.3-15-75s5-51.7,15-75s23.7-43.7,41-61
+	s37.7-31,61-41s48.3-15,75-15s51.7,5,75,15s43.7,23.7,61,41s31,37.7,41,61s15,48.3,15,75S1787,1651.7,1777,1675z"/>
+<path class="st0" d="M1118.4,1024H810.5v-60.1c0-20.3,3.7-39.8,11.2-58.5c5.9-15,14.7-29.4,26.5-43.3s25.1-28.1,40.1-42.5
+	c15-14.4,29.7-27.8,44.1-40.1c14.4-12.3,28.1-25.4,40.9-39.3c12.8-13.9,23-26.5,30.5-37.7s11.5-23.8,12-37.7
+	c0-13.9-5.1-25.9-15.2-36.1c-10.2-10.2-22.2-15.2-36.1-15.2c-12.3,0-23,3.7-32.1,11.2s-15.2,17.4-18.4,29.7l-100.2-20.8
+	c3.2-17.6,9.4-33.9,18.4-48.9c9.1-15,20.8-27.8,35.3-38.5c14.4-10.7,29.7-19.2,45.7-25.7c16-6.4,33.1-9.6,51.3-9.6
+	c21.4,0,41.4,4,60.1,12c18.7,8,35,19,48.9,32.9c13.9,13.9,24.9,30.2,32.9,48.9s12,38.7,12,60.1c0,20.8-2.9,39.5-8.8,56.1
+	c-5.9,16.6-14.2,32.1-24.9,46.5s-22.4,28.1-35.3,40.9c-12.8,12.8-26.5,25.1-40.9,36.9c-14.4,11.8-28.1,24-40.9,36.9
+	c-12.8,12.8-25.4,25.9-37.7,39.3h188.4V1024z"/>
+<path class="st0" d="M615.8,628.8c-15.5,9.1-33.7,17.4-54.5,24.9s-40.3,11.2-58.5,11.2V562.3c5.9,0,14.2-1.6,24.9-4.8
+	c10.7-3.2,21.4-7.2,32.1-12c10.7-4.8,20.3-10.4,28.9-16.8c8.6-6.4,14.4-12.3,17.6-17.6h101.8v513h-92.2V628.8z"/>
+<path class="st0" d="M1355.7,1024c-22.4,0-44.1-3.7-64.9-11.2s-40.9-17.4-60.1-29.7V881.3c10.7,8,20,15,28.1,20.8
+	c8,5.9,16.6,10.7,25.7,14.4c9.1,3.7,18.2,6.4,27.3,8s21.1,2.4,36.1,2.4c11.8,0,23-1.1,33.7-3.2c10.7-2.1,20-6.1,28.1-12
+	c8-5.9,14.7-13.4,20-22.4c5.3-9.1,7.7-20.3,7.2-33.7c0-16.6-6.4-28.3-19.2-35.3c-12.8-6.9-27.8-11.8-44.9-14.4
+	c-17.1-2.7-34.5-3.5-52.1-2.4c-17.6,1.1-31.8,1.6-42.5,1.6v-77.8h46.5c16.6,0,32.1-1.9,46.5-5.6s26.5-10.7,36.1-20.8
+	c9.6-10.2,14.4-25.4,14.4-45.7c0-22.4-6.7-37.4-20-44.9s-30.5-11.2-51.3-11.2c-21.4,0-39.8,4.8-55.3,14.4
+	c-15.5,9.6-31,21.1-46.5,34.5V543.8c18.2-12.3,38.5-20.8,60.9-25.7c22.4-4.8,44.4-7.2,65.7-7.2c19.2,0,37.9,2.7,56.1,8
+	s34.2,13.1,48.1,23.2c13.9,10.2,25.4,23.2,34.5,39.3s13.4,34.5,12.8,55.3c0,25.7-5.1,48.4-15.2,68.1c-10.2,19.8-26.7,36.1-49.7,48.9
+	c23.5,8,42.8,22.2,57.7,42.5s22.4,43,22.4,68.1c0,25.1-5.3,47.6-16,67.3c-10.7,19.8-24.6,36.3-41.7,49.7
+	c-17.1,13.4-37.1,23.8-60.1,31.3C1400.8,1020.3,1378.1,1024,1355.7,1024z"/>
+</svg>
--- a/docs/img/types/form.svg
+++ b/docs/img/types/form.svg
@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2048 2048" style="enable-background:new 0 0 2048 2048;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<path class="st0" d="M1930,1610c0-20.7-2-41-6-61l124-51l-49-119l-124,52c-23.3-34-52-62.7-86-86l52-124l-119-49l-51,124
+	c-20-4-40.3-6-61-6s-41,2-61,6l-51-124l-119,49l52,124c-34,23.3-62.7,52-86,86l-124-52l-49,119l124,51c-4,20-6,40.3-6,61s2,41,6,61
+	l-124,51l49,119l124-52c23.3,34,52,62.7,86,86l-52,124l119,49l51-124c20,4,40.3,6,61,6s41-2,61-6l51,124l119-49l-52-124
+	c34-23.3,62.7-52,86-86l124,52l49-119l-124-51C1928,1651,1930,1630.7,1930,1610z M1787,1685c-10,23.3-23.7,43.7-41,61
+	s-37.7,31-61,41s-48.3,15-75,15s-51.7-5-75-15s-43.7-23.7-61-41s-31-37.7-41-61s-15-48.3-15-75s5-51.7,15-75s23.7-43.7,41-61
+	s37.7-31,61-41s48.3-15,75-15s51.7,5,75,15s43.7,23.7,61,41s31,37.7,41,61s15,48.3,15,75S1797,1661.7,1787,1685z"/>
+<rect x="640" y="1359.8" class="st0" width="384" height="128"/>
+<path class="st0" d="M1664,640v356.2h128V549L1243,0H128v2048h1024v-128H256V128h896v512H1664z M1280,219l293,293h-293V219z"/>
+<rect x="384" y="1359.8" class="st0" width="128" height="128"/>
+<path class="st0" d="M1039.4,226.9v461.3h-671V226.9H1039.4z M997.5,268.9H410.4v377.4h587.1V268.9z M498.5,561.8h-37.4l77-205.8
+	h38.3l76.7,205.8h-37.7l-18.3-52.4h-80.9L498.5,561.8z M556.2,386.5c-0.4,2.2-0.8,4.4-1,6.6c-0.2,2.2-0.8,4.4-1.6,6.6L525,481.5
+	h63.2l-28.8-81.9c-0.7-2-1.1-4-1.3-6.2c-0.2-2.2-0.7-4.5-1.3-6.9H556.2z M706.9,561.8h-33.4V344.2h33.4v96.3h0.3
+	c5.7-9.4,12.6-16.6,20.6-21.6c8.1-5,17.8-7.5,29.2-7.5c10.5,0,19.4,2,26.9,5.9c7.4,3.9,13.7,9.4,18.7,16.4c5,7,8.5,14.7,10.5,23.3
+	s3.1,17.6,3.3,27.2c0,10.5-1.2,20.5-3.6,30.1c-2.4,9.6-6.3,18.2-11.8,25.9c-5.5,7.6-12.2,13.7-20.3,18c-8.1,4.4-18.1,6.7-30.1,6.9
+	c-18.8,0-33.2-8.2-43.2-24.6h-0.3V561.8z M706.5,500.2c0,5.2,0.9,10.2,2.6,14.7c1.7,4.6,4.2,8.7,7.2,12.5c3.1,3.7,6.8,6.4,11.1,8.2
+	c4.4,1.7,9.4,2.8,15.1,3.3c7.6,0,14-1.6,19-4.9c5-3.3,9.1-7.5,12.1-12.8c3.1-5.2,5.2-11.1,6.6-17.7s2-13,2-19.3
+	c0-5.7-0.7-11.2-2-16.7s-3.4-10.5-6.2-15.1c-2.8-4.6-6.6-8.1-11.1-10.5s-10.3-3.7-17-3.9c-6.3,0-11.9,1.2-16.7,3.6
+	c-4.8,2.4-9,5.6-12.5,9.5c-3.5,3.9-6,8.6-7.5,14.1c-1.5,5.5-2.4,11.1-2.6,17V500.2z M913.6,565.1c-10.9,0-20.9-1.7-29.8-5.2
+	c-9-3.5-16.6-8.5-22.9-15.1c-6.3-6.6-11.2-14.3-14.7-23.3c-3.5-9-5.2-18.9-5.2-29.8c0-12,1.9-22.9,5.6-32.8
+	c3.7-9.8,9-18.2,15.7-25.2c6.8-7,15.1-12.5,24.9-16.4s20.9-5.9,33.1-5.9c6.1,0,12.1,0.5,18,1.6s11.7,2.8,17.4,5.2v31.1
+	c-4.8-3.5-9.9-6.2-15.4-8.2c-5.5-2-11.2-3.1-17.4-3.3c-7.6,0-14.4,1.3-20.3,3.9s-10.8,6.3-14.7,11.1s-7.1,10.3-9.5,16.4
+	c-2.4,6.1-3.5,12.9-3.3,20.3c0,14.4,4,26.2,12.1,35.4c8.1,9.2,19.5,13.8,34.4,13.8c6.3,0,12.3-1.1,18-3.3c5.7-2.2,11-5.4,16.1-9.5
+	v28.8c-6.3,3.7-13.1,6.3-20.3,7.9S920.8,565.1,913.6,565.1z"/>
+<path class="st0" d="M703.9,1128.8H578.1v-24.6c0-8.3,1.5-16.3,4.6-23.9c2.4-6.1,6-12,10.8-17.7c4.8-5.7,10.3-11.5,16.4-17.4
+	c6.1-5.9,12.1-11.4,18-16.4c5.9-5,11.5-10.4,16.7-16.1s9.4-10.8,12.5-15.4c3.1-4.6,4.7-9.7,4.9-15.4c0-5.7-2.1-10.6-6.2-14.7
+	c-4.2-4.2-9.1-6.2-14.7-6.2c-5,0-9.4,1.5-13.1,4.6c-3.7,3.1-6.2,7.1-7.5,12.1l-41-8.5c1.3-7.2,3.8-13.9,7.5-20
+	c3.7-6.1,8.5-11.4,14.4-15.7s12.1-7.9,18.7-10.5s13.5-3.9,21-3.9c8.7,0,16.9,1.6,24.6,4.9c7.6,3.3,14.3,7.8,20,13.4
+	c5.7,5.7,10.2,12.3,13.4,20s4.9,15.8,4.9,24.6c0,8.5-1.2,16.2-3.6,22.9c-2.4,6.8-5.8,13.1-10.2,19c-4.4,5.9-9.2,11.5-14.4,16.7
+	s-10.8,10.3-16.7,15.1s-11.5,9.8-16.7,15.1s-10.4,10.6-15.4,16.1h77V1128.8z M1039.4,793.3v461.3h-671V793.3H1039.4z M997.5,835.3
+	H410.4v377.4h587.1V835.3z M498.5,967.3c-6.3,3.7-13.8,7.1-22.3,10.2s-16.5,4.6-23.9,4.6v-41.9c2.4,0,5.8-0.7,10.2-2
+	s8.7-2.9,13.1-4.9s8.3-4.3,11.8-6.9s5.9-5,7.2-7.2h41.6v209.7h-37.7V967.3z M800.9,1128.8c-9.2,0-18-1.5-26.5-4.6
+	s-16.7-7.1-24.6-12.1v-41.6c4.4,3.3,8.2,6.1,11.5,8.5s6.8,4.4,10.5,5.9c3.7,1.5,7.4,2.6,11.1,3.3c3.7,0.7,8.6,1,14.7,1
+	c4.8,0,9.4-0.4,13.8-1.3c4.4-0.9,8.2-2.5,11.5-4.9s6-5.5,8.2-9.2c2.2-3.7,3.2-8.3,2.9-13.8c0-6.8-2.6-11.6-7.9-14.4
+	s-11.4-4.8-18.3-5.9c-7-1.1-14.1-1.4-21.3-1s-13,0.7-17.4,0.7v-31.8h19c6.8,0,13.1-0.8,19-2.3s10.8-4.4,14.7-8.5s5.9-10.4,5.9-18.7
+	c0-9.2-2.7-15.3-8.2-18.3c-5.5-3.1-12.5-4.6-21-4.6c-8.7,0-16.3,2-22.6,5.9c-6.3,3.9-12.7,8.6-19,14.1v-42.6
+	c7.4-5,15.7-8.5,24.9-10.5s18.1-2.9,26.9-2.9c7.9,0,15.5,1.1,22.9,3.3c7.4,2.2,14,5.4,19.7,9.5c5.7,4.2,10.4,9.5,14.1,16.1
+	c3.7,6.6,5.5,14.1,5.2,22.6c0,10.5-2.1,19.8-6.2,27.8c-4.2,8.1-10.9,14.7-20.3,20c9.6,3.3,17.5,9.1,23.6,17.4
+	c6.1,8.3,9.2,17.6,9.2,27.8s-2.2,19.4-6.6,27.5c-4.4,8.1-10,14.9-17,20.3c-7,5.5-15.2,9.7-24.6,12.8
+	C819.4,1127.3,810.1,1128.8,800.9,1128.8z"/>
+</svg>
--- a/docs/img/types/search.svg
+++ b/docs/img/types/search.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2048 2048" style="enable-background:new 0 0 2048 2048;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<path class="st0" d="M1664,576c0,79.3-15,154-45,224s-71.3,131-124,183s-113.7,93-183,123s-144,45.3-224,46c-66,0-129.7-10.7-191-32
+	s-117.7-52.7-169-94l-619,619c-12.7,12.7-27.7,19-45,19s-32.3-6.3-45-19s-19-27.7-19-45s6.3-32.3,19-45l619-619
+	c-41.3-51.3-72.7-107.7-94-169s-32-125-32-191c0-79.3,15-154,45-224s71.3-131,124-183S794.7,76,864,46s144-45.3,224-46
+	c79.3,0,154,15,224,45s131,71.3,183,124s93,113.7,123,183S1663.3,496,1664,576z M640,576c0,62,11.7,120,35,174s55.3,101.3,96,142
+	s88,72.7,142,96s112.3,35.3,175,36c62,0,120-11.7,174-35s101.3-55.3,142-96s72.7-88,96-142s35.3-112.3,36-175c0-62-11.7-120-35-174
+	s-55.3-101.3-96-142s-88-72.7-142-96s-112.3-35.3-175-36c-62,0-120,11.7-174,35s-101.3,55.3-142,96s-72.7,88-96,142
+	S640.7,513.3,640,576z"/>
+<path class="st0" d="M1930,1610c0-20.7-2-41-6-61l124-51l-49-119l-124,52c-23.3-34-52-62.7-86-86l52-124l-119-49l-51,124
+	c-20-4-40.3-6-61-6s-41,2-61,6l-51-124l-119,49l52,124c-34,23.3-62.7,52-86,86l-124-52l-49,119l124,51c-4,20-6,40.3-6,61s2,41,6,61
+	l-124,51l49,119l124-52c23.3,34,52,62.7,86,86l-52,124l119,49l51-124c20,4,40.3,6,61,6s41-2,61-6l51,124l119-49l-52-124
+	c34-23.3,62.7-52,86-86l124,52l49-119l-124-51C1928,1651,1930,1630.7,1930,1610z M1787,1685c-10,23.3-23.7,43.7-41,61
+	s-37.7,31-61,41s-48.3,15-75,15s-51.7-5-75-15s-43.7-23.7-61-41s-31-37.7-41-61s-15-48.3-15-75s5-51.7,15-75s23.7-43.7,41-61
+	s37.7-31,61-41s48.3-15,75-15s51.7,5,75,15s43.7,23.7,61,41s31,37.7,41,61s15,48.3,15,75S1797,1661.7,1787,1685z"/>
+</svg>
--- a/docs/img/types/toolbar.svg
+++ b/docs/img/types/toolbar.svg
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<rect x="128" y="80" width="32" height="32"/>
+<rect x="192" y="80" width="32" height="32"/>
+<path d="M64,240h96v-96H64V240z M96,176h32v32H96V176z"/>
+<path d="M352,144v96h96v-96H352z M416,208h-32v-32h32V208z"/>
+<path d="M208,240h96v-96h-96V240z M240,176h32v32h-32V176z"/>
+<path class="st0" d="M480,383.3c0-5.2-0.5-10.2-1.5-15.2l31-12.8l-12.2-29.8l-31,13c-5.8-8.5-13-15.7-21.5-21.5l13-31L428,273.8
+	l-12.8,31c-5-1-10.1-1.5-15.2-1.5s-10.2,0.5-15.2,1.5l-12.8-31l-29.8,12.2l13,31c-8.5,5.8-15.7,13-21.5,21.5l-31-13l-12.2,29.8
+	l31,12.8c-1,5-1.5,10.1-1.5,15.2s0.5,10.2,1.5,15.2l-31,12.8l12.2,29.8l31-13c5.8,8.5,13,15.7,21.5,21.5l-13,31l29.8,12.2l12.8-31
+	c5,1,10.1,1.5,15.2,1.5s10.2-0.5,15.2-1.5l12.8,31l29.8-12.2l-13-31c8.5-5.8,15.7-13,21.5-21.5l31,13l12.2-29.8l-31-12.8
+	C479.5,393.6,480,388.5,480,383.3z M444.2,402.1c-2.5,5.8-5.9,10.9-10.2,15.2s-9.4,7.8-15.2,10.2s-12.1,3.8-18.8,3.8
+	s-12.9-1.2-18.8-3.8s-10.9-5.9-15.2-10.2s-7.8-9.4-10.2-15.2S352,390,352,383.3s1.2-12.9,3.8-18.8s5.9-10.9,10.2-15.2
+	s9.4-7.8,15.2-10.2s12.1-3.8,18.8-3.8s12.9,1.2,18.8,3.8s10.9,5.9,15.2,10.2s7.8,9.4,10.2,15.2s3.8,12.1,3.8,18.8
+	S446.8,396.2,444.2,402.1z"/>
+<g>
+	<polygon points="256,272 32,272 32,112 96,112 96,80 0,80 0,304 256,304 	"/>
+	<polygon points="256,80 256,112 480,112 480,240 512,240 512,80 	"/>
+</g>
+</svg>
--- a/docs/img/types/webpart.svg
+++ b/docs/img/types/webpart.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1664">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #333;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m896,1408v-768H256v768h640ZM384,768h384v512h-384v-512Z"/>
+  <path class="cls-1" d="m1024,1024h168c62.67-56.67,134.67-98.67,216-126h-384v126Z"/>
+  <rect class="cls-1" x="1024" y="640" width="384" height="128"/>
+  <rect class="cls-1" x="1024" y="896" width="384" height="128"/>
+  <rect class="cls-1" x="1024" y="1152" width="384" height="128"/>
+  <path class="cls-1" d="m0,0v1664h2048V0H0Zm128,128h1792v256H128V128Zm1792,829v579H128V512h1792v445Z"/>
+</svg>
--- a/docs/index.md
+++ b/docs/index.md
@ -30,7 +30,7 @@ filteroptions:
      filter: '[data-framework=''Other'']'
 ---

-You can build client-side web parts using the frameworks you're already familiar with. Use the filters below to find samples by framework.
+You can build client-side [web parts](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts) and [extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions) using the frameworks you're already familiar with. Use the filters below to find samples by framework.

 You can also search by keyword, author or tags.

--- a/docs/javascript/filtersamples.js
+++ b/docs/javascript/filtersamples.js
@ -1,16 +1,13 @@
-// external js: isotope.pkgd.js
+$(document).ready(function () {

-/***
- * This is a generic isotope filter for samples
- */

- $(document).ready(function () {
-  var filterText = $('#sample-listing').data("filter");
+  const filterText = $('#sample-listing').data("filter");
+  const txtSearch = $('#post-search-input');
  var qsRegex = new Array();
  var buttonFilter;

  // init Isotope
-  var $grid = $('#sample-listing').isotope({
+  const $grid = $('#sample-listing').isotope({
    itemSelector: '.sample-thumbnail',
    layoutMode: 'fitRows',
    sortBy: 'modified',
@ -27,10 +24,7 @@
          searchResult = false;
        }
      })
-      var buttonResult = buttonFilter ? $(this).is(buttonFilter) : true;
-      if (!(searchResult && buttonResult)) {
-        console.log('FALSE!');
-      }
+      const buttonResult = buttonFilter ? $(this).is(buttonFilter) : true;
      return searchResult && buttonResult;
    },
    fitRows: {
@ -42,10 +36,12 @@
  $grid.on('arrangeComplete', function (_event, filteredItems) {
    if (filteredItems.length > 0) {
      // hide message 
+      $("#loading").hide();
      $("#noresults").hide();
    } else {
      // show message; 
      $("#noresults").show();
+      $("#loading").hide();
    }
  });

@ -84,8 +80,7 @@
  // Get the list of filters to use
  var filter = $('#filters .filter-choice');

-  // Get the search box
-  var search = $('#post-search-input');
+

  $('.filter-list').each(function (_i, buttonGroup) {
    var $buttonGroup = $(buttonGroup);
@ -105,20 +100,32 @@
    });
  });

-  search.on('change keyup paste', debounce(function () {
-    var query = search.val().toString();
+  txtSearch.on('change keyup paste', debounce(function () {
+    var searchQuery = txtSearch.val().toString();
+    searchResult(searchQuery);
+  }, 200));
+
+  //retrieve the q querystring parameter; if it exists, use it to filter the samples
+  const urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.has('q')) {
+    const searchQuery = urlParams.get('q');
+    txtSearch.val(searchQuery);
+    searchResult(searchQuery);
+  }
+
+
+  function searchResult(query) {
    if (!query) {
      qsRegex = new Array();
    } else {
-      qsRegex = query.match(/\w+|"[^"]+"/gi); 
+      qsRegex = query.match(/\w+|"[^"]+"/gi);
      let i = qsRegex.length;
      while (i--) {
        qsRegex[i] = qsRegex[i].replace(/"/gi, "");
      }
    }
    $grid.isotope();
-  }, 200));
-
+  }
  // debounce so filtering doesn't happen every millisecond
  function debounce(fn, threshold) {
    var timeout;
@ -134,15 +141,5 @@
    };
  }

-  // See if there are any passed parameters
-  try {
-    var urlParams = new URLSearchParams(window.location.search);
-    var query = urlParams.get('query');
-    if (query !== "") {
-      search.val(query).change();
-    }

-  } catch (error) {
-    // Be vewy vewy quiet
-  }
 });
--- a/docs/javascript/loadsamples.js
+++ b/docs/javascript/loadsamples.js
@ -4,7 +4,7 @@
 var jsonPath = "https://pnp.github.io/sp-dev-fx-webparts/samples.json";
 if (window.location.host.toLowerCase() !== "pnp.github.io") {
  // When serving locally there is no /teams-dev-samples in the path
-  jsonPath = window.location.origin + "/samples.json";
+  jsonPath = window.location.origin + "/sp-dev-fx-webparts/samples.json";
  console.log(`Reading samples from ${jsonPath}`);
 }

@ -14,73 +14,109 @@ if (window.location.host.toLowerCase() !== "pnp.github.io") {
 * @returns 
 */
 function loadSample(sample, filter) {
-    try {
-        var title = _.escape(sample.title);
-        var escapedDescription = _.escape(sample.shortDescription);
+  try {
+    var title = _.escape(sample.title);
+    var escapedDescription = _.escape(sample.shortDescription);

-        var shortDescription = sample.shortDescription; //.length > 80 ? sample.shortDescription.substr(0, 77)  : sample.shortDescription;
-        var thumbnail = "https://pnp.github.io/sp-dev-fx-webparts/img/_nopreview.png";
-        //var categories = sample.categories[0];
+    var shortDescription = sample.shortDescription; //.length > 80 ? sample.shortDescription.substr(0, 77)  : sample.shortDescription;
+    var thumbnail = "https://pnp.github.io/sp-dev-fx-webparts/img/_nopreview.png";
+    //var categories = sample.categories[0];

-        if (sample.thumbnails && sample.thumbnails.length > 0) {
-          thumbnail = sample.thumbnails[0].url;
+    if (sample.thumbnails && sample.thumbnails.length > 0) {
+      thumbnail = sample.thumbnails[0].url;
+    }
+
+
+    var sampleType = "";
+    var sampleTypeName = "";
+
+    if (sample.categories && sample.categories.length > 0) {
+      const categories = sample.categories[0];
+      switch (categories) {
+        case "SPFX-FIELD-EXTENSION":
+          sampleType = "field";
+          sampleTypeName = "Field customizer";
+          break;
+        case "SPFX-COMMAND-EXTENSION":
+          sampleType = "command";
+          sampleTypeName = "ListView command set";
+          break;
+        case "SPFX-SEARCHQUERY-EXTENSION":
+          sampleType = "search";
+          sampleTypeName = "Search query extension";
+          break;
+        case "SPFX-APPLICATION-EXTENSION":
+          sampleType = "appcustomizer";
+          sampleTypeName = "Application customizer";
+          break;
+        case "SPFX-FORM-EXTENSION":
+          sampleType = "form";
+          sampleTypeName = "Form customizer";
+          break;
+        default:
+          sampleType = "webpart";
+          sampleTypeName = "Web part";
+          break;
+      }
+    } else {
+      sampleType = "webpart";
+      sampleTypeName = "Web part";
+    }
+
+    var framework = "";
+    var SPFxVersion = "";
+    var outlookCompatible = false;
+    var teamsCompatible = false;
+    var pnpControls = "";
+
+    var metadata = sample.metadata;
+    metadata.forEach(meta => {
+      switch (meta.key) {
+        case "CLIENT-SIDE-DEV":
+          framework = meta.value;
+          break;
+        case "SPFX-VERSION":
+          SPFxVersion = meta.value;
+          break;
+        case "SPFX-OUTLOOKADDIN":
+          outlookCompatible = meta.value;
+          break;
+        case "SPFX-TEAMSPERSONALAPP":
+        case "SPFX-TEAMSTAB":
+          teamsCompatible = meta.value;
+          break;
+        case "PNPCONTROLS":
+          pnpControls = meta.value;
+          break;
+        default:
+          break;
+      }
+    });
+    const dtModified = new Date(sample.updateDateTime);
+
+    var subscription = SPFxVersion.startsWith("1.5.") || SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA";
+    var compatible2019 = SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA";
+    var compatible2016 = SPFxVersion == "GA" && sampleType == "webpart";
+    var modified = moment(dtModified).toISOString();
+    var authors = sample.authors;
+    var authorsList = "";
+    var authorAvatars = "";
+    var authorName = "";
+    var authorsGitHub = "";
+    var productTag = framework.toLowerCase();
+    var productName = framework;
+
+
+    // Build the authors array
+    if (authors && authors.length > 0) {
+      authors.forEach(author => {
+        if (authorsList !== "") {
+          authorsList = authorsList + ", ";
        }
+        authorsList = authorsList + author.name;
+        authorsGitHub = authorsGitHub + " " + author.gitHubAccount;

-        var framework = "";
-        var SPFxVersion = "";
-        var outlookCompatible = false;
-        var teamsCompatible = false;
-        var pnpControls = "";
-
-        var metadata = sample.metadata;
-        metadata.forEach(meta => {
-          switch (meta.key) {
-            case "CLIENT-SIDE-DEV":
-              framework = meta.value;
-              break;
-            case "SPFX-VERSION":
-              SPFxVersion = meta.value;
-              break;
-            case "SPFX-OUTLOOKADDIN":
-              outlookCompatible = meta.value;
-              break;
-            case "SPFX-TEAMSPERSONALAPP":
-            case "SPFX-TEAMSTAB":
-              teamsCompatible = meta.value;
-              break;
-            case "PNPCONTROLS":
-              pnpControls = meta.value;
-              break;
-            default:
-              break;
-          }
-        });
-const dtModified = new Date(sample.updateDateTime)
-
-        var compatible2019 = SPFxVersion == "1.4.1" || SPFxVersion.startsWith("1.3.") || SPFxVersion == "GA";
-        var compatible2016 = SPFxVersion == "GA";
-        var modified = moment(dtModified).toISOString();
-        var authors = sample.authors;
-        var authorsList = "";
-        var authorAvatars = "";
-        var authorName = "";
-        var authorsGitHub = "";
-        var productTag = framework.toLowerCase();
-        var productName = framework;
-
-
-        // Build the authors array
-        if (authors.length < 1) {
-          console.log("Sample has no authors", sample);
-        } else {
-          authors.forEach(author => {
-            if (authorsList !== "") {
-              authorsList = authorsList + ", ";
-            }
-            authorsList = authorsList + author.name;
-            authorsGitHub = authorsGitHub + " " + author.gitHubAccount;
-
-            var authorAvatar = `<div class="author-avatar">
+        var authorAvatar = `<div class="author-avatar">
              <div role="presentation" class="author-coin">
                <div role="presentation" class="author-imagearea">
                  <div class="image-400">
@ -89,35 +125,38 @@ const dtModified = new Date(sample.updateDateTime)
                </div>
              </div>
            </div>`;
-            authorAvatars = authorAvatar + authorAvatars;
-          });
+        authorAvatars = authorAvatar + authorAvatars;
+      });

-          authorName = authors[0].name;
-          if (authors.length > 1) {
-            authorName = authorName + ` +${authors.length - 1}`;
-          }
-        }
+      authorName = authors[0].name;
+      if (authors.length > 1) {
+        authorName = authorName + ` +${authors.length - 1}`;
+      }
+    } else {
+      console.log("Sample has no authors", sample);
+    }

-        // Extract tags
-        var tags = "";
-        $.each(sample.tags, function (_u, tag) {
-          tags = tags + "#" + tag + ",";
-        });
+    // Extract tags
+    var tags = "";
+    $.each(sample.tags, function (_u, tag) {
+      tags = tags + "#" + tag + ",";
+    });

-        // Build a keyword tag for searching
-        var keywords = title + " " + escapedDescription + " " + authorsList + " " + authorsGitHub + " " + tags + " " + pnpControls;
-        keywords = keywords.toLowerCase();
+    // Build a keyword tag for searching
+    var keywords = title + " " + escapedDescription + " " + authorsList + " " + authorsGitHub + " " + tags + " " + pnpControls;
+    keywords = keywords.toLowerCase();

-        // Build the HTML to insert
-        var $items = $(`
-<a class="sample-thumbnail" href="${sample.url}" data-modified="${modified}" data-title="${title}" data-keywords="${keywords}" data-tags="${tags}" data-framework="${framework}" data-spfx="${SPFxVersion}" data-outlook="${outlookCompatible}" data-teams="${teamsCompatible}" data-sp2016="${compatible2016}" data-sp2019="${compatible2019}" data-pnpcontrols="${pnpControls}"
+    // Build the HTML to insert
+    var $items = $(`
+<a class="sample-thumbnail" href="${sample.url}" data-type="${sampleType}" data-modified="${modified}" data-title="${title}" data-keywords="${keywords}" data-tags="${tags}" data-framework="${framework}" data-spfx="${SPFxVersion}" data-outlook="${outlookCompatible}" data-teams="${teamsCompatible}" data-sp2016="${compatible2016}" data-sp2019="${compatible2019}" data-subscription="${subscription}" data-pnpcontrols="${pnpControls}"
 >
  <div class="sample-inner">
    <div class="sample-preview">
      <img src="${thumbnail}" loading="lazy" alt="${title}">
    </div>
    <div class="sample-details">
-      <div class="producttype-item ${productTag}">${productName}</div>
+      <div class="sample-item ${sampleType}" title="Type: ${sampleTypeName}">${sampleTypeName}</div>
+      <div class="producttype-item ${productTag}" title="Framework: ${productName}">${productName}</div>
      <p class="sample-title" title="${sample.title}">${sample.title}</p>
      <p class="sample-description" title='${escapedDescription}'>${shortDescription}</p>
      <div class="sample-activity">
@ -131,9 +170,9 @@ const dtModified = new Date(sample.updateDateTime)
  </div>
 </a>`);

-       return $items;
-      } catch (error) {
-        console.log("Error with one sample", error, sample);
-      }
-      return null;
+    return $items;
+  } catch (error) {
+    console.log("Error with one sample", error, sample);
+  }
+  return null;
 }
--- a/docs/samples/compatibility.md
+++ b/docs/samples/compatibility.md
@ -1,20 +1,24 @@
 ---
-title: Samples by Compatibility
+title: Samples by compatibility
 template: filter.html
 filteroptions:
    - name: all
-      title: SharePoint Online
+      title: 	All versions
      displayname: All
      filter: '*'
-      active: true
+      active: true    
+    - name: SPSubscription
+      title: v1.5 or lower
+      filter: '[data-subscription=''true'']'
+      displayname: Subscription Edition
    - name: 2019
-      title: SharePoint 2019
+      title: v1.4.1 or lower
      filter: '[data-sp2019=''true'']'
-      displayname: 2019
+      displayname: SharePoint Server 2019
    - name: 2016
-      title: SharePoint 2016
+      title: v1.1, web parts only
      filter: '[data-sp2016=''true'']'
-      displayname: 2016
+      displayname: SharePoint 2016 Feature Pack 2
    - name: teams
      title: Teams
      filter: '[data-teams=''true'']'
@ -23,8 +27,8 @@ filteroptions:
      filter: '[data-outlook=''true'']'
 ---

-All samples are compatible with SharePoint Online. If you wish to find web parts that were specifically designed for SharePoint 2019, SharePoint 2016, Microsoft Teams, or Microsoft Outlook, use the filters below.
+All samples are compatible with SharePoint Online. If you wish to find samples that were specifically designed for SharePoint Server Subscription Edition,SharePoint Server 2019, SharePoint 2016 Feature Pack 2, Microsoft Teams, or Microsoft Outlook, use the filters below.

-To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation.
+To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation.

 To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section.
--- a/docs/samples/spfx.md
+++ b/docs/samples/spfx.md
@ -1,5 +1,5 @@
 ---
-title: Samples by SPFx Version
+title: Samples by SPFx version
 template: filter.html
 filteroptions:
    - name: all
@ -7,6 +7,10 @@ filteroptions:
      displayname: All
      filter: '*'
      active: true
+    - name: 117
+      title: 1.17.x
+      displayname: 1.17
+      filter: '[data-spfx^=''1.17.'']'
    - name: 116
      title: 1.16.x
      displayname: 1.16
@ -28,12 +32,12 @@ filteroptions:
      displayname: 1.12
      filter: '[data-spfx^=''1.12.'']'
    - name: 111
-      title: 1.11.x
+      title: 1.11.0
      displayname: 1.11
      filter: '[data-spfx^=''1.11.'']'
    - name: 110
-      title: 1.10.x
-      displayname: 1.10
+      title: 1.10.0
+      displayname: '1.10'
      filter: '[data-spfx^=''1.10.'']'
    - name: 190
      title: 1.9.x
@ -48,7 +52,7 @@ filteroptions:
      displayname: 1.7
      filter: '[data-spfx^=''1.7.'']'
    - name: 160
-      title: 1.6.x
+      title: 1.6.0
      displayname: 1.6
      filter: '[data-spfx^=''1.6.'']'
    - name: 150
@ -56,21 +60,13 @@ filteroptions:
      displayname: 1.5
      filter: '[data-spfx^=''1.5.'']'
    - name: 140
-      title: 1.4.x
+      title: 1.4.x or earlier
      displayname: 1.4
-      filter: '[data-spfx^=''1.4.'']'
-    - name: 130
-      title: 1.3.x
-      displayname: 1.3
-      filter: '[data-spfx^=''1.3.'']'
-    - name: GA
-      title: GA
-      displayname: GA
-      filter: '[data-spfx=''GA'']'
+      filter: '[data-spfx^=''1.4.''],[data-spfx^=''1.3.''],[data-spfx=''GA'']'
 ---

 You can use the filters below to find samples by SharePoint Framework versions.

-To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://docs.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation.
+To learn more about SPFx compatibility, visit the [SharePoint Framework development tools and libraries compatibility](https://learn.microsoft.com/sharepoint/dev/spfx/compatibility) on Microsoft Documentation.

-To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section.
+To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section.
--- a/docs/samples/technology.md
+++ b/docs/samples/technology.md
@ -1,6 +1,6 @@
 > NOTE: This file is no longer used. I just left it here because I need to move the filters to another page.

-# Samples by Technology
+# Samples by technology

 Use the filters below to find samples which demonstrate how to use various Microsoft technologies.

--- a/docs/samples/type.md
+++ b/docs/samples/type.md
@ -0,0 +1,34 @@
+---
+title: Samples by type
+template: filter.html
+filteroptions:
+    - name: all
+      title: 	All sample types
+      displayname: All
+      filter: '*'
+      active: true    
+    - name: webpart
+      title: Web part
+      filter: '[data-type=''webpart'']'
+    - name: appcustomizer
+      title: Application customizer
+      filter: '[data-type=''appcustomizer'']'
+    - name: commandset
+      title: ListView command set
+      filter: '[data-type=''command'']'
+    - name: field
+      title: Field customizer
+      filter: '[data-type=''field'']'
+    - name: form
+      title: Form customizer
+      filter: '[data-type=''form'']'
+    - name: search
+      title: Search query extension
+      filter: '[data-type=''search'']'
+---
+
+If you're looking for a specific type of sample, use the filters select between [web parts](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts) and [extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions).
+
+Extensions include  [application customizers](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension), [field customizer extensions](<https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-field-customizer>), [Form customizer extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer), [ListView command set extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api) and [search query extensions](https://learn.microsoft.com/sharepoint/dev/spfx/building-search-extensions), which are all available in the SharePoint Framework.
+
+To learn more about how to use these samples, please refer to our [getting started](../gettingstarted/index.md) section.
--- a/mkdocs.yml
+++ b/mkdocs.yml
@ -1,6 +1,6 @@
 # Web Part Samples
 # Author: Hugo Bernier
-site_name: SharePoint Framework Client-Side Web Part Samples
+site_name: SharePoint Framework (SPFx) Samples
 plugins:
    - macros
    - markdownextradata
@ -11,9 +11,10 @@ plugins:
            # 'samples/framework': 'https://pnp.github.io/sp-dev-fx-webparts/'
 nav:
  - Samples:
-    - By Framework: index.md
+    - By framework: index.md
+    - By type: samples/type.md
    - By SPFx Version: samples/spfx.md
-    - By Compatibility: samples/compatibility.md
+    - By compatibility: samples/compatibility.md
  - Getting Started:
    - Using the Samples: gettingstarted/index.md
    - Troubleshooting: gettingstarted/troubleshooting.md
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M2048 128v1064q-28-31-60-57t-68-50V640H128v1024h868q3 33 10 65t18 63H0V128h2048zm-128 128H128v256h1792V256zM256 1536V768h640v768H256zm128-128h384V896H384v512zm1024-512h-384V768h384v128zm-384 130h384q-122 41-216 126h-168v-126zm1014 462l-124 51q6 30 6 59 0 32-6 63l124 51-49 119-124-52q-17 25-38 47t-48 39l52 124-119 49-51-124q-30 6-61 6-15 0-30-3t-30-6l-52 127-119-49 52-125q-25-17-45-39t-38-47l-127 53-49-119 124-51q-6-30-6-59 0-31 6-63l-124-51 49-119 124 52q17-25 38-47t48-39l-52-124 119-49 51 124q30-6 59-6 31 0 63 6l51-124 119 49-52 124q25 17 47 38t39 48l124-52 49 119zm-438 303q40 0 75-15t61-41 41-61 15-74q0-39-15-74t-41-61-62-42-74-15q-39 0-74 15t-61 41-42 62-15 74q0 40 15 74t41 61 62 41 74 15z" fill="#333333"></path></svg>