Add a link for creating a GitHub issue

Closes #110

In the previous docs site (github.com/gravitational/docs), a "Create
issue on GitHub button" was a valuable source of feedback. This change
adds a link that opens a new tab with the GitHub Create Issue form,
prepopulated with the URL path of the current docs page.

The best positioning for such a link is not obvious. In the previous
docs site, we placed the button on the right sidebar under the table of
contents for a given docs page. However, on the Docusaurus site, in-page
tables of contents sometimes span the entire viewport height, e.g., in
the main FAQ page with its 20 H2 headers, making a button on the right
sidebar difficult to find.

Further, Docusaurus makes some styling assumptions about the right
sidebar, like the fact that the `TOCItems` component includes a left
border but the column containing it does not, that make it non-trivial
to style a new component there. We would need to rework the styling of
the entire right sidebar component layout.

The left sidebar is also not an ideal place to add this link, since it
handles navigation for the entire docs site, and it would be unexpected
to find a component there that is scoped to a single page.

The solution this change proposes is to add the GitHub issue link below
the main title of each page, swizzling the `@theme/DocItem/Content`
component. This approach requires minimal reworking of the Docusaurus
component layout, but still offers users a highly visible option to
report an issue that, if a user is not interested in reporting an issue,
remains relatively unobtrusive.

This change adds a self-contained `GitHubIssueLink` component, and we
can move this to a more suitable location (or turn it from a link into a
button) when time opens up.

Author: ptgott

src/components/GitHubIssueLink/GitHubIssueLink.module.css

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

src/components/GitHubIssueLink/index.tsx

@@ -0,0 +1,46 @@
+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?labels=documentation&title=${getIssueTitle(mdxPath)}&body=${getIssueBody(mdxPath)}`;
+};
+export const GitHubIssueLink = function ({ pathname }: GitHubIssueLinkProps) {
+  return (
+    <p>
+      <a
+        className={styles.githubLink}
+        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>
+  );
+}