chore(git): merge main into dev (#786)

sync-branches: New code has just landed in main, so let's bring dev up
to speed!

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [8.12.1](https://github.com/mateusfg7/mateusf.com/compare/8.12.0...8.12.1) (2024-02-04)
+
+
+### Features
+
+* **lastFm:** create new types and functions ([cc0bcee](https://github.com/mateusfg7/mateusf.com/commit/cc0bcee1a4f1beea928b81b2235e831a595e8d71))
+* **ui:** replace "last track" sectionby "top track" section ([d140981](https://github.com/mateusfg7/mateusf.com/commit/d1409811c8586107a78ce156b70824ca6842fd74))
+* **ui:** replace "last track" sectionby "top track" section ([c70fc38](https://github.com/mateusfg7/mateusf.com/commit/c70fc3878b10beccc2d228f2ce55b73fdc87ee1a))
+
 ## [8.12.0](https://github.com/mateusfg7/mateusf.com/compare/8.11.3...8.12.0) (2024-01-23)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mateusf.com",
-  "version": "8.12.0",
+  "version": "8.12.1",
   "homepage": "https://mateusf.com",
   "license": "GPL-3.0",
   "author": "Mateus Felipe Gonçalves (mateusfg7) <[email protected]>",

src/app/about/sections/statistics/cards/posts.tsx

@@ -0,0 +1,14 @@
+import { Article } from '@phosphor-icons/react/dist/ssr'
+import { allPosts } from 'contentlayer/generated'
+
+import { Card } from '../card'
+
+export async function BlogPosts() {
+  return (
+    <Card
+      title="Blog posts"
+      icon={<Article size="1em" weight="duotone" />}
+      content={allPosts.length}
+    />
+  )
+}

src/app/about/sections/statistics/index.tsx

@@ -6,7 +6,7 @@ import { ArrowUpRight } from '@phosphor-icons/react/dist/ssr'
 import { AgeCard } from './cards/age'
 import { GithubFollowers } from './cards/github-followers'
 import { GithubStars } from './cards/github-stars'
-import { LastTrack } from './cards/last-track'
+import { BlogPosts } from './cards/posts'
 import { SpotifyPlays } from './cards/spotify-plays'
 import { TopArtist } from './cards/top-artist'
 
@@ -21,9 +21,9 @@ export function StatisticsGrid() {
             <AgeCard />
             <GithubStars />
             <GithubFollowers />
+            <BlogPosts />
             <SpotifyPlays />
             <TopArtist />
-            <LastTrack />
           </div>
           <div className="flex justify-center md:justify-end">
             <Link

src/app/about/statistics/components/spotify-dashboard/cards/top-track.tsx

@@ -0,0 +1,49 @@
+import Image from 'next/image'
+import { MusicNotes } from '@phosphor-icons/react/dist/ssr'
+
+import { placeholder } from '@/shared/lib/placeholder'
+import { getLastFmTopTracks, getTrackInfo } from '@/shared/lib/lastFm'
+
+export async function TopTrack() {
+  const tracks = await getLastFmTopTracks('1month')
+
+  const topTrack = await getTrackInfo({
+    artistName: tracks[0].artist.name,
+    trackName: tracks[0].name
+  })
+  const imageUrl = topTrack.album.image.filter(
+    image => image.size === 'extralarge'
+  )[0]['#text']
+
+  return (
+    <div className="flex h-full w-full items-center justify-between gap-2 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <div className="flex h-full flex-1 flex-col overflow-hidden">
+        <span className="inline-flex items-center gap-2 text-neutral-600">
+          <span>Top Played</span>
+          <MusicNotes size="1em" weight="duotone" />
+        </span>
+        <span className="text-xs text-neutral-500 dark:text-neutral-700">
+          From last month
+        </span>
+        <span className="flex h-full items-center">
+          <a
+            href={topTrack.url}
+            target="_blank"
+            title={`${topTrack.name} - ${topTrack.artist['#text']}`}
+            className="block w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl hover:underline md:text-3xl"
+          >
+            {topTrack.name} - {topTrack.artist.name}
+          </a>
+        </span>
+      </div>
+      <Image
+        src={imageUrl}
+        alt="Artist Image"
+        width={300}
+        height={300}
+        placeholder={placeholder(96, 96) as `data:image/${string}`}
+        className="w-11 rounded-xl md:w-24 md:rounded-3xl"
+      />
+    </div>
+  )
+}

src/app/about/statistics/components/spotify-dashboard/index.tsx

@@ -3,7 +3,8 @@ import { ErrorBoundary } from 'react-error-boundary'
 
 import { FallbackError } from '../fallback-error'
 
-import { LastTrack } from './cards/last-track'
+// import { LastTrack } from './cards/last-track'
+import { TopTrack } from './cards/top-track'
 import { TopTracks } from './cards/top-tracks'
 import { TopArtists } from './cards/top-artists'
 
@@ -15,8 +16,11 @@ export function SpotifyDashboard() {
       <Suspense fallback={<SpotifyStatsSkeleton />}>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-2">
           <div className="md:col-span-2">
-            <LastTrack />
+            <TopTrack />
           </div>
+          {/* <div className="md:col-span-2">
+            <LastTrack />
+          </div> */}
 
           <TopTracks />
 

src/app/about/statistics/components/spotify-dashboard/skeleton/index.tsx

@@ -1,12 +1,16 @@
 import { LastTrackSkeleton } from './last-track-skeleton'
 import { TopArtistsSkeleton } from './top-artists.skeleton'
+import { TopTrackSkeleton } from './top-track-skeleton'
 import { TopTracksSkeleton } from './top-tracks-skeleton'
 
 export function SpotifyStatsSkeleton() {
   return (
     <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-2">
-      <div className="md:col-span-2">
+      {/* <div className="md:col-span-2">
         <LastTrackSkeleton />
+      </div> */}
+      <div className="md:col-span-2">
+        <TopTrackSkeleton />
       </div>
 
       <TopTracksSkeleton />

src/app/about/statistics/components/spotify-dashboard/skeleton/top-track-skeleton.tsx

@@ -0,0 +1,19 @@
+import { MusicNotes } from '@phosphor-icons/react/dist/ssr'
+
+export function TopTrackSkeleton() {
+  return (
+    <div className="flex h-full w-full items-center justify-between gap-2 rounded-3xl bg-neutral-200 p-4 leading-none dark:bg-neutral-950 md:p-7">
+      <div className="flex h-full w-full flex-col gap-1">
+        <span className="inline-flex items-center gap-2 text-neutral-600">
+          <span>Top Played</span>
+          <MusicNotes size="1em" weight="duotone" />
+        </span>
+
+        <div className="flex h-full items-center">
+          <div className="h-9 w-2/3 animate-pulse rounded-3xl bg-neutral-400 dark:bg-neutral-800" />
+        </div>
+      </div>
+      <div className="h-11 w-14 animate-pulse rounded-xl bg-neutral-400 dark:bg-neutral-800 md:h-24 md:w-28 md:rounded-3xl" />
+    </div>
+  )
+}

src/shared/lib/lastFm.ts

@@ -24,9 +24,30 @@ export type Track = {
   '@attr': { rank: string }
 }
 
+type ImageSize = 'small' | 'medium' | 'large' | 'extralarge'
+type Period = 'overall' | '7day' | '1month' | '3month' | '6month' | '12month'
+
+type RecentTrack = {
+  artist: {
+    mbid: string
+    '#text': string
+  }
+  streamable: '0' | '1'
+  image: {
+    size: ImageSize
+    '#text': string
+  }[]
+
+  mbid: string
+  album: { mbid: string; '#text': string }
+  name: string
+  url: string
+  date: { uts: string; '#text': string }
+}
+
 type RecentTracksBody = {
   recenttracks: {
-    track: Track[]
+    track: RecentTrack[]
   }
 }
 
@@ -88,15 +109,34 @@ export async function getLastFmTopArtists() {
   return artist
 }
 
+type TopTrack = {
+  streamable: { fulltrack: '0' | '1'; '#text': '0' | '1' }
+  mbid: string
+  name: string
+  image: {
+    size: ImageSize
+    '#text': string
+  }[]
+  artist: {
+    url: string
+    name: string
+    mbid: string
+  }
+  url: string
+  duration: string
+  '@attr': { rank: string }
+  playcount: string
+}
+
 type TopTracksBody = {
   toptracks: {
-    track: Track[]
+    track: TopTrack[]
   }
 }
 
-export async function getLastFmTopTracks() {
+export async function getLastFmTopTracks(period: Period = '6month') {
   const lastFmApiRequest = await fetch(
-    `http://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=mateusfg7&api_key=${process.env.LASTFM_API_KEY}&format=json&period=6month`
+    `http://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=mateusfg7&api_key=${process.env.LASTFM_API_KEY}&format=json&period=${period}`
   )
 
   if (!lastFmApiRequest.ok) {
@@ -115,6 +155,60 @@ export async function getLastFmTopTracks() {
   return tracks
 }
 
+type TrackInfoBody = {
+  track: {
+    name: string
+    mbid: string
+    url: string
+    duration: string
+    streamable: { '#text': '0' | '1'; fulltrack: '0' | '1' }
+    listeners: string
+    playcount: string
+    artist: {
+      name: string
+      mbid: string
+      url: string
+    }
+    album: {
+      artist: string
+      title: string
+      mbid: string
+      url: string
+      image: {
+        size: ImageSize
+        '#text': string
+      }[]
+      '@attr': { position: string }
+    }
+    toptags: { tag: { name: string; url: string }[] }
+  }
+}
+
+export async function getTrackInfo({
+  trackName,
+  artistName
+}: {
+  trackName: string
+  artistName: string
+}) {
+  const lastFmApiRequest = await fetch(
+    `http://ws.audioscrobbler.com/2.0/?method=track.getInfo&api_key=${process.env.LASTFM_API_KEY}&artist=${artistName}&track=${trackName}&format=json`
+  )
+
+  if (!lastFmApiRequest.ok) {
+    console.log(lastFmApiRequest)
+    throw new ApiError({
+      message: lastFmApiRequest.statusText,
+      status: lastFmApiRequest.status,
+      url: lastFmApiRequest.url
+    })
+  }
+
+  const { track }: TrackInfoBody = await lastFmApiRequest.json()
+
+  return track
+}
+
 type User = {
   name: string
   playcount: string