Add music to playlist, add more github info and css

.gitignore

@@ -4,3 +4,4 @@ dist/
 .DS_Store
 .cache/
 *.bun
+.env

components/lists.tsx

@@ -1,9 +1,11 @@
 import style from '../styles/lists.module.css';
 import React, { ReactElement } from 'react';
 
-interface listItem {
+export interface listItem {
+    [x: string]: any;
     children?: listItem[] | string[];
     url?: string;
+    type?: string;
     title: string;
     description?: string;
 };
@@ -37,15 +39,25 @@ export function toListItem(record: Record<string, any>): listItem | null {
         }
     }
 
-    return {
+    return Object.assign(record, {
         title: record.title,
         url: record.url,
         children: children.length ? children : undefined,
+        type: record.type?.length ? record.type : undefined,
         description: record.description,
-    };
+    });
 }
 
-export function mapChild(obj: listItem | string, level: number) {
+const s = {
+    "af": 123,
+    "asdf" : 123
+}
+
+export function mapChild(
+    obj: listItem | string, 
+    level: number, 
+    typeMap? : Record<string, (o: listItem) => JSX.Element> 
+    ) {
     if (typeof obj === 'string') {
         if (obj === '')
             return <></>
@@ -58,6 +70,7 @@ export function mapChild(obj: listItem | string, level: number) {
     const desc = obj.description
         ? <span className={style.listItemDesc}>{obj.description}</span>
         : <></>;
+
     if (obj.url)
         return (
             <>
@@ -65,12 +78,17 @@ export function mapChild(obj: listItem | string, level: number) {
                 {desc}
             </>);
 
-    if (!obj.children)
+    if (!obj.children) {
-        return (
+        let cb;
-            <>
+        if (obj.type && typeMap) {
-                <span className={style.listItem}>{obj.title}</span>
+            console.error(typeMap[obj.type])
-                {desc}
+            cb = typeMap[obj.type]
-            </>);
+        }
+
+        return cb 
+            ? cb(obj) 
+            : (<><span className={style.listItem}>{obj.title}</span>{desc}</>);
+    }
 
     let title: ReactElement;
 
@@ -84,7 +102,7 @@ export function mapChild(obj: listItem | string, level: number) {
             {title}
             {obj.description ? <p className={style.desc}>{obj.description}</p> : <></>}
             <div>
-                {obj.children.map(l => mapChild(l, level + 1))}
+                {obj.children.map(l => mapChild(l, level + 1, typeMap))}
             </div>
         </section>
     );

next.config.js

@@ -3,7 +3,7 @@ module.exports = {
         locales: ['en-US'],
         defaultLocale: 'en-US'
     },
-    webpack: (config, options) => {
+    webpack: (config, _options) => {
         config.experiments = { asset: true };
 
         const { cache } = require('./util/slug');
@@ -48,4 +48,7 @@ module.exports = {
 
         return config
     },
+    images: {
+        domains: ['avatars.githubusercontent.com']
+    },
 }

pages/about.tsx

@@ -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>
+                <pre className={style.license}>{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>
             </section>
         </Layout>
     );

pages/playlists.tsx

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

public/playlists.yaml

@@ -1,13 +1,17 @@
-- title: Classical by Composer
+- title: Classical
   children:
-  - title: "[Youtube] Antonio Lucio Vivaldi"
+  - title: "Antonio Lucio Vivaldi"
-    url: https://youtube.com/playlist?list=PLSU6wJEYct5HslkoJWHQFCttB-lhSwVr2
+    type: youtube-playlist
-  - title: "[Youtube] Johann Sebastian Bach"
+    id: PLSU6wJEYct5HslkoJWHQFCttB-lhSwVr2
-    url: https://youtube.com/playlist?list=PLSU6wJEYct5HftuY6UunC6zE_QMXOGmhm
+  - title: "Johann Sebastian Bach"
-  - title: "[Youtube] Ludwig van Beethoven"
+    type: youtube-playlist
-    url: https://youtube.com/playlist?list=PLSU6wJEYct5Etx0WAXUQ7YXe84Fp5E142
+    id: PLSU6wJEYct5HftuY6UunC6zE_QMXOGmhm
-  - title: "[Youtube] Wolfgang Amadeus Mozart"
+  - title: "Ludwig van Beethoven"
-    url: https://youtube.com/playlist?list=PLSU6wJEYct5EJsE-9Zh-jWckBuZAmIt8Q
+    type: youtube-playlist
+    id: PLSU6wJEYct5Etx0WAXUQ7YXe84Fp5E142
+  - title: "Wolfgang Amadeus Mozart"
+    type: youtube-playlist
+    id: PLSU6wJEYct5EJsE-9Zh-jWckBuZAmIt8Q
   - Große Fuge Op. 133
   - KV 387
   - KV 448
@@ -17,12 +21,282 @@
   - Prelude in G Minor (Op. 23 No. 5)
   - String Quartet, Op. 20 No. 2 (Haydn)
   - Arabesque No. 1 (Debussy)
-- title: Other    
+- title: Rock
   children:
-    - title: Rock
+    - title: American Pie by Don McLean
-      children:
+      type: spotify
-        - American Pie by Don McLean
+      id: 1fDsrQ23eTAVFElUMaf38X
-    - title: Multimedia OST
+    - title: American Pie
-      children:
+      type: spotify
-        - L'Ultima Diligenza by Ennio Morricone
+      id: 1fDsrQ23eTAVFElUMaf38X
+    - title: Don't Stop Believin'
+      type: spotify
+      id: 4bHsxqR3GMrXTxEPLuK5ue
+    - title: Hotel California - 2013 Remaster
+      type: spotify
+      id: 40riOy7x9W7GXjyGp4pjAv
+    - title: Africa
+      type: spotify
+      id: 2374M0fQpWi3dLnB54qaLX
+    - title: Sweet Home Alabama
+      type: spotify
+      id: 7e89621JPkKaeDSTQ3avtg
+    - title: Piano Man
+      type: spotify
+      id: 70C4NyhjD5OZUMzvWZ3njJ
+    - title: Rocket Man (I Think It's Going To Be A Long, Long Time)
+      type: spotify
+      id: 3gdewACMIVMEWVbyb8O9sY
+    - title: Fortunate Son
+      type: spotify
+      id: 4BP3uh0hFLFRb5cjsgLqDh
+    - title: Take on Me
+      type: spotify
+      id: 2WfaOiMkCvy7F5fcp2zZ8L
+    - title: Paradise City
+      type: spotify
+      id: 3YBZIN3rekqsKxbJc9FZko
+    - title: Eye of the Tiger
+      type: spotify
+      id: 2HHtWyy5CgaQbC7XSoOb0e
+    - title: The Final Countdown
+      type: spotify
+      id: 3MrRksHupTVEQ7YbA0FsZK
+    - title: Hold the Line
+      type: spotify
+      id: 4aVuWgvD0X63hcOCnZtNFA
+    - title: Uptown Girl
+      type: spotify
+      id: 5zA8vzDGqPl2AzZkEYQGKh
+    - title: Juke Box Hero
+      type: spotify
+      id: 00qOE7OjRl0BpYiCiweZB2
+    - title: Thunderstruck
+      type: spotify
+      id: 57bgtoPSgt236HzfBOd8kj
+    - title: Baba O'Riley
+      type: spotify
+      id: 3qiyyUfYe7CRYLucrPmulD
+    - title: Billie Jean
+      type: spotify
+      id: 5ChkMS8OtdzJeqyybCc9R5
+    - title: Can't Fight This Feeling
+      type: spotify
+      id: 5WwqdeavrQrbeAMDxGawse
+    - title: Immigrant Song - Remaster
+      type: spotify
+      id: 78lgmZwycJ3nzsdgmPPGNx
+    - title: Beat It
+      type: spotify
+      id: 1OOtq8tRnDM8kG2gqUPjAj
+    - title: Smooth Criminal - 2012 Remaster
+      type: spotify
+      id: 2bCQHF9gdG5BNDVuEIEnNk
+    - title: Thriller
+      type: spotify
+      id: 3S2R0EVwBSAVMd5UMgKTL0
+    - title: The Chain - 2004 Remaster
+      type: spotify
+      id: 5e9TFTbltYBg2xThimr0rU
+    - title: Y.M.C.A.
+      type: spotify
+      id: 4YOJFyjqh8eAcbKFfv88mV
+    - title: Iron Man - 2012 - Remaster
+      type: spotify
+      id: 3IOQZRcEkplCXg6LofKqE9
+    - title: Purple Rain
+      type: spotify
+      id: 54X78diSLoUDI3joC2bjMz
+    - title: Takin' Care Of Business
+      type: spotify
+      id: 0lzNXoZINVBLHWNIxKxWOo
+    - title: American Girl
+      type: spotify
+      id: 7MRyJPksH3G2cXHN8UKYzP
+    - title: Take Me Home, Country Roads
+      type: spotify
+      id: 1YYhDizHx7PnDhAhko6cDS
+    - title: Knockin' On Heaven's Door
+      type: spotify
+      id: 6HSXNV0b4M4cLJ7ljgVVeh
+    - title: Like a Rolling Stone
+      type: spotify
+      id: 3AhXZa8sUQht0UEdBJgpGc
+    - title: Welcome To The Jungle
+      type: spotify
+      id: 0eFvoRSTTaR2q8bSWVjwfp
+    - title: House Of The Rising Sun
+      type: spotify
+      id: 61Q9oJNd9hJQFhSDh6Qlap
+    - title: You Really Got Me
+      type: spotify
+      id: 1oG2vWELiGjIqxwqGcyqwF
+    - title: Low Rider
+      type: spotify
+      id: 2fmMPJb5EzZCx8BcNJvVk4
+    - title: Pony
+      type: spotify
+      id: 6mz1fBdKATx6qP4oP1I65G
+    - title: Hit 'Em Up - Single Version
+      type: spotify
+      id: 0Z2J91b2iTGLVTZC4fKgxf
+    - title: Ambitionz Az A Ridah
+      type: spotify
+      id: 3ssX20QT5c3nA9wk78V1LQ
+    - title: Untouchable Swizz Beatz Remix
+      type: spotify
+      id: 3zZ30LpGe1lYzJsIQpyZPw
+    - title: Poison
+      type: spotify
+      id: 6m59VvDUi0UQsB2eZ9wVbH
+    - title: Hey Julie
+      type: spotify
+      id: 7sNlOu2jnVnJ93dj2Q7Wv0
+    - title: Touching the Untouchables
+      type: spotify
+      id: 7pN4S1pLfBKH4q4k7uyA4B
+    - title: The Power Of Love
+      type: spotify
+      id: 2olVm1lHicpveMAo4AUDRB
+    - title: You Make My Dreams (Come True)
+      type: spotify
+      id: 4o6BgsqLIBViaGVbx5rbRk
+    - title: Happy Together
+      type: spotify
+      id: 1JO1xLtVc8mWhIoE3YaCL0
+    - title: Kung Fu Fighting
+      type: spotify
+      id: 40NRm1ZLvZpUSCUXAGGZ8J
+    - title: 99 Luftballons
+      type: spotify
+      id: 6HA97v4wEGQ5TUClRM0XLc
+    - title: X Gon' Give It To Ya
+      type: spotify
+      id: 1zzxoZVylsna2BQB65Ppcb
+    - title: We Didn't Start the Fire
+      type: spotify
+      id: 3Cx4yrFaX8CeHwBMReOWXI
+    - title: Cold as Ice
+      type: spotify
+      id: 7vidktgNZFQylTgH1GEnMs
+    - title: I Won't Back Down
+      type: spotify
+      id: 0Ir0Esfpcg0EB6Kq8VbbAh
+    - title: Kiss
+      type: spotify
+      id: 62LJFaYihsdVrrkgUOJC05
+    - title: Never Gonna Give You Up
+      type: spotify
+      id: 7GhIk7Il098yCjg4BQjzvb
+    - title: Down Under
+      type: spotify
+      id: 46RVKt5Edm1zl0rXhPJZxz
+    - title: Eminence Front
+      type: spotify
+      id: 0LN5gIsS5tQSmRzQrHSaTR
+    - title: Footloose
+      type: spotify
+      id: 6W2VbtvMrDXm5vYeB7amkO
+    - title: Danger Zone - From "Top Gun" Original Soundtrack
+      type: spotify
+      id: 34x6hEJgGAOQvmlMql5Ige
+    - title: Bohemian Rhapsody - Remastered 2011
+      type: spotify
+      id: 7tFiyTwD0nx5a1eklYtX2J
+    - title: Higher Love - Single Version
+      type: spotify
+      id: 2HcokWTBGI5EjGeNVLgd8Q
+    - title: Ocean Man
+      type: spotify
+      id: 6M14BiCN00nOsba4JaYsHW
+    - title: Free Fallin'
+      type: spotify
+      id: 5tVA6TkbaAH9QMITTQRrNv
+    - title: Still D.R.E.
+      type: spotify
+      id: 503OTo2dSqe7qk76rgsbep
+    - title: Straight Outta Compton
+      type: spotify
+      id: 6KIKRz9eSTXdNsGUnomdtW
+    - title: Harder, Better, Faster, Stronger
+      type: spotify
+      id: 5W3cjX2J3tjhG8zb6u0qHn
+    - title: Around the World
+      type: spotify
+      id: 1pKYYY0dkg23sQQXi0Q5zN
+    - title: Da Funk
+      type: spotify
+      id: 0MyY4WcN7DIfbSmp5yej5z
+    - title: Get Lucky (feat. Pharrell Williams & Nile Rodgers) - Radio Edit
+      type: spotify
+      id: 2Foc5Q5nqNiosCNqttzHof
+    - title: Seven Nation Army
+      type: spotify
+      id: 7i6r9KotUPQg3ozKKgEPIN
+    - title: Killing In The Name
+      type: spotify
+      id: 59WN2psjkt1tyaxjspN8fp
+    - title: Fuck Tha Police
+      type: spotify
+      id: 5n8Aro6j1bEGIy7Tpo7FV7
+    - title: Woke Up This Morning
+      type: spotify
+      id: 5aDqmzzXy7KrTElnO8zisV
+    - title: I Want It That Way
+      type: spotify
+      id: 47BBI51FKFwOMlIiX6m8ya
+    - title: Everybody (Backstreet's Back) - Radio Edit
+      type: spotify
+      id: 4rTeOSYqwXNz5qPR2DUTFZ
+    - title: California Love - Original Version
+      type: spotify
+      id: 3ia3dJETSOllPsv3LJkE35
+    - title: Don't Stop Me Now - Remastered 2011
+      type: spotify
+      id: 7hQJA50XrCWABAu5v6QZ4i
+    - title: Radio Ga Ga - Remastered 2011
+      type: spotify
+      id: 1HmzAZUvhQLhLo2z3ocpZI
+    - title: Come Together - Remastered 2009
+      type: spotify
+      id: 2EqlS6tkEnglzr7tkKAAYD
+    - title: Valerie
+      type: spotify
+      id: 3nQuDlaVZApyrG6tdsETe0
+    - title: Don't Stop 'Til You Get Enough
+      type: spotify
+      id: 46eu3SBuFCXWsPT39Yg3tJ
+    - title: Basket Case
+      type: spotify
+      id: 6L89mwZXSOwYl76YXfX13s
+    - title: 21 Guns
+      type: spotify
+      id: 64yrDBpcdwEdNY9loyEGbX
+    - title: Boulevard of Broken Dreams
+      type: spotify
+      id: 5GorCbAP4aL0EJ16frG2hd
+    - title: American Idiot
+      type: spotify
+      id: 6nTiIhLmQ3FWhvrGafw2zj
+    - title: Kashmir - 1990 Remaster
+      type: spotify
+      id: 2nVHqZbOGkKWzlcy1aMbE7
+    - title: Life Goes On
+      type: spotify
+      id: 2bUojZta7GJTjGAqo064jo
+    - title: Welcome to the Black Parade
+      type: spotify
+      id: 5wQnmLuC1W7ATsArWACrgW
+    - title: Rasputin
+      type: spotify
+      id: 5jkFvD4UJrmdoezzT1FRoP
+    - title: Carry on Wayward Son
+      type: spotify
+      id: 4DMKwE2E2iYDKY01C335Uw
+    - title: Stacy's Mom
+      type: spotify
+      id: 27L8sESb3KR79asDUBu8nW
+- title: Media OST
+  children:
+    - L'Ultima Diligenza by Ennio Morricone
     

styles/about.module.css

@@ -0,0 +1,45 @@
+.license {
+    background-color: #222222;
+    padding: 1rem;
+}
+
+.githubCard {
+    display: flex;
+}
+
+.githubAvatarContainer {
+    flex: 0 0;
+    padding: 0.5rem;
+}
+
+.githubCardTable {
+    flex: 1 1;
+    padding: 0.5rem;
+}
+
+.githubCardRow {
+    display: flex;
+}
+
+
+.githubCardLabel {
+    flex: .2 1;
+    font-size: 1rem;
+    padding: .5rem;
+}
+
+.githubCardLabel:after {
+    content: ':';
+}
+
+.githubCardValue {
+    flex: 1 1;
+    background-color: #222222;
+    font-size: 1rem;
+    border-top: 1px solid;
+    padding: .5rem;
+}
+
+.githubCardRow:first-of-type .githubCardValue {
+    border-top: none;
+}

styles/global.css

@@ -116,7 +116,7 @@ section {
 }
 
 body {
-    margin: 0 0 1rem;
+    margin: 0 0 4rem;
     font-size: 18px;
     font-weight: 400;
     line-height: 1.5;
@@ -361,4 +361,8 @@ code {
 .button.link.back::after {
     content: '';
     display: none;
+}
+
+.monospace {
+    font-family: 'Hack', 'Source Code Pro', Consolas, monospace;
 }