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
|
import { type ForwardRefRenderFunction, forwardRef, useCallback } from 'react';
import { useIntl } from 'react-intl';
import {
List,
ListItem,
SharingLink,
type SharingMedium,
} from '../../../atoms';
import { Collapsible, type CollapsibleProps } from '../../../molecules';
export type SharingData = {
/**
* The content excerpt.
*/
excerpt: string;
/**
* The content title.
*/
title: string;
/**
* The content url.
*/
url: string;
};
const getUrl = (
medium: Exclude<SharingMedium, 'email'>,
data: Omit<SharingData, 'excerpt'>
) => {
const title = encodeURIComponent(data.title);
const url = encodeURIComponent(data.url);
switch (medium) {
case 'diaspora':
return `https://share.diasporafoundation.org/?title=${title}&url=${url}`;
case 'facebook':
return `https://www.facebook.com/sharer/sharer.php?$u=${url}`;
case 'journal-du-hacker':
return `https://www.journalduhacker.net/stories/new?title=${title}&url=${url}`;
case 'linkedin':
return `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
case 'twitter':
return `https://twitter.com/intent/tweet?text=${title}&url=${url}`;
default:
throw new Error('Unsupported social media.');
}
};
export type SharingWidgetProps = Omit<
CollapsibleProps,
'children' | 'disablePadding' | 'hasBorders'
> & {
/**
* The page data to share.
*/
data: SharingData;
/**
* An ordered list of sharing medium to activate.
*/
media: SharingMedium[];
};
const SharingWidgetWithRef: ForwardRefRenderFunction<
HTMLDivElement,
SharingWidgetProps
> = ({ data, media, ...props }, ref) => {
const intl = useIntl();
const labels: Record<SharingMedium, string> = {
'journal-du-hacker': intl.formatMessage({
defaultMessage: 'Share on Journal du Hacker',
description: 'SharingWidget: Journal du Hacker sharing link',
id: 'Hclr0a',
}),
diaspora: intl.formatMessage({
defaultMessage: 'Share on Diaspora',
description: 'SharingWidget: Diaspora sharing link',
id: '0f7fty',
}),
email: intl.formatMessage({
defaultMessage: 'Share by Email',
description: 'SharingWidget: Email sharing link',
id: 'OWygWB',
}),
facebook: intl.formatMessage({
defaultMessage: 'Share on Facebook',
description: 'SharingWidget: Facebook sharing link',
id: 'WzYUm5',
}),
linkedin: intl.formatMessage({
defaultMessage: 'Share on LinkedIn',
description: 'SharingWidget: LinkedIn sharing link',
id: 'ofQPC+',
}),
twitter: intl.formatMessage({
defaultMessage: 'Share on Twitter',
description: 'SharingWidget: Twitter sharing link',
id: 'QdBC6q',
}),
};
/**
* Build the mailto url from provided data.
*
* @returns {string} The mailto url with params.
*/
const buildEmailUrl = useCallback((): string => {
const readMore = intl.formatMessage({
defaultMessage: 'Read more here:',
description: 'SharingWidget: content link prefix',
id: 'AsXE0d',
});
const excerpt = data.excerpt
.replace(/<[^>]+>/gi, '')
.replaceAll(' ', ' ');
const body = `${excerpt}\n\n${readMore} ${data.url}`;
const subject = intl.formatMessage(
{
defaultMessage: 'You should read {title}',
description: 'SharingWidget: subject text',
id: 'BLq3+e',
},
{ title: data.title }
);
return `mailto:?body=${encodeURIComponent(
body
)}&subject=${encodeURIComponent(subject)}`;
}, [data, intl]);
return (
<Collapsible {...props} ref={ref}>
<List
hideMarker
isInline
// eslint-disable-next-line react/jsx-no-literals
spacing="xs"
>
{media.map((medium) => (
<ListItem key={medium}>
<SharingLink
label={labels[medium]}
medium={medium}
url={
medium === 'email'
? buildEmailUrl()
: getUrl(medium, { title: data.title, url: data.url })
}
/>
</ListItem>
))}
</List>
</Collapsible>
);
};
/**
* Sharing widget component
*
* Render a list of sharing links inside a widget.
*/
export const SharingWidget = forwardRef(SharingWidgetWithRef);
|
