HandwrittenText component

locales/en/common.yml

@@ -1,6 +1,5 @@
 title: >
     **AiAi**
-
 # @see https://sharegpt.com/c/Gsmaslg
 description: >
     Our team is at the forefront of the AI consulting revolution,

src/components/HandwrittenText/HandwrittenText.module.css

@@ -0,0 +1,37 @@
+.HandwrittenText {
+    /*/
+    outline: 1px dotted green;
+    /**/
+
+    height: 1em;
+
+    display: grid;
+    justify-content: center;
+    align-items: start;
+    grid-template: '🟦';
+}
+
+.HandwrittenText img.primaryImage {
+    /*/
+    outline: 1px dotted green;
+    /**/
+
+    grid-area: 🟦;
+
+    object-fit: 'cover';
+    width: 100%;
+    height: 1em;
+}
+
+.HandwrittenText span.textFallback {
+    /*/
+    outline: 1px dotted green;
+    /**/
+
+    grid-area: 🟦;
+    color: rgba(0, 0, 0, 0%);
+
+    height: 1em;
+    transform: translate(0, 0.2em);
+    white-space: nowrap;
+}

src/components/HandwrittenText/HandwrittenText.tsx

@@ -0,0 +1,33 @@
+import { Passions_Conflict } from '@next/font/google';
+import Image from 'next/image';
+import aiai from '../../../public/handwritten/aiai/aiai.svg';
+import { classNames } from '../../utils/classNames';
+import styles from './HandwrittenText.module.css';
+
+interface HandwrittenTextProps {
+    children: string /* <- TODO: [🎎] Allow to have there full JSX children */;
+}
+
+const passionsConflictFont = Passions_Conflict({ weight: '400', style: 'normal', subsets: ['latin', 'latin-ext'] });
+
+/**
+ * @@@
+ */
+export function HandwrittenText(props: HandwrittenTextProps) {
+    const { children } = props;
+    return (
+        <div className={styles.HandwrittenText}>
+            <Image
+                className={styles.primaryImage}
+                alt={children}
+                src={aiai}
+                draggable="false"
+                placeholder="empty" /* <- TODO: Blur */
+            />
+            <span className={classNames(passionsConflictFont.className, styles.textFallback)}>{children}</span>
+        </div>
+    );
+}
+
+// TODO: !!! Integrate https://www.calligrapher.ai/ on frontend (or at least at backend)
+// TODO: [🎎] alt={removeMarkdownFormatting(removeMarkdownLinks(

src/sections/10-Welcome/Welcome.module.css

@@ -3,11 +3,5 @@
 }
 
 .handritten {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.handritten img {
-    height: 120px;
+    font-size: 20px;
 }

src/sections/10-Welcome/Welcome.tsx

@@ -1,11 +1,8 @@
-import { Passions_Conflict } from '@next/font/google';
 import { useTranslation } from 'next-i18next';
-import Image from 'next/image';
 import Link from 'next/link';
-import aiai from '../../../public/handwritten/aiai/aiai.svg';
 import { Article } from '../../components/Article/Article';
+import { HandwrittenText } from '../../components/HandwrittenText/HandwrittenText';
 import { Section } from '../../components/Section/Section';
-import { classNames } from '../../utils/classNames';
 import { removeMarkdownFormatting } from '../../utils/content/removeMarkdownFormatting';
 import { removeMarkdownLinks } from '../../utils/content/removeMarkdownLinks';
 import styles from './Welcome.module.css';
@@ -14,24 +11,24 @@ interface WelcomeProps {
     variant: 'HOMEPAGE' | 'SIDEPAGE' | 'PAVOLHEJNY';
 }
 
-const passionsConflictFont = Passions_Conflict({ weight: '400', style: 'normal', subsets: ['latin', 'latin-ext'] });
-
 export function WelcomeSection(props: WelcomeProps) {
     const { variant } = props;
 
     const { t, i18n } = useTranslation();
 
+    const header = (
+        <h1 className={styles.handritten}>
+            <HandwrittenText>
+                {removeMarkdownFormatting(removeMarkdownLinks(t('title')))}
+                {/* <- TODO: [🎎] Allow to have there full JSX with formatting like <Article content={t('title')} isEnhanced /> OR pass as markdown*/}
+            </HandwrittenText>
+        </h1>
+    );
+
     return (
         <Section id="Welcome" className={styles.WelcomeSection}>
-            <Link href="/">
-                <h1 className={classNames(passionsConflictFont.className, styles.handritten)}>
-                    {/* TODO: !!! Integrate https://www.calligrapher.ai/ on frontend (or at least at backend)  */}
-                    {/* TODO: !!! One component */}
-                    <Image alt={removeMarkdownFormatting(removeMarkdownLinks(t('title') || ''))} src={aiai} />
-                    {/* <Article content={t('title')} isEnhanced /> */}
-                </h1>
-                {/* <- TODO: !!! This should be handwritten */}
-            </Link>
+            {variant === 'HOMEPAGE' && header}
+            {variant === 'SIDEPAGE' && <Link href="/">{header}</Link>}
 
             {variant === 'HOMEPAGE' && <Article content={t('Welcome.content')} isEnhanced />}