This commit is contained in:
parent
b5ec2662fc
commit
3056b74cb9
@ -1,75 +1,78 @@
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
// @ts-ignore
|
||||
import script from "./scripts/_socialshare.inline"
|
||||
import style from "./styles/_socialshare.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">
|
||||
<a
|
||||
className="share-icon share-telegram"
|
||||
href="#"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
<a className="share-icon share-telegram"
|
||||
href="javascript:void(0);"
|
||||
title="Поделиться в Telegram"
|
||||
data-sharer="telegram"
|
||||
data-url={url}
|
||||
data-title={title}
|
||||
data-caption={customExcerpt}
|
||||
>
|
||||
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"
|
||||
href="#"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
<a className="share-icon share-twitter"
|
||||
href="javascript:void(0);"
|
||||
title="Поделиться в Twitter"
|
||||
data-sharer="twitter"
|
||||
data-url={url}
|
||||
data-title={title}
|
||||
>
|
||||
data-url="{{url absolute=" true"}}"
|
||||
data-title="{{title}}">
|
||||
<span className="svg-social-icon icon-twitter"></span>
|
||||
</a>
|
||||
</div>
|
||||
{/* Uncomment and complete other sections as necessary */}
|
||||
<!-- <div class="share-link">-->
|
||||
<!-- <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"
|
||||
href="#"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
<a className="share-icon share-pocket"
|
||||
href="javascript:void(0);"
|
||||
title="Поделиться в Pocket"
|
||||
data-title="{{title}}"
|
||||
data-sharer="pocket"
|
||||
data-url={url}
|
||||
data-title={title}
|
||||
>
|
||||
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"
|
||||
href="#"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
<a className="share-icon share-skype"
|
||||
href="javascript:void(0);"
|
||||
title="Поделиться в Skype"
|
||||
data-sharer="skype"
|
||||
data-url={url}
|
||||
data-title={title}
|
||||
>
|
||||
data-url="{{url absolute=" true"}}"
|
||||
data-title="{{title}}">
|
||||
<span className="svg-social-icon icon-skype"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
SocialShare.css = style;
|
||||
SocialShare.afterDOMLoaded = script;
|
||||
|
||||
export default (() => SocialShare) satisfies QuartzComponentConstructor;
|
||||
|
||||
@ -1,498 +0,0 @@
|
||||
(function() {
|
||||
function requireModule(
|
||||
modules: { [key: string]: [Function, { [key: string]: string }] },
|
||||
cache: { [key: string]: { exports: any } },
|
||||
entry: number[]
|
||||
) {
|
||||
function loadModule(moduleId: string): any {
|
||||
if (!cache[moduleId]) {
|
||||
if (!modules[moduleId]) {
|
||||
const requireFn: (id: string, strict?: boolean) => any =
|
||||
typeof require === 'function' && require;
|
||||
if (requireFn) return requireFn(moduleId, true);
|
||||
throw new Error(`Cannot find module '${moduleId}'`);
|
||||
}
|
||||
const module = (cache[moduleId] = { exports: {} });
|
||||
modules[moduleId][0].call(
|
||||
module.exports,
|
||||
(id: string) => loadModule(modules[moduleId][1][id] || id),
|
||||
module,
|
||||
module.exports,
|
||||
requireModule,
|
||||
modules,
|
||||
cache,
|
||||
entry
|
||||
);
|
||||
}
|
||||
return cache[moduleId].exports;
|
||||
}
|
||||
|
||||
for (const moduleId of entry) {
|
||||
loadModule(moduleId.toString());
|
||||
}
|
||||
}
|
||||
|
||||
requireModule(
|
||||
{
|
||||
'1': [
|
||||
function (require: any, module: any, exports: any) {
|
||||
'use strict';
|
||||
|
||||
interface ShareOptions {
|
||||
shareUrl: string;
|
||||
params?: { [key: string]: string | number | boolean };
|
||||
isLink?: boolean;
|
||||
width?: string;
|
||||
height?: string;
|
||||
}
|
||||
|
||||
class Sharer {
|
||||
elem: HTMLElement;
|
||||
|
||||
constructor(t: HTMLElement) {
|
||||
this.elem = t;
|
||||
}
|
||||
|
||||
static init() {
|
||||
const elements = document.querySelectorAll<HTMLElement>('[data-sharer]');
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener('click', Sharer.add);
|
||||
});
|
||||
}
|
||||
|
||||
static add(event: Event) {
|
||||
const target = (event.currentTarget || event.srcElement) as HTMLElement;
|
||||
const sharer = new Sharer(target);
|
||||
sharer.share();
|
||||
}
|
||||
|
||||
getValue(attr: string): string | null {
|
||||
const value = this.elem.getAttribute(`data-${attr}`);
|
||||
if (value && attr === 'hashtag' && !value.startsWith('#')) {
|
||||
return `#${value}`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
share() {
|
||||
const type = (this.getValue('sharer') || '').toLowerCase();
|
||||
const options: { [key: string]: ShareOptions } = {
|
||||
facebook: {
|
||||
shareUrl: 'https://www.facebook.com/sharer/sharer.php',
|
||||
params: {
|
||||
u: this.getValue('url') || '',
|
||||
hashtag: this.getValue('hashtag') || '',
|
||||
},
|
||||
},
|
||||
linkedin: {
|
||||
shareUrl: "https://www.linkedin.com/shareArticle",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
mini: true
|
||||
}
|
||||
},
|
||||
twitter: {
|
||||
shareUrl: "https://twitter.com/intent/tweet/",
|
||||
params: {
|
||||
text: this.getValue("title"),
|
||||
url: this.getValue("url"),
|
||||
hashtags: this.getValue("hashtags"),
|
||||
via: this.getValue("via")
|
||||
}
|
||||
},
|
||||
email: {
|
||||
shareUrl: "mailto:" + this.getValue("to") || "",
|
||||
params: {
|
||||
subject: this.getValue("subject"),
|
||||
body: this.getValue("title") + "\n" + this.getValue("url")
|
||||
},
|
||||
isLink: true
|
||||
},
|
||||
whatsapp: {
|
||||
shareUrl: this.getValue("web") !== null ? "https://api.whatsapp.com/send" : "whatsapp://send",
|
||||
params: {
|
||||
text: this.getValue("title") + " " + this.getValue("url")
|
||||
},
|
||||
isLink: true
|
||||
},
|
||||
telegram: {
|
||||
shareUrl: this.getValue("web") !== null ? "https://telegram.me/share" : "tg://msg_url",
|
||||
params: {
|
||||
text: this.getValue("title"),
|
||||
url: this.getValue("url"),
|
||||
to: this.getValue("to")
|
||||
},
|
||||
isLink: true
|
||||
},
|
||||
viber: {
|
||||
shareUrl: "viber://forward",
|
||||
params: {
|
||||
text: this.getValue("title") + " " + this.getValue("url")
|
||||
},
|
||||
isLink: true
|
||||
},
|
||||
line: {
|
||||
shareUrl: "http://line.me/R/msg/text/?" + encodeURIComponent(this.getValue("title") + " " + this.getValue("url")),
|
||||
isLink: true
|
||||
},
|
||||
pinterest: {
|
||||
shareUrl: "https://www.pinterest.com/pin/create/button/",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
media: this.getValue("image"),
|
||||
description: this.getValue("description")
|
||||
}
|
||||
},
|
||||
tumblr: {
|
||||
shareUrl: "http://tumblr.com/widgets/share/tool",
|
||||
params: {
|
||||
canonicalUrl: this.getValue("url"),
|
||||
content: this.getValue("url"),
|
||||
posttype: "link",
|
||||
title: this.getValue("title"),
|
||||
caption: this.getValue("caption"),
|
||||
tags: this.getValue("tags")
|
||||
}
|
||||
},
|
||||
hackernews: {
|
||||
shareUrl: "https://news.ycombinator.com/submitlink",
|
||||
params: {
|
||||
u: this.getValue("url"),
|
||||
t: this.getValue("title")
|
||||
}
|
||||
},
|
||||
reddit: {
|
||||
shareUrl: "https://www.reddit.com/submit",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
vk: {
|
||||
shareUrl: "http://vk.com/share.php",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
description: this.getValue("caption"),
|
||||
image: this.getValue("image")
|
||||
}
|
||||
},
|
||||
xing: {
|
||||
shareUrl: "https://www.xing.com/app/user",
|
||||
params: {
|
||||
op: "share",
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
buffer: {
|
||||
shareUrl: "https://buffer.com/add",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
via: this.getValue("via"),
|
||||
picture: this.getValue("picture")
|
||||
}
|
||||
},
|
||||
instapaper: {
|
||||
shareUrl: "http://www.instapaper.com/edit",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
description: this.getValue("description")
|
||||
}
|
||||
},
|
||||
pocket: {
|
||||
shareUrl: "https://getpocket.com/save",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
digg: {
|
||||
shareUrl: "http://www.digg.com/submit",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
stumbleupon: {
|
||||
shareUrl: "http://www.stumbleupon.com/submit",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
mashable: {
|
||||
shareUrl: "https://mashable.com/submit",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
mix: {
|
||||
shareUrl: "https://mix.com/add",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
flipboard: {
|
||||
shareUrl: "https://share.flipboard.com/bookmarklet/popout",
|
||||
params: {
|
||||
v: 2,
|
||||
title: this.getValue("title"),
|
||||
url: this.getValue("url"),
|
||||
t: Date.now()
|
||||
}
|
||||
},
|
||||
weibo: {
|
||||
shareUrl: "http://service.weibo.com/share/share.php",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
pic: this.getValue("image"),
|
||||
appkey: this.getValue("appkey"),
|
||||
ralateUid: this.getValue("ralateuid"),
|
||||
language: "zh_cn"
|
||||
}
|
||||
},
|
||||
renren: {
|
||||
shareUrl: "http://share.renren.com/share/buttonshare",
|
||||
params: {
|
||||
link: this.getValue("url")
|
||||
}
|
||||
},
|
||||
myspace: {
|
||||
shareUrl: "https://myspace.com/post",
|
||||
params: {
|
||||
u: this.getValue("url"),
|
||||
t: this.getValue("title"),
|
||||
c: this.getValue("description")
|
||||
}
|
||||
},
|
||||
blogger: {
|
||||
shareUrl: "https://www.blogger.com/blog-this.g",
|
||||
params: {
|
||||
u: this.getValue("url"),
|
||||
n: this.getValue("title"),
|
||||
t: this.getValue("description")
|
||||
}
|
||||
},
|
||||
baidu: {
|
||||
shareUrl: "http://cang.baidu.com/do/add",
|
||||
params: {
|
||||
it: this.getValue("title"),
|
||||
iu: this.getValue("url")
|
||||
}
|
||||
},
|
||||
douban: {
|
||||
shareUrl: "https://www.douban.com/share/service",
|
||||
params: {
|
||||
name: this.getValue("title"),
|
||||
href: this.getValue("url"),
|
||||
image: this.getValue("image")
|
||||
}
|
||||
},
|
||||
okru: {
|
||||
shareUrl: "https://connect.ok.ru/dk",
|
||||
params: {
|
||||
"st.cmd": "WidgetSharePreview",
|
||||
"st.shareUrl": this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
mailru: {
|
||||
shareUrl: "http://connect.mail.ru/share",
|
||||
params: {
|
||||
share_url: this.getValue("url"),
|
||||
linkname: this.getValue("title"),
|
||||
linknote: this.getValue("description"),
|
||||
type: "page"
|
||||
}
|
||||
},
|
||||
evernote: {
|
||||
shareUrl: "http://www.evernote.com/clip.action",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
skype: {
|
||||
shareUrl: "https://web.skype.com/share",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
quora: {
|
||||
shareUrl: "https://www.quora.com/share",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
delicious: {
|
||||
shareUrl: "https://del.icio.us/post",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
sms: {
|
||||
shareUrl: "sms://",
|
||||
params: {
|
||||
body: this.getValue("body")
|
||||
}
|
||||
},
|
||||
trello: {
|
||||
shareUrl: "https://trello.com/add-card",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
name: this.getValue("title"),
|
||||
desc: this.getValue("description"),
|
||||
mode: "popup"
|
||||
}
|
||||
},
|
||||
messenger: {
|
||||
shareUrl: "fb-messenger://share",
|
||||
params: {
|
||||
link: this.getValue("url")
|
||||
}
|
||||
},
|
||||
odnoklassniki: {
|
||||
shareUrl: "https://connect.ok.ru/dk",
|
||||
params: {
|
||||
st: {
|
||||
cmd: "WidgetSharePreview",
|
||||
deprecated: 1,
|
||||
shareUrl: this.getValue("url")
|
||||
}
|
||||
}
|
||||
},
|
||||
meneame: {
|
||||
shareUrl: "https://www.meneame.net/submit",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
diaspora: {
|
||||
shareUrl: "https://share.diasporafoundation.org",
|
||||
params: {
|
||||
title: this.getValue("title"),
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
googlebookmarks: {
|
||||
shareUrl: "https://www.google.com/bookmarks/mark",
|
||||
params: {
|
||||
op: "edit",
|
||||
bkmk: this.getValue("url"),
|
||||
title: this.getValue("title")
|
||||
}
|
||||
},
|
||||
qzone: {
|
||||
shareUrl: "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
refind: {
|
||||
shareUrl: "https://refind.com",
|
||||
params: {
|
||||
url: this.getValue("url")
|
||||
}
|
||||
},
|
||||
surfingbird: {
|
||||
shareUrl: "https://surfingbird.ru/share",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
description: this.getValue("description")
|
||||
}
|
||||
},
|
||||
yahoomail: {
|
||||
shareUrl: "http://compose.mail.yahoo.com",
|
||||
params: {
|
||||
to: this.getValue("to"),
|
||||
subject: this.getValue("subject"),
|
||||
body: this.getValue("body")
|
||||
}
|
||||
},
|
||||
wordpress: {
|
||||
shareUrl: "https://wordpress.com/wp-admin/press-this.php",
|
||||
params: {
|
||||
u: this.getValue("url"),
|
||||
t: this.getValue("title"),
|
||||
s: this.getValue("title")
|
||||
}
|
||||
},
|
||||
amazon: {
|
||||
shareUrl: "https://www.amazon.com/gp/wishlist/static-add",
|
||||
params: {
|
||||
u: this.getValue("url"),
|
||||
t: this.getValue("title")
|
||||
}
|
||||
},
|
||||
pinboard: {
|
||||
shareUrl: "https://pinboard.in/add",
|
||||
params: {
|
||||
url: this.getValue("url"),
|
||||
title: this.getValue("title"),
|
||||
description: this.getValue("description")
|
||||
}
|
||||
},
|
||||
threema: {
|
||||
shareUrl: "threema://compose",
|
||||
params: {
|
||||
text: this.getValue("text"),
|
||||
id: this.getValue("id")
|
||||
}
|
||||
}
|
||||
// Add other share options here, similar to facebook
|
||||
// ...
|
||||
};
|
||||
|
||||
const option = options[type];
|
||||
if (option) {
|
||||
option.width = this.getValue('width') || '';
|
||||
option.height = this.getValue('height') || '';
|
||||
this.urlSharer(option);
|
||||
}
|
||||
}
|
||||
|
||||
urlSharer(option: ShareOptions) {
|
||||
const params = option.params || {};
|
||||
const query = Object.keys(params)
|
||||
.map((key) => `${key}=${encodeURIComponent(params[key])}`)
|
||||
.join('&');
|
||||
|
||||
const url = `${option.shareUrl}${query ? `?${query}` : ''}`;
|
||||
|
||||
if (!option.isLink) {
|
||||
const width = option.width || '600';
|
||||
const height = option.height || '480';
|
||||
const left = window.innerWidth / 2 - parseInt(width) / 2 + window.screenX;
|
||||
const top = window.innerHeight / 2 - parseInt(height) / 2 + window.screenY;
|
||||
const windowFeatures = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
|
||||
const popup = window.open(url, '', windowFeatures);
|
||||
if (window.focus) popup?.focus();
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'complete' || document.readyState !== 'loading') {
|
||||
Sharer.init();
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', Sharer.init);
|
||||
}
|
||||
|
||||
window.addEventListener('page:load', Sharer.init);
|
||||
window.addEventListener('turbolinks:load', Sharer.init);
|
||||
(window as any).Sharer = Sharer;
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{},
|
||||
[1]
|
||||
);
|
||||
})();
|
||||
455
quartz/static/share.js
Normal file
455
quartz/static/share.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user