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

Refactor, update UI, and add notes

Browse Source
This commit is contained in:
Paul W
2022-10-04 23:41:59 -04:00
parent 3781c2c154
commit d94de055d8
31 changed files with 813 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/github-profile.tsx
View File

@@ -1,6 +1,6 @@
import Image from 'next/image';
import { parse as URIparse } from 'uri-js';
import date from '../util/date';
import date from '../lib/date';
import style from '../styles/github-profile.module.css';
function CardRow({label, children}: {label: string, children: JSX.Element | string}) {
@@ -11,6 +11,7 @@ function CardRow({label, children}: {label: string, children: JSX.Element | stri
</div>
);
}
function GitHubProfile({user}: any) {
return (<>
<div className={style.card}>
@@ -32,8 +33,8 @@ return (<>
</CardRow>}
<CardRow label='Location'>{user.location}</CardRow>
<CardRow label='About'>{user.bio}</CardRow>
<CardRow label='Created'>{user.created_at ? date.prettyPrint(user.created_at) : ''}</CardRow>
{user.updated_at && <CardRow label='Last Updated'>{user.updated_at ? date.prettyPrint(user.updated_at) : ''}</CardRow>}
<CardRow label='Created'>{user.created_at ? date.toRelativeDate(user.created_at) : ''}</CardRow>
{user.updated_at && <CardRow label='Last Updated'>{user.updated_at ? date.toRelativeDate(user.updated_at) : ''}</CardRow>}
{user.twitter_username && <CardRow label='Twitter'>
<a className='link extern blue button'
href={`https://twitter.com/${user.twitter_username}`}>

19
components/layout.tsx
View File

@@ -8,16 +8,23 @@ type LayoutProps = {
title?: string,
ancestors?: Array<{ name: string, path: string }>
children?: ChildrenType,
removeContainer?: boolean,
};
function Layout({ name, title, children, ancestors }: LayoutProps) {
function Container(props: {children?: ChildrenType, ignore?: boolean}) {
if (props.ignore)
return <>{props.children}</>;
return <div className='container'>
{props.children}
</div>;
}
function Layout(props : LayoutProps) {
return (
<>
<Meta name={name} ancestors={ancestors} />
<Title title={title} name={name} ancestors={ancestors} />
<div className='container'>
{children}
</div>
<Meta name={props.name} ancestors={props.ancestors} />
<Title title={props.title} name={props.name} ancestors={props.ancestors} />
<Container ignore={props.removeContainer}>{props.children}</Container>
</>
);
}

8
components/meta.tsx
View File

@@ -2,7 +2,7 @@ import Head from 'next/head';
function Meta({name, ancestors}
: {name: string, ancestors?: Array<{ name: string, path: string }> }) {
const path = () => {
function path(): string {
if (!ancestors)
return name;
@@ -11,12 +11,12 @@ function Meta({name, ancestors}
path = `${path}${obj.name} /`;
});
return `${path} ${name}`;
};
return `PaulW.XYZ / ${path} ${name}`;
}
return (
<Head>
<title>PaulW.XYZ / {path()}</title>
<title>{path()}</title>
</Head>
);
}

6
components/recent-notes.tsx
View File

@@ -1,7 +1,7 @@
import Link from "next/link";
import { NoteMeta } from "../util/slug";
import { INoteMeta } from "../lib/slug";
function RecentNotes({ notesMeta }: { notesMeta: NoteMeta[] }) {
function RecentNotes({ notesMeta }: { notesMeta: INoteMeta[] }) {
return (
<div className='block'>
<div className='h2'>Recent Notes</div>
@@ -14,7 +14,7 @@ function RecentNotes({ notesMeta }: { notesMeta: NoteMeta[] }) {
}
{
notesMeta.length > 10 &&
<div className={''}>
<div>
<Link href='/notes'>
<a className='h5'>More...</a>
</Link>

16
components/recent-posts.tsx
View File

@@ -1,9 +1,9 @@
import Link from "next/link";
import date from "../util/date";
import { PostMeta } from "../util/slug";
import date from "../lib/date";
import { IPostMeta } from "../lib/slug";
import style from '../styles/recent-posts.module.css';
function RecentPosts({ postsMeta }: { postsMeta: PostMeta[] }) {
function RecentPosts({ postsMeta }: { postsMeta: IPostMeta[] }) {
if (!postsMeta.length)
return <></>;
return (
@@ -13,12 +13,14 @@ function RecentPosts({ postsMeta }: { postsMeta: PostMeta[] }) {
{postsMeta?.slice(0, 10)
.map((post: any) => {
return <div className={style.block} key={post.slug}>
<Link href={`/posts/${post.slug}`}>
<a className={`${style.postTitle} h5`}>{post.title}</a>
</Link>
<span className={style.postDate}>
{date.prettyPrint(new Date(post.created_at))}
{date.toRelativeDate(new Date(post.created_at))}
</span>
<div className={style.postTitle}>
<Link href={`/posts/${post.slug}`}>
{post.title}
</Link>
</div>
</div>
})}
</div>

4
components/title.tsx
View File

@@ -1,6 +1,7 @@
import style from '../styles/title.module.css';
import Link from 'next/link';
import style from '../styles/title.module.css';
type propsObj = {
name: string,
title?: string,
@@ -32,7 +33,6 @@ function Title({ name, title, ancestors }: propsObj) {
{title || name}
</h1>
</div>
<div className={`${style.nav} h1`}>
{name
? <><Link href='/'><a>PaulW.XYZ</a></Link> / {pathElements}{name}</>