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.

1 files changed, 19 insertions, 14 deletions

diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx
index 29191a1..08b4c7e 100644
--- a/components/ViewPort/index.tsx
+++ b/components/ViewPort/index.tsx
@@ -1,24 +1,29 @@
 import React, { FC } from "react"
 import styles from './index.module.scss';
+import { getSystemStyle, SystemProps } from '../utils/systemProps';
 import clsx from 'clsx';
 
-export type Props = {
-    size?: "sm" | "md" | "lg";
-    className?: string;
-    children?: React.ReactNode;
+interface Props extends SystemProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
 };
 
-const Viewport : FC<Props> = ({children, className, size}) => {
-    const _size : string = size || "md";
-    const sizeClass : string = styles['viewport-' + _size];
+const Viewport : FC<Props> = ({children, className, style, size, ...systemProps}) => {
+  style = getSystemStyle(systemProps, style);
 
-    return (
-        <div
-            className={clsx(sizeClass, className)}
-        >
-            {children}
-        </div>
-    )
+  const _size : string = size || "md";
+  const sizeClass : string = styles['viewport-' + _size];
+
+  return (
+    <div
+        className={clsx(sizeClass, className)}
+        style={style}
+    >
+      {children}
+    </div>
+  )
 };
 
 export default Viewport;