better plugin page

.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)));
 };

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>
+

guides/accessibility.md

@@ -9,6 +9,7 @@ authors:
     link: https://twitter.com/devwithlando
 updated:
   timestamp: 1703011953000
+
 ---
 
 # Accessibility and Lando

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>

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>

plugins/acquia.md

@@ -15,6 +15,6 @@ maintainers:
 
 tags:
   - recipe
-  - hosting-integration
-  - official
+  - hosting integration
+  # - official
 ---

plugins/apache.md

@@ -15,7 +15,7 @@ maintainers:
 
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 

plugins/dotnet.md

@@ -13,7 +13,8 @@ maintainers:
       - icon: twitter
         link: https://twitter.com/devwithlando
 tags:
-  - recipe
+  - service
+  - runtime
   - official
 ---
 

plugins/lagoon.md

@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - official
 ---
 

plugins/mailhog.md

@@ -15,6 +15,6 @@ maintainers:
 tags:
   - service
   - official
-  - tool
+  - dev tool
 ---
 

plugins/nginx.md

@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 

plugins/pantheon.md

@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - official
 ---
 

plugins/phpmyadmin.md

@@ -15,6 +15,6 @@ maintainers:
 tags:
   - service
   - official
-  - tool
+  - dev tool
 ---
 

plugins/platformsh.md

@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - recipe
-  - hosting-integration
+  - hosting integration
   - unsupported
 ---
 

plugins/tomcat.md

@@ -14,7 +14,7 @@ maintainers:
         link: https://twitter.com/devwithlando
 tags:
   - service
-  - web-server
+  - web server
   - official
 ---
 

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>