Implement and use citation component and shorthand.

content/material/Codierung/01-Schmetterling-und-Taucherglocke.mdx

@@ -14,7 +14,9 @@ Bauby beschrieb sich in dieser schweren Zeit als geistig aktiv und frei wie ein
 > «Das Verfahren ist ziemlich rudimentär. Man buchstabiert mir das ABC in der ESA-Version, bis ich meinen Gesprächspartner mit einem Blinzeln bei dem Buchstaben anhalte, den er sich notieren soll.\
 > So geht es mit den folgenden Buchstaben weiter, und wenn kein Fehler passiert, erhält man ziemlich schnell ein ganzes Wort, dann mehr oder weniger verständliche Satzteile.»
 >
-> — Bauby: _Schmetterling und Taucherglocke_, S. 22 f.[^1]
+> :::Cite
+> Bauby: _Schmetterling und Taucherglocke_, S. 22 f.[^1]
+> :::
 
 Bauby diktierte seine Worte also Buchstabe für Buchstabe. Sein Gegenüber sagt dazu für jeden Buchstaben so lange das Alphabet auf, bis er blinzelt, um den zuletzt genannten Buchstaben "auszuwählen".
 
@@ -45,7 +47,9 @@ Selbstverständlich funktioniert das nicht immer gleich gut. Bei einigen Worten
 Leider verstarb Jean-Dominique Bauby am 6. März 1997, nur drei Tage nach der Veröffentlichung von _Schmetterling und Taucherglocke_, an einer Lungenentzündung[^3]. Welche Bedeutung dieses Buchstabierverfahren bis dahin für ihn hatte, soll abschliessend folgende Textstelle zeigen:
 > «So kann man den Trost ermessen, den es für mich bedeutet, wenn Sandrine _[die Logopädin, die das Verfahren fliessend beherrscht]_ zweimal am Tag an die Tür klopft, mit einem Schnütchen wie ein ertapptes Eichhörnchen hereinschaut und auf einen Schlag alle bösen Geister vertreibt. Die unsichtbare Taucherglocke, die mich ständig umschließt, erscheint dann weniger bedrückend.
 >
-> — Bauby: _Schmetterling und Taucherglocke_, S. 42[^4]
+> :::Cite
+> Bauby: _Schmetterling und Taucherglocke_, S. 42[^4]
+> :::
 
 [^1]: Bauby, J.-D. _Schmetterling und Taucherglocke._ München: dtv, 2023, S. 22 f.
 [^2]: Quelle: [sttmedia.com](https://www.sttmedia.com/characterfrequency-french)

content/material/Components-Gallery/00-Markdown-Features.mdx

@@ -38,7 +38,9 @@ A code block with line numbers and a highlighted section:
 > Thou dost snore distinctly.\
 > There’s meaning in thy snores.
 >
-> — Shakespeare, William. _The Tempest_. 2.1.244-245.
+> :::Cite
+> Shakespeare, William. _The Tempest_. 2.1.244-245.
+> :::
 
 ## Footnotes
 Footnotes[^1] are a great[^2] way to move additional information to the bottom of the page.[^5]

src/app/components/Citation/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+export interface Props {
+  children?: React.ReactNode;
+}
+
+export default ({children}: Props) => {
+  return (
+    <span className={styles.citation}>— { children }</span>
+  )
+}

src/app/components/Citation/styles.module.scss

@@ -0,0 +1,6 @@
+.citation {
+  display: inline-block;
+  width: 100%;
+  text-align: right;
+  font-size: 0.9em;
+}

src/framework/plugin-configs/remark-container-directives/Cite.ts

@@ -0,0 +1,38 @@
+import {
+  ContainerDirectiveDeclaration,
+  ContainerDirectiveTransformerProps
+} from "../../plugins/remark-container-directives/model";
+import {Optional} from "../../util/optional";
+import {jsxFlowElementFrom} from "../../plugins/shared/util/jsx-node-util";
+import {ImportType} from "../../plugins/shared/models";
+import {Node, Parent} from "unist";
+import {Log} from "../../util/log";
+
+interface Props extends ContainerDirectiveTransformerProps {}
+
+function flattenUniqueChildParagraph(directiveChildren: Node[]): Node[] {
+  if (directiveChildren.length !== 1) {
+    Log.instance.warn(`Expected exactly 1 child in Cite directive, found ${directiveChildren.length}`);
+    return [];
+  }
+
+  const child = directiveChildren[0];
+  if (child.type !== 'paragraph') {
+    Log.instance.warn(`Expected unique child in Cite directive to be of type paragraph, was ${child.type}`);
+    return [];
+  }
+
+  return (child as Parent).children;
+}
+
+export default {
+  name: 'Cite',
+  transform: ({children}: Props) => Optional.of(jsxFlowElementFrom({
+    componentName: 'Citation',
+    attributes: []
+  }, flattenUniqueChildParagraph(children))),
+  esmImports: [{
+    sourcePackage: '@site/src/app/components/Citation',
+    specifiers: [{type: ImportType.DEFAULT_IMPORT, name: 'Citation'}],
+  }]
+} as ContainerDirectiveDeclaration

src/framework/plugin-configs/remark-container-directives/plugin-config.ts

@@ -4,6 +4,7 @@ import Hero from "./Hero";
 import Caption from "./Caption";
 import tabs from "./tabs";
 import tiles from "./tiles";
+import Cite from "./Cite";
 
 export const remarkContainerDirectivesConfig: ContainerDirectivesConfig = {
   declarations: [
@@ -12,5 +13,6 @@ export const remarkContainerDirectivesConfig: ContainerDirectivesConfig = {
     ...tiles,
     Hero,
     Caption,
+    Cite,
   ]
 }