feat: add edit post feature

src/components/Datetime.tsx

@@ -1,11 +1,17 @@
-import { LOCALE } from "@config";
+import { LOCALE, SITE } from "@config";
+import type { CollectionEntry } from "astro:content";
 
 interface DatetimesProps {
   pubDatetime: string | Date;
   modDatetime: string | Date | undefined | null;
 }
 
-interface Props extends DatetimesProps {
+interface EditPostProps {
+  editPost?: CollectionEntry<"blog">["data"]["editPost"];
+  postId?: CollectionEntry<"blog">["id"];
+}
+
+interface Props extends DatetimesProps, EditPostProps {
   size?: "sm" | "lg";
   className?: string;
 }
@@ -15,6 +21,8 @@ export default function Datetime({
   modDatetime,
   size = "sm",
   className = "",
+  editPost,
+  postId,
 }: Props) {
   return (
     <div
@@ -42,6 +50,7 @@ export default function Datetime({
           pubDatetime={pubDatetime}
           modDatetime={modDatetime}
         />
+        <EditPost editPost={editPost} postId={postId} />
       </span>
     </div>
   );
@@ -72,3 +81,30 @@ const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
     </>
   );
 };
+
+const EditPost = ({ editPost, postId }: EditPostProps) => {
+  let editPostUrl = editPost?.url ?? SITE?.editPost?.url ?? "";
+  const showEditPost = !editPost?.disabled && editPostUrl.length > 0;
+  const appendFilePath =
+    editPost?.appendFilePath ?? SITE?.editPost?.appendFilePath ?? false;
+  if (appendFilePath && postId) {
+    editPostUrl += `/${postId}`;
+  }
+  const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
+
+  return (
+    showEditPost && (
+      <>
+        <span aria-hidden="true"> | </span>
+        <a
+          className="hover:opacity-75"
+          href={editPostUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {editPostText}
+        </a>
+      </>
+    )
+  );
+};

src/config.ts

@@ -11,6 +11,11 @@ export const SITE: Site = {
   postPerIndex: 4,
   postPerPage: 3,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
+  editPost: {
+    url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
+    text: "Suggest Changes",
+    appendFilePath: true,
+  },
 };
 
 export const LOCALE = {

src/content/config.ts

@@ -22,6 +22,14 @@ const blog = defineCollection({
         .optional(),
       description: z.string(),
       canonicalURL: z.string().optional(),
+      editPost: z
+        .object({
+          disabled: z.boolean().optional(),
+          url: z.string().optional(),
+          text: z.string().optional(),
+          appendFilePath: z.boolean().optional(),
+        })
+        .optional(),
     }),
 });
 

src/layouts/PostDetails.astro

@@ -25,6 +25,7 @@ const {
   pubDatetime,
   modDatetime,
   tags,
+  editPost,
 } = post.data;
 
 const { Content } = await post.render();
@@ -82,6 +83,8 @@ const nextPost =
       modDatetime={modDatetime}
       size="lg"
       className="my-2"
+      editPost={editPost}
+      postId={post.id}
     />
     <article id="article" class="prose mx-auto mt-8 max-w-3xl">
       <Content />

src/types.ts

@@ -11,6 +11,11 @@ export type Site = {
   postPerIndex: number;
   postPerPage: number;
   scheduledPostMargin: number;
+  editPost?: {
+    url?: URL["href"];
+    text?: string;
+    appendFilePath?: boolean;
+  };
 };
 
 export type SocialObjects = {