feat: add edit post feature in blog posts (#384)

* feat: add edit post feature

* fix: remove edit button except on post detail pages

* docs: update site config docs for editPost

Resolves #191
---------

Co-authored-by: satnaing <satnaingdev@gmail.com>

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}
         />
+        {size === "lg" && <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/blog/how-to-configure-astropaper-theme.md

@@ -33,13 +33,18 @@ export const SITE = {
   lightAndDarkMode: true,
   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,
+  },
 };
 ```
 
 Here are SITE configuration options
 
 | Options               | Description                                                                                                                                                                                                                                                                                                                                        |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `website`             | Your deployed website url                                                                                                                                                                                                                                                                                                                          |
 | `author`              | Your name                                                                                                                                                                                                                                                                                                                                          |
 | `desc`                | Your site description. Useful for SEO and social media sharing.                                                                                                                                                                                                                                                                                    |
@@ -49,6 +54,7 @@ Here are SITE configuration options
 | `postPerIndex`        | The number of posts to be displayed at the home page under `Recent` section.                                                                                                                                                                                                                                                                       |
 | `postPerPage`         | You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)                                                                                                                                                                                             |
 | `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin.                                                                                                |
+| `editPost`            | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by removing it from the `SITE` config. You can also set `appendFilePath` to `true` to automatically append the file path of the post to the url, directing users to the specific post they wish to edit. |
 
 ## Configuring 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 = {