1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
import { FC } from 'react';
import { useIntl } from 'react-intl';
import { SharingLink, type SharingMedium } from '../../atoms';
import { Widget, type WidgetProps } from '../../molecules';
import styles from './sharing.module.scss';
export type SharingData = {
/**
* The content excerpt.
*/
excerpt: string;
/**
* The content title.
*/
title: string;
/**
* The content url.
*/
url: string;
};
export type SharingProps = {
/**
* Set additional classnames to the sharing links list.
*/
className?: string;
/**
* The page data to share.
*/
data: SharingData;
/**
* The widget default state.
*/
expanded?: WidgetProps['expanded'];
/**
* The HTML heading level.
*/
level?: WidgetProps['level'];
/**
* A list of active and ordered sharing medium.
*/
media: SharingMedium[];
};
/**
* Sharing widget component
*
* Render a list of sharing links inside a widget.
*/
export const Sharing: FC<SharingProps> = ({
className = '',
data,
media,
expanded = true,
level = 2,
...props
}) => {
const intl = useIntl();
const widgetTitle = intl.formatMessage({
defaultMessage: 'Share',
id: 'q3U6uI',
description: 'Sharing: widget title',
});
/**
* Build the Diaspora sharing url with provided data.
*
* @param {string} title - The content title.
* @param {string} url - The content url.
* @returns {string} The Diaspora url.
*/
const buildDiasporaUrl = (title: string, url: string): string => {
const titleParam = `title=${encodeURI(title)}`;
const urlParam = `url=${encodeURI(url)}`;
return `https://share.diasporafoundation.org/?${titleParam}&${urlParam}`;
};
/**
* Build the mailto url from provided data.
*
* @param {string} excerpt - The content excerpt.
* @param {string} title - The content title.
* @param {string} url - The content url.
* @returns {string} The mailto url with params.
*/
const buildEmailUrl = (
excerpt: string,
title: string,
url: string
): string => {
const intro = intl.formatMessage({
defaultMessage: 'Introduction:',
description: 'Sharing: email content prefix',
id: 'yfgMcl',
});
const readMore = intl.formatMessage({
defaultMessage: 'Read more here:',
description: 'Sharing: content link prefix',
id: 'UsQske',
});
const body = `${intro}\n\n"${excerpt}"\n\n${readMore} ${url}`;
const bodyParam = excerpt ? `body=${encodeURI(body)}` : '';
const subject = intl.formatMessage(
{
defaultMessage: 'You should read {title}',
description: 'Sharing: subject text',
id: 'azgQuH',
},
{ title }
);
const subjectParam = `subject=${encodeURI(subject)}`;
return `mailto:?${bodyParam}&${subjectParam}`;
};
/**
* Build the Facebook sharing url with provided data.
*
* @param {string} url - The content url.
* @returns {string} The Facebook url.
*/
const buildFacebookUrl = (url: string): string => {
const urlParam = `u=${encodeURI(url)}`;
return `https://www.facebook.com/sharer/sharer.php?${urlParam}`;
};
/**
* Build the Journal du Hacker sharing url with provided data.
*
* @param {string} title - The content title.
* @param {string} url - The content url.
* @returns {string} The Journal du Hacker url.
*/
const buildJdHUrl = (title: string, url: string): string => {
const titleParam = `title=${encodeURI(title)}`;
const urlParam = `url=${encodeURI(url)}`;
return `https://www.journalduhacker.net/stories/new?${titleParam}&${urlParam}`;
};
/**
* Build the LinkedIn sharing url with provided data.
*
* @param {string} url - The content url.
* @returns {string} The LinkedIn url.
*/
const buildLinkedInUrl = (url: string): string => {
const urlParam = `url=${encodeURI(url)}`;
return `https://www.linkedin.com/sharing/share-offsite/?${urlParam}`;
};
/**
* Build the Twitter sharing url with provided data.
*
* @param {string} title - The content title.
* @param {string} url - The content url.
* @returns {string} The Twitter url.
*/
const buildTwitterUrl = (title: string, url: string): string => {
const titleParam = `text=${encodeURI(title)}`;
const urlParam = `url=${encodeURI(url)}`;
return `https://twitter.com/intent/tweet?${titleParam}&${urlParam}`;
};
/**
* Retrieve the sharing url by medium id.
*
* @param {SharingMedium} medium - A sharing medium id.
* @returns {string} The sharing url.
*/
const getUrl = (medium: SharingMedium): string => {
const { excerpt, title, url } = data;
switch (medium) {
case 'diaspora':
return buildDiasporaUrl(title, url);
case 'email':
return buildEmailUrl(excerpt, title, url);
case 'facebook':
return buildFacebookUrl(url);
case 'journal-du-hacker':
return buildJdHUrl(title, url);
case 'linkedin':
return buildLinkedInUrl(url);
case 'twitter':
return buildTwitterUrl(title, url);
default:
return '#';
}
};
/**
* Get the sharing list items.
*
* @returns {JSX.Element[]} The sharing links wrapped with li element.
*/
const getItems = (): JSX.Element[] => {
return media.map((medium) => (
<li key={medium}>
<SharingLink medium={medium} url={getUrl(medium)} />
</li>
));
};
return (
<Widget {...props} expanded={expanded} level={level} title={widgetTitle}>
<ul className={`${styles.list} ${className}`}>{getItems()}</ul>
</Widget>
);
};
|
