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, 8 insertions, 6 deletions

diff --git a/pages/logs/index.tsx b/pages/logs/index.tsx
index 358dff7..af227e9 100644
--- a/pages/logs/index.tsx
+++ b/pages/logs/index.tsx
@@ -5,6 +5,10 @@ import styles from './index.module.scss';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import React, { FC } from 'react';
 import { getPosts, Post } from '../../utils/Posts';
+
+import Link from '../../components/Link';
+import { List, ListItem } from '../../components/List';
+
 // @ts-ignore
 import md from './logs.md';
 
@@ -13,7 +17,6 @@ interface Props {
 };
 
 const Logs : FC<Props> = ({ posts }) => {
-  
 
   return(
     <DefaultPage
@@ -21,13 +24,13 @@ const Logs : FC<Props> = ({ posts }) => {
     >
       <>
         <Markdown md={md} />
-        <ul className={styles.logList}>
+        <List variant="unordered">
         {
           posts.map(({ directory, meta }) => (
-            <li key={directory}><a href={'/logs/' + directory}>{meta.name}</a></li>
+            <ListItem key={directory}><Link href={'/logs/' + directory}>{meta.name}</Link></ListItem>
           ))
         }
-        </ul>
+        </List>
       </>
     </DefaultPage>
   );
diff --git a/pages/logs/logs.md b/pages/logs/logs.md
index c177646..c8bf543 100644
--- a/pages/logs/logs.md
+++ b/pages/logs/logs.md
@@ -1,4 +1,3 @@
 ## The Logs
 
-Eclectic thoughts, miscellany, and discursive drivel
-
+Eclectic thoughts and miscellany