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.

6 files changed, 71 insertions, 19 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7b7f22b..cfb045e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import '../styles/defaults.scss';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import 'highlight.js/styles/github.css';
+import '../components/Markdown/markdown.scss';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -21,4 +22,4 @@ function MyApp({ Component, pageProps }: AppProps) {
     );
 }
 
-export default MyApp;
\ No newline at end of file
+export default MyApp;
diff --git a/pages/greeting.md b/pages/greeting.md
index 45514a0..eb7a399 100644
--- a/pages/greeting.md
+++ b/pages/greeting.md
@@ -1,13 +1,21 @@
 ## Hello,
 
-You’ve happened upon my homepage. I’m a student, developer, and engi-nerd pursuing a degree in computer engineering at Texas A&M University.
+You've happened upon my homepage. I'm a software developer, engi-nerd, and a recent graduate of computer engineering at Texas A&M University.
+I've worked on a wide range of computational projects across a number of subject areas: robotics, bioinformatics, computer security, networking,
+deep learning, and computer systems. Engineering projects define my life, and fill much of my waking attention.  I've founded and led two robotics teams,
+built a SLAM system for autonomous driving, worked as an undergraduate teaching assistant for a datastructures and algorithms course, built genome analysis
+toolkits, and have written code in high-performance routers. Much of my code lives in production systems. I'm also passionate about open-source and often flit
+around the internet contributing to open-source projects. Recently, I found and reported a buffer overrun in a Linux kernel driver and added zsh autocomplete
+support to Python's `argcomplete` module.
 
 - [The Logs](/logs)
-- [Public Git Projects](https://www.git.flu0r1ne.net)
+- [Public Git Projects](https://www.git.al.exander.io)
 - My PGP keys
     + [Ascii Armored](/flu0r1ne.asc)
     + [Binary](/flu0r1ne.pub)
 
+I've a privacy-enthusiast and go by my first name, Alex, or my legacy handle `flu0r1ne`.
+
 Best,
 
-\- Alex < flur01ne [at] flu0r1ne.net >
+\- Alex < alex [at] al.exander.io >
diff --git a/pages/index.tsx b/pages/index.tsx
index 8201dbf..9390157 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,13 +1,54 @@
 import MarkdownPage from '../templates/MarkdownPage';
+
+import Typ from '../components/Typ';
+import ViewPort from '../components/ViewPort';
+import Link from '../components/Link';
+import Code from '../components/Code';
+
 // @ts-ignore
 import md from './greeting.md';
 
+import { List, ListItem } from '../components/List';
+import { DISPLAY_DOMAIN } from '../utils/env';
+
+
 export default function Home() {
+
+  const gitLink = 'https://git.' + DISPLAY_DOMAIN;
+
+  let email : string;
+
+  switch(DISPLAY_DOMAIN) {
+    case "flu0r1ne.net":
+      email = "flu0r1ne [at] flu0r1ne.net";
+      break;
+    case "al.exander.io":
+      email = "alex [at] al.exander.io";
+      break;
+    default:
+      throw Error("Display domain not recognized");
+  }
+
   return (
     <>
-      <MarkdownPage
-        md={md}
-      />
+      <ViewPort size='md' mt={3} >
+        <Typ variant="h2" gutter>Hello,</Typ>
+        <Typ>Welcome to my homepage. I'm a software developer, engi-nerd, and a recent graduate in Computer Engineering at Texas A&M University. I've worked on a wide range of computational projects across a number of subject areas: robotics, bioinformatics, computer security, networking, deep learning, and computer systems. Engineering projects define my life, and fill much of my waking attention.  I've founded and led two robotics teams, built a SLAM system for autonomous driving, worked as an undergraduate teaching assistant for a Data Structures and Algorithms course, created genome analysis toolkits, and have contributed code to high-performance routers. I'm also passionate about open-source and often flit around the internet contributing to open-source projects. Recently, I found and reported a buffer overrun in an in-tree Linux kernel driver and added zsh auto complete support to the popular <Code>argcomplete</Code> module for Python.</Typ>
+        <List mt={1} mb={1} variant="unordered">
+          <ListItem><Link href="/logs">The Logs</Link></ListItem>
+          <ListItem><Link href={gitLink}>Public Git Projects</Link></ListItem>
+          <ListItem>
+            My PGP keys
+            <List variant="unordered">
+              <ListItem><Link href="/flur01ne.asc">Ascii Armored</Link></ListItem>
+              <ListItem><Link href="/flur01ne.pub">Binary</Link></ListItem>
+            </List>
+          </ListItem>
+        </List>
+        <Typ style={{ marginBottom: '0.5rem' }}>I'm a privacy enthusiast and go by my first name, Alex, or my legacy online handle, <Code>flu0r1ne</Code>.</Typ>
+        <Typ gutter>Best,</Typ>
+        <Typ>- Alex {"< " + email + " >"}</Typ>
+      </ViewPort>
     </>
-  )
+  );
 }
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
diff --git a/pages/wg2nd/index.tsx b/pages/wg2nd/index.tsx
index 3f38a12..a189f6d 100644
--- a/pages/wg2nd/index.tsx
+++ b/pages/wg2nd/index.tsx
@@ -7,7 +7,7 @@ import TextArea from '../../components/TextArea';
 import Input from '../../components/Input';
 import Button from '../../components/Button';
 import Markdown from '../../components/Markdown';
-import Typography from '../../components/Typography';
+import Typ from '../../components/Typ';
 
 import PathCrumbs from "../../components/PathCrumbs";
 
@@ -142,10 +142,10 @@ const Wg2nd = () => {
 
       {/* Input Panel */}
       <Panel>
-        <Typography variant="h3">WireGuard Configuration</Typography>
+        <Typ variant="h3">WireGuard Configuration</Typ>
         <Box my={1}>
           <label htmlFor="wg_config_intf_name">
-            <Typography variant="h4" gutter>Interface Name</Typography>
+            <Typ variant="h4" gutter>Interface Name</Typ>
           </label>
           <Input
             ref={intfNameRef}
@@ -156,7 +156,7 @@ const Wg2nd = () => {
         </Box>
         <Box my={1}>
           <label htmlFor="wg_config_conf">
-            <Typography variant="h4" gutter>Interface Configuration</Typography>
+            <Typ variant="h4" gutter>Interface Configuration</Typ>
           </label>
           <TextArea
             ref={intfConfigRef}
@@ -179,7 +179,7 @@ const Wg2nd = () => {
       {/* Output Panel */}
       <Panel>
         <label htmlFor="nd_config_cmds">
-          <Typography variant="h3">Networkd Configuration</Typography>
+          <Typ variant="h3">Networkd Configuration</Typ>
         </label>
         <Box my={1}>
           <div ref={parentDebounceDiv} >