Fix/edit this page

gatsby-node.js

@@ -12,6 +12,16 @@ const { paginate } = require("gatsby-awesome-pagination");
 const { createFilePath } = require("gatsby-source-filesystem");
 const RelatedPostsFactory = require("./src/components/Related-Posts/relatedPostsFactory");
 const config = require("./gatsby-config");
+const { toEditUrl } = require("./src/utils/edit-link.js");
+
+exports.onCreatePage = ({ page }) => {
+  const editUrl = toEditUrl(page.component, __dirname);
+  if (editUrl) {
+    page.context = { ...page.context, editUrl };
+  }
+  return page;
+};
+
 const {
   getExcludedCollections,
   isFullSiteBuild,
@@ -61,7 +71,11 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         `Duplicate page path "${page.path}" from ${previous} and ${page.component}. Give one of them a unique title or permalink.`,
       );
     }
-    return actions.createPage(page);
+
+    const editUrl = toEditUrl(page.component, __dirname);
+    return actions.createPage(
+      editUrl ? { ...page, context: { ...page.context, editUrl } } : page,
+    );
   };
 
   const envCreatePage = (props) => {

package.json

@@ -28,7 +28,7 @@
     "lint": "eslint --fix .",
     "checklint": "eslint .",
     "check:contributing-versions": "node .github/scripts/check-contributing-versions.cjs",
-    "test:unit": "node --test src/utils/build-collections.test.js src/utils/page-path-guard.test.js src/utils/resources-url.test.js",
+    "test:unit": "node --test src/utils/build-collections.test.js src/utils/page-path-guard.test.js src/utils/edit-link.test.js src/utils/resources-url.test.js",
     "pretest": "eslint --ignore-path .gitignore .",
     "deploy": "gatsby build && gh-pages -d public -b master",
     "noIndex": "gatsby build && echo 'User-agent: *\nDisallow: /' > public/robots.txt",

page-wrapper.js

@@ -1,8 +1,8 @@
 import React from "react";
 import Layout from "./src/components/layout.js";
 
-export const wrapPageElement = ({ element }) => (
-  <Layout>
+export const wrapPageElement = ({ element, props }) => (
+  <Layout pageContext={props.pageContext}>
     {element}
   </Layout>
-);
+);

src/components/layout.js

@@ -16,7 +16,7 @@ import Footer from "../sections/General/Footer";
 import { GlobalStyle } from "../sections/app.style";
 import CookieConsent from "./CookieConsent";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, pageContext }) => {
 
   return (
     <>
@@ -26,13 +26,14 @@ const Layout = ({ children }) => {
       <CookieConsent />
       {children}
       <ScrollToTopBtn />
-      <Footer location={children.props.location} />
+      <Footer editUrl={pageContext?.editUrl} />
     </>
   );
 };
 
 Layout.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  pageContext: PropTypes.object,
 };
 
 export default Layout;

src/sections/General/Footer/index.js

@@ -7,83 +7,9 @@ import Button from "../../../reusecore/Button";
 import FooterWrapper from "./footer.style";
 import bubblesElement from "./images/bubbles-element.svg";
 
-const Footer = ({ location }) => {
+const Footer = ({ editUrl }) => {
   var currentYear = new Date().getFullYear();
 
-  const getUrl = (pathname) => {
-    // remove ".html" that results in live production build
-    if (pathname.endsWith(".html")) {
-      pathname = pathname.replace(".html", "");
-    }
-
-    const indexUrl = [
-      "/",
-      "/blog",
-      "/careers",
-      "/meshery",
-      "/kanvas",
-      "/community",
-      "/handbook",
-      "projects",
-      "/resources",
-      "/learn",
-    ];
-
-    const test = {
-      mdx: function (path) {
-        let returnPath = "";
-        return (
-          [
-            "/blog/",
-            "/careers/",
-            "/community/events",
-            "/integrations/",
-            "/landscape/",
-            "/members/",
-            "/news/",
-            "/programs",
-            "/projects/",
-            "/resources/",
-            "/workshops/",
-          ].some((check) => {
-            returnPath = check;
-            return path.startsWith(check);
-          }) && `src/collections${returnPath}`
-        );
-      },
-
-      learningPath: function (path) {
-        return (
-          path.startsWith("/learn/learning-paths/") &&
-          `content-learn${pathname.replace("learn/learning-paths/", "")}`
-        );
-      },
-
-      communityMember: function (path) {
-        if (path.startsWith("/community/members/")) {
-          const memberId = path.replace("/community/members/", "");
-          return `src/collections/members/${memberId}/index.mdx`;
-        }
-        return null;
-      },
-    };
-
-    if (pathname.startsWith("/community/handbook/")) {
-      const page = pathname.replace("/community/handbook/", "");
-      return `https://github.com/layer5io/layer5/blob/master/src/pages/community/handbook/${page}.js`;
-    }
-
-    return test.mdx(pathname)
-      ? `https://github.com/layer5io/layer5/tree/master/${test.mdx(pathname)}`
-      : test.learningPath(pathname)
-        ? `https://github.com/layer5io/layer5/tree/master/${test.learningPath(pathname)}`
-        : test.communityMember(pathname)
-          ? `https://github.com/layer5io/layer5/blob/master/${test.communityMember(pathname)}`
-          : `https://github.com/layer5io/layer5/blob/master/src/pages${
-              pathname == "/" ? "" : pathname
-            }${indexUrl.some((str) => pathname.endsWith(str)) ? "/index" : ""}.js`;
-  };
-
   return (
     <FooterWrapper>
       <img
@@ -364,15 +290,13 @@ const Footer = ({ location }) => {
             </p>
 
             <ul className="misc-links">
-              <li className="edit-page">
-                <a
-                  href={getUrl(location.pathname)}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Edit This Page
-                </a>
-              </li>
+              {editUrl && (
+                <li className="edit-page">
+                  <a href={editUrl} target="_blank" rel="noreferrer">
+                    Edit This Page
+                  </a>
+                </li>
+              )}
               <li>
                 <a
                   className="status-link"

src/utils/edit-link.js

@@ -0,0 +1,67 @@
+/* eslint-env node */
+
+const fs = require("fs");
+const path = require("path");
+
+const REPO = "layer5io/layer5";
+const IGNORED = new Set([".cache", "public", "node_modules", ".git"]);
+const CONTENT_PARAM = "__contentFilePath=";
+
+const decodePath = (raw) => {
+  try {
+    return decodeURIComponent(raw);
+  } catch {
+    return raw;
+  }
+};
+
+const sourceFromComponent = (component, root) => {
+  if (typeof component !== "string") return "";
+  const q = component.indexOf("?");
+  if (q === -1) return component;
+
+  const query = component.slice(q + 1);
+  const start = query.indexOf(CONTENT_PARAM);
+  if (start === -1) return component.slice(0, q);
+
+  const raw = query.slice(start + CONTENT_PARAM.length);
+  const exportAt = raw.indexOf("&export=");
+  const contentPath = exportAt === -1 ? raw : raw.slice(0, exportAt);
+
+  const decoded = decodePath(contentPath);
+  if (decoded !== contentPath && root) {
+    const resolve = (candidate) =>
+      path.isAbsolute(candidate) ? candidate : path.resolve(root, candidate);
+    if (fs.existsSync(resolve(contentPath))) return contentPath;
+    if (fs.existsSync(resolve(decoded))) return decoded;
+  }
+
+  return decoded || component.slice(0, q);
+};
+
+const toEditUrl = (component, root) => {
+  const src = sourceFromComponent(component || "", root);
+  if (!src) return null;
+
+  const abs = path.isAbsolute(src) ? src : path.resolve(root, src);
+  const hasContentPath =
+    typeof component === "string" && component.includes(CONTENT_PARAM);
+  const templatesRoot = path.resolve(root, "src", "templates");
+  if (
+    !hasContentPath &&
+    (abs === templatesRoot || abs.startsWith(`${templatesRoot}${path.sep}`))
+  ) {
+    return null;
+  }
+
+  const rel = path.relative(root, abs);
+  if (!rel || rel === ".." || rel.startsWith(`..${path.sep}`)) return null;
+  if (path.isAbsolute(rel)) return null;
+  if (rel.split(path.sep).some((seg) => IGNORED.has(seg))) return null;
+  if (!fs.existsSync(abs)) return null;
+
+  const encoded = rel.split(path.sep).map(encodeURIComponent).join("/");
+  return `https://github.com/${REPO}/blob/master/${encoded}`;
+};
+
+module.exports = { sourceFromComponent, toEditUrl };