fix: broken editPost link and update editPost logic (#487)

* fix: broken editPost link and update editPost logic

Fixed broken editPost link. Removed the ability to update
the editPost link inside each blog post for consistency.
The editPost button per blog post can still be hidden.

* docs: update docs for editPost

src/components/EditPost.astro

@@ -4,21 +4,16 @@ import IconEdit from "@/assets/icons/IconEdit.svg";
 import { SITE } from "@/config";
 
 export interface Props {
-  editPost?: CollectionEntry<"blog">["data"]["editPost"];
+  hideEditPost?: CollectionEntry<"blog">["data"]["hideEditPost"];
-  postId?: CollectionEntry<"blog">["id"];
   class?: string;
+  post: CollectionEntry<"blog">;
 }
 
-const { editPost, postId, class: className = "" } = Astro.props;
+const { hideEditPost, post, class: className = "" } = Astro.props;
 
-let editPostUrl = editPost?.url ?? SITE?.editPost?.url ?? "";
+const href = `${SITE.editPost.url}${post.filePath}`;
-const showEditPost = !editPost?.disabled && editPostUrl.length > 0;
+const showEditPost =
-const appendFilePath =
+  SITE.editPost.enabled && !hideEditPost && href.trim() !== "";
-  editPost?.appendFilePath ?? SITE?.editPost?.appendFilePath ?? false;
-if (appendFilePath && postId) {
-  editPostUrl += `/${postId}`;
-}
-const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
 ---
 
 {
@@ -29,12 +24,14 @@ const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
       </span>
       <a
         class="space-x-1.5 hover:opacity-75"
-        href={editPostUrl}
+        href={href}
         rel="noopener noreferrer"
         target="_blank"
       >
         <IconEdit class="inline-block size-6" />
-        <span class="italic max-sm:text-sm sm:inline">{editPostText}</span>
+        <span class="italic max-sm:text-sm sm:inline">
+          {SITE.editPost.text}
+        </span>
       </a>
     </div>
   )

src/config.ts

@@ -12,9 +12,9 @@ export const SITE = {
   showArchives: true,
   showBackButton: true, // show back button in post detail
   editPost: {
-    url: "https://github.com/satnaing/astro-paper/edit/main/src/data/blog",
+    enabled: true,
     text: "Suggest Changes",
-    appendFilePath: true,
+    url: "https://github.com/satnaing/astro-paper/edit/main/",
   },
   dynamicOgImage: true,
 } as const;

src/content.config.ts

@@ -18,14 +18,7 @@ const blog = defineCollection({
       ogImage: image().or(z.string()).optional(),
       description: z.string(),
       canonicalURL: z.string().optional(),
-      editPost: z
+      hideEditPost: z.boolean().optional(),
-        .object({
-          disabled: z.boolean().optional(),
-          url: z.string().optional(),
-          text: z.string().optional(),
-          appendFilePath: z.boolean().optional(),
-        })
-        .optional(),
     }),
 });
 

src/data/blog/adding-new-post.md

@@ -1,7 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-23T15:22:00Z
-modDatetime: 2025-03-17T17:41:19.776Z
+modDatetime: 2025-03-20T03:22:19.075Z
 title: Adding new posts in AstroPaper theme
 slug: adding-new-posts-in-astropaper-theme
 featured: true
@@ -71,6 +71,7 @@ Here is the list of frontmatter property for each post.
 | **_tags_**         | Related keywords for this post. Written in array yaml format.                                                                        | default = others                               |
 | **_ogImage_**      | OG image of the post. Useful for social media sharing and SEO. This can be a remote URL or an image path relative to current folder. | default = `SITE.ogImage` or generated OG image |
 | **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source.                                                        | default = `Astro.site` + `Astro.url.pathname`  |
+| **_hideEditPost_** | Hide editPost button under blog title. This applies only to the current blog post.                                                   | default = false                                |
 
 > Tip! You can get ISO 8601 datetime by running `new Date().toISOString()` in the console. Make sure you remove quotes though.
 

src/data/blog/how-to-configure-astropaper-theme.md

@@ -1,7 +1,7 @@
 ---
 author: Sat Naing
 pubDatetime: 2022-09-23T04:58:53Z
-modDatetime: 2025-03-12T13:39:39.057Z
+modDatetime: 2025-03-20T03:15:57.792Z
 title: How to configure AstroPaper theme
 slug: how-to-configure-astropaper-theme
 featured: true
@@ -38,9 +38,9 @@ export const SITE = {
   showArchives: true,
   showBackButton: true, // show back button in post detail
   editPost: {
-    url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
+    enabled: true,
     text: "Suggest Changes",
-    appendFilePath: true,
+    url: "https://github.com/satnaing/astro-paper/edit/main/",
   },
   dynamicOgImage: true, // enable automatic dynamic og-image generation
 } as const;
@@ -62,7 +62,7 @@ Here are SITE configuration options
 | `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.                                                                                                                                                                               |
 | `showArchives`        | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default.                                                                                                                                                                                                                                            |
 | `showBackButton`      | Determines whether to display the `Go back` button in each blog post.                                                                                                                                                                                                                                                                                                                                                             |
-| `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.                                                                                |
+| `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 setting `SITE.editPost.enabled` to `false`.                                                                                                                                                                                                                                          |
 | `dynamicOgImage`      | This option controls whether to [generate dynamic og-image](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/) if no `ogImage` is specified in the blog post frontmatter. If you have many blog posts, you might want to disable this feature. See the [trade-off](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off) for more details. |
 
 ## Configuring locale

src/layouts/PostDetails.astro

@@ -30,7 +30,7 @@ const {
   pubDatetime,
   modDatetime,
   tags,
-  editPost,
+  hideEditPost,
 } = post.data;
 
 const { Content } = await render(post);
@@ -103,7 +103,7 @@ const nextPost =
         size="lg"
         class="my-2"
       />
-      <EditPost class="max-sm:hidden" editPost={editPost} postId={post.id} />
+      <EditPost class="max-sm:hidden" {hideEditPost} {post} />
     </div>
     <article id="article" class="mx-auto prose mt-8 max-w-3xl">
       <Content />
@@ -111,7 +111,7 @@ const nextPost =
 
     <hr class="my-8 border-dashed" />
 
-    <EditPost class="sm:hidden" editPost={editPost} postId={post.id} />
+    <EditPost class="sm:hidden" {hideEditPost} {post} />
 
     <ul class="mt-4 mb-8 sm:my-8">
       {tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} />)}