feat: add Pullquote component

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<HTMLQuoteElement> {
+	author?: string;
+	children: ComponentChild;
+	class?: string;
+	lang?: string;
+	source?: string;
+	sourceUrl?: string;
+}
+
+export const Pullquote: FunctionalComponent<Props> = ({
+	author,
+	children,
+	class: className,
+	lang = 'en',
+	source,
+	sourceUrl,
+	...props
+}) => {
+	const classes = cx('pullquote p-9 text-center', className);
+
+	return (
+		<blockquote lang={lang} class={classes} {...props}>
+			{children}
+			{(author || source) && (
+				<footer class="text-2 font-normal opacity-60 mbs-6">
+					{author && <b class="font-normal">{author}</b>}
+					{author && source && ', '}
+					{source &&
+						(sourceUrl ? (
+							<cite>
+								<TextLink href={sourceUrl}>{source}</TextLink>
+							</cite>
+						) : (
+							<cite>{source}</cite>
+						))}
+				</footer>
+			)}
+		</blockquote>
+	);
+};

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';

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,

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];