Add edit-on-github to blog posts too

Author: pimterry

src/app/(documentation)/docs/[...slug]/page.tsx

@@ -1,9 +1,7 @@
 import type { Metadata } from 'next/types';
 
-import { EditOnGithub } from '../docs.styles';
+import { EditOnGithub } from '@/components/elements/edit-on-github';
 
-import { PencilSimple } from '@/components/elements/icon';
-import { Link } from '@/components/elements/link';
 import { DocumentationLayout } from '@/components/layout/documentation';
 import { ROOT_DOCS_DIRECTORY, getAllDocsMeta, getDocBySlug } from '@/lib/mdx/docs';
 import { findFile } from '@/lib/mdx/utils/find-file';
@@ -52,12 +50,7 @@ export default async function DocsPage({ params }: DocPageProps) {
   return (
     <DocumentationLayout title={title} links={links}>
       {Content}
-      <EditOnGithub>
-        <PencilSimple /> Edit this page
-        <Link href={editUrl} target="_blank">
-          on GitHub
-        </Link>
-      </EditOnGithub>
+      <EditOnGithub url={editUrl} />
     </DocumentationLayout>
   );
 }

src/app/blog/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { optimizeExcerptToMetaDescription } from '@/lib/utils';
 import { buildMetadata } from '@/lib/utils/build-metadata';
 import { Newsletter } from '@/components/modules/newsletter';
 import { NEWSLETTER_URLS } from '@/components/modules/newsletter/newsletter.values';
+import { EditOnGithub } from '@/components/elements/edit-on-github';
 
 type BlogPostPageProps = {
   params: { slug: string };
@@ -54,10 +55,13 @@ export async function generateStaticParams() {
   }));
 }
 
+const githubBlogUrl = 'https://github.com/httptoolkit/httptoolkit-website/blob/main/src/content/posts';
+
 export default async function BlogPostPage({ params }: BlogPostPageProps) {
   const { slug } = params;
   const post = await getPostBySlug(slug);
   const postNavigation = await getBlogTitlesBySlug(slug);
+  const editUrl = `${githubBlogUrl}/${slug}.mdx`;
 
   return (
     <>
@@ -69,9 +73,10 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
         $bgVariant="darkGrey"
         links={[postNavigation]}
         parsedContent={post.content}
-        additionalContent={
+        additionalContent={<>
+          <EditOnGithub url={editUrl} />
           <SocialPostShare postTitle={post.title} postUrl={post.slug} socialLinks={post.socialLinks} />
-        }
+        </>}
       />
 
       <Container>

src/app/(documentation)/docs/docs.styles.ts renamed to src/components/elements/edit-on-github/index.tsx

@@ -2,7 +2,10 @@
 
 import { styled } from '@/styles';
 
-export const EditOnGithub = styled.em`
+import { PencilSimple } from '@/components/elements/icon';
+import { Link } from '@/components/elements/link';
+
+const EditText = styled.em`
   margin-top: 20px;
   display: flex;
   align-items: center;
@@ -21,3 +24,10 @@ export const EditOnGithub = styled.em`
     }
   }
 `;
+
+export const EditOnGithub = (props: { url: string }) => <EditText>
+    <PencilSimple /> Edit this page
+    <Link href={props.url} target="_blank">
+    on GitHub
+    </Link>
+</EditText>