add edit button to pages

components/Edit.tsx

@@ -0,0 +1,28 @@
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+const Edit: FC = () => {
+  const { t } = useTranslation("meta");
+  const { locale, query } = useRouter();
+
+  return (
+    <div className="mb-4 rounded-lg bg-ctp-mantle p-4 text-sm" role="alert">
+      <FontAwesomeIcon icon={faEdit} className="mr-2" />
+      <a
+        href={`https://github.com/crystal-linux/docs/blob/main/${[
+          locale,
+          ...(query.slug as string[]),
+        ].join("/")}.mdx`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t("edit_documentation")}
+      </a>
+    </div>
+  );
+};
+
+export default Edit;

pages/docs/[[...slug]].tsx

@@ -17,6 +17,7 @@ import Link from "next/link";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import TranslationInfo from "../../components/TranslationInfo";
 import trees from "../../lib/trees";
+import Edit from "../../components/Edit";
 
 export const getStaticPaths: GetStaticPaths = async ({ locales }) => {
   const paths: GetStaticPathsResult["paths"] = [];
@@ -139,6 +140,7 @@ const DocPage: NextPageWithLayout<{
             {source!.frontmatter?.title && <h1>{source!.frontmatter.title}</h1>}
             <TranslationInfo />
             <MDXRemote {...source!} />
+            <Edit />
           </>
         )}
       </DocWrapper>

public/locales/en/meta.json

@@ -1,3 +1,4 @@
 {
-  "documentation": "Documentation is community maintained! Translations might contain outdated or incorrect information."
+  "documentation": "Documentation is community maintained! Translations might contain outdated or incorrect information.",
+  "edit_documentation": "Edit this page on github!"
 }