ooh boy

.gitignore

@@ -0,0 +1,4 @@
+.vercel
+.env
+node_modules
+.DS_STORE

api/now-playing.ts

@@ -0,0 +1,24 @@
+import { NowRequest, NowResponse } from "@vercel/node";
+import { nowPlaying } from "../utils/spotify";
+import { renderToString } from 'react-dom/server';
+import { Player, None } from '../components/NowPlaying';
+
+
+export default async function (req: NowRequest, res: NowResponse) {
+  res.setHeader('Content-Type', 'image/svg+xml');
+
+  const { item } = await nowPlaying();
+
+  if (!item) {
+    const text = renderToString(None({}));
+    return res.status(200).send(text);
+  }
+
+  const track = item.name;
+  const { images } = item.album;
+  const cover = images[images.length - 1];
+  const artist = item.artists.map(({ name }) => name).join(', ');
+  const text = renderToString(Player({ cover, artist, track }));
+
+  return res.status(200).send(text);
+}

components/NowPlaying.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import Svg from './Svg';
+import Text from "./Text";
+
+export interface Props {
+    cover: string;
+    track: string;
+    artist: string;
+}
+
+export const None: React.FC = () => {
+      return (
+        <Svg
+          width="350"
+          height="200"
+        >
+            <Text family="mono" size="small">No tunes...</Text>
+        </Svg>
+      );
+}
+
+export const Player: React.FC<Props> = ({ track, artist }) => {
+    return (
+      <Svg width="500" height="200">
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <Text family="mono" weight="bold">
+            Now Playing
+          </Text>
+          <div style={{ display: "flex" }}>
+            <Text size="small">
+              {track}{' '}
+            </Text>
+            <Text size="small">
+              {artist}
+            </Text>
+          </div>
+        </div>
+      </Svg>
+    );
+};

components/Svg.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Svg = ({ width, height, children }) => {
+    return (
+      <svg
+        fill="none"
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <foreignObject width={width} height={height}>
+          <div {...{ xmlns: "http://www.w3.org/1999/xhtml" }}>
+            <style>{`
+              * {
+                margin: 0;
+                box-sizing: border-box;
+              }
+            `}</style>
+            { children }
+          </div>
+        </foreignObject>
+      </svg>
+    );
+}
+
+export default Svg;

components/Text.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const sizes = {
+  default: 14,
+  small: 12
+}
+
+const colors = {
+  default: "#24292e",
+  "gray-light": "#e1e4e8",
+  "gray": '#586069',
+  "gray-dark": "#24292e",
+};
+
+
+const families = {
+  default: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji",
+  mono: "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace",
+};
+
+const weights = {
+  default: 400,
+  bold: 600,
+};
+
+const Text: React.FC<any> = ({ children = '', weight = 'default', family = 'default', color = 'default', size = 'default', ...props }) => {
+
+  return (
+      <p
+        style={{ 
+          fontSize: `${sizes[size]}px`,
+          lineHeight: 1.5,
+          fontFamily: families[family],
+          color: colors[color],
+          fontWeight: weights[weight]
+        }}>
+        {children}
+      </p>
+  );
+};
+
+export default Text;