_SocialShare.tsx

quartz/components/_SocialShare.tsx

@@ -1,4 +1,5 @@
 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.scss"
@@ -7,71 +8,64 @@ const SocialShare: QuartzComponent = ({ displayClass, fileData }: QuartzComponen
   return (
     <div className="post-share">
       <div className="share-link">
-        <a className="share-icon share-telegram"
+        <a
-           href="javascript:void(0);"
+          className="share-icon share-telegram"
-           title="Поделиться в Telegram"
+          href="#"
-           data-sharer="telegram"
+          onClick={(e) => e.preventDefault()}
-           data-url="{{url absolute=" true"}}"
+          title="Поделиться в Telegram"
-           data-title="{{title}}"
+          data-sharer="telegram"
-           data-caption="{{custom_excerpt}}">
+          data-url={`{{url absolute=true}}`}
+          data-title="{{title}}"
+          data-caption="{{custom_excerpt}}"
+        >
           <span className="svg-social-icon icon-telegram"></span>
         </a>
       </div>
       <div className="share-link">
-        <a className="share-icon share-twitter"
+        <a
-           href="javascript:void(0);"
+          className="share-icon share-twitter"
-           title="Поделиться в Twitter"
+          href="#"
-           data-sharer="twitter"
+          onClick={(e) => e.preventDefault()}
-           data-url="{{url absolute=" true"}}"
+          title="Поделиться в Twitter"
-           data-title="{{title}}">
+          data-sharer="twitter"
+          data-url={`{{url absolute=true}}`}
+          data-title="{{title}}"
+        >
           <span className="svg-social-icon icon-twitter"></span>
         </a>
       </div>
-      <!--    <div class="share-link">-->
+      {/* Uncomment and fix other sections as needed */}
-      <!--        <a class="share-icon share-whatsapp"-->
-      <!--           href="javascript:void(0);"-->
-      <!--           title="Поделиться в WhatsApp"-->
-      <!--           data-sharer="whatsapp"-->
-      <!--           data-url="{{url absolute="true"}}"-->
-      <!--           data-title="{{title}}"-->
-      <!--           data-web="">-->
-      <!--            <span class="svg-social-icon icon-whatsapp"></span>-->
-      <!--        </a>-->
-      <!--    </div>-->
-      <!--    <div class="share-link">-->
-      <!--        <a class="share-icon share-vk"-->
-      <!--           href="javascript:void(0);"-->
-      <!--           title="Поделиться в VK"-->
-      <!--           data-sharer="vk"-->
-      <!--           data-url="{{url absolute="true"}}"-->
-      <!--           data-title="{{title}}"-->
-      <!--           data-caption="{{custom_excerpt}}">-->
-      <!--            <span class="svg-social-icon icon-vk"></span>-->
-      <!--        </a>-->
-      <!--    </div>-->
       <div className="share-link">
-        <a className="share-icon share-pocket"
+        <a
-           href="javascript:void(0);"
+          className="share-icon share-pocket"
-           title="Поделиться в Pocket"
+          href="#"
-           data-title="{{title}}"
+          onClick={(e) => e.preventDefault()}
-           data-sharer="pocket"
+          title="Поделиться в Pocket"
-           data-url="{{url absolute=" true"}}">
+          data-title="{{title}}"
+          data-sharer="pocket"
+          data-url={`{{url absolute=true}}`}
+        >
           <span className="svg-social-icon icon-pocket"></span>
         </a>
       </div>
       <div className="share-link">
-        <a className="share-icon share-skype"
+        <a
-           href="javascript:void(0);"
+          className="share-icon share-skype"
-           title="Поделиться в Skype"
+          href="#"
-           data-sharer="skype"
+          onClick={(e) => e.preventDefault()}
-           data-url="{{url absolute=" true"}}"
+          title="Поделиться в Skype"
-           data-title="{{title}}">
+          data-sharer="skype"
+          data-url={`{{url absolute=true}}`}
+          data-title="{{title}}"
+        >
           <span className="svg-social-icon icon-skype"></span>
         </a>
       </div>
     </div>
   )
 }
-RandomPageButton.css = style
+
-RandomPageButton.afterDOMLoaded = script
+SocialShare.css = style;
-export default (() => RandomPageButton) satisfies QuartzComponentConstructor
+SocialShare.afterDOMLoaded = script;
+
+export default (() => SocialShare) satisfies QuartzComponentConstructor;