feat(contented): add filePath and Edit on GitHub (#525)

#### What this PR does / why we need it: As per title.
fuxingloh · Jul 21, 2023 · bbdfb4d · bbdfb4d
1 parent ba041ad
commit bbdfb4d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/packages/contented-example/contented.config.js b/packages/contented-example/contented.config.js
@@ -25,6 +25,12 @@ const config = {
           tags: {
             type: 'string[]',
           },
+          editOnGitHubLink: {
+            type: 'string',
+            resolve: (_, { file }) => {
+              return `https://github.com/levaintech/contented/edit/main/packages/contented-example/${file.data.contented.filePath}`;
+            },
+          },
         },
         transform: (file) => {
           file.path = file.path.replaceAll(/^\/docs\/?/g, '/');

diff --git a/packages/contented-pipeline-md/src/MarkdownPipeline.ts b/packages/contented-pipeline-md/src/MarkdownPipeline.ts
@@ -26,7 +26,7 @@ export class MarkdownPipeline extends ContentedPipeline {
       return [];
     }
 
-    vFile.data = { contented: this.newUnifiedContented() };
+    vFile.data = { contented: this.newUnifiedContented(file) };
     const output = await this.processor.process(vFile);
     const contented = output.data.contented as UnifiedContented;
 
@@ -44,13 +44,14 @@ export class MarkdownPipeline extends ContentedPipeline {
     return read(join(rootPath, file));
   }
 
-  protected newUnifiedContented(): UnifiedContented {
+  protected newUnifiedContented(filePath: string): UnifiedContented {
     return {
       contentedPipeline: this,
       pipeline: this.pipeline,
       headings: [],
       fields: {},
       errors: [],
+      filePath,
     };
   }
 

diff --git a/packages/contented-pipeline-md/src/plugins/Plugin.ts b/packages/contented-pipeline-md/src/plugins/Plugin.ts
@@ -12,4 +12,5 @@ export interface UnifiedContented {
     type: string;
     reason: string;
   }[];
+  filePath: string;
 }
diff --git a/packages/contented-preview/src/pages/[[...slug]].page.jsx b/packages/contented-preview/src/pages/[[...slug]].page.jsx
@@ -92,7 +92,7 @@ export default function SlugPage({ content, sections }) {
 
         <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
           <nav aria-labelledby="on-this-page-title" className="w-56">
-            <ContentHeadings headings={content.headings} tags={content.fields.tags} />
+            <ContentHeadings headings={content.headings} fields={content.fields} />
           </nav>
         </div>
       </div>

diff --git a/packages/contented-preview/src/pages/_components/ContentHeadings.jsx b/packages/contented-preview/src/pages/_components/ContentHeadings.jsx
@@ -4,14 +4,32 @@ import Link from 'next/link';
 export default function ContentHeadings(props) {
   return (
     <>
-      {props.tags?.length > 0 && (
+      {props.fields.editOnGitHubLink && (
+        <div className="mb-6 flex">
+          <a
+            href={props.fields.editOnGitHubLink}
+            target="_blank"
+            className={clsx(
+              'flex items-center rounded px-4 py-2.5 text-sm font-medium',
+              'bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-800',
+              'dark:bg-slate-800 dark:text-slate-400 hover:dark:bg-slate-700 hover:dark:text-slate-200',
+            )}
+          >
+            <span>Edit on GitHub</span>
+            <svg viewBox="0 0 24 24" className="-mr-1 ml-2 h-5 w-5">
+              <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+            </svg>
+          </a>
+        </div>
+      )}
+      {props.fields.tags?.length > 0 && (
         <>
           <h2 id="tags-title" className="font-display text-sm font-medium text-slate-900 dark:text-white">
             Tags
           </h2>
           <div className="mb-6 mt-4">
             <div className="-mx-1.5 -my-1 flex flex-wrap">
-              {props.tags.map((tag) => (
+              {props.fields.tags.map((tag) => (
                 <div key={tag} className="px-1.5 py-1">
                   <span
                     className={clsx(