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/Box/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'components/Box')

diff --git a/components/Box/index.tsx b/components/Box/index.tsx
index 32866b2..f81fa5b 100644
--- a/components/Box/index.tsx
+++ b/components/Box/index.tsx
@@ -3,15 +3,23 @@ import { getSystemStyle, SystemProps } from '../utils/systemProps';
 interface BoxProps extends SystemProps {
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  el?: keyof React.ReactHTML;
 };
 
-const Box: React.FC<BoxProps> = ({ style, children, ...props}) => {
+const Box: React.FC<BoxProps> = ({ el, style, children, ...props}) => {
   const systemStyle = getSystemStyle(props, style);
 
+  let Tag = el;
+
+  if(!el) {
+    Tag = 'div' as keyof React.ReactHTML;
+  }
+
   return (
-    <div style={systemStyle}>
+    // @ts-ignore
+    <Tag style={systemStyle}>
       { children }
-    </div>
+    </Tag>
   );
 };
 
-- 
cgit v1.2.3