From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Thu, 7 Sep 2023 21:28:37 -0500
Subject: Scoped global styling to all markdown
Make React compatible with markdown-style HTML by added components
with identical styling to markdown. This is done while CSS scoping
is maintained. Additional style is loaded through the markdown loader
by injecting default-styling tags into the components. This allows
default-margin to be added to these elements in addition to the styling
found in the React elements. The homepage reflects the domain, as defined
by an environmental variable.
---
components/Typ/index.tsx | 47 +++++++++++++++++++++++++++++++++++++++++
components/Typ/typo.module.scss | 3 +++
2 files changed, 50 insertions(+)
create mode 100644 components/Typ/index.tsx
create mode 100644 components/Typ/typo.module.scss
(limited to 'components/Typ')
diff --git a/components/Typ/index.tsx b/components/Typ/index.tsx
new file mode 100644
index 0000000..43d7673
--- /dev/null
+++ b/components/Typ/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './typo.module.scss';
+import clsx from 'clsx';
+
+
+type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body';
+type Align = 'inherit' | 'left' | 'center' | 'right';
+
+interface TypProps extends React.HTMLAttributes<HTMLElement> {
+ variant?: Variant;
+ align?: Align;
+ gutter?: boolean;
+}
+
+const variantTagMap: Record<Variant, keyof JSX.IntrinsicElements> = {
+ h1: 'h1',
+ h2: 'h2',
+ h3: 'h3',
+ h4: 'h4',
+ h5: 'h5',
+ h6: 'h6',
+ body: 'p'
+};
+
+const Typ: React.FC<TypProps> = ({
+ variant = 'body',
+ align = 'inherit',
+ gutter = false,
+ className,
+ ...props
+}) => {
+ const Tag = variantTagMap[variant] as keyof React.ReactHTML;
+
+ const typographyClassName = clsx(
+ `md-${variantTagMap[variant]}`,
+ {
+ [`align-${align}`]: align !== 'inherit',
+ [styles['typo-gutter']]: gutter
+ },
+ className
+ );
+
+ return <Tag className={typographyClassName} {...props} />;
+};
+
+export default Typ;
+
diff --git a/components/Typ/typo.module.scss b/components/Typ/typo.module.scss
new file mode 100644
index 0000000..48a5b10
--- /dev/null
+++ b/components/Typ/typo.module.scss
@@ -0,0 +1,3 @@
+.typo-gutter {
+ margin-bottom: 0.35em;
+}
--
cgit v1.2.3