From 9747cd809d8b4151b0e9f4ea1ca72f713792e6d8 Mon Sep 17 00:00:00 2001
From: Paul <lambdapaul@protonmail.com>
Date: Sat, 30 Apr 2022 09:56:18 -0400
Subject: [PATCH] UI enhancements

---
 README.md               | 19 +--------------
 components/title.tsx    |  9 +++++---
 pages/notes/[page].tsx  | 32 +++++++++++++++-----------
 pages/notes/index.tsx   | 16 +++++++------
 pages/posts/index.tsx   | 51 +++++++++++++++++++++++++----------------
 styles/global.css       | 33 +++++++++++---------------
 styles/lists.module.css |  5 ++--
 styles/post.module.css  |  2 ++
 styles/title.module.css |  7 +++++-
 9 files changed, 90 insertions(+), 84 deletions(-)

diff --git a/README.md b/README.md
index 29b0d27..b08a286 100644
--- a/README.md
+++ b/README.md
@@ -2,21 +2,4 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/8128893c-9426-4869-9858-731f3abc96c3/deploy-status)](https://app.netlify.com/sites/lambdapaul/deploys)
 
-## Design Rationale Draft
-
-This is a draft of the rationale behind writing pages the way I have. I do not like the traditional web conventions so this is where I experiment the most with interfacing elements. The navigation pane-based design works when they are simple and easy to understand. When they get too complex, people rely on using search bars to get where they want. My goal is to find a method to eliminate the visual noise of the complex navigation panes and find a reasonable alternative them while being easy to use. 
-
-### Page Categorization
-The home page or the index page solely acts as a gateway to all the other pages on the site.
-The accessible pages are categorized on a need-based system. Since I currently do not have multiple pages, I have them all under a single directory.
-
-### Design Principles
-The goal of my home page's design is to keep this minimal. There is no need for unnecessary content to waste people's time. The rule is simple: only waste one's time if they willingly do so.
-
-Modern webpages tend to be bulky. This entire site should retain the modern design while being as minimal and static as possible.
-- minimal: a page should not overly rely on programming logic unless the focus is programming logic
-- static: informational pages should not be dynamically changing as the focus is on the content itself
-
-#### Design Problems
-A new user would never understand how this site works.
-My ideal navigation system would involve having as few navigation elements as possible. This is the reason why I chose to add solely the fuzzy-search bar. However, I have not been able to find a good way to give users of my pages a good way to interact in case they do not use the search bar. I previously used to list them all but it was not easy on the eyes and looked lazy. Maybe a command system that does not use symbols (considering touch devices do not support non-Latin character insertions easily). Maybe something similar to \*nix commands. The site somewhat vaguely follows the basic file-system structure. However, this goes against my goal of "ease-of-use" which is why I have not done it yet.
+This is a rather simple [Next.js](https://nextjs.com) website that mainly involves generating content out of a bunch of markdown files contained in `notes/` and `posts/` which contain rough, unorganized yet useful information and thought-out articles respectively. 
\ No newline at end of file
diff --git a/components/title.tsx b/components/title.tsx
index 80fb887..6688a43 100644
--- a/components/title.tsx
+++ b/components/title.tsx
@@ -27,9 +27,12 @@ function Title({ name, title, ancestors }: propsObj) {
 
     return (
         <>
-            <h1 className={style.container}>
-                {title || name}
-            </h1>
+            <div className={style.container}>
+                <h1 className={style.title}>
+                    {title || name}
+                </h1>
+            </div>
+
             <div className={`${style.nav} h1`}>
                 {name
                     ? <><Link href='/'><a>PaulW.XYZ</a></Link> / {pathElements}{name}</>
diff --git a/pages/notes/[page].tsx b/pages/notes/[page].tsx
index cfa3879..9c32ef3 100644
--- a/pages/notes/[page].tsx
+++ b/pages/notes/[page].tsx
@@ -1,8 +1,8 @@
 import Layout from '../../components/layout';
 import { getAllNotes, getNote } from '../../util/slug';
 import ReactMarkdown from 'react-markdown';
-import { Prism } from 'react-syntax-highlighter';
-import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-oceanic';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { monokaiSublime } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import remarkGfm from 'remark-gfm';
 
 function Note({ note }: any) {
@@ -10,20 +10,26 @@ function Note({ note }: any) {
         <Layout name={note.title} title={note.title} ancestors={[{ name: 'Notes', path: 'notes' }]}>
             <section className='block'>
                 <ReactMarkdown
-                    remarkPlugins={[remarkGfm]} 
+                    remarkPlugins={[remarkGfm]}
                     components={{
                         code({ node, inline, className, children, ...props }) {
                             const match = /language-(\w+)/.exec(className || '')
-                            return !inline && match ? (
-                                <Prism 
-                                    language={match[1]}
-                                    style={dark}
-                                    PreTag='div'
-                                    {...props}
-                                >{String(children).replace(/\n$/, '')}</Prism>
-                            ) : <code className={className} {...props}>
-                                {children}
-                            </code>
+                            return !inline && match
+                                ? (
+                                    <SyntaxHighlighter
+                                        showLineNumbers={true}
+                                        language={match[1]}
+                                        style={monokaiSublime}
+                                        wrapLongLines={true}
+                                        PreTag='div'
+                                        codeTagProps={{style: {display: 'block'}}}
+                                        customStyle={{padding:'0', borderRadius: '1rem', maxHeight: '400px'}}
+                                        {...props}
+                                    >{children}</SyntaxHighlighter>
+                                )
+                                : <code className={className} {...props}>
+                                    {children}
+                                </code>
                         }
                     }}
                 >{note.content}</ReactMarkdown>
diff --git a/pages/notes/index.tsx b/pages/notes/index.tsx
index 41fbc2b..596b497 100644
--- a/pages/notes/index.tsx
+++ b/pages/notes/index.tsx
@@ -5,13 +5,15 @@ import { getNotesMeta, NoteMeta } from '../../util/slug';
 function NotesPage({ notesMeta }: { notesMeta: NoteMeta[] }) {
     return (
         <Layout name='Notes'>
-            {notesMeta && notesMeta.map((note: NoteMeta, i) => {
-                return <section key={i} className='h5 block'>
-                    <Link href={`/notes/${note.slug}`}>
-                        {note.title}
-                    </Link>
-                </section>
-            })}
+            <div className='text center block'>
+                {notesMeta && notesMeta.map((note: NoteMeta, i) => {
+                    return <div key={i} className='h5'>
+                        <Link href={`/notes/${note.slug}`}>
+                            {note.title}
+                        </Link>
+                    </div>
+                })}
+            </div>
         </Layout>
     )
 }
diff --git a/pages/posts/index.tsx b/pages/posts/index.tsx
index e010a89..bd1ef3c 100644
--- a/pages/posts/index.tsx
+++ b/pages/posts/index.tsx
@@ -4,27 +4,38 @@ import date from '../../util/date';
 import { getPostsMeta, PostMeta } from '../../util/slug';
 
 function PostsPage({ postsMeta }: { postsMeta: PostMeta[] }) {
-    // todo: create a table-like user interface
-    return ( // wow this is horrible
+    return ( 
         <Layout name='Posts'>
-            <section className='h4 block'>
-                Post Name
-                <span style={{ float: 'right', margin: 'auto 1rem' }}> Created on </span>
-                <span style={{ float: 'right', margin: 'auto 1rem' }}>Last Updated </span>
-            </section>
-            {postsMeta.map((post: PostMeta, i) => {
-                return <section key={i} className='h5 block'>
-                    <Link href={`/posts/${post.slug}`}>
-                        {post.title}
-                    </Link>
-                    <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
-                        {date.prettyPrint(new Date(post.created_at))}
-                    </span>
-                    {post.last_updated && <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
-                        {date.prettyPrint(new Date(post.last_updated))}
-                    </span>}
-                </section>
-            })}
+            <table  className='h5'>
+                <thead>
+                    <tr>
+                        <th style={{flex: '1 0 30%'}}>Name</th>
+                        <th>Created on</th>
+                        <th>Last Updated</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {postsMeta.map((post: PostMeta, i) => {
+                        return <tr key={i}>
+                            <td style={{flex: '1 0 30%'}}>
+                                <Link href={`/posts/${post.slug}`}>
+                                    {post.title}
+                                </Link>
+                            </td>
+                            <td>
+                                {date.prettyPrint(new Date(post.created_at))}
+                            </td>
+                            <td>
+                                {
+                                    post.last_updated
+                                    ? date.prettyPrint(new Date(post.last_updated))
+                                    : '-'
+                                }
+                            </td>
+                        </tr>
+                    })}
+                </tbody>
+            </table>
         </Layout>
     )
 }
diff --git a/styles/global.css b/styles/global.css
index bc664a0..c1866c2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -161,14 +161,15 @@ pre {
 table {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--main-border-color);
     border-radius: 1rem;
+    margin: 1rem 0;
+    overflow: hidden;
 }
 
 table thead {
     background: var(--secondary-green);
-    border-top-left-radius: 1rem;
-    border-top-right-radius: 1rem;
+    z-index: -1;
+    border-bottom: 1px solid #999999;
 }
 
 table thead tr,
@@ -177,7 +178,7 @@ table tbody tr {
 }
 
 table tbody tr+tr {
-    border-top: 1px solid var(--main-border-color);
+    border-top: 1px solid #999999;
 }
 
 table thead tr th,
@@ -187,6 +188,11 @@ table tbody tr td {
     padding: .5em;
 }
 
+table th+th,
+table td+td {
+    border-left: 1px solid #999999;
+}
+
 .lambda-logo {
     width: 256px;
     height: 256px;
@@ -203,24 +209,11 @@ table tbody tr td {
 }
 
 .block {
+    display: block;
     padding: 1.5rem;
     max-width: 100%;
-    margin: 0 0.25rem;
-    border: 1px solid var(--main-border-color);
-    border-bottom: none;
-}
-
-.block:first-of-type {
-    border-top-right-radius: 1rem;
-    border-top-left-radius: 1rem;
-    margin-top: 2rem;
-}
-
-.block:last-of-type {
-    border-bottom: 1px solid var(--main-border-color);
-    border-bottom-right-radius: 1rem;
-    border-bottom-left-radius: 1rem;
-    margin-bottom: 2rem;
+    margin: 1rem 0.25rem;
+    border-radius: 1rem;
 }
 
 code {
diff --git a/styles/lists.module.css b/styles/lists.module.css
index 5646c45..825574e 100644
--- a/styles/lists.module.css
+++ b/styles/lists.module.css
@@ -20,7 +20,8 @@
 }
 
 .block .block {
-    margin: 0 ;
+    margin: 0;
+    margin-left: 0.5rem;
     border-radius: 0;
     border-right: none;
     border-bottom: none;
@@ -35,4 +36,4 @@
 .block .block:last-of-type {
     border-bottom-left-radius: 1rem;
     border-bottom:  1px dashed var(--main-border-color);
-}
+}
\ No newline at end of file
diff --git a/styles/post.module.css b/styles/post.module.css
index ef20088..c252a7a 100644
--- a/styles/post.module.css
+++ b/styles/post.module.css
@@ -3,6 +3,8 @@
     z-index: -1;
     right: 0;
     left: 0;
+    top: 0;
+    bottom: 0;
     background-size: cover;
     background-position: center;
     min-height: 100%;
diff --git a/styles/title.module.css b/styles/title.module.css
index 983a69b..9bc1801 100644
--- a/styles/title.module.css
+++ b/styles/title.module.css
@@ -1,8 +1,13 @@
 .container {
     text-align: center;
     margin: auto;
-    max-width: 95%;
+    background-color: var(--main-background-color);
+}
+
+.container .title {
     border-bottom: 1px solid #FFFFFF;
+    max-width: 95%;
+    margin: auto;
 }
 
 .nav {