docs: show source link (#1780)

Co-authored-by: Shinigami92 <[email protected]>

2 files changed, 44 insertions, 5 deletions

diff --git a/docs/.vitepress/components/api-docs/method.ts b/docs/.vitepress/components/api-docs/method.ts
index b58f435e..52cb2495 100644
--- a/docs/.vitepress/components/api-docs/method.ts
+++ b/docs/.vitepress/components/api-docs/method.ts
@@ -7,6 +7,7 @@ export interface Method {
   readonly examples: string; // HTML
   readonly deprecated: boolean;
   readonly since: string;
+  readonly sourcePath: string; // URL-Suffix
   readonly seeAlsos: string[];
 }
 
diff --git a/docs/.vitepress/components/api-docs/method.vue b/docs/.vitepress/components/api-docs/method.vue
index c43e5868..8bff111f 100644
--- a/docs/.vitepress/components/api-docs/method.vue
+++ b/docs/.vitepress/components/api-docs/method.vue
@@ -2,6 +2,7 @@
 import type { Method } from './method';
 import MethodParameters from './method-parameters.vue';
 import { slugify } from '../../shared/utils/slugify';
+import { sourceBaseUrl } from '../../../api/source-base-url';
 
 const props = defineProps<{ method: Method }>();
 
@@ -20,11 +21,9 @@ function seeAlsoToUrl(see: string): string {
 
     <div v-html="props.method.description"></div>
 
-    <div v-if="props.method.since">
-      <p>
-        <em>Available since v<span v-html="props.method.since" /></em>
-      </p>
-    </div>
+    <p v-if="props.method.since">
+      <em>Available since v{{ props.method.since }}</em>
+    </p>
 
     <MethodParameters
       v-if="props.method.parameters.length > 0"
@@ -48,5 +47,44 @@ function seeAlsoToUrl(see: string): string {
         </li>
       </ul>
     </div>
+
+    <div v-if="props.method.sourcePath">
+      <h3>Source</h3>
+      <ul>
+        <li>
+          <a
+            :href="sourceBaseUrl + props.method.sourcePath"
+            target="_blank"
+            class="source-link"
+          >
+            View Source
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              width="1.2em"
+              height="1.2em"
+              class="source-link-icon"
+            >
+              <path
+                d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
+              />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
+
+<style scoped>
+a.source-link {
+  display: flex;
+  align-items: center;
+}
+
+svg.source-link-icon {
+  display: inline;
+  margin-left: 0.3em;
+}
+</style>