From 28a06119ee1fcf106775dd7e5cbe3164c4c0530d Mon Sep 17 00:00:00 2001
From: Mike Pirog <mike@lando.dev>
Date: Thu, 15 Feb 2024 15:20:45 -0500
Subject: [PATCH] better plugin page

---
 .vitepress/theme/VPLPluginItems.vue |  2 +-
 guides.md                           | 20 ++++++------
 guides/accessibility.md             |  1 +
 lando-101.md                        | 16 ++++-----
 plugins.md                          | 50 +++++++++++++++++++++++++++--
 plugins/acquia.md                   |  4 +--
 plugins/apache.md                   |  2 +-
 plugins/dotnet.md                   |  3 +-
 plugins/lagoon.md                   |  2 +-
 plugins/mailhog.md                  |  2 +-
 plugins/nginx.md                    |  2 +-
 plugins/pantheon.md                 |  2 +-
 plugins/phpmyadmin.md               |  2 +-
 plugins/platformsh.md               |  2 +-
 plugins/tomcat.md                   |  2 +-
 troubleshooting.md                  | 19 ++++++-----
 16 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/.vitepress/theme/VPLPluginItems.vue b/.vitepress/theme/VPLPluginItems.vue
index 456f8e9..611a59e 100644
--- a/.vitepress/theme/VPLPluginItems.vue
+++ b/.vitepress/theme/VPLPluginItems.vue
@@ -95,7 +95,7 @@ const grid = computed(() => {
 const pagination = () => pages.slice(0, amount.value);
 
 const filter = () => {
-  const tagList = Object.entries(tags).filter(pair => pair[1] === true).map(pair => pair[0]);
+  const tagList = Object.entries(tags).filter(pair => pair[1].selected === true).map(pair => pair[0]);
   if (tagList.length === 0) return items;
   return items.filter(item => Array.isArray(item.tags) && tagList.every(tag => item.tags.includes(tag)));
 };
diff --git a/guides.md b/guides.md
index a89ca75..a457edb 100644
--- a/guides.md
+++ b/guides.md
@@ -4,15 +4,6 @@ layout: page
 title: Guides
 sidebar: false
 ---
-
-<script setup>
-import {VPLCollectionPage, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
-import {useCollection} from '@lando/vitepress-theme-default-plus';
-
-const {pages} = useCollection('guide');
-
-</script>
-
 <VPLCollectionPage>
   <VPLCollectionPageTitle>
     <template #title>
@@ -22,5 +13,14 @@ const {pages} = useCollection('guide');
       Some general purporse Lando tutorials and guides
     </template>
   </VPLCollectionPageTitle>
-  <VPLCollectionItems :items="pages"/>
+  <VPLCollectionPageTags v-model="tags" />
+  <VPLCollectionItems :tags="tags" :items="pages"/>
 </VPLCollectionPage>
+
+<script setup>
+import {VPLCollectionPage, VPLCollectionPageTags, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
+import {useCollection} from '@lando/vitepress-theme-default-plus';
+
+const {pages, tags} = useCollection('guide');
+</script>
+
diff --git a/guides/accessibility.md b/guides/accessibility.md
index 55dc795..e8a7878 100644
--- a/guides/accessibility.md
+++ b/guides/accessibility.md
@@ -9,6 +9,7 @@ authors:
     link: https://twitter.com/devwithlando
 updated:
   timestamp: 1703011953000
+
 ---
 
 # Accessibility and Lando
diff --git a/lando-101.md b/lando-101.md
index e4da0dd..abbe0a4 100644
--- a/lando-101.md
+++ b/lando-101.md
@@ -4,13 +4,6 @@ layout: page
 title: Lando 101
 sidebar: false
 ---
-
-<script setup>
-import {VPLCollectionPage, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
-import {useCollection} from '@lando/vitepress-theme-default-plus';
-const {pages} = useCollection('lando101');
-</script>
-
 <VPLCollectionPage>
   <VPLCollectionPageTitle>
     <template #title>
@@ -20,5 +13,12 @@ const {pages} = useCollection('lando101');
       Learn the basics with Lando 101
     </template>
   </VPLCollectionPageTitle>
-  <VPLCollectionItems :items="pages"/>
+  <VPLCollectionPageTags v-model="tags" />
+  <VPLCollectionItems :tags="tags" :items="pages"/>
 </VPLCollectionPage>
+
+<script setup>
+import {VPLCollectionPage, VPLCollectionPageTags, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
+import {useCollection} from '@lando/vitepress-theme-default-plus';
+const {pages, tags} = useCollection('lando101');
+</script>
diff --git a/plugins.md b/plugins.md
index 0fb828b..0938a21 100644
--- a/plugins.md
+++ b/plugins.md
@@ -14,14 +14,58 @@ aside: false
       It's dangerous to go alone, take some of these:
     </template>
   </VPLCollectionPageTitle>
-  <VPLCollectionPageTags v-model="selectedTags" />
-  <VPLPluginItems :items="pages" :tags="selectedTags" type="icon"/>
+  <div class="other-tags">
+    <VPLCollectionTag @click="toggle()" v-bind="toggleTag"/>
+  </div>
+  <VPLCollectionPageTags v-model="filteredTags" />
+  <VPLPluginItems :key="toggleTag.type" :items="pages" :tags="filteredTags" :type="toggleTag.type"/>
 </VPLCollectionPage>
 
 <script setup>
+import {computed, reactive, ref} from 'vue';
 import {useCollection} from '@lando/vitepress-theme-default-plus';
 import {VPLCollectionPage, VPLCollectionPageTags, VPLCollectionPageTitle} from '@lando/vitepress-theme-default-plus';
+import VPLCollectionTag from '@lando/vitepress-theme-default-plus/components/VPLCollectionTag.vue';
 import VPLPluginItems from '.vitepress/theme/VPLPluginItems.vue';
 
-const {pages, selectedTags} = useCollection('plugins');
+const cardSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M3 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H3Zm2.5 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM10 5.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm.75 3.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM10 8a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 10 8Zm-2.378 3c.346 0 .583-.343.395-.633A2.998 2.998 0 0 0 5.5 9a2.998 2.998 0 0 0-2.517 1.367c-.188.29.05.633.395.633h4.244Z" clip-rule="evenodd" /></svg>';
+const iconSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4"><path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v2A1.5 1.5 0 0 0 3.5 7h2A1.5 1.5 0 0 0 7 5.5v-2A1.5 1.5 0 0 0 5.5 2h-2ZM3.5 9A1.5 1.5 0 0 0 2 10.5v2A1.5 1.5 0 0 0 3.5 14h2A1.5 1.5 0 0 0 7 12.5v-2A1.5 1.5 0 0 0 5.5 9h-2ZM9 3.5A1.5 1.5 0 0 1 10.5 2h2A1.5 1.5 0 0 1 14 3.5v2A1.5 1.5 0 0 1 12.5 7h-2A1.5 1.5 0 0 1 9 5.5v-2ZM10.5 9A1.5 1.5 0 0 0 9 10.5v2a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 12.5 9h-2Z" /></svg>';
+
+function omit(obj, ...props) {
+  const result = { ...obj };
+  props.forEach(function(prop) {
+    delete result[prop];
+  });
+  return result;
+}
+// lets omit these for now, we can add them back when we have more plugins
+const omitTags = ['official', 'unsupported'];
+const {pages, tags} = useCollection('plugins');
+
+const cards = ref(true);
+const filteredTags = reactive(omit(tags, ...omitTags));
+const toggleTag = computed(() => ({
+  color: 'var(--vp-c-brand-soft)',
+  styles: {
+    'border-color': 'var(--vp-c-brand-soft)',
+  },
+  icon: cards.value ? iconSVG : cardSVG,
+  text: cards.value ? 'show icons' : 'show cards',
+  type: cards.value ? 'card' : 'icon',
+}));
+
+const toggle = () => {
+  cards.value = !cards.value;
+}
 </script>
+
+<style scoped>
+.other-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px 0;
+}
+</style>
diff --git a/plugins/acquia.md b/plugins/acquia.md
index 5c62ddd..27bb01e 100644
--- a/plugins/acquia.md
+++ b/plugins/acquia.md
@@ -15,6 +15,6 @@ maintainers:
 
 tags:
   - recipe
-  - hosting-integration
-  - official
+  - hosting integration
+  # - official
 ---
diff --git a/plugins/apache.md b/plugins/apache.md
index 114dcae..7c31d31 100644
--- a/plugins/apache.md
+++ b/plugins/apache.md
@@ -15,7 +15,7 @@ maintainers:
 
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 
diff --git a/plugins/dotnet.md b/plugins/dotnet.md
index 1436a2f..731b70b 100644
--- a/plugins/dotnet.md
+++ b/plugins/dotnet.md
@@ -13,7 +13,8 @@ maintainers:
       - icon: twitter
         link: https://twitter.com/devwithlando
 tags:
-  - recipe
+  - service
+  - runtime
   - official
 ---
 
diff --git a/plugins/lagoon.md b/plugins/lagoon.md
index a99a49a..9eb57d0 100644
--- a/plugins/lagoon.md
+++ b/plugins/lagoon.md
@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - official
 ---
 
diff --git a/plugins/mailhog.md b/plugins/mailhog.md
index 722e92a..f0e6c9f 100644
--- a/plugins/mailhog.md
+++ b/plugins/mailhog.md
@@ -15,6 +15,6 @@ maintainers:
 tags:
   - service
   - official
-  - tool
+  - dev tool
 ---
 
diff --git a/plugins/nginx.md b/plugins/nginx.md
index 71d9944..4b9bd73 100644
--- a/plugins/nginx.md
+++ b/plugins/nginx.md
@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 
diff --git a/plugins/pantheon.md b/plugins/pantheon.md
index 224fd1b..d6e6f0c 100644
--- a/plugins/pantheon.md
+++ b/plugins/pantheon.md
@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - official
 ---
 
diff --git a/plugins/phpmyadmin.md b/plugins/phpmyadmin.md
index cedf2e9..d7dc849 100644
--- a/plugins/phpmyadmin.md
+++ b/plugins/phpmyadmin.md
@@ -15,6 +15,6 @@ maintainers:
 tags:
   - service
   - official
-  - tool
+  - dev tool
 ---
 
diff --git a/plugins/platformsh.md b/plugins/platformsh.md
index 5938069..a5df3cd 100644
--- a/plugins/platformsh.md
+++ b/plugins/platformsh.md
@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - unsupported
 ---
 
diff --git a/plugins/tomcat.md b/plugins/tomcat.md
index 391096d..dc21be4 100644
--- a/plugins/tomcat.md
+++ b/plugins/tomcat.md
@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 
diff --git a/troubleshooting.md b/troubleshooting.md
index 6138502..a99213a 100644
--- a/troubleshooting.md
+++ b/troubleshooting.md
@@ -4,15 +4,6 @@ layout: page
 title: Troubleshooting
 sidebar: false
 ---
-
-<script setup>
-import {VPLCollectionPage, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
-import {useCollection} from '@lando/vitepress-theme-default-plus';
-
-const {pages} = useCollection('troubleshooting');
-
-</script>
-
 <VPLCollectionPage>
   <VPLCollectionPageTitle>
     <template #title>
@@ -22,5 +13,13 @@ const {pages} = useCollection('troubleshooting');
       Home helpful troubleshooting materials for Lando
     </template>
   </VPLCollectionPageTitle>
-  <VPLCollectionItems :items="pages"/>
+  <VPLCollectionPageTags v-model="tags" />
+  <VPLCollectionItems :tags="tags" :items="pages"/>
 </VPLCollectionPage>
+
+<script setup>
+import {VPLCollectionPage, VPLCollectionPageTags, VPLCollectionPageTitle, VPLCollectionItems} from '@lando/vitepress-theme-default-plus';
+import {useCollection} from '@lando/vitepress-theme-default-plus';
+
+const {pages, tags} = useCollection('troubleshooting');
+</script>