xyz/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

UI enhancements

Browse Source
This commit is contained in:
Paul W.
2022-04-30 09:56:18 -04:00
parent 19affa2f1f
commit 9747cd809d
9 changed files with 90 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/notes/[page].tsx
View File

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

16
pages/notes/index.tsx
View File

@@ -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>
)
}

51
pages/posts/index.tsx
View File

@@ -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>
)
}