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

Add music to playlist, add more github info and css

Browse Source
This commit is contained in:
Paul W.
2022-09-27 20:52:24 -04:00
parent cf7e85fa6d
commit f326bc1894
10 changed files with 2254 additions and 10664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
pages/about.tsx
View File

@@ -1,15 +1,13 @@
import ReactMarkdown from 'react-markdown';
import Image from 'next/image';
import ReadmeMd from '../README.md';
import License from '../LICENSE.txt';
import Layout from '../components/layout';
import style from '../styles/about.module.css';
import date from '../util/date';
function AboutPage({usr}: any) {
const styUsr = {
fontFamily: 'monospace',
backgroundColor: '#333333',
fontSize: '.8rem',
padding: '.1rem .5rem',
};
return (
<Layout name='About' title='About PaulW.XYZ'>
<section className='block'>
@@ -20,6 +18,49 @@ function AboutPage({usr}: any) {
It seems wise to have things up here even though they may not be worthwhile, as many things ultimately are not.</p>
<p>Got any questions, concerns, or issues? Contact me via my email: <code>lambdapaul [at] pm [dot] me</code>.</p>
</section>
{/* make this a pretty component with more info */}
<section className='block'>
<h5>GitHub Profile</h5>
<div className={style.githubCard}>
<div className={style.githubAvatarContainer}>
<Image layout='fixed' width={128} height={128} src={usr.avatar_url} alt={`${usr.login}'s GitHub profile avatar`} />
</div>
<div className={style.githubCardTable}>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>Name</span>
<span className={style.githubCardValue}>{usr.login}</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>URL</span>
<span className={style.githubCardValue}>
<a href={usr.html_url}>{usr.html_url}</a>
</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>Location</span>
<span className={style.githubCardValue}>{usr.location}</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>About</span>
<span className={style.githubCardValue}>{usr.bio}</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>Created</span>
<span className={style.githubCardValue}>{date.prettyPrint(usr.created_at)}</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>Last Updated</span>
<span className={style.githubCardValue}>{date.prettyPrint(usr.updated_at)}</span>
</div>
<div className={style.githubCardRow}>
<span className={style.githubCardLabel}>Twitter</span>
<span className={style.githubCardValue}>
<a className='link extern blue button' href={`https://twitter.com/${usr.twitter_username}`}>@{usr.twitter_username}</a>
</span>
</div>
</div>
</div>
</section>
<hr />
<section className='block'>
<p>Source for this site is available at <a className='button link extern blue' href='https://github.com/LambdaPaul/www'>GitHub / LambdaPaul / www</a></p>
@@ -33,32 +74,7 @@ function AboutPage({usr}: any) {
</section>
<section className='block'>
<h2>LICENSE</h2>
<pre>{License}</pre>
</section>
{/* make this a pretty component with more info */}
<section className='block'>
<table>
<th><td>Github Profile</td></th>
<tr>
<td>Name</td>
<td style={styUsr}>{usr.login}</td>
</tr>
<tr>
<td>Link</td>
<td style={styUsr}>{usr.html_url}</td>
</tr>
<tr>
<td>Location</td>
<td style={styUsr}>{usr.location}</td>
</tr>
<tr>
<td>About</td>
<td style={styUsr}>{usr.bio}</td>
</tr>
</table>
<pre className={style.license}>{License}</pre>
</section>
</Layout>
);

18
pages/playlists.tsx
View File

@@ -1,9 +1,9 @@
import React, { ReactElement } from 'react';
import Layout from '../components/layout';
import { mapChild, toListItem } from '../components/lists';
import pl from '../public/playlists.yaml';
function Playlists() {
return (
<Layout name='Playlists'>
<h2>Music</h2>
@@ -11,11 +11,23 @@ function Playlists() {
pl.map((item: Record<string, any>) => {
const lItem = toListItem(item)
if (lItem)
return mapChild(lItem, 0)
return mapChild(lItem, 0, {
'spotify': (i) => {
return <div>
<a className='extern link button'
href={`https://open.spotify.com/track/${i.id}`}></a>
{i.title}</div>;
},
'youtube-playlist': (i) => {
return <div>
<a className='extern link button'
href={`https://youtube.com/playlist?list=${i.id}`}></a>
{i.title}</div>;
}
})
})
}
</Layout>
);
}
export default Playlists;