fix absolute url for Share component

Author: nemanjam

docs/working-notes/todo3.md

@@ -417,5 +417,7 @@ fix share, just small gray icons
 use vertical margins and margin collapsing for all vertical spacings, no paddings, when in same parent
 remove tag-lg, fix button size on mobile
 alert component style
+improve lighthouse, accessibility, aria attrs
+2 prerendered paginations, 3 and 5 items
 ```
 

src/constants/routes.ts

@@ -9,6 +9,7 @@ export const ROUTES = {
   EXPLORE: '/blog/explore/',
   EXPLORE_TAGS: '/blog/explore/tags/',
   EXPLORE_CATEGORIES: '/blog/explore/categories/',
+  DESIGN: '/design/',
   /** maybe in future */
   DRAFTS: '/drafts/',
   _404: '/404/',

src/pages/blog/[slug].astro

@@ -14,11 +14,14 @@ import TagList from '@/components/TagList.astro';
 import { draftText } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
+import { CONFIG } from '@/config';
 import { getOpenGraphImagePath } from '@/libs/api/open-graph/image-path';
 
 import type { Metadata } from '@/types/common';
 import type { Post } from '@/types/post';
 
+const { SITE_URL } = CONFIG;
+
 export async function getStaticPaths() {
   const posts: Post[] = await getAllPostsWithReadingTime();
 
@@ -63,6 +66,12 @@ const postMetaProps = {
   updatedDate,
 };
 
+const shareProps = {
+  title,
+  description,
+  url: `${SITE_URL}${ROUTES.BLOG}${slug}`,
+};
+
 // handle all metadata here
 const image = getOpenGraphImagePath(pathname);
 
@@ -111,7 +120,7 @@ const metadata: Metadata = { title, description, image };
   <Fragment slot="after-content">
     <div class="flex justify-between items-start gap-6 flex-col md:flex-row b-h2-mb">
       <TagList tags={tags} size="md" />
-      <Share {title} {description} url={`${ROUTES.BLOG}${slug}`} />
+      <Share {...shareProps} />
     </div>
 
     <Giscus class="b-h2-mt" />

src/pages/design/embeds.mdx

@@ -7,6 +7,10 @@ import { Tweet, Vimeo, LinkPreview } from 'astro-embed';
 import YouTube from '../../components/YouTube.astro';
 import Share from '../../components/Share.astro';
 
+import { ROUTES } from '../../constants/routes'; 
+import { CONFIG } from '../../config';
+
+
 
 {/* for Twitter iframe */}
 <script async src="https://platform.twitter.com/widgets.js" />
@@ -17,8 +21,13 @@ back to [Index](/design)
 
 ### Social share
 
-<Share />
+export const shareProps = {
+  title: 'Embed page',
+  description: 'Embed page description',
+  url: `${CONFIG.SITE_URL}${ROUTES.DESIGN}embeds`,
+};
 
+<Share {...shareProps} />
 ---
 
 ### astro-embed

src/pages/projects/[slug].astro

@@ -3,10 +3,13 @@ import { getAllProjects } from '@/modules/project';
 import Project from '@/layouts/Project.astro';
 import Share from '@/components/Share.astro';
 import { ROUTES } from '@/constants/routes';
+import { CONFIG } from '@/config';
 import { getOpenGraphImagePath } from '@/libs/api/open-graph/image-path';
 
 import type { Metadata } from '@/types/common';
 
+const { SITE_URL } = CONFIG;
+
 export async function getStaticPaths() {
   const sortedProjects = await getAllProjects();
 
@@ -27,10 +30,16 @@ const { title, description } = data;
 
 const metadata: Metadata = { title, description, image };
 
+const shareProps = {
+  title,
+  description,
+  url: `${SITE_URL}${ROUTES.PROJECTS}${slug}`,
+};
+
 const { Content } = await render();
 ---
 
 <Project {metadata}>
   <Content />
-  <Share {title} {description} url={`${ROUTES.PROJECTS}${slug}`} />
+  <Share {...shareProps} />
 </Project>