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.

2 files changed, 93 insertions, 0 deletions

diff --git a/components/List/index.tsx b/components/List/index.tsx
new file mode 100644
index 0000000..ae5c190
--- /dev/null
+++ b/components/List/index.tsx
@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { getSystemStyle, SystemProps } from '../utils/systemProps';
+import clsx from 'clsx';
+
+interface ListProps extends SystemProps {
+  style?: React.CSSProperties;
+  variant : 'ordered' | 'unordered';
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const List : FC<ListProps> = ({ style, className, variant, children, ...props }) => {
+
+  const systemStyle = getSystemStyle(props, style);
+
+  const Tag = {
+    'ordered': 'ol',
+    'unordered': 'ul'
+  }[variant] as keyof React.ReactHTML;
+
+  const styleClass = 'md-' + Tag;
+
+  return (
+    <Tag
+      className={clsx(styleClass, 'md-list', className)}
+      children={children}
+      style={systemStyle}
+    />
+  );
+};
+
+interface ListItemProps extends SystemProps {
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const ListItem : FC<ListItemProps> = ({ style, className, children, ...props }) => {
+  const systemStyle = getSystemStyle(props, style);
+
+  return (
+    <li
+      className={clsx('md-li', className)}
+      style={systemStyle}
+    >{children}</li>
+  );
+}
+
+export {
+  List,
+  ListItem
+};
diff --git a/components/List/list.module.scss b/components/List/list.module.scss
new file mode 100644
index 0000000..87ec3a3
--- /dev/null
+++ b/components/List/list.module.scss
@@ -0,0 +1,41 @@
+.list-li {
+	font-size: 1rem;
+	letter-spacing: 0.00938em;
+
+	line-height: 1.4;
+	margin-left: 1em;
+
+	list-style-image: none;
+	list-style-position: inside;
+	list-style-type: none;
+
+	box-sizing: border-box;
+
+	font-size: 1rem;
+}
+
+.list-unordered li:not(:first-child) {
+	margin-top: 0.15rem;
+}
+
+.list {
+	.list li:first-child {
+		margin-top: 0.15rem !important;
+	}
+}
+
+.list-unordered li {
+	list-style-type: disc;
+}
+
+.list .list-unordered li {
+	list-style-type: circle;
+}
+
+.list .list .list-unordered li {
+	list-style-type: square;
+}
+
+.list-ordered li {
+	list-style-type: decimal;
+}