Merge pull request #159 from life-itself/76-edit-this-page-option

Add 'Edit this page' option for /guide, /claims/... and /concepts/...

site/components/MDX.js

@@ -7,9 +7,9 @@ const components = {
   p: Paragraph
 }
 
-export default function MdxPage({ children }) {
+export default function MdxPage({ children, editUrl }) {
   const { Component, frontmatter } = children
-  
+
   let podcastEmbed
 
   if (frontmatter.podcast && frontmatter.podcast.includes("life-itself")) {
@@ -24,7 +24,7 @@ export default function MdxPage({ children }) {
   return (
     <article className="prose dark:prose-invert mx-auto p-6">
       <header>
-        <div className="mb-6">
+        <div className="my-6">
           {frontmatter.title && <h1 className="mb-0">{frontmatter.title}</h1>}
           {frontmatter.authors && (
             <div className="-mt-6">
@@ -74,7 +74,20 @@ export default function MdxPage({ children }) {
         </div>
       </header>
       <main>
-        <Component components={components} />
+        <div className="my-6">
+          <Component components={components} />
+        </div>
+        {editUrl && (
+          <div className='mt-12 mb-6'>
+            <a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
+              Edit this page
+              <span className="mx-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </span>
+            </a>
+          </div>)}
       </main>
     </article>
   );

site/config/siteConfig.js

@@ -3,6 +3,8 @@ import Logo from "../public/img/life-itself-logo.svg"
 const siteConfig = {
   title: "Making Sense of Crypto and Web3",
   url: "https://web3.lifeitself.us",
+  repoRoot: "https://github.com/life-itself/web3",
+  repoEditPath: "/edit/main/",
   tagline: "",
   description:
   "Introductions to key concepts and ideas in crypto and web3. Plus in-depth evaluation of its potential impact.",

site/pages/[...slug].js

@@ -25,6 +25,11 @@ export default function Page({ body, ...rest }) {
 
   const title = children.frontmatter.title ?? titleFromUrl
   const imageUrl = siteConfig.url + children.frontmatter.image
+
+  // enable editing content only for claims, concepts, and guide for now
+  const editUrl = ['claims', 'concepts', 'guide'].includes(rest._raw.sourceFileDir)
+        ? siteConfig.repoRoot + siteConfig.repoEditPath + rest._raw.sourceFilePath
+        : null
   
   return (
     <>
@@ -45,7 +50,7 @@ export default function Page({ body, ...rest }) {
           ],
         }}
       />
-      <MdxPage children={children} />
+      <MdxPage children={children} editUrl={editUrl} />
     </>
   );
 }