Add a link for creating a GitHub issue

src/components/GitHubIssueLink/GitHubIssueLink.module.css

@@ -0,0 +1,14 @@
+.githubLink {
+  font-style: italic;
+  box-sizing: border-box;
+  min-width: 0;
+  transition: color var(--t-interaction);
+  color: var(--ifm-font-color-base);
+  text-align: right;
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: underline;
+  }
+}

src/components/GitHubIssueLink/index.tsx

@@ -0,0 +1,42 @@
+import styles from "./GitHubIssueLink.module.css";
+
+export interface GitHubIssueLinkProps {
+  pathname: string;
+}
+
+const getIssueTitle = function (pagePath: string) {
+  return encodeURIComponent(`[docs] ${pagePath}: <DESCRIBE YOUR ISSUE>`);
+};
+
+const getIssueBody = function (pagePath: string) {
+  return encodeURIComponent(`## Applies To
+
+${pagePath}
+
+## Details
+
+<!-- Describe the documentation improvements you wish to see. -->
+
+## How will we know this is resolved?
+
+<!-- Briefly describe a test we can carry out. Scope this as narrowly as possible. -->
+
+## Related Issues
+
+<!-- Please make an effort to find related issues on GitHub and list them here. This makes a big difference in how we prioritize and schedule work. -->
+`);
+};
+
+export const getReportIssueURL = function (pagePath: string): string {
+  const mdxPath = "`" + pagePath + "`";
+  return `https://github.com/gravitational/teleport/issues/new?template=documentation.md&labels=documentation&title=${getIssueTitle(mdxPath)}&body=${getIssueBody(mdxPath)}`;
+};
+export const GitHubIssueLink = function ({ pathname }: GitHubIssueLinkProps) {
+  return (
+    <p className={styles.githubLink}>
+      <a href={getReportIssueURL(pathname)} target={"_blank"}>
+        {"Report an issue with this page"}
+      </a>
+    </p>
+  );
+};

src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,45 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+import type {Props} from '@theme/DocItem/Content';
+import {GitHubIssueLink} from "/src/components/GitHubIssueLink";
+import { useLocation } from "@docusaurus/router";
+
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle(): string | null {
+  const {metadata, frontMatter, contentTitle} = useDoc();
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+
+export default function DocItemContent({children}: Props): ReactNode {
+  const location = useLocation();
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+          <GitHubIssueLink pathname={location.pathname}/>
+        </header>
+      )}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}