docs: add Edit on GitHub and Report issue links to page sidebar

- Custom PageSidebar component with GitHub edit and issue creation links
- Links appear below TOC on every page
- Edit link resolves to correct file path on GitHub
- Issue link pre-fills title and documentation label

Author: kylehounslow

docs/starlight-docs/astro.config.mjs

@@ -25,6 +25,7 @@ export default defineConfig({
 			social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/opensearch-project/observability-stack' }],
 			components: {
 				Header: './src/components/CustomHeader.astro',
+				PageSidebar: './src/components/PageSidebar.astro',
 			},
 			sidebar: [
 				{

docs/starlight-docs/src/components/PageSidebar.astro

@@ -0,0 +1,76 @@
+---
+import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
+import TableOfContents from 'virtual:starlight/components/TableOfContents';
+
+const { slug } = Astro.locals.starlightRoute;
+const filePath = slug === '' ? 'src/content/docs/index.mdx' : `src/content/docs/${slug}.mdx`;
+const editUrl = `https://github.com/opensearch-project/observability-stack/edit/main/docs/starlight-docs/${filePath}`;
+const issueUrl = `https://github.com/opensearch-project/observability-stack/issues/new?title=Docs+feedback:+${encodeURIComponent(slug || 'index')}&labels=documentation`;
+---
+
+{
+	Astro.locals.starlightRoute.toc && (
+		<>
+			<div class="lg:sl-hidden">
+				<MobileTableOfContents />
+			</div>
+			<div class="right-sidebar-panel sl-hidden lg:sl-block">
+				<div class="sl-container">
+					<TableOfContents />
+					<div class="sidebar-links">
+						<a href={editUrl} target="_blank" rel="noopener"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: -2px; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>Edit this page on GitHub</a>
+						<a href={issueUrl} target="_blank" rel="noopener">💬 Report a docs issue</a>
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}
+
+<style>
+	@layer starlight.core {
+		.right-sidebar-panel {
+			padding: 1rem var(--sl-sidebar-pad-x);
+		}
+		.sl-container {
+			width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
+		}
+		.right-sidebar-panel :global(h2) {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-h5);
+			font-weight: 600;
+			line-height: var(--sl-line-height-headings);
+			margin-bottom: 0.5rem;
+		}
+		.right-sidebar-panel :global(:where(a)) {
+			display: block;
+			font-size: var(--sl-text-xs);
+			text-decoration: none;
+			color: var(--sl-color-gray-3);
+			overflow-wrap: anywhere;
+		}
+		.right-sidebar-panel :global(:where(a):hover) {
+			color: var(--sl-color-white);
+		}
+		.sidebar-links {
+			margin-top: 1.5rem;
+			padding-top: 1rem;
+			border-top: 1px solid var(--sl-color-gray-6);
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+		@media (min-width: 72rem) {
+			.sl-container {
+				max-width: calc(
+					(
+						(
+								100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
+									var(--sl-sidebar-pad-x)
+							) * 0.25
+					)
+				);
+			}
+		}
+	}
+</style>