summaryrefslogtreecommitdiffstats
path: root/src/components/Widget/Sharing/Sharing.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-01-15 22:45:57 +0100
committerArmand Philippot <git@armandphilippot.com>2022-01-15 22:51:30 +0100
commitaa1ca65e7c9807c6d6020e39166536297fe1cdae (patch)
tree2648da350fec3b71ab7f575d63e4c63ba08248b1 /src/components/Widget/Sharing/Sharing.tsx
parent16dbb4742264edac82fa6bb8e461259d097f4437 (diff)
chore: update sidebar and widgets styles
I'm now using a widget that can be expanded/collapsed. It also allows me to handle more effectively widgets overflow and to avoid styles repetitions. However, with stylelint rule "no-descending-specificity", I'm not sure if the stylesheets are really logical... Maybe I should deactivate this rule.
Diffstat (limited to 'src/components/Widget/Sharing/Sharing.tsx')
-rw-r--r--src/components/Widget/Sharing/Sharing.tsx111
1 files changed, 0 insertions, 111 deletions
diff --git a/src/components/Widget/Sharing/Sharing.tsx b/src/components/Widget/Sharing/Sharing.tsx
deleted file mode 100644
index 4df8e0d..0000000
--- a/src/components/Widget/Sharing/Sharing.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import sharingMedia from '@config/sharing';
-import { t } from '@lingui/macro';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import styles from './Sharing.module.scss';
-
-type Parameters = {
- content: string;
- image: string;
- title: string;
- url: string;
-};
-
-type Website = {
- id: string;
- name: string;
- parameters: Parameters;
- url: string;
-};
-
-const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
- const [pageExcerpt, setPageExcerpt] = useState('');
- const [pageUrl, setPageUrl] = useState('');
- const [domainName, setDomainName] = useState('');
- const router = useRouter();
-
- useEffect(() => {
- const divEl = document.createElement('div');
- divEl.innerHTML = excerpt;
- const cleanExcerpt = divEl.textContent!;
- setPageExcerpt(cleanExcerpt);
- }, [excerpt]);
-
- useEffect(() => {
- const { protocol, hostname, port } = window.location;
- const currentPort = port ? `:${port}` : '';
- const fullUrl = `${protocol}//${hostname}${currentPort}${router.asPath}`;
-
- setDomainName(hostname);
- setPageUrl(fullUrl);
- }, [router.asPath]);
-
- const getSharingUrl = (website: Website): string => {
- const { id, parameters, url } = website;
- let sharingUrl = `${url}?`;
- let count = 0;
-
- for (const [key, value] of Object.entries(parameters)) {
- if (!value) continue;
-
- sharingUrl += count > 0 ? `&${value}=` : `${value}=`;
-
- switch (key) {
- case 'content':
- if (id === 'email') {
- const intro = t`Introduction:`;
- const readMore = t`Read more here:`;
- const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
- sharingUrl += encodeURI(body);
- } else {
- sharingUrl += encodeURI(pageExcerpt);
- }
- break;
- case 'title':
- const prefix = id === 'email' ? t`Seen on ${domainName}:` : '';
- sharingUrl += encodeURI(`${prefix} ${title}`);
- break;
- case 'url':
- sharingUrl += encodeURI(pageUrl);
- break;
- default:
- break;
- }
-
- count++;
- }
-
- return sharingUrl;
- };
-
- const getItems = () => {
- const websites: Website[] = sharingMedia;
-
- return websites.map((website) => {
- const { id, name } = website;
- const sharingUrl = getSharingUrl(website);
- const linkModifier = `link--${id}`;
-
- return (
- <li key={id}>
- <a
- href={sharingUrl}
- title={name}
- className={`${styles.link} ${styles[linkModifier]}`}
- >
- <span className="screen-reader-text">{name}</span>
- </a>
- </li>
- );
- });
- };
-
- return (
- <div className={styles.wrapper}>
- <h2>{t`Share`}</h2>
- <ul className={styles.list}>{getItems()}</ul>
- </div>
- );
-};
-
-export default Sharing;