From e29fad16ead486c2813f9db3c90e2f23b419ed96 Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Sun, 26 Apr 2026 21:50:52 +0200
Subject: [PATCH] docs: Add types for components (#2273)

---
 docs/.vitepress/components/BlogHome.vue      |  3 ++-
 docs/.vitepress/components/BlogLayout.vue    | 11 ++++++-----
 docs/.vitepress/components/ExampleSearch.vue |  4 ++--
 docs/.vitepress/config.ts                    |  4 ++++
 docs/.vitepress/loaders/blog.data.ts         | 10 ++++++++--
 docs/.vitepress/theme/index.ts               |  3 ++-
 docs/.vitepress/utils/head.ts                |  2 +-
 docs/.vitepress/utils/types.ts               | 14 ++++++++++++++
 8 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 35aadf90..d6843cdc 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -3,8 +3,9 @@ import { computed } from 'vue';
 // @ts-expect-error: Vitepress data-loader magic, this import is correct
 import { data } from '../loaders/blog.data';
 import BlogPostPreview from './BlogPostPreview.vue';
+import { Post } from '../utils/types';
 
-const posts = computed(() =>
+const posts = computed<Post[]>(() =>
   data
     .map((post) => ({
       ...post,
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 3fb56be7..4573dd0b 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import useBlogDate from '../composables/useBlogDate';
-import { useData } from 'vitepress';
+import { Content, useData } from 'vitepress';
+import { PostFrontmatter } from '../utils/types';
 
-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`" />
           <span>{{ author.name }}</span>
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 03b319c2..a7e8dac0 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -1,5 +1,5 @@
 <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';
@@ -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(
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 164ce129..47f51190 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,4 +1,5 @@
 import { Feed } from 'feed';
+// @ts-expect-error; It isn't TypeScript lib
 import footnote from 'markdown-it-footnote';
 import fs, { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
@@ -73,8 +74,11 @@ export default defineConfig({
   description,
   vite: {
     clearScreen: false,
+    //TODO: REMOVE THIS @TS-EXPECT-ERROR AFTER BUMP VITEPRESS TO V2.0
     plugins: [
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       llmstxt(),
+      // @ts-expect-error: Vite version mismatch between this project and the plugin
       groupIconVitePlugin({
         customIcon: {
           'wxt.config.ts': localIconLoader(
diff --git a/docs/.vitepress/loaders/blog.data.ts b/docs/.vitepress/loaders/blog.data.ts
index 980fd820..d63c55ca 100644
--- a/docs/.vitepress/loaders/blog.data.ts
+++ b/docs/.vitepress/loaders/blog.data.ts
@@ -1,3 +1,9 @@
-import { createContentLoader } from 'vitepress';
+import { type ContentData, createContentLoader } from 'vitepress';
+import { PostFrontmatter } from '../utils/types';
 
-export default createContentLoader('blog/*.md');
+declare const data: Array<ContentData & { frontmatter: PostFrontmatter }>;
+export { data };
+
+export default createContentLoader<
+  Array<ContentData & { frontmatter: PostFrontmatter }>
+>('blog/*.md');
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index e616c58a..1c45031e 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,10 +6,11 @@ import ExampleSearch from '../components/ExampleSearch.vue';
 import BlogLayout from '../components/BlogLayout.vue';
 import './custom.css';
 import 'virtual:group-icons.css';
+import type { EnhanceAppContext } from 'vitepress/client';
 
 export default {
   extends: DefaultTheme,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: EnhanceAppContext) {
     ctx.app
       .component('Icon', Icon)
       .component('EntrypointPatterns', EntrypointPatterns)
diff --git a/docs/.vitepress/utils/head.ts b/docs/.vitepress/utils/head.ts
index 5c776c96..d6d8adf9 100644
--- a/docs/.vitepress/utils/head.ts
+++ b/docs/.vitepress/utils/head.ts
@@ -1,4 +1,4 @@
-import { HeadConfig } from 'vitepress/types/shared';
+import type { HeadConfig } from 'vitepress';
 
 export function meta(
   property: string,
diff --git a/docs/.vitepress/utils/types.ts b/docs/.vitepress/utils/types.ts
index ed3460ef..16010086 100644
--- a/docs/.vitepress/utils/types.ts
+++ b/docs/.vitepress/utils/types.ts
@@ -1,3 +1,5 @@
+import { ContentData } from 'vitepress';
+
 export interface Example {
   name: string;
   description?: string;
@@ -16,3 +18,15 @@ export type ExamplesMetadata = {
 };
 
 export type KeySelectedObject = Record<string, boolean | undefined>;
+
+export interface PostFrontmatter {
+  title: string;
+  description?: string;
+  date: Date;
+  authors: { name: string; github: string }[];
+}
+
+export interface Post
+  extends Omit<ContentData, 'frontmatter'>, Omit<PostFrontmatter, 'date'> {
+  date: Date;
+}