Merge pull request #9 from LambdaPaul/dev

UI enhancements

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 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. 
-
-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.

components/title.tsx

@@ -27,9 +27,12 @@ function Title({ name, title, ancestors }: propsObj) {
 
     return (
         <>
-            <h1 className={style.container}>
+            <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}</>

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 SyntaxHighlighter from 'react-syntax-highlighter';
-import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-oceanic';
+import { monokaiSublime } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import remarkGfm from 'remark-gfm';
 
 function Note({ note }: any) {
@@ -14,14 +14,20 @@ function Note({ note }: any) {
                     components={{
                         code({ node, inline, className, children, ...props }) {
                             const match = /language-(\w+)/.exec(className || '')
-                            return !inline && match ? (
+                            return !inline && match
-                                <Prism 
+                                ? (
+                                    <SyntaxHighlighter
+                                        showLineNumbers={true}
                                         language={match[1]}
-                                    style={dark}
+                                        style={monokaiSublime}
+                                        wrapLongLines={true}
                                         PreTag='div'
+                                        codeTagProps={{style: {display: 'block'}}}
+                                        customStyle={{padding:'0', borderRadius: '1rem', maxHeight: '400px'}}
                                         {...props}
-                                >{String(children).replace(/\n$/, '')}</Prism>
+                                    >{children}</SyntaxHighlighter>
-                            ) : <code className={className} {...props}>
+                                )
+                                : <code className={className} {...props}>
                                     {children}
                                 </code>
                         }

pages/notes/index.tsx

@@ -5,13 +5,15 @@ import { getNotesMeta, NoteMeta } from '../../util/slug';
 function NotesPage({ notesMeta }: { notesMeta: NoteMeta[] }) {
     return (
         <Layout name='Notes'>
+            <div className='text center block'>
                 {notesMeta && notesMeta.map((note: NoteMeta, i) => {
-                return <section key={i} className='h5 block'>
+                    return <div key={i} className='h5'>
                         <Link href={`/notes/${note.slug}`}>
                             {note.title}
                         </Link>
-                </section>
+                    </div>
                 })}
+            </div>
         </Layout>
     )
 }

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 ( 
-    return ( // wow this is horrible
         <Layout name='Posts'>
-            <section className='h4 block'>
+            <table  className='h5'>
-                Post Name
+                <thead>
-                <span style={{ float: 'right', margin: 'auto 1rem' }}> Created on </span>
+                    <tr>
-                <span style={{ float: 'right', margin: 'auto 1rem' }}>Last Updated </span>
+                        <th style={{flex: '1 0 30%'}}>Name</th>
-            </section>
+                        <th>Created on</th>
+                        <th>Last Updated</th>
+                    </tr>
+                </thead>
+                <tbody>
                     {postsMeta.map((post: PostMeta, i) => {
-                return <section key={i} className='h5 block'>
+                        return <tr key={i}>
+                            <td style={{flex: '1 0 30%'}}>
                                 <Link href={`/posts/${post.slug}`}>
                                     {post.title}
                                 </Link>
-                    <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
+                            </td>
+                            <td>
                                 {date.prettyPrint(new Date(post.created_at))}
-                    </span>
+                            </td>
-                    {post.last_updated && <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
+                            <td>
-                        {date.prettyPrint(new Date(post.last_updated))}
+                                {
-                    </span>}
+                                    post.last_updated
-                </section>
+                                    ? date.prettyPrint(new Date(post.last_updated))
+                                    : '-'
+                                }
+                            </td>
+                        </tr>
                     })}
+                </tbody>
+            </table>
         </Layout>
     )
 }

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;
+    z-index: -1;
-    border-top-right-radius: 1rem;
+    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;
+    margin: 1rem 0.25rem;
-    border: 1px solid var(--main-border-color);
+    border-radius: 1rem;
-    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;
 }
 
 code {

styles/lists.module.css

@@ -21,6 +21,7 @@
 
 .block .block {
     margin: 0;
+    margin-left: 0.5rem;
     border-radius: 0;
     border-right: none;
     border-bottom: none;

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%;

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 {