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, 34 insertions, 0 deletions

diff --git a/components/Link/index.tsx b/components/Link/index.tsx
new file mode 100644
index 0000000..e6477c2
--- /dev/null
+++ b/components/Link/index.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import NextLink from 'next/link';
+import styles from './link.module.scss';
+import clsx from 'clsx';
+
+interface LinkProps {
+  href: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const Link: React.FC<LinkProps> = ({ href, className, children }) => {
+  return (
+    <NextLink
+      href={href}
+      className={clsx('md-a', className)}
+    >
+      {children}
+    </NextLink>
+  );
+};
+
+export default Link;
diff --git a/components/Link/link.module.scss b/components/Link/link.module.scss
new file mode 100644
index 0000000..b6ef943
--- /dev/null
+++ b/components/Link/link.module.scss
@@ -0,0 +1,11 @@
+.link {
+	text-decoration: none;
+}
+
+.link:hover {
+	text-decoration: underline;
+}
+
+.link, .link:visited, .link:active, .link:hover {
+	color: #0716ea;
+}