From 1643dde1f4ca896e39bcecac02144bfb7f873947 Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Tue, 3 Dec 2024 14:26:18 -0800
Subject: [PATCH] Add Sourcegraph website icon on docs

---
 src/components/Toc.tsx         | 36 ++++++++++++++++++++++------------
 src/components/icons/Globe.tsx | 20 +++++++++++++++++++
 2 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 src/components/icons/Globe.tsx

diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index 07ea2879b..dd8fe3cdd 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import {useCallback, useEffect, useState} from 'react';
-import Link from 'next/link';
 import clsx from 'clsx';
-import {useParams} from 'next/navigation'
-import {allPosts} from 'contentlayer/generated'
-import { PencilIcon } from './icons/PencilIcon';
+import { allPosts } from 'contentlayer/generated';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
 import { BugIcon } from './icons/BugIcon';
+import { Globe } from './icons/Globe';
+import { PencilIcon } from './icons/PencilIcon';
 
 interface Heading {
 	level: number;
@@ -23,11 +24,11 @@ type ParamsType = {
 	slug: string[];
 }
 
-export function TableOfContents({headings}: Props) {
+export function TableOfContents({ headings }: Props) {
 	let [currentSection, setCurrentSection] = useState(headings[0]?.id);
 	const [path, setPath] = useState('')
 	const params: ParamsType = useParams()
-	
+
 	let getHeadings = useCallback((headings: Heading[]) => {
 		return headings
 			.map(heading => {
@@ -42,15 +43,15 @@ export function TableOfContents({headings}: Props) {
 						window.scrollY +
 						el.getBoundingClientRect().top -
 						scrollMt;
-					return {id: heading.id, top};
+					return { id: heading.id, top };
 				}
 			})
-			.filter((x): x is {id: string; top: number} => x !== null);
+			.filter((x): x is { id: string; top: number } => x !== null);
 	}, []);
-	
+
 	useEffect(() => {
 		const path = params.slug.join('/');
-		
+
 		if (allPosts) {
 			const post = allPosts.find(post => post._raw.flattenedPath === path);
 			if (post) {
@@ -81,7 +82,7 @@ export function TableOfContents({headings}: Props) {
 			setCurrentSection(current);
 		}
 
-		window.addEventListener('scroll', onScroll, {passive: true});
+		window.addEventListener('scroll', onScroll, { passive: true });
 		onScroll();
 
 		return () => {
@@ -156,6 +157,17 @@ export function TableOfContents({headings}: Props) {
 								Edit this page on GitHub
 							</a>
 						</div>
+						<div className="flex items-center mt-2 text-sm">
+							<a
+								href={`https://sourcegraph.com/`}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="flex items-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+							>
+								<Globe className="mr-1 h-4 w-4" />
+								Go to Sourcegraph.com
+							</a>
+						</div>
 						<div className="flex items-center mt-2 text-sm">
 							<a
 								href="https://community.sourcegraph.com"
diff --git a/src/components/icons/Globe.tsx b/src/components/icons/Globe.tsx
new file mode 100644
index 000000000..fcb5781f7
--- /dev/null
+++ b/src/components/icons/Globe.tsx
@@ -0,0 +1,20 @@
+export function Globe({ className }: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+		>
+			<circle cx="12" cy="12" r="10" />
+			<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+			<path d="M2 12h20" />
+		</svg>
+	);
+}