fix: [Advice needed] Errors and remove unused code of docs and blog

docs/.vitepress/components/BlogHome.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-// @ts-expect-error: Vitepress data-loader magic, this import is correct
-import { data } from '../loaders/blog.data';
+import { data, type Post } from '../loaders/blog.data';
 import BlogPostPreview from './BlogPostPreview.vue';
 
-const posts = computed(() =>
+const posts = computed<Post[]>(() =>
   data
     .map((post) => ({
       ...post,
@@ -35,11 +34,11 @@ const posts = computed(() =>
   flex-direction: column;
   align-items: center;
 }
+
 .container > div {
   padding: 32px;
   max-width: 900px;
   width: 100%;
-  min-width: 0;
 }
 
 h1 {
@@ -51,20 +50,16 @@ ul {
   flex-direction: column;
   list-style: none;
 }
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
 
 ul li {
   padding-top: 16px;
   margin-top: 16px;
-  border-top: 1px solid var(--vp-c-default);
+  border-top: 1px solid var(--vp-c-default-2);
 }
+
 ul li:last-child {
   padding-bottom: 16px;
   margin-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-default);
+  border-bottom: 1px solid var(--vp-c-default-1);
 }
 </style>

docs/.vitepress/components/BlogLayout.vue

@@ -1,23 +1,27 @@
 <script lang="ts" setup>
 import useBlogDate from '../composables/useBlogDate';
-import { useData } from 'vitepress';
+import { Content, useData } from 'vitepress';
+import type { PostFrontmatter } from '../loaders/blog.data';
 
-const { frontmatter } = useData();
+const { frontmatter } = useData<PostFrontmatter>();
 const date = useBlogDate(() => frontmatter.value.date);
 </script>
 
 <template>
   <div class="vp-doc">
     <main class="container-content">
-      <h1 v-html="$frontmatter.title" />
+      <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a
-          class="author"
-          v-for="author of $frontmatter.authors"
+          v-for="author of frontmatter.authors"
           :key="author.github"
           :href="`https://github.com/${author.github}`"
+          class="author"
         >
-          <img :src="`https://github.com/${author.github}.png?size=96`" />
+          <img
+            :src="`https://github.com/${author.github}.png?size=96`"
+            alt="author avatar"
+          />
           <span>{{ author.name }}</span>
         </a>
         <span>&bull;</span>
@@ -29,29 +33,24 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-vp-doc {
-  display: flex;
-}
-main {
+.container-content {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
-}
-@media (min-width: 768px) {
-  main {
+
+  @media (min-width: 768px) {
     padding: 64px;
   }
 }
+
 .meta-row {
   display: flex;
   color: var(--vp-c-text-2);
   gap: 16px;
   overflow: hidden;
   padding-bottom: 32px;
 }
-.meta-row > * {
-  flex-shrink: 0;
-}
+
 .author {
   display: flex;
   gap: 8px;
@@ -60,15 +59,13 @@ main {
   font-weight: normal;
   text-decoration: none;
 }
+
 .author img {
   width: 24px;
   height: 24px;
   border-radius: 100%;
 }
-.author span {
-  padding: 0;
-  margin: 0;
-}
+
 .author:hover {
   text-decoration: underline;
   color: var(--vp-c-text-2);

docs/.vitepress/components/BlogPostPreview.vue

@@ -31,39 +31,28 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li {
-  padding: 0;
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-h3 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
 li > a > div {
   display: flex;
   flex-direction: column;
-  margin: 0 -16px;
   padding: 16px;
   border-radius: 16px;
+
+  &:hover {
+    background: var(--vp-c-default-3);
+  }
 }
-li > a > div:hover {
-  background: var(--vp-c-default);
-}
+
 li .title {
-  color: var(--vp-c-text);
+  color: var(--vp-c-text-1);
   margin-bottom: 12px;
 }
+
 li .description {
   font-size: 16px;
   color: var(--vp-c-text-2);
   margin-bottom: 8px;
 }
+
 li .meta {
   font-weight: 400;
   font-size: 12px;

docs/.vitepress/components/EntrypointPatterns.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps<{
+defineProps<{
   patterns: Array<[intput: string, output: string]>;
 }>();
 </script>
@@ -20,14 +20,14 @@ const props = defineProps<{
         </td>
         <td style="padding: 6px; opacity: 50%">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
             height="20"
             viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill="currentColor"
               d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+              fill="currentColor"
             />
           </svg>
         </td>

docs/.vitepress/components/ExampleSearch.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { ref, onMounted, computed, toRaw, Ref } from 'vue';
+import { computed, onMounted, ref, Ref, toRaw } from 'vue';
 import ExampleSearchFilterByItem from './ExampleSearchFilterByItem.vue';
 import ExampleSearchResult from './ExampleSearchResult.vue';
 import { ExamplesMetadata, KeySelectedObject } from '../utils/types';
 
-const props = defineProps<{
+defineProps<{
   tag?: string;
 }>();
 
@@ -48,7 +48,7 @@ function doesExampleMatchSelected(
 
 const filteredExamples = computed(() => {
   const text = searchText.value.toLowerCase();
-  return exampleMetadata.value.examples.filter((example) => {
+  return exampleMetadata.value?.examples.filter((example) => {
     const matchesText = example.searchText.toLowerCase().includes(text);
     const matchesApis = doesExampleMatchSelected(example.apis, requiredApis);
     const matchesPermissions = doesExampleMatchSelected(
@@ -72,19 +72,19 @@ const filteredExamples = computed(() => {
 
     <div class="filters">
       <ExampleSearchFilterByItem
-        label="APIs"
-        :items="exampleMetadata?.allApis"
         v-model="selectedApis"
+        :items="exampleMetadata?.allApis"
+        label="APIs"
       />
       <ExampleSearchFilterByItem
-        label="Permissions"
-        :items="exampleMetadata?.allPermissions"
         v-model="selectedPermissions"
+        :items="exampleMetadata?.allPermissions"
+        label="Permissions"
       />
       <ExampleSearchFilterByItem
-        label="Packages"
-        :items="exampleMetadata?.allPackages"
         v-model="selectedPackages"
+        :items="exampleMetadata?.allPackages"
+        label="Packages"
       />
     </div>
 
@@ -98,7 +98,7 @@ const filteredExamples = computed(() => {
             :example
           />
         </ul>
-        <p v-if="filteredExamples.length === 0">No matching examples</p>
+        <p v-if="!filteredExamples?.length">No matching examples</p>
       </template>
     </div>
   </div>
@@ -107,115 +107,52 @@ const filteredExamples = computed(() => {
 <style scoped>
 .example-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   grid-template-areas:
-    'search'
-    'results';
+    'filters search'
+    'filters results';
   gap: 16px;
-}
-@media only screen and (min-width: 720px) {
-  .example-layout {
+
+  @media only screen and (min-width: 720px) {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'filters search'
-      'filters results';
   }
 }
+
 .search {
   grid-area: search;
   background: var(--vp-c-bg-soft);
   padding: 20px;
-  width: 100%;
-  display: flex;
   border-radius: 16px;
 }
+
 .filters {
-  display: none;
   grid-area: filters;
-}
-@media only screen and (min-width: 720px) {
-  .filters {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  @media only screen and (min-width: 720px) {
     border-radius: 16px;
-    overflow: hidden;
-    align-self: flex-start;
   }
 }
+
 .results {
   grid-area: results;
 }
 
-.box {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
 .search input {
-  min-width: 0;
-  flex: 1;
   font-size: 16px;
 }
 
-.checkbox-col {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 200px;
-  font-size: 14px;
-  gap: 4px;
-}
-
-.filter-btn {
-  color: var(--vp-c-brand-1);
-}
-
-.checkbox-col .header {
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-
-.checkbox-col p {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-}
-
-span {
-  padding-top: 1px;
-}
-
-.checkbox-col input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.checkbox-col-container {
-  display: flex;
-}
-
 .search-results {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
   gap: 16px;
-}
-@media only screen and (min-width: 800px) {
-  .search-results {
+
+  @media only screen and (min-width: 800px) {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-@media only screen and (min-width: 1024px) {
-  .search-results {
+
+  @media only screen and (min-width: 1024px) {
     grid-template-columns: repeat(3, 1fr);
   }
 }