From 17bf66129ab91d517c3ea637901c2bfd8e7a4840 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 01:38:43 +0200 Subject: [PATCH 01/13] .prettier --- .vscode/extensions.json | 3 +++ readme.md | 28 +++++++++++++++------------- src/components/MainLayout.tsx | 2 +- src/pages/_app.tsx | 2 +- src/pages/_document.tsx | 2 +- src/pages/index.tsx | 2 +- 6 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 .vscode/extensions.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..4aa7044 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["numso.prettier-standard-vscode"] +} diff --git a/readme.md b/readme.md index 1dcf779..b20ff55 100644 --- a/readme.md +++ b/readme.md @@ -17,24 +17,26 @@ yarn dev Create a `.env` file similar to [`.env.example`](https://github.com/skidoodle/albert.lol/blob/master/.env.example). ### Prerequisites + 1. Create an application in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/) - - Click on the `Edit settings` button - - Set the `Redirect URIs` to a convenient location _(doesn't matter)_ - - Save the given `Client ID` along with the `Client Secret` + - Click on the `Edit settings` button + - Set the `Redirect URIs` to a convenient location _(doesn't matter)_ + - Save the given `Client ID` along with the `Client Secret` 2. Retrieve the access code - - Visit the following URL after replacing `$CLIENT_ID`, `$SCOPE`, and `$REDIRECT_URI` - ```url - https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI - ``` - - You can choose scope(s) by visiting the [Spotify API docs](https://developer.spotify.com/documentation/general/guides/authorization/scopes/) + - Visit the following URL after replacing `$CLIENT_ID`, `$SCOPE`, and `$REDIRECT_URI` + ```url + https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI + ``` + - You can choose scope(s) by visiting the [Spotify API docs](https://developer.spotify.com/documentation/general/guides/authorization/scopes/) 3. Note `code` from the URL you were redirected to 4. Acquire your refresh token - - Run the following CURL command - ```sh - curl -X POST https://accounts.spotify.com/api/token -d "client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&grant_type=authorization_code&code=$CODE&redirect_uri=$REDIRECT_URI" - ``` - - Either replace or export the variables in your shell (`$CILENT_ID`, `$CLIENT_SECRET`, `$CODE`, and `$REDIRECT_URI`) + - Run the following CURL command + ```sh + curl -X POST https://accounts.spotify.com/api/token -d "client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&grant_type=authorization_code&code=$CODE&redirect_uri=$REDIRECT_URI" + ``` + - Either replace or export the variables in your shell (`$CILENT_ID`, `$CLIENT_SECRET`, `$CODE`, and `$REDIRECT_URI`) 5. Save `refresh_token` in your `.env` file as well as your `client_id` and `client_secret`. ## License + [GPL-3.0](https://github.com/skidoodle/albert.lol/blob/master/license) diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx index 5d4d0c9..bfa867b 100644 --- a/src/components/MainLayout.tsx +++ b/src/components/MainLayout.tsx @@ -15,7 +15,7 @@ export const MainLayout = () => {

{Math.floor( (new Date().getTime() - new Date('2004-07-22').getTime()) / - (1000 * 60 * 60 * 24 * 365.25) + (1000 * 60 * 60 * 24 * 365.25), )} -year-old system administrator

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 82c26a4..53db3bf 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,7 +10,7 @@ const inter = Inter({ variable: '--font-inter', }); -export default function App({ Component, pageProps }: AppProps) { +export default function App ({ Component, pageProps }: AppProps) { return ( <> diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 87ef010..14c4d9c 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,6 +1,6 @@ import { Html, Head, Main, NextScript } from 'next/document'; -export default function Document() { +export default function Document () { return ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index cc1236e..c6875cf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,6 @@ import { MainLayout } from '@/components/MainLayout'; -export default function Home() { +export default function Home () { return ( <> From 4155fd0babaa0bf0ebcaef7c6901dc258ed506a6 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 01:53:28 +0200 Subject: [PATCH 02/13] .contrast fix test --- src/components/SpotifyCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SpotifyCard.tsx b/src/components/SpotifyCard.tsx index 4634fd3..7dbfe34 100644 --- a/src/components/SpotifyCard.tsx +++ b/src/components/SpotifyCard.tsx @@ -33,12 +33,12 @@ export const NowPlayingCard = () => { {truncate(`${spotify.song.title}`, 20)} ) : ( - nothing + nothing )} From e9861b3bcc1a65eb700ced888757348c25a03af4 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 02:09:02 +0200 Subject: [PATCH 03/13] .add aria-labels --- src/components/data/Socials.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/data/Socials.ts b/src/components/data/Socials.ts index 5c5fe46..c9cd828 100644 --- a/src/components/data/Socials.ts +++ b/src/components/data/Socials.ts @@ -12,6 +12,7 @@ type Socials = { ref: string; icon: IconType; copyValue?: boolean; + ariaLabel?: string; }; export const socials: Array = [ @@ -19,27 +20,32 @@ export const socials: Array = [ id: 1, ref: 'https://github.com/skidoodle', icon: FaGithub, + ariaLabel: 'GitHub', }, { id: 2, ref: 'https://steamcommunity.com/id/_albert', icon: FaSteam, + ariaLabel: 'Steam', }, { id: 3, ref: 'contact@albert.lol', icon: FaEnvelope, copyValue: true, + ariaLabel: 'Email', }, { id: 4, ref: 'https://www.instagram.com/albertadam_/', icon: FaInstagram, + ariaLabel: 'Instagram', }, { id: 5, ref: 'albert#8838', icon: FaDiscord, copyValue: true, + ariaLabel: 'Discord', }, ]; \ No newline at end of file From 1c145ff451763614cb839c8e337eee081e52a4ac Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 02:30:03 +0200 Subject: [PATCH 04/13] .fix? aria-labels --- src/components/Icon.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 9ad7129..248629b 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,6 +1,7 @@ import Link from 'next/link'; import toast from 'react-hot-toast'; import copy from 'copy-to-clipboard'; +import { socials } from '@/components/data/Socials'; type Icon = { children: any; @@ -25,6 +26,9 @@ export const Icon = ({ children, reference, copyValue }: Icon) => { social.ref === reference)?.ariaLabel + } onClick={() => { notify(), copy(reference); }} @@ -35,7 +39,12 @@ export const Icon = ({ children, reference, copyValue }: Icon) => { } return ( - + social.ref === reference)?.ariaLabel} + > {children} ); From f797a18a59fea7c829d85b164ff9abcaaf25ad5f Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 02:35:49 +0200 Subject: [PATCH 05/13] .fix rgb color --- src/components/SpotifyCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SpotifyCard.tsx b/src/components/SpotifyCard.tsx index 7dbfe34..1a288e8 100644 --- a/src/components/SpotifyCard.tsx +++ b/src/components/SpotifyCard.tsx @@ -33,12 +33,12 @@ export const NowPlayingCard = () => { {truncate(`${spotify.song.title}`, 20)} ) : ( - nothing + nothing )} From 56e6282f685f2787761bfa1f6b8231e1999a9f87 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:17:14 +0200 Subject: [PATCH 06/13] .minor changes --- src/components/MainLayout.tsx | 2 +- src/components/SocialLayout.tsx | 24 +++++++-------- src/components/SpotifyCard.tsx | 52 +++++++++++++++------------------ src/pages/index.tsx | 6 +--- 4 files changed, 36 insertions(+), 48 deletions(-) diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx index bfa867b..6cc8541 100644 --- a/src/components/MainLayout.tsx +++ b/src/components/MainLayout.tsx @@ -12,7 +12,7 @@ export const MainLayout = () => {

albert

-

+

{Math.floor( (new Date().getTime() - new Date('2004-07-22').getTime()) / (1000 * 60 * 60 * 24 * 365.25), diff --git a/src/components/SocialLayout.tsx b/src/components/SocialLayout.tsx index 60785b6..54bf6ff 100644 --- a/src/components/SocialLayout.tsx +++ b/src/components/SocialLayout.tsx @@ -4,18 +4,16 @@ import React from 'react'; export const SocialLayout = () => { return ( - <> -

- {socials.map((social) => ( - - {React.createElement(social.icon)} - - ))} -
- +
+ {socials.map((social) => ( + + {React.createElement(social.icon)} + + ))} +
); }; diff --git a/src/components/SpotifyCard.tsx b/src/components/SpotifyCard.tsx index 1a288e8..3818471 100644 --- a/src/components/SpotifyCard.tsx +++ b/src/components/SpotifyCard.tsx @@ -1,9 +1,9 @@ import { truncate } from '@/utils/truncate'; -import FadeIn from 'react-fade-in'; import Image from 'next/image'; import useSWR from 'swr'; import SongImage from '@/public/song.webp'; import Link from 'next/link'; +import { HiMusicNote } from 'react-icons/hi'; export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json()); @@ -14,35 +14,29 @@ export const NowPlayingCard = () => { }); return ( - -
- {spotify.song ? ( - Song cover art - ) : ( - Song cover art - )} -
-
- Listening to{' '} - {spotify.song ? ( - - {truncate(`${spotify.song.title}`, 20)} - - ) : ( - nothing - )} -
+
+ {spotify.song ? ( + Song cover art + ) : ( + + )} +
+
+ Listening to{' '} + {spotify.song ? ( + + {truncate(`${spotify.song.title}`, 20)} + + ) : ( + nothing + )}
- +
); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c6875cf..3679327 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,5 @@ import { MainLayout } from '@/components/MainLayout'; export default function Home () { - return ( - <> - - - ); + return ; } From 75025a11f35882cf1d0b3930bbbe6879cb5c2fcb Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:47:24 +0200 Subject: [PATCH 07/13] .add age function --- src/utils/age.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 src/utils/age.ts diff --git a/src/utils/age.ts b/src/utils/age.ts new file mode 100644 index 0000000..21a8877 --- /dev/null +++ b/src/utils/age.ts @@ -0,0 +1,6 @@ +export default function age () { + return Math.floor( + (new Date().getTime() - new Date('2004-07-22').getTime()) / + (1000 * 60 * 60 * 24 * 365.25), + ); +} From da6a607b5d6fa205590a0610b19915bb10762c67 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:47:44 +0200 Subject: [PATCH 08/13] .move mainlayout to index --- src/components/MainLayout.tsx | 30 ------------------------------ src/pages/index.tsx | 26 ++++++++++++++++++++++++-- 2 files changed, 24 insertions(+), 32 deletions(-) delete mode 100644 src/components/MainLayout.tsx diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx deleted file mode 100644 index 6cc8541..0000000 --- a/src/components/MainLayout.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ThemeSwitcher } from '@/components/ThemeSwitcher'; -import { NowPlayingCard } from '@/components/SpotifyCard'; -import { SocialLayout } from '@/components/SocialLayout'; -import { Toaster } from 'react-hot-toast'; -import FadeIn from 'react-fade-in'; - -export const MainLayout = () => { - return ( - <> - - -
-
-

albert

-

- {Math.floor( - (new Date().getTime() - new Date('2004-07-22').getTime()) / - (1000 * 60 * 60 * 24 * 365.25), - )} - -year-old system administrator -

- - - -
-
- - - ); -}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3679327..eb0233d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,27 @@ -import { MainLayout } from '@/components/MainLayout'; +import { ThemeSwitcher } from '@/components/ThemeSwitcher'; +import { NowPlayingCard } from '@/components/SpotifyCard'; +import { SocialLayout } from '@/components/SocialLayout'; +import { Toaster } from 'react-hot-toast'; +import age from '@/utils/age'; +import FadeIn from 'react-fade-in'; export default function Home () { - return ; + return ( + <> + + +
+
+

albert

+

+ {age()}-year-old system administrator +

+ + + +
+
+ + + ); } From 9e7e5d00f3d6b1a838e5e3b2023a47a1fb7096ef Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:48:30 +0200 Subject: [PATCH 09/13] .minor tweaks --- src/components/Icon.tsx | 49 +++++++++++++++++------------- src/components/SpotifyCard.tsx | 54 ++++++++++++++++++---------------- 2 files changed, 56 insertions(+), 47 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 248629b..a8ca544 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,7 +1,8 @@ +import { socials } from '@/components/data/Socials'; import Link from 'next/link'; import toast from 'react-hot-toast'; import copy from 'copy-to-clipboard'; -import { socials } from '@/components/data/Socials'; +import FadeIn from 'react-fade-in'; type Icon = { children: any; @@ -23,29 +24,35 @@ const notify = () => { export const Icon = ({ children, reference, copyValue }: Icon) => { if (copyValue) { return ( - social.ref === reference)?.ariaLabel - } - onClick={() => { - notify(), copy(reference); - }} - > - {children} - + + social.ref === reference)?.ariaLabel + } + onClick={() => { + notify(), copy(reference); + }} + > + {children} + + ); } return ( - social.ref === reference)?.ariaLabel} - > - {children} - + + social.ref === reference)?.ariaLabel + } + > + {children} + + ); }; diff --git a/src/components/SpotifyCard.tsx b/src/components/SpotifyCard.tsx index 3818471..d13e267 100644 --- a/src/components/SpotifyCard.tsx +++ b/src/components/SpotifyCard.tsx @@ -1,9 +1,9 @@ import { truncate } from '@/utils/truncate'; -import Image from 'next/image'; -import useSWR from 'swr'; -import SongImage from '@/public/song.webp'; -import Link from 'next/link'; import { HiMusicNote } from 'react-icons/hi'; +import Image from 'next/image'; +import Link from 'next/link'; +import FadeIn from 'react-fade-in'; +import useSWR from 'swr'; export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json()); @@ -14,29 +14,31 @@ export const NowPlayingCard = () => { }); return ( -
- {spotify.song ? ( - Song cover art - ) : ( - - )} -
-
- Listening to{' '} - {spotify.song ? ( - - {truncate(`${spotify.song.title}`, 20)} - - ) : ( - nothing - )} + +
+ {spotify.song ? ( + Song cover art + ) : ( + + )} +
+
+ Listening to{' '} + {spotify.song ? ( + + {truncate(`${spotify.song.title}`, 20)} + + ) : ( + nothing + )} +
-
+ ); }; From 034be34e53510f02df7e176e49db5f4d927b4596 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:51:15 +0200 Subject: [PATCH 10/13] .ditch icon fade-in --- src/components/Icon.tsx | 47 ++++++++++++++++++----------------------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index a8ca544..cad86ef 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -2,7 +2,6 @@ import { socials } from '@/components/data/Socials'; import Link from 'next/link'; import toast from 'react-hot-toast'; import copy from 'copy-to-clipboard'; -import FadeIn from 'react-fade-in'; type Icon = { children: any; @@ -24,35 +23,29 @@ const notify = () => { export const Icon = ({ children, reference, copyValue }: Icon) => { if (copyValue) { return ( - - social.ref === reference)?.ariaLabel - } - onClick={() => { - notify(), copy(reference); - }} - > - {children} - - + social.ref === reference)?.ariaLabel + } + onClick={() => { + notify(), copy(reference); + }} + > + {children} + ); } return ( - - social.ref === reference)?.ariaLabel - } - > - {children} - - + social.ref === reference)?.ariaLabel} + > + {children} + ); }; From 5f8da10b039febbd998bbc569e8930b29f367e38 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 04:59:22 +0200 Subject: [PATCH 11/13] .test --- public/manifest.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 public/manifest.json diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..5742260 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,16 @@ +{ + "name": "albert.lol", + "short_name": "portfolio", + "start_url": "/", + "display": "standalone", + "background_color": "#121212", + "theme_color": "#000000", + "orientation": "portrait-primary", + "icons": [ + { + "src": "/favicon.ico", + "type": "image/png", + "sizes": "256x256" + } + ] + } \ No newline at end of file From 0ed087f41bea37d3df8d56fa2699247429c02bfe Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 05:01:24 +0200 Subject: [PATCH 12/13] Revert ".test" This reverts commit 5f8da10b039febbd998bbc569e8930b29f367e38. --- public/manifest.json | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 public/manifest.json diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 5742260..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "albert.lol", - "short_name": "portfolio", - "start_url": "/", - "display": "standalone", - "background_color": "#121212", - "theme_color": "#000000", - "orientation": "portrait-primary", - "icons": [ - { - "src": "/favicon.ico", - "type": "image/png", - "sizes": "256x256" - } - ] - } \ No newline at end of file From c0bdc7167b5a7b43f8ca69a647c444725e348693 Mon Sep 17 00:00:00 2001 From: skidoodle <53189968+skidoodle@users.noreply.github.com> Date: Tue, 11 Apr 2023 05:02:48 +0200 Subject: [PATCH 13/13] .version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 41641e5..8754f2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "albert.lol", - "version": "4.0", + "version": "4.20", "private": true, "scripts": { "dev": "next dev",