From 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 29 Apr 2022 12:13:34 +0200 Subject: chore: remove old pages, components, helpers and types Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch. --- src/components/Widgets/Sharing/Sharing.module.scss | 193 ----------------- src/components/Widgets/Sharing/Sharing.tsx | 238 --------------------- 2 files changed, 431 deletions(-) delete mode 100644 src/components/Widgets/Sharing/Sharing.module.scss delete mode 100644 src/components/Widgets/Sharing/Sharing.tsx (limited to 'src/components/Widgets/Sharing') diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss deleted file mode 100644 index ada3e2f..0000000 --- a/src/components/Widgets/Sharing/Sharing.module.scss +++ /dev/null @@ -1,193 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.list { - @extend %flex-list; - - gap: var(--spacing-sm); - padding: var(--spacing-2xs) 0 0 var(--spacing-2xs); - - @include mix.media("screen") { - @include mix.dimensions("md") { - gap: var(--spacing-xs); - width: min-content; - } - } -} - -.link { - display: flex; - flex-flow: row nowrap; - align-items: center; - padding: var(--spacing-2xs) var(--spacing-xs); - border-radius: fun.convert-px(3); - font-weight: 600; - text-decoration: none; - transition: all 0.3s ease-in-out 0s; - - &:hover, - &:focus { - color: hsl(0, 0%, 100%); - transform: translateX(#{fun.convert-px(-3)}) - translateY(#{fun.convert-px(-3)}); - } - - &:active { - color: hsl(0, 0%, 100%); - transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)}); - - @include mix.motion("reduce") { - transform: none; - } - } - - &::before { - display: block; - background-repeat: no-repeat; - content: ""; - filter: drop-shadow( - #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%) - ); - width: fun.convert-px(30); - height: fun.convert-px(30); - } - - &--diaspora { - background: hsl(0, 0%, 13%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 3%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 3%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 3%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } - - &--email { - background: hsl(0, 0%, 44%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 34%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 34%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 34%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } - - &--facebook { - background: hsl(214, 89%, 52%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(214, 89%, 42%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 - hsl(214, 89%, 42%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 - hsl(214, 89%, 42%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } - - &--journal-du-hacker { - background: hsl(210, 24%, 51%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 24%, 41%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 - hsl(210, 24%, 41%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 - hsl(210, 24%, 41%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } - - &--linkedin { - background: hsl(210, 90%, 40%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 90%, 30%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 - hsl(210, 90%, 30%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 - hsl(210, 90%, 30%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } - - &--twitter { - background: hsl(203, 89%, 53%); - box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(203, 89%, 43%); - - &:hover, - &:focus { - box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 - hsl(203, 89%, 43%); - } - - &:active { - box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 - hsl(203, 89%, 43%); - } - - &::before { - background-image: url(fun.encode-svg( - '' - )); - } - } -} - -:global { - [data-theme="dark"] { - :local { - .link { - filter: brightness(0.85) contrast(1.1); - } - } - } -} diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx deleted file mode 100644 index 45fe3ce..0000000 --- a/src/components/Widgets/Sharing/Sharing.tsx +++ /dev/null @@ -1,238 +0,0 @@ -import { ExpandableWidget } from '@components/WidgetParts'; -import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; -import { useIntl } from 'react-intl'; -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 intl = useIntl(); - 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 = 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"${pageExcerpt}"\n\n${readMore} ${pageUrl}`; - sharingUrl += encodeURI(body); - } else { - sharingUrl += encodeURI(pageExcerpt); - } - break; - case 'title': - const prefix = - id === 'email' - ? intl.formatMessage( - { - defaultMessage: 'Seen on {domainName}:', - description: 'Sharing: seen on text', - id: 'eUXMG4', - }, - { domainName } - ) - : ''; - sharingUrl += encodeURI(`${prefix} ${title}`); - break; - case 'url': - sharingUrl += encodeURI(pageUrl); - break; - default: - break; - } - - count++; - } - - return sharingUrl; - }; - - const websites = [ - { - id: 'diaspora', - name: intl.formatMessage({ - defaultMessage: 'Diaspora', - description: 'Sharing: Diaspora', - id: 'Dhow1m', - }), - parameters: { - content: '', - image: '', - title: 'title', - url: 'url', - }, - url: 'https://share.diasporafoundation.org/', - }, - { - id: 'facebook', - name: intl.formatMessage({ - defaultMessage: 'Facebook', - description: 'Sharing: Facebook', - id: '7iiaRx', - }), - parameters: { - content: '', - image: '', - title: '', - url: 'u', - }, - url: 'https://www.facebook.com/sharer/sharer.php', - }, - { - id: 'linkedin', - name: intl.formatMessage({ - defaultMessage: 'LinkedIn', - description: 'Sharing: LinkedIn', - id: 'csCQQk', - }), - parameters: { - content: '', - image: '', - title: '', - url: 'url', - }, - url: 'https://www.linkedin.com/sharing/share-offsite/', - }, - { - id: 'twitter', - name: intl.formatMessage({ - defaultMessage: 'Twitter', - description: 'Sharing: Twitter', - id: 'WjVBnY', - }), - parameters: { - content: '', - image: '', - title: 'text', - url: 'url', - }, - url: 'https://twitter.com/intent/tweet', - }, - { - id: 'journal-du-hacker', - name: intl.formatMessage({ - defaultMessage: 'Journal du hacker', - description: 'Sharing: Journal du hacker', - id: 'P0I+Xm', - }), - parameters: { - content: '', - image: '', - title: 'title', - url: 'url', - }, - url: 'https://www.journalduhacker.net/stories/new', - }, - { - id: 'email', - name: intl.formatMessage({ - defaultMessage: 'Email', - description: 'Sharing: Email', - id: 'lKZm9t', - }), - parameters: { - content: 'body', - image: '', - title: 'subject', - url: '', - }, - url: 'mailto:', - }, - ]; - - const getItems = () => { - return websites.map((website) => { - const { id, name } = website; - const sharingUrl = getSharingUrl(website); - const linkModifier = `link--${id}`; - - return ( -
  • - - - {intl.formatMessage( - { - defaultMessage: 'Share on {name}', - description: 'Sharing: share on social network text', - id: 'ureXFw', - }, - { name } - )} - - -
    • - ); - }); - }; - - return ( - - - - ); -}; - -export default Sharing; -- cgit v1.2.3