From aa1ca65e7c9807c6d6020e39166536297fe1cdae Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 15 Jan 2022 22:45:57 +0100 Subject: 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. --- .../Widgets/CVPreview/CVPreview.module.scss | 6 + src/components/Widgets/CVPreview/CVPreview.tsx | 36 ++++ .../Widgets/RecentPosts/RecentPosts.module.scss | 94 ++++++++++ src/components/Widgets/RecentPosts/RecentPosts.tsx | 63 +++++++ .../Widgets/RelatedThematics/RelatedThematics.tsx | 31 ++++ .../Widgets/RelatedTopics/RelatedTopics.tsx | 31 ++++ src/components/Widgets/Sharing/Sharing.module.scss | 196 +++++++++++++++++++++ src/components/Widgets/Sharing/Sharing.tsx | 113 ++++++++++++ .../Widgets/SocialMedia/SocialMedia.module.scss | 48 +++++ src/components/Widgets/SocialMedia/SocialMedia.tsx | 72 ++++++++ .../Widgets/ThematicsList/ThematicsList.tsx | 46 +++++ src/components/Widgets/ToC/ToC.module.scss | 70 ++++++++ src/components/Widgets/ToC/ToC.tsx | 30 ++++ src/components/Widgets/TopicsList/TopicsList.tsx | 46 +++++ src/components/Widgets/index.tsx | 21 +++ 15 files changed, 903 insertions(+) create mode 100644 src/components/Widgets/CVPreview/CVPreview.module.scss create mode 100644 src/components/Widgets/CVPreview/CVPreview.tsx create mode 100644 src/components/Widgets/RecentPosts/RecentPosts.module.scss create mode 100644 src/components/Widgets/RecentPosts/RecentPosts.tsx create mode 100644 src/components/Widgets/RelatedThematics/RelatedThematics.tsx create mode 100644 src/components/Widgets/RelatedTopics/RelatedTopics.tsx create mode 100644 src/components/Widgets/Sharing/Sharing.module.scss create mode 100644 src/components/Widgets/Sharing/Sharing.tsx create mode 100644 src/components/Widgets/SocialMedia/SocialMedia.module.scss create mode 100644 src/components/Widgets/SocialMedia/SocialMedia.tsx create mode 100644 src/components/Widgets/ThematicsList/ThematicsList.tsx create mode 100644 src/components/Widgets/ToC/ToC.module.scss create mode 100644 src/components/Widgets/ToC/ToC.tsx create mode 100644 src/components/Widgets/TopicsList/TopicsList.tsx create mode 100644 src/components/Widgets/index.tsx (limited to 'src/components/Widgets') diff --git a/src/components/Widgets/CVPreview/CVPreview.module.scss b/src/components/Widgets/CVPreview/CVPreview.module.scss new file mode 100644 index 0000000..6ddd696 --- /dev/null +++ b/src/components/Widgets/CVPreview/CVPreview.module.scss @@ -0,0 +1,6 @@ +.preview { + position: relative; + width: 100%; + height: 20rem; + margin-bottom: var(--spacing-sm); +} diff --git a/src/components/Widgets/CVPreview/CVPreview.tsx b/src/components/Widgets/CVPreview/CVPreview.tsx new file mode 100644 index 0000000..e52a9b2 --- /dev/null +++ b/src/components/Widgets/CVPreview/CVPreview.tsx @@ -0,0 +1,36 @@ +import { ExpandableWidget } from '@components/WidgetParts'; +import { Trans } from '@lingui/macro'; +import Image from 'next/image'; +import Link from 'next/link'; +import styles from './CVPreview.module.scss'; + +const CVPreview = ({ + title, + imgSrc, + pdf, +}: { + title: string; + imgSrc: string; + pdf: string; +}) => { + return ( + +
+ CV Armand Philippot +
+

+ + Download CV in PDF + +

+ + ); +}; + +export default CVPreview; diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss new file mode 100644 index 0000000..95ad7fe --- /dev/null +++ b/src/components/Widgets/RecentPosts/RecentPosts.module.scss @@ -0,0 +1,94 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/placeholders"; + +.list { + @extend %flex-list; + align-items: stretch; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-md); +} + +.item { + width: min(calc(100vw - var(--spacing-md)), 25ch); + text-align: center; +} + +.article { + display: flex; + flex-flow: column nowrap; + height: 100%; + padding: 0 0 var(--spacing-md); +} + +.title { + flex: 1; + margin: var(--spacing-sm) 0; + padding: 0 var(--spacing-md); + text-decoration: underline solid transparent 0; + transition: all 0.3s linear 0s; +} + +.link { + display: block; + height: 100%; + background: var(--color-bg); + color: inherit; + text-decoration: none; + border: fun.convert-px(3) solid var(--color-primary); + border-radius: fun.convert-px(5); + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-light); + transition: all 0.3s ease-in-out 0s; + + &:hover, + &:focus, + &:active { + color: inherit; + } + + &:hover, + &:focus { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-lighter), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) + var(--color-shadow-lighter), + fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) + var(--color-shadow-lighter); + transform: scale(1.05); + } + + &:focus { + .title { + text-decoration: underline solid var(--color-primary) 0.3ex; + } + } + + &:active { + box-shadow: 0 0 0 0 var(--color-shadow-light); + transform: scale(0.95); + + .title { + text-decoration: none; + } + } +} + +.cover { + width: 100%; + height: clamp(fun.convert-px(100), 20vw, fun.convert-px(150)); + position: relative; + border: fun.convert-px(1) solid var(--color-border-light); +} + +.meta { + display: block; + margin: 0; + padding: 0 var(--spacing-md); + font-size: var(--font-size-sm); +} diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx new file mode 100644 index 0000000..1569284 --- /dev/null +++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx @@ -0,0 +1,63 @@ +import { t } from '@lingui/macro'; +import { getPublishedPosts } from '@services/graphql/queries'; +import { ArticlePreview } from '@ts/types/articles'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import useSWR from 'swr'; +import styles from './RecentPosts.module.scss'; + +const RecentPosts = () => { + const { data, error } = useSWR('/recent-posts', () => + getPublishedPosts({ first: 3 }) + ); + const { locale } = useRouter(); + const dateOptions: Intl.DateTimeFormatOptions = { + day: 'numeric', + month: 'long', + year: 'numeric', + }; + + const getPost = (post: ArticlePreview) => { + return ( +
  • + + +
    + {post.featuredImage && + Object.keys(post.featuredImage).length > 0 && ( +
    + {post.featuredImage.altText} +
    + )} +

    {post.title}

    +
    +
    {t`Published on:`}
    +
    + {new Date(post.dates.publication).toLocaleDateString( + locale, + dateOptions + )} +
    +
    +
    +     + +
    • + ); + }; + + if (error) return
    {t`Failed to load.`}
    ; + if (!data) return
    {t`Loading...`}
    ; + + return ( + + ); +}; + +export default RecentPosts; diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx new file mode 100644 index 0000000..afe3460 --- /dev/null +++ b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx @@ -0,0 +1,31 @@ +import { ExpandableWidget, List } from '@components/WidgetParts'; +import { t } from '@lingui/macro'; +import { ThematicPreview } from '@ts/types/taxonomies'; +import Link from 'next/link'; + +const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => { + const sortedThematics = [...thematics].sort((a, b) => + a.title.localeCompare(b.title) + ); + + const thematicsList = sortedThematics.map((thematic) => { + return ( +
  • + + {thematic.title} + +
    • + ); + }); + + return ( + 1 ? t`Related thematics` : t`Related thematic`} + withBorders={true} + > + + + ); +}; + +export default RelatedThematics; diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx new file mode 100644 index 0000000..aab8cc1 --- /dev/null +++ b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx @@ -0,0 +1,31 @@ +import { ExpandableWidget, List } from '@components/WidgetParts'; +import { t } from '@lingui/macro'; +import { SubjectPreview } from '@ts/types/taxonomies'; +import Link from 'next/link'; + +const RelatedTopics = ({ topics }: { topics: SubjectPreview[] }) => { + const sortedSubjects = [...topics].sort((a, b) => + a.title.localeCompare(b.title) + ); + + const subjects = sortedSubjects.map((subject) => { + return ( +
  • + + {subject.title} + +
    • + ); + }); + + return ( + 1 ? t`Related topics` : t`Related topic`} + withBorders={true} + > + + + ); +}; + +export default RelatedTopics; diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss new file mode 100644 index 0000000..3477c88 --- /dev/null +++ b/src/components/Widgets/Sharing/Sharing.module.scss @@ -0,0 +1,196 @@ +@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); + color: var(--color-fg-inverted); + font-weight: 600; + text-decoration: none; + text-shadow: fun.convert-px(2) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-dark); + transition: all 0.3s ease-in-out 0s; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + font-size: var(--font-size-sm); + } + } + + &:hover, + &:focus { + color: hsl(0, 0%, 100%); + transform: translateX(#{fun.convert-px(-3)}) + translateY(#{fun.convert-px(-3)}); + + @include mix.motion("reduce") { + text-decoration: underline; + } + } + + &: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( + '' + )); + } + } +} diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx new file mode 100644 index 0000000..bc52f9b --- /dev/null +++ b/src/components/Widgets/Sharing/Sharing.tsx @@ -0,0 +1,113 @@ +import { ExpandableWidget } from '@components/WidgetParts'; +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 ( +
  • + + {name} + +
    • + ); + }); + }; + + return ( + + + + ); +}; + +export default Sharing; diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss new file mode 100644 index 0000000..c8ad759 --- /dev/null +++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss @@ -0,0 +1,48 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/placeholders"; + +.list { + @extend %flex-list; + + gap: var(--spacing-xs); + align-items: center; + padding: var(--spacing-2xs) 0 0 var(--spacing-2xs); +} + +.link { + display: block; + width: 3em; + height: 3em; + background: none; + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3) + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow); + transition: all 0.3s linear 0s; + + &:hover, + &:focus { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4) + var(--color-shadow-lighter), + fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3) + var(--color-shadow-light); + transform: scale(1.15); + } + + &:focus { + outline: var(--color-primary) dashed fun.convert-px(2); + } + + &:active { + box-shadow: 0 0 0 0 var(--color-shadow-light); + outline: none; + transform: scale(0.9); + } +} diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx new file mode 100644 index 0000000..351fd48 --- /dev/null +++ b/src/components/Widgets/SocialMedia/SocialMedia.tsx @@ -0,0 +1,72 @@ +import { socialWebsites } from '@config/social-media'; +import GithubIcon from '@assets/images/social-media/github.svg'; +import GitlabIcon from '@assets/images/social-media/gitlab.svg'; +import LinkedInIcon from '@assets/images/social-media/linkedin.svg'; +import TwitterIcon from '@assets/images/social-media/twitter.svg'; +import styles from './SocialMedia.module.scss'; +import { ExpandableWidget } from '@components/WidgetParts'; + +const SocialMedia = ({ + title, + github = false, + gitlab = false, + linkedin = false, + twitter = false, +}: { + title: string; + github?: boolean; + gitlab?: boolean; + linkedin?: boolean; + twitter?: boolean; +}) => { + const getIcon = (id: string) => { + switch (id) { + case 'github': + return ; + case 'gitlab': + return ; + case 'linkedin': + return ; + case 'twitter': + return ; + default: + break; + } + }; + + const shouldDisplayLink = (id: string) => { + switch (id) { + case 'github': + return github; + case 'gitlab': + return gitlab; + case 'linkedin': + return linkedin; + case 'twitter': + return twitter; + default: + break; + } + }; + + const items = socialWebsites.map((website) => { + return shouldDisplayLink(website.id) ? ( +
  • + + {getIcon(website.id)} + {website.name} + +
    • + ) : ( + '' + ); + }); + + return ( + +
      {items}
    +     + ); +}; + +export default SocialMedia; diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx new file mode 100644 index 0000000..8523bd1 --- /dev/null +++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx @@ -0,0 +1,46 @@ +import { ExpandableWidget, List } from '@components/WidgetParts'; +import { t } from '@lingui/macro'; +import { getAllThematics } from '@services/graphql/queries'; +import { TitleLevel } from '@ts/types/app'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import useSWR from 'swr'; + +const ThematicsList = ({ + title, + titleLevel, +}: { + title: string; + titleLevel?: TitleLevel; +}) => { + const router = useRouter(); + const isThematic = () => router.asPath.includes('/thematique/'); + const currentThematicSlug = isThematic() + ? router.asPath.replace('/thematique/', '') + : ''; + + const { data, error } = useSWR('/api/thematics', getAllThematics); + + if (error) return
    {t`Failed to load.`}
    ; + if (!data) return
    {t`Loading...`}
    ; + + const thematics = data.map((thematic) => { + return currentThematicSlug !== thematic.slug ? ( +
  • + + {thematic.title} + +
    • + ) : ( + '' + ); + }); + + return ( + + + + ); +}; + +export default ThematicsList; diff --git a/src/components/Widgets/ToC/ToC.module.scss b/src/components/Widgets/ToC/ToC.module.scss new file mode 100644 index 0000000..a296659 --- /dev/null +++ b/src/components/Widgets/ToC/ToC.module.scss @@ -0,0 +1,70 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +.item { + width: 100%; + margin: 0; + + &::before { + display: none; + } +} + +.link { + display: flex; + flex-flow: row nowrap; + width: 100%; + padding: var(--spacing-2xs) var(--spacing-sm); + background: none; + border-bottom: fun.convert-px(1) solid var(--color-border-lighter); + text-decoration: underline solid transparent 0; + transition: all 0.16s ease-in-out 0s, text-decoration-color 0s; + + &:hover, + &:focus { + background: var(--color-bg-secondary); + } + + &:focus { + color: var(--color-primary); + text-decoration-color: var(--color-primary-light); + text-decoration-thickness: 0.25ex; + } + + &:active { + background: var(--color-bg-tertiary); + text-decoration-color: transparent; + text-decoration-thickness: 0; + } +} + +.list { + width: 100%; + margin: 0; + counter-reset: link; + + @include mix.media("screen") { + @include mix.dimensions("lg") { + font-size: var(--font-size-sm); + font-weight: 500; + } + } + + > .item .link { + counter-increment: link; + + &::before { + content: counters(link, ".") ". "; + color: var(--color-secondary); + padding-right: var(--spacing-2xs); + } + } + + .item .item .link::before { + padding-left: var(--spacing-sm); + } + + .item .item .item .link::before { + padding-left: var(--spacing-lg); + } +} diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx new file mode 100644 index 0000000..6010354 --- /dev/null +++ b/src/components/Widgets/ToC/ToC.tsx @@ -0,0 +1,30 @@ +import { ExpandableWidget, OrderedList } from '@components/WidgetParts'; +import { t } from '@lingui/macro'; +import { Heading } from '@ts/types/app'; +import useHeadingsTree from '@utils/hooks/useHeadingsTree'; + +const ToC = () => { + const headingsTree = useHeadingsTree('article'); + const title = t`Table of contents`; + + const getItems = (headings: Heading[]) => { + return headings.map((heading) => { + return ( +
  • + {heading.title} + {heading.children.length > 0 && ( + + )} +
    • + ); + }); + }; + + return ( + + + + ); +}; + +export default ToC; diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx new file mode 100644 index 0000000..5bf12b9 --- /dev/null +++ b/src/components/Widgets/TopicsList/TopicsList.tsx @@ -0,0 +1,46 @@ +import { ExpandableWidget, List } from '@components/WidgetParts'; +import { t } from '@lingui/macro'; +import { getAllSubjects } from '@services/graphql/queries'; +import { TitleLevel } from '@ts/types/app'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import useSWR from 'swr'; + +const TopicsList = ({ + title, + titleLevel, +}: { + title: string; + titleLevel?: TitleLevel; +}) => { + const router = useRouter(); + const isTopic = () => router.asPath.includes('/sujet/'); + const currentTopicSlug = isTopic() + ? router.asPath.replace('/sujet/', '') + : ''; + + const { data, error } = useSWR('/api/subjects', getAllSubjects); + + if (error) return
    {t`Failed to load.`}
    ; + if (!data) return
    {t`Loading...`}
    ; + + const subjects = data.map((subject) => { + return currentTopicSlug !== subject.slug ? ( +
  • + + {subject.title} + +
    • + ) : ( + '' + ); + }); + + return ( + + + + ); +}; + +export default TopicsList; diff --git a/src/components/Widgets/index.tsx b/src/components/Widgets/index.tsx new file mode 100644 index 0000000..8354449 --- /dev/null +++ b/src/components/Widgets/index.tsx @@ -0,0 +1,21 @@ +import CVPreview from './CVPreview/CVPreview'; +import RecentPosts from './RecentPosts/RecentPosts'; +import RelatedThematics from './RelatedThematics/RelatedThematics'; +import RelatedTopics from './RelatedTopics/RelatedTopics'; +import Sharing from './Sharing/Sharing'; +import SocialMedia from './SocialMedia/SocialMedia'; +import ThematicsList from './ThematicsList/ThematicsList'; +import ToC from './ToC/ToC'; +import TopicsList from './TopicsList/TopicsList'; + +export { + CVPreview, + RecentPosts, + RelatedThematics, + RelatedTopics, + Sharing, + SocialMedia, + ThematicsList, + ToC, + TopicsList, +}; -- cgit v1.2.3