From 97cb340ceff1c01e77e6635d96c0e3c528c058d0 Mon Sep 17 00:00:00 2001 From: nusantara-self <15647296+nusantara-self@users.noreply.github.com> Date: Mon, 19 Feb 2024 15:12:22 +0800 Subject: [PATCH] Add spotify footer for docs --- docusaurus.config.js | 3 ++ src/components/ConditionalSpotifyIframe.js | 40 +++++++++++++++++++++ src/theme/Footer/Copyright/index.js | 11 ++++++ src/theme/Footer/Layout/index.js | 29 +++++++++++++++ src/theme/Footer/LinkItem/index.js | 25 +++++++++++++ src/theme/Footer/Links/MultiColumn/index.js | 37 +++++++++++++++++++ src/theme/Footer/Links/Simple/index.js | 31 ++++++++++++++++ src/theme/Footer/Links/index.js | 11 ++++++ src/theme/Footer/Logo/index.js | 35 ++++++++++++++++++ src/theme/Footer/Logo/styles.module.css | 9 +++++ src/theme/Footer/index.js | 23 ++++++++++++ 11 files changed, 254 insertions(+) create mode 100644 src/components/ConditionalSpotifyIframe.js create mode 100644 src/theme/Footer/Copyright/index.js create mode 100644 src/theme/Footer/Layout/index.js create mode 100644 src/theme/Footer/LinkItem/index.js create mode 100644 src/theme/Footer/Links/MultiColumn/index.js create mode 100644 src/theme/Footer/Links/Simple/index.js create mode 100644 src/theme/Footer/Links/index.js create mode 100644 src/theme/Footer/Logo/index.js create mode 100644 src/theme/Footer/Logo/styles.module.css create mode 100644 src/theme/Footer/index.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 45eafd4..0fdb397 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -132,6 +132,9 @@ const config = { darkTheme: darkCodeTheme, }, metadata: [{ name: 'keywords', content: 'tech, cybersecurity, cloud, travel, fabien bloume, gcp, thehive, shuffle' }], + customFields: { + spotifyTrackUrl: 'https://open.spotify.com/embed/track/4GKSQD4lm08ORPorzi2wOb', + }, }), }; diff --git a/src/components/ConditionalSpotifyIframe.js b/src/components/ConditionalSpotifyIframe.js new file mode 100644 index 0000000..d109b3a --- /dev/null +++ b/src/components/ConditionalSpotifyIframe.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { useLocation } from '@docusaurus/router'; +import { useThemeConfig } from '@docusaurus/theme-common'; + +const SpotifyIframe = ({ modifiedTrackUrl }) => ( +
+ +
+); + + +const ConditionalSpotifyIframe = () => { + const location = useLocation(); + + const {customFields} = useThemeConfig(); + if (!customFields) { + return null; + } + const trackUrl = customFields.spotifyTrackUrl; + + // Append spotify theme & generator to the trackUrl + const modifiedTrackUrl = trackUrl + '?utm_source=generator&theme=0'; + + // Check if the current path starts with /docs + if (location.pathname.startsWith('/docs')) { + return ; + } + + // Return null if not on a /docs page + return null; +}; + +export default ConditionalSpotifyIframe; \ No newline at end of file diff --git a/src/theme/Footer/Copyright/index.js b/src/theme/Footer/Copyright/index.js new file mode 100644 index 0000000..d239a7a --- /dev/null +++ b/src/theme/Footer/Copyright/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +export default function FooterCopyright({copyright}) { + return ( +
+ ); +} diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js new file mode 100644 index 0000000..d9e64d6 --- /dev/null +++ b/src/theme/Footer/Layout/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import clsx from 'clsx'; +import ConditionalSpotifyIframe from '../../../components/ConditionalSpotifyIframe'; + + +export default function FooterLayout({style, links, logo, copyright}) { + return ( +
+
+ +
+
+ {copyright} +
+ {/*
+ {links} + {(logo || copyright) && ( +
+ {logo &&
{logo}
} + {copyright} +
+ )} +
*/} +
+ ); +} diff --git a/src/theme/Footer/LinkItem/index.js b/src/theme/Footer/LinkItem/index.js new file mode 100644 index 0000000..f1a6e84 --- /dev/null +++ b/src/theme/Footer/LinkItem/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import isInternalUrl from '@docusaurus/isInternalUrl'; +import IconExternalLink from '@theme/Icon/ExternalLink'; +export default function FooterLinkItem({item}) { + const {to, href, label, prependBaseUrlToHref, ...props} = item; + const toUrl = useBaseUrl(to); + const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + return ( + + {label} + {href && !isInternalUrl(href) && } + + ); +} diff --git a/src/theme/Footer/Links/MultiColumn/index.js b/src/theme/Footer/Links/MultiColumn/index.js new file mode 100644 index 0000000..79ff51d --- /dev/null +++ b/src/theme/Footer/Links/MultiColumn/index.js @@ -0,0 +1,37 @@ +import React from 'react'; +import LinkItem from '@theme/Footer/LinkItem'; +function ColumnLinkItem({item}) { + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); +} +function Column({column}) { + return ( +
    +
    {column.title}
    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); +} +export default function FooterLinksMultiColumn({columns}) { + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); +} diff --git a/src/theme/Footer/Links/Simple/index.js b/src/theme/Footer/Links/Simple/index.js new file mode 100644 index 0000000..8b34d9b --- /dev/null +++ b/src/theme/Footer/Links/Simple/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import LinkItem from '@theme/Footer/LinkItem'; +function Separator() { + return ยท; +} +function SimpleLinkItem({item}) { + return item.html ? ( + + ) : ( + + ); +} +export default function FooterLinksSimple({links}) { + return ( +
    +
    + {links.map((item, i) => ( + + + {links.length !== i + 1 && } + + ))} +
    +
    + ); +} diff --git a/src/theme/Footer/Links/index.js b/src/theme/Footer/Links/index.js new file mode 100644 index 0000000..5da2258 --- /dev/null +++ b/src/theme/Footer/Links/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {isMultiColumnFooterLinks} from '@docusaurus/theme-common'; +import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn'; +import FooterLinksSimple from '@theme/Footer/Links/Simple'; +export default function FooterLinks({links}) { + return isMultiColumnFooterLinks(links) ? ( + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/index.js b/src/theme/Footer/Logo/index.js new file mode 100644 index 0000000..2fdd1ab --- /dev/null +++ b/src/theme/Footer/Logo/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage'; +import styles from './styles.module.css'; +function LogoImage({logo}) { + const {withBaseUrl} = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} +export default function FooterLogo({logo}) { + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 0000000..faf0e60 --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,9 @@ +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js new file mode 100644 index 0000000..2b41308 --- /dev/null +++ b/src/theme/Footer/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import FooterLinks from '@theme/Footer/Links'; +import FooterLogo from '@theme/Footer/Logo'; +import FooterCopyright from '@theme/Footer/Copyright'; +import FooterLayout from '@theme/Footer/Layout'; + +function Footer() { + const {footer} = useThemeConfig(); + if (!footer) { + return null; + } + const {copyright, links, logo, style} = footer; + return ( + 0 && } + logo={logo && } + copyright={copyright && } + /> + ); +} +export default React.memo(Footer);