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/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", 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/Icon.tsx b/src/components/Icon.tsx index 9ad7129..cad86ef 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,3 +1,4 @@ +import { socials } from '@/components/data/Socials'; import Link from 'next/link'; import toast from 'react-hot-toast'; import copy from 'copy-to-clipboard'; @@ -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} ); diff --git a/src/components/MainLayout.tsx b/src/components/MainLayout.tsx deleted file mode 100644 index 5d4d0c9..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/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 4634fd3..d13e267 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 { HiMusicNote } from 'react-icons/hi'; import Image from 'next/image'; -import useSWR from 'swr'; -import SongImage from '@/public/song.webp'; 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()); @@ -24,21 +24,17 @@ export const NowPlayingCard = () => { src={spotify.song?.image} /> ) : ( - Song cover art + )}
Listening to{' '} {spotify.song ? ( - + {truncate(`${spotify.song.title}`, 20)} ) : ( - nothing + nothing )}
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 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..eb0233d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +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() { +export default function Home () { return ( <> - + + +
+
+

albert

+

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

+ + + +
+
+ ); } 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), + ); +}