Feat/add telegram share (#73)

Author: halivert

src/components/PostReactions.vue

@@ -6,22 +6,29 @@ import {
   type Reactions,
 } from "@/ts/types/reactions"
 import type { Mentions } from "@/ts/types/mentions"
+import { getLangFromUrl, useTranslations } from "@/i18n/utils"
+import { urlBuilder } from "@/ts/functions"
 
 const props = defineProps<{
   url: URL
   title: string
   author: string
+  instantView?: string
 }>()
 
+const lang = getLangFromUrl(props.url)
+const t = useTranslations(lang)
+
+const apiUrl = "https://webmention.io/api"
+const reactions = ref<Reaction[]>([])
+
 function getMentionsUrl(props: Mentions.Props): string {
   return urlBuilder(`${props.apiUrl}/mentions.html`, {
     target: props.postUrl,
     "wm-property": props?.filter,
   }).toString()
 }
 
-const apiUrl = "https://webmention.io/api"
-const reactions = ref<Reaction[]>([])
 const mentions = reactive({
   count: 0,
   url: getMentionsUrl({
@@ -31,25 +38,14 @@ const mentions = reactive({
   }),
 })
 
-function urlBuilder(
-  baseUrl: string,
-  queryParameters: Record<string, string | undefined | null>,
-): URL {
-  const result = new URL(baseUrl)
-
-  Object.entries(queryParameters).forEach(([key, value]) => {
-    if (value) result.searchParams.append(key, value)
-  })
-
-  return result
-}
-
-const twitterLink = computed(() =>
-  urlBuilder("https://twitter.com/intent/tweet", {
-    original_referer: `${props.url.origin}`,
-    text: props.title,
-    url: props.url.href,
-    via: props.author,
+const telegramLink = computed(() =>
+  urlBuilder("https://t.me/share/url", {
+    url: props.instantView
+      ? urlBuilder("https://t.me/iv", {
+          url: props.url.href,
+          rhash: props.instantView,
+        }).toString()
+      : props.url.href,
   }).toString(),
 )
 
@@ -89,11 +85,11 @@ onMounted(() => fetchReactions())
 
     <div class="flex justify-between items-center">
       <a
-        class="text-sm bg-[#1da1f2] text-white rounded py-1 px-2 flex gap-2"
-        :href="twitterLink"
+        class="text-sm bg-[#54a9eb] text-white rounded py-1 px-2 flex gap-2 capitalize"
+        :href="telegramLink"
       >
-        <span class="icon"><i class="fab fa-twitter"></i></span>
-        <span>Tweet</span>
+        <span class="icon"><i class="fab fa-telegram"></i></span>
+        <span>{{ t("compartir") }}</span>
       </a>
 
       <div class="reactions">

src/content.config.ts

@@ -24,6 +24,12 @@ const authors = defineCollection({
         }),
       )
       .optional(),
+    telegram: z
+      .object({
+        channel: z.string().optional(),
+        instantView: z.string().optional(),
+      })
+      .default(() => ({})),
   }),
 })
 
@@ -47,7 +53,7 @@ const posts = defineCollection({
       title: z.string(),
       date: z.coerce.date(),
 
-      categories: z.array(reference("categories")).default([]),
+      categories: z.array(reference("categories")).default(() => []),
       hasInstantView: z.boolean().default(true),
 
       canonicalUrl: z.string().optional(),

src/content/authors/halivert.json

@@ -34,5 +34,9 @@
       "type": "linkedin",
       "icon": "fab fa-linkedin"
     }
-  ]
+  ],
+  "telegram": {
+    "channel": "@halivertsblog",
+    "instantView": "ff503d2109b312"
+  }
 }

src/content/blog/2019-03-01-mathematical-induction.md

@@ -3,6 +3,7 @@ author: halivert
 categories: ["Matemáticas"]
 date: "2019-03-01 11:03"
 hasMath: true
+hasInstantView: false
 tags: ["Inducción"]
 title: "Inducción matemática"
 ---

src/i18n/ui.ts

@@ -83,5 +83,6 @@ export const ui = {
     Sitio: "Site",
     por: "by",
     publicado: "posted",
+    compartir: "share",
   },
 } as const

src/pages/blog/[...slug].astro

@@ -28,6 +28,8 @@ const tags = Object.fromEntries(
 const authorTelegramUrl =
   author?.data.social?.find(({ type }) => type === "telegram")?.url ?? ""
 
+const telegram = author?.data.telegram
+
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
 
@@ -54,7 +56,7 @@ function getTagClass(tag: string): string {
 
     <meta property="author:name" content={author?.data.firstName ?? ""} />
     <meta property="telegram:author" content={authorTelegramUrl} />
-    <meta property="telegram:channel" content="@halivertsblog" />
+    <meta property="telegram:channel" content={telegram.channel} />
 
     <meta property="og:title" content={post.data.title} />
     <meta property="author" content={post.data.author.id} />
@@ -168,6 +170,9 @@ function getTagClass(tag: string): string {
             client:load
             url={Astro.url}
             author={author?.data.username ?? ""}
+            instantView={post.data.hasInstantView
+              ? telegram.instantView
+              : undefined}
             title={post.data.title}
           />