Cloud Computing with AWS

Introduction

This is a dummy page for now, which contains all the future components for a good blog post. You can think of it as a template or example.

Lorem ipsum dolor sit amet, consectetur 1adipiscing elit.
Aliquam sit amet erat auctor, tempor tellus sit amet, iaculis risus. In a dui convallis, fermentum sem at, tempor odio.
Nulla euismod lacus eu ipsum tristique, sed posuere felis aliquam.

import useSWR from 'swr';

import Spotify from 'public/static/icons/spotify.svg';

import { fetcher } from '@/utils/fetcher';
import type { SpotifyNowPlayingData } from '@/types/index';
import MusicBar from '@/components/homepage/MusicBar';

const SpotifyNowPlaying = () => {
  const response = useSWR('/api/spotify', fetcher);

  const { songUrl, title, artist } = (response.data as SpotifyNowPlayingData) || {};

  return (
    <div className="my-3 flex max-w-[540px] items-center gap-2 rounded bg-gray-200 px-3 py-2 shadow-md dark:bg-[#24283b] dark:shadow-gray-800/40">
      <Spotify className="w-6 flex-shrink-0 text-spotify" />

      <div className="inline-flex truncate">
        {songUrl ? (
          <>
            <MusicBar />
            <a
              className="ml-2 font-medium dark:text-gray-200 "
              href={songUrl}
              target="_blank"
              rel="noopener noreferrer"
              title={`${title} - ${artist || 'Spotify'}`}
            >
              {title}
            </a>
          </>
        ) : (
          <p className="font-medium dark:text-gray-200">Not Playing</p>
        )}
        <span className="mx-2 dark:text-gray-300">{' – '}</span>
        <p className="max-w-max truncate dark:text-gray-300">{artist || 'Spotify'}</p>
      </div>
    </div>
  );
};

export default SpotifyNowPlaying;

Neque porro quisquam est

Qui dolorem ipsum quia dolor

Lorem ipsum dolor sit amet, consectetur 1adipiscing elit.
Aliquam sit amet erat auctor, tempor tellus sit amet, iaculis risus. In a dui convallis, fermentum sem at, tempor odio.
Nulla euismod lacus eu ipsum tristique, sed posuere felis aliquam.

import fetch from 'isomorphic-unfetch';

import { SPOTIFY_TOKEN_API, SPOTIFY_NOW_PLAYING_API, SPOTIFY_TOP_TRACKS_API } from '@/constants/index';

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token,
} = process.env;

const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64');

async function getAccessToken() {
  const response = await fetch(SPOTIFY_TOKEN_API, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token,
    }),
  });

  return response.json();
}

export async function getSpotifyNowPlaying() {
  const { access_token } = await getAccessToken();

  const url = new URL(SPOTIFY_NOW_PLAYING_API);

  url.searchParams.append('additional_types', 'track,episode');

  return fetch(url.toString(), {
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
}

Conclusion

Mauris vulputate nibh id augue mollis gravida.
Nullam dapibus id erat sed posuere.
Nam a est ut quam varius auctor a non neque.
Curabitur sagittis pretium libero vitae ullamcorper.

References

Overview of Next.js