diff --git a/CNAME b/CNAME index 0bcdcaa..881d810 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -jakecover.me \ No newline at end of file +cobular.com diff --git a/package.json b/package.json index 705108e..6e77aaf 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "react-app/jest" ] }, - "homepage": "https://jakecover.me", + "homepage": "https://cobular.com", "name": "personal-website-static", "private": true, "scripts": { diff --git a/src/components/AboutMe/AboutMe.scss b/src/components/AboutMe/AboutMe.scss index adc8526..cabf5a8 100644 --- a/src/components/AboutMe/AboutMe.scss +++ b/src/components/AboutMe/AboutMe.scss @@ -59,7 +59,7 @@ ul { text-align: left; - padding-left: 40px; + padding-left: 30px; margin-bottom: 0; } @@ -68,7 +68,9 @@ font-size: 18px; list-style-type: symbols("+"); list-style-position: inside; - + } + li::-moz-list-bullet { + content: "+ "; } } @@ -99,8 +101,12 @@ &:hover, &:focus, &:focus-visible { text-decoration-color: var(--link-color); } + } - + #now-playing { + max-width: 25ch; + margin-left: 1.2ch; + text-indent: -1.2ch; } } diff --git a/src/components/AboutMe/LastFmLi.tsx b/src/components/AboutMe/LastFmLi.tsx index c17918b..0b4d1f5 100644 --- a/src/components/AboutMe/LastFmLi.tsx +++ b/src/components/AboutMe/LastFmLi.tsx @@ -1,61 +1,79 @@ -import {useEffect, useState} from "react"; -import axios from "axios"; +import { useEffect, useState } from "react"; interface NowPlayingData { - introduction: string; - lastfm: { - artist: string; - track: string; - playing: boolean; - url: string | undefined; - }; + artist: string; + track: string; + playing: boolean; + url: string | undefined; } export function LastFmLi() { - const [nowPlayingData, setNowPlayingData] = useState({ - introduction: "", - lastfm: { - artist: "nobody", - playing: false, - track: "nothing", - url: undefined, - }, - }); - - async function updateNowPlaying() { - try { - const songRequestData = await axios.get("https://api.jakecover.me"); + const [nowPlayingData, setNowPlayingData] = useState({ + artist: "nobody", + playing: false, + track: "nothing", + url: undefined, + }); - setNowPlayingData(songRequestData.data); - } catch (err) { - console.error(err); + async function updateNowPlaying() { + try { + const songRequestData = await fetch("https://api.cobular.com/graphql", { + body: JSON.stringify({ + query: ` +query { + nowPlaying { + track { + ... on Track { + title + artists { + name } + link + } } + } +} - useEffect(() => { - updateNowPlaying(); - - const interval = setInterval(updateNowPlaying, 10000); - - return () => { - clearInterval(interval); - }; - }, []); - - if (nowPlayingData.lastfm.playing) { - return ( -
  • - - listening to {nowPlayingData.lastfm.track} by{" "} - {nowPlayingData.lastfm.artist} - -
  • - ); + `, + }), + headers: { + Accept: "application/json", + "Content-Type": "application/json", + Dnt: "1", + }, + method: "POST", + }); + const data: any = await songRequestData.json(); + setNowPlayingData({ + playing: true, + artist: data["data"]["nowPlaying"]["track"]["artists"][0]["name"], + track: data["data"]["nowPlaying"]["track"]["title"], + url: data["data"]["nowPlaying"]["track"]["link"], + }); + } catch (err) { + console.error(err); } - return
  • not listening to anything right now.
  • ; -} \ No newline at end of file + } + + useEffect(() => { + updateNowPlaying(); + + const interval = setInterval(updateNowPlaying, 10000); + + return () => { + clearInterval(interval); + }; + }, []); + + if (nowPlayingData.playing) { + return ( +
  • + listening to{" "} + + {nowPlayingData.track} by {nowPlayingData.artist} + +
  • + ); + } + return
  • not listening to anything right now.
  • ; +}