diff options
Diffstat (limited to 'src/components/MDX')
| -rw-r--r-- | src/components/MDX/CodeBlock/CodeBlock.tsx | 115 | ||||
| -rw-r--r-- | src/components/MDX/Gallery/Gallery.module.scss | 32 | ||||
| -rw-r--r-- | src/components/MDX/Gallery/Gallery.tsx | 22 | ||||
| -rw-r--r-- | src/components/MDX/Link/Link.tsx | 23 | ||||
| -rw-r--r-- | src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss | 50 | ||||
| -rw-r--r-- | src/components/MDX/ResponsiveImage/ResponsiveImage.tsx | 40 | ||||
| -rw-r--r-- | src/components/MDX/index.tsx | 6 |
7 files changed, 0 insertions, 288 deletions
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx deleted file mode 100644 index c330063..0000000 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { - PrismDefaultPlugins, - PrismLanguages, - PrismPlugins, -} from '@ts/types/prism'; -import { usePrismTheme } from '@utils/providers/prism-theme'; -import { useRouter } from 'next/router'; -import Prism from 'prismjs'; -import { useCallback, useEffect, useMemo } from 'react'; -import { useIntl } from 'react-intl'; - -const CodeBlock = ({ - code, - language, - plugins, -}: { - code: string; - language: PrismLanguages; - plugins: PrismPlugins[]; -}) => { - const intl = useIntl(); - const router = useRouter(); - const { setCodeBlocks } = usePrismTheme(); - - useEffect(() => { - const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll( - 'pre[data-prismjs-color-scheme-current]' - ); - setCodeBlocks(allPre); - }, [setCodeBlocks, router.asPath]); - - const defaultPlugins: PrismDefaultPlugins[] = useMemo( - () => [ - 'autoloader', - 'toolbar', - 'show-language', - 'copy-to-clipboard', - 'color-scheme', - 'match-braces', - 'normalize-whitespace', - ], - [] - ); - - const loadPrismPlugins = useCallback( - async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => { - for (const plugin of prismPlugins) { - try { - if (plugin === 'color-scheme') { - await import(`@utils/plugins/prism-${plugin}`); - } else { - await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`); - - if (plugin === 'autoloader') - Prism.plugins.autoloader.languages_path = '/prism/'; - } - } catch (error) { - console.error('CodeBlock: an error occurred with Prism.'); - console.error(error); - } - } - }, - [] - ); - - useEffect(() => { - loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => { - Prism.highlightAll(); - }); - }, [loadPrismPlugins, defaultPlugins, plugins]); - - const copyText = intl.formatMessage({ - defaultMessage: 'Copy', - description: 'Prism: copy button text (no clicked)', - id: '/ly3AC', - }); - const copiedText = intl.formatMessage({ - defaultMessage: 'Copied!', - description: 'Prism: copy button text (clicked)', - id: 'OV9r1K', - }); - const errorText = intl.formatMessage({ - defaultMessage: 'Use Ctrl+c to copy', - description: 'Prism: error text', - id: 'z9qkcQ', - }); - const darkTheme = intl.formatMessage({ - defaultMessage: 'Dark Theme 🌙', - description: 'Prism: toggle dark theme button text', - id: 'nFMdWI', - }); - const lightTheme = intl.formatMessage({ - defaultMessage: 'Light Theme 🌞', - description: 'Prism: toggle light theme button text', - id: 'Ua2g2p', - }); - - const defaultPluginsClasses = 'match-braces'; - const pluginsClasses = plugins.join(' '); - - return ( - <pre - className={`language-${language} ${defaultPluginsClasses} ${pluginsClasses}`} - data-prismjs-copy={copyText} - data-prismjs-copy-success={copiedText} - data-prismjs-copy-error={errorText} - data-prismjs-color-scheme-dark={darkTheme} - data-prismjs-color-scheme-light={lightTheme} - > - <code className={`language-${language}`}>{code}</code> - </pre> - ); -}; - -export default CodeBlock; diff --git a/src/components/MDX/Gallery/Gallery.module.scss b/src/components/MDX/Gallery/Gallery.module.scss deleted file mode 100644 index 2654b59..0000000 --- a/src/components/MDX/Gallery/Gallery.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.wrapper { - @extend %reset-list; - - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: var(--spacing-sm); - max-width: 100%; - margin: var(--spacing-sm) 0; - - @for $i from 0 to 6 { - &--#{$i}-columns { - @include mix.media("screen") { - @include mix.dimensions("xs") { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - @include mix.dimensions("sm") { - grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); - } - } - } - } -} - -.item { - > figure { - margin: 0; - } -} diff --git a/src/components/MDX/Gallery/Gallery.tsx b/src/components/MDX/Gallery/Gallery.tsx deleted file mode 100644 index 561ec53..0000000 --- a/src/components/MDX/Gallery/Gallery.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Children, ReactElement } from 'react'; -import styles from './Gallery.module.scss'; - -const Gallery = ({ - children, - columns = 2, -}: { - children: ReactElement; - columns: number; -}) => { - const columnClass = styles[`wrapper--${columns}-columns`]; - - return ( - <ul className={`${styles.wrapper} ${columnClass}`}> - {Children.map(children, (child) => { - return <li className={styles.item}>{child}</li>; - })} - </ul> - ); -}; - -export default Gallery; diff --git a/src/components/MDX/Link/Link.tsx b/src/components/MDX/Link/Link.tsx deleted file mode 100644 index 40e773b..0000000 --- a/src/components/MDX/Link/Link.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ReactChildren } from 'react'; - -const Link = ({ - children, - target, - isExternal = false, - lang, -}: { - children: ReactChildren; - target: string; - isExternal: boolean; - lang?: string; -}) => { - const className = isExternal ? 'external' : ''; - - return ( - <a href={target} className={className} hrefLang={lang}> - {children} - </a> - ); -}; - -export default Link; diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss deleted file mode 100644 index cf2b77f..0000000 --- a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.wrapper { - width: 100%; - max-width: 100%; - margin: var(--spacing-sm) auto; - position: relative; - text-align: center; -} - -.caption { - margin: 0; - padding: fun.convert-px(4) var(--spacing-2xs); - background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border); - box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light); - font-weight: 500; -} - -.link { - display: flex; - flex-flow: column; - background: none; - text-decoration: none; - - .caption { - color: var(--color-primary-darker); - } - - &:hover, - &:focus { - transform: scale(1.1); - } - - &:focus { - .caption { - text-decoration: underline solid var(--color-primary-darker) - fun.convert-px(3); - } - } - - &:active { - transform: scale(0.9); - - .caption { - text-decoration: none; - } - } -} diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx deleted file mode 100644 index 6c39e7f..0000000 --- a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { ResponsiveImageProps } from '@ts/types/app'; -import Image from 'next/image'; -import Link from 'next/link'; -import styles from './ResponsiveImage.module.scss'; - -const ResponsiveImage = (props: ResponsiveImageProps) => { - const { caption, linkTarget, ...attributes } = props; - - return ( - <figure className={styles.wrapper}> - {linkTarget ? ( - <Link href={linkTarget}> - <a className={styles.link}> - <Image - alt={attributes.alt} - layout={attributes.layout || 'intrinsic'} - {...attributes} - /> - {caption && ( - <figcaption className={styles.caption}>{caption}</figcaption> - )} - </a> - </Link> - ) : ( - <> - <Image - alt={attributes.alt} - layout={attributes.layout || 'intrinsic'} - {...attributes} - /> - {caption && ( - <figcaption className={styles.caption}>{caption}</figcaption> - )} - </> - )} - </figure> - ); -}; - -export default ResponsiveImage; diff --git a/src/components/MDX/index.tsx b/src/components/MDX/index.tsx deleted file mode 100644 index bc7aa35..0000000 --- a/src/components/MDX/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import CodeBlock from './CodeBlock/CodeBlock'; -import Gallery from './Gallery/Gallery'; -import Link from './Link/Link'; -import ResponsiveImage from './ResponsiveImage/ResponsiveImage'; - -export { CodeBlock, Gallery, Link, ResponsiveImage }; |
