_SocialShare.tsx

quartz/components/_SocialShare.tsx

@@ -1,10 +1,14 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-// If `script` is required but causes type issues, consider fixing the type instead of ignoring.
 // @ts-ignore
 import script from "./scripts/_socialshare.inline"
-import style from "./styles/_socialshare.scss"
+import style from "./styles/_socialshare.scss.scss"
 
 const SocialShare: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
+  // Extract necessary data from fileData or another source
+  const url = fileData?.url || "";
+  const title = fileData?.title || "";
+  const customExcerpt = fileData?.customExcerpt || "";
+
   return (
     <div className="post-share">
       <div className="share-link">
@@ -14,9 +18,9 @@ const SocialShare: QuartzComponent = ({ displayClass, fileData }: QuartzComponen
           onClick={(e) => e.preventDefault()}
           title="Поделиться в Telegram"
           data-sharer="telegram"
-          data-url={`{{url absolute=true}}`}
+          data-url={url}
-          data-title="{{title}}"
+          data-title={title}
-          data-caption="{{custom_excerpt}}"
+          data-caption={customExcerpt}
         >
           <span className="svg-social-icon icon-telegram"></span>
         </a>
@@ -28,22 +32,22 @@ const SocialShare: QuartzComponent = ({ displayClass, fileData }: QuartzComponen
           onClick={(e) => e.preventDefault()}
           title="Поделиться в Twitter"
           data-sharer="twitter"
-          data-url={`{{url absolute=true}}`}
+          data-url={url}
-          data-title="{{title}}"
+          data-title={title}
         >
           <span className="svg-social-icon icon-twitter"></span>
         </a>
       </div>
-      {/* Uncomment and fix other sections as needed */}
+      {/* Uncomment and complete other sections as necessary */}
       <div className="share-link">
         <a
           className="share-icon share-pocket"
           href="#"
           onClick={(e) => e.preventDefault()}
           title="Поделиться в Pocket"
-          data-title="{{title}}"
           data-sharer="pocket"
-          data-url={`{{url absolute=true}}`}
+          data-url={url}
+          data-title={title}
         >
           <span className="svg-social-icon icon-pocket"></span>
         </a>
@@ -55,8 +59,8 @@ const SocialShare: QuartzComponent = ({ displayClass, fileData }: QuartzComponen
           onClick={(e) => e.preventDefault()}
           title="Поделиться в Skype"
           data-sharer="skype"
-          data-url={`{{url absolute=true}}`}
+          data-url={url}
-          data-title="{{title}}"
+          data-title={title}
         >
           <span className="svg-social-icon icon-skype"></span>
         </a>