docs: show deprecation warnings in api docs (#524)

2 files changed, 24 insertions, 1 deletions

diff --git a/docs/.vitepress/components/api-docs/method.ts b/docs/.vitepress/components/api-docs/method.ts
index ac0deb96..ceca9628 100644
--- a/docs/.vitepress/components/api-docs/method.ts
+++ b/docs/.vitepress/components/api-docs/method.ts
@@ -1,9 +1,12 @@
 export interface Method {
   readonly name: string;
+  readonly title: string;
   readonly description: string; // HTML
   readonly parameters: MethodParameter[];
   readonly returns: string;
   readonly examples: string; // HTML
+  readonly deprecated: boolean;
+  readonly seeAlsos: string[];
 }
 
 export interface MethodParameter {
diff --git a/docs/.vitepress/components/api-docs/method.vue b/docs/.vitepress/components/api-docs/method.vue
index fb1145cb..a5c8586a 100644
--- a/docs/.vitepress/components/api-docs/method.vue
+++ b/docs/.vitepress/components/api-docs/method.vue
@@ -3,11 +3,21 @@ import type { Method } from './method';
 import MethodParameters from './method-parameters.vue';
 
 const props = defineProps<{ method: Method }>();
+
+function seeAlsoToUrl(see: string): string {
+  const [, module, method] = see.replace(/\(.*/, '').split('\.');
+  return module + '.html#' + method;
+}
 </script>
 
 <template>
   <div>
-    <h2>{{ props.method.name }}</h2>
+    <h2 :id="props.method.name">{{ props.method.title }}</h2>
+
+    <div v-if="props.method.deprecated" class="warning custom-block">
+      <p class="custom-block-title">Deprecated</p>
+      <p>This method is deprecated and will be removed in a future version.</p>
+    </div>
 
     <div v-html="props.method.description"></div>
 
@@ -19,5 +29,15 @@ const props = defineProps<{ method: Method }>();
     <p><strong>Returns:</strong> {{ props.method.returns }}</p>
 
     <div v-html="props.method.examples" />
+
+    <div v-if="props.method.seeAlsos.length > 0">
+      <h3>See Also</h3>
+      <div v-for="seeAlso of props.method.seeAlsos" :key="seeAlso">
+        <a :href="seeAlsoToUrl(seeAlso)" v-if="seeAlso.startsWith('faker.')">
+          <p>{{ seeAlso }}</p>
+        </a>
+        <p v-else>{{ seeAlso }}</p>
+      </div>
+    </div>
   </div>
 </template>