feat: support custom canonical URLs (#83)

Adding an optional attribute in the posts' frontmatter that allows the user to set a custom canonical URL

src/content/_schemas.ts

@@ -11,6 +11,7 @@ export const blogSchema = z
     tags: z.array(z.string()).default(["others"]),
     ogImage: z.string().optional(),
     description: z.string(),
+    canonicalURL: z.string().optional(),
   })
   .strict();
 

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

@@ -34,7 +34,7 @@ Here is the list of frontmatter property for each post.
 | **_draft_**        | Mark this post 'unpublished'.                                                   | default = false                               |
 | **_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.                  | default = SITE.ogImage or generated SVG image |
-| **_canonicalUrl_** | Canonical URL (absolute), in case the article already exists on other source.   | default = `Astro.site` + `Astro.url.pathname` |
+| **_canonicalURL_** | Canonical URL (absolute), in case the article already exists on other source.   | default = `Astro.site` + `Astro.url.pathname` |
 
 Only `title`, `description` and `pubDatetime` fields in frontmatter must be specified.
 
@@ -74,7 +74,7 @@ tags:
   - tags
 ogImage: ""
 description: This is the example description of the example post.
-canonicalUrl: https://example.org/my-article-was-already-posted-here
+canonicalURL: https://example.org/my-article-was-already-posted-here
 ---
 ```
 

src/layouts/Layout.astro

@@ -9,6 +9,7 @@ export interface Props {
   author?: string;
   description?: string;
   ogImage?: string;
+  canonicalURL?: string;
 }
 
 const {
@@ -16,10 +17,9 @@ const {
   author = SITE.author,
   description = SITE.desc,
   ogImage = SITE.ogImage,
+  canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
 } = Astro.props;
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-
 const socialImageURL = new URL(
   ogImage ? ogImage : SITE.ogImage,
   Astro.url.origin

src/layouts/PostDetails.astro

@@ -13,7 +13,7 @@ export interface Props {
 
 const { post } = Astro.props;
 
-const { title, author, description, ogImage, pubDatetime, tags } = post.data;
+const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } = post.data;
 
 const { Content } = await post.render();
 
@@ -21,7 +21,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
   .href;
 ---
 
-<Layout title={title} author={author} description={description} ogImage={ogUrl}>
+<Layout title={title} author={author} description={description} ogImage={ogUrl} canonicalURL={canonicalURL}>
   <Header />
   <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
     <button