docs: init ecosystem functions listing

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-187%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-189%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

meta/ecosystem-functions.ts

@@ -0,0 +1,24 @@
+import type { VueUseFunction } from './types'
+
+export const head: VueUseFunction[] = [
+  {
+    name: 'createHead',
+    package: 'head',
+    lastUpdated: 0,
+    description: 'Create the head manager instance.',
+    category: '@Head',
+    external: 'https://github.com/vueuse/head#api',
+  },
+  {
+    name: 'useHead',
+    package: 'head',
+    lastUpdated: 0,
+    description: 'Update head meta tags reactively.',
+    category: '@Head',
+    external: 'https://github.com/vueuse/head#api',
+  },
+]
+
+export const ecosystemFunctions = [
+  ...head,
+]

meta/types.ts

@@ -28,6 +28,7 @@ export interface VueUseFunction {
   internal?: boolean
   component?: boolean
   directive?: boolean
+  external?: string
 }
 
 export interface VueUsePackage extends PackageManifest {

packages/.vitepress/config.ts

@@ -192,9 +192,11 @@ function getFunctionsSideBar() {
       text: name,
       items: functions.map(i => ({
         text: i.name,
-        link: `/${i.package}/${i.name}/`,
+        link: i.external || `/${i.package}/${i.name}/`,
       })),
-      link: name.startsWith('@') ? `/${functions[0].package}/README` : undefined,
+      link: name.startsWith('@')
+        ? functions[0].external || `/${functions[0].package}/README`
+        : undefined,
     })
   }
 

packages/.vitepress/theme/components/FunctionBadge.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { VueUseFunction } from '../../../../meta/types'
 import { renderMarkdown } from '../utils'
 
-defineProps<{ fn: VueUseFunction }>()
+const props = defineProps<{ fn: VueUseFunction }>()
 
 function styledName(name: string) {
   if (name.startsWith('use'))
@@ -13,11 +14,26 @@ function styledName(name: string) {
     return `<span opacity="70">on</span>${name.slice(2)}`
   return name
 }
+
+const link = computed(() => {
+  if (props.fn.external) {
+    return {
+      href: props.fn.external,
+      target: '_blank',
+    }
+  }
+  return {
+    href: `/${props.fn.package}/${props.fn.name}/`,
+  }
+})
 </script>
 
 <template>
   <div text="sm" class="whitespace-nowrap overflow-hidden overflow-ellipsis">
-    <a :href="`/${fn.package}/${fn.name}/`" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded" v-html="styledName(fn.name)" />
+    <a v-bind="link" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded items-center" flex="inline gap-1">
+      <span v-html="styledName(fn.name)" />
+      <carbon-launch v-if="fn.external" class="opacity-80 text-xs" />
+    </a>
     -
     <span class="overflow-hidden overflow-ellipsis" v-html="renderMarkdown(fn.description)" />
   </div>

scripts/utils.ts

@@ -6,6 +6,7 @@ import parser from 'prettier/parser-typescript'
 import prettier from 'prettier'
 import YAML from 'js-yaml'
 import Git from 'simple-git'
+import { ecosystemFunctions } from '../meta/ecosystem-functions'
 import { packages } from '../meta/packages'
 import type { PackageIndexes, VueUseFunction, VueUsePackage } from '../meta/types'
 
@@ -69,7 +70,9 @@ export async function readIndexes() {
   const indexes: PackageIndexes = {
     packages: {},
     categories: [],
-    functions: [],
+    functions: [
+      ...ecosystemFunctions,
+    ],
   }
 
   for (const info of packages) {