diff --git a/src/components/Pullquote.tsx b/src/components/Pullquote.tsx new file mode 100644 index 0000000..6503dda --- /dev/null +++ b/src/components/Pullquote.tsx @@ -0,0 +1,46 @@ +import cx from 'classnames'; + +import type { ComponentChild, FunctionalComponent, JSX } from 'preact'; + +import { TextLink } from '.'; + +interface Props extends JSX.HTMLAttributes { + author?: string; + children: ComponentChild; + class?: string; + lang?: string; + source?: string; + sourceUrl?: string; +} + +export const Pullquote: FunctionalComponent = ({ + author, + children, + class: className, + lang = 'en', + source, + sourceUrl, + ...props +}) => { + const classes = cx('pullquote p-9 text-center', className); + + return ( +
+ {children} + {(author || source) && ( + + )} +
+ ); +}; diff --git a/src/components/index.ts b/src/components/index.ts index 9d18264..ff6e739 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -16,6 +16,7 @@ export * from './OdyseeVideo'; export * from './OrderedList'; export * from './PrimeVideoFlag'; export * from './ProjectIntro'; +export * from './Pullquote'; export * from './Subheadline'; export * from './Subsubheadline'; export * from './Tag'; diff --git a/src/mdx-components.ts b/src/mdx-components.ts index 39aedcd..39fd160 100644 --- a/src/mdx-components.ts +++ b/src/mdx-components.ts @@ -21,6 +21,7 @@ import { OrderedList, PrimeVideoFlag, ProjectIntro, + Pullquote, Subheadline, Subsubheadline, Text, @@ -59,6 +60,7 @@ export const mapping = { p: Text, PrimeVideoFlag, ProjectIntro, + Pullquote, ThemeBox, ul: UnorderedList, Verse, diff --git a/src/styles/global.css b/src/styles/global.css index 1348b83..ae2f1ce 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -67,6 +67,20 @@ quotes: '“' '”' '‘' '’'; } + [lang|='de'] blockquote, + blockquote[lang|='de'], + [lang|='de'] q, + q[lang|='de'] { + quotes: '»' '«' '›' '‹'; + } + + [lang|='ja'] blockquote, + blockquote[lang|='ja'], + [lang|='ja'] q, + q[lang|='ja'] { + quotes: '「' '」' '『' '』'; + } + /** Inline Quotes */ q { @apply italic; @@ -80,6 +94,33 @@ } } + /** Pullquote */ + .pullquote { + &::before { + @apply hidden; + } + + & p { + @apply m-0 text-4 font-extrabold leading-none; + } + + & p:first-child::before { + @apply font-normal content-[open-quote]; + } + + & p:nth-of-type(1):first-letter { + @apply -mis-[0.4em]; + } + + & p:nth-last-of-type(1)::after { + @apply font-normal content-[close-quote]; + } + } + + .pullquote[lang|='ja'] { + @apply font-normal; + } + /** Cite */ cite { @apply pie-[0.1em];