spotify-now-playing-card 1.0.0 → 1.0.1

package/README.md

@@ -22,6 +22,22 @@ yarn add spotify-now-playing-card
 pnpm add spotify-now-playing-card
 ```
 
+## Quick Setup
+
+The easiest way to get started is using the setup script:
+
+```bash
+npx spotify-now-playing-card-setup
+# or if installed locally
+npm run setup
+```
+
+This will:
+- Detect your framework (Next.js Pages/App Router)
+- Generate the API endpoint automatically
+- Set up environment variables
+- Guide you through the process
+
 ## Prerequisites
 
 You need to set up a Spotify API endpoint that returns the currently playing track data. The component expects the API to return JSON in this format:
@@ -44,7 +60,9 @@ When not playing, the API should return:
 }
 ```
 
-### Setting up Spotify API
+### Setting up Spotify API (Manual)
+
+If you prefer to set up manually or the setup script doesn't work for your framework:
 
 1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
 2. Create a new app
@@ -124,14 +142,19 @@ export default async function handler(req, res) {
 
 ### Basic Usage
 
+**Important:** You need to import the CSS file for default styles to work:
+
 ```jsx
 import { SpotifyCard } from 'spotify-now-playing-card'
+import 'spotify-now-playing-card/dist/styles.css' // Required for default styles
 
 function App() {
   return <SpotifyCard apiUrl="/api/spotify" />
 }
 ```
 
+The component works **without Tailwind CSS** - it includes its own CSS file with default styles. If you're using Tailwind, you can still override styles using the `styles` prop.
+
 ### TypeScript Usage
 
 The package includes full TypeScript definitions:
@@ -184,9 +207,36 @@ function App() {
 
 ### Styling
 
-The component uses Tailwind CSS classes by default. Make sure you have Tailwind CSS installed and configured in your project.
+The component includes its own CSS file with default styles, so **it works without Tailwind CSS**. Simply import the CSS:
 
-If you're not using Tailwind, you can override all styles using the `styles` prop or `className` prop.
+```jsx
+import 'spotify-now-playing-card/dist/styles.css'
+```
+
+### Using with Tailwind CSS
+
+If you're using Tailwind CSS, you can override the default styles using the `styles` prop:
+
+```jsx
+<SpotifyCard
+  apiUrl="/api/spotify"
+  styles={{
+    container: "bg-gray-900 rounded-xl", // Tailwind classes
+    title: "text-white text-lg"
+  }}
+/>
+```
+
+### Custom CSS
+
+You can also override styles using your own CSS by targeting the component classes:
+
+```css
+.spotify-card-container {
+  background: #1a1a1a;
+  border-radius: 12px;
+}
+```
 
 ## Dependencies
 

package/bin/setup.js

@@ -0,0 +1,298 @@
+#!/usr/bin/env node
+
+/**
+ * Spotify Card Setup Script
+ * Automatically generates API endpoint for Next.js or other frameworks
+ */
+
+const fs = require('fs')
+const path = require('path')
+const readline = require('readline')
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+})
+
+function question(query) {
+  return new Promise(resolve => rl.question(query, resolve))
+}
+
+async function setup() {
+  console.log('\n🎵 Spotify Now Playing Card - Setup\n')
+  console.log('This script will help you set up the API endpoint for the Spotify card component.\n')
+
+  // Detect framework
+  const hasNextApp = fs.existsSync('app') || fs.existsSync('pages')
+  const hasPages = fs.existsSync('pages')
+  const hasApp = fs.existsSync('app')
+  
+  let framework = 'nextjs'
+  let apiPath = 'pages/api/spotify'
+  
+  if (hasApp && !hasPages) {
+    framework = 'nextjs-app'
+    apiPath = 'app/api/spotify/route'
+  } else if (hasPages) {
+    framework = 'nextjs'
+    apiPath = 'pages/api/spotify'
+  } else {
+    console.log('⚠️  Could not detect Next.js. Please specify:')
+    const frameworkChoice = await question('Framework (nextjs/nextjs-app/other): ')
+    if (frameworkChoice === 'nextjs-app') {
+      framework = 'nextjs-app'
+      apiPath = 'app/api/spotify/route'
+    } else if (frameworkChoice === 'nextjs') {
+      framework = 'nextjs'
+      apiPath = 'pages/api/spotify'
+    } else {
+      console.log('⚠️  For other frameworks, you\'ll need to create the API endpoint manually.')
+      console.log('   Check the README.md for the API endpoint code.')
+      rl.close()
+      return
+    }
+  }
+
+  console.log(`\n📁 Detected framework: ${framework}`)
+  console.log(`📁 API path: ${apiPath}\n`)
+
+  // Get credentials
+  console.log('Please provide your Spotify API credentials:')
+  console.log('(You can get these from https://developer.spotify.com/dashboard)\n')
+
+  const clientId = await question('Spotify Client ID: ')
+  const clientSecret = await question('Spotify Client Secret: ')
+  const refreshToken = await question('Spotify Refresh Token: ')
+
+  if (!clientId || !clientSecret || !refreshToken) {
+    console.log('\n❌ All credentials are required!')
+    rl.close()
+    return
+  }
+
+  // Create directory if it doesn't exist
+  const apiDir = path.dirname(apiPath)
+  if (!fs.existsSync(apiDir)) {
+    fs.mkdirSync(apiDir, { recursive: true })
+    console.log(`✅ Created directory: ${apiDir}`)
+  }
+
+  // Generate API endpoint code
+  let apiCode = ''
+  
+  if (framework === 'nextjs-app') {
+    // Next.js App Router
+    apiCode = `import { NextResponse } from 'next/server';
+
+const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID;
+const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET;
+const SPOTIFY_REFRESH_TOKEN = process.env.SPOTIFY_REFRESH_TOKEN;
+
+// Cache for access token
+let accessToken: string | null = null;
+let tokenExpiry: number = 0;
+
+async function getAccessToken(): Promise<string> {
+	// Return cached token if still valid
+	if (accessToken && Date.now() < tokenExpiry) {
+		return accessToken;
+	}
+
+	if (!SPOTIFY_CLIENT_ID || !SPOTIFY_CLIENT_SECRET || !SPOTIFY_REFRESH_TOKEN) {
+		throw new Error('Spotify credentials not configured');
+	}
+
+	// Get new access token using refresh token
+	const response = await fetch('https://accounts.spotify.com/api/token', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded',
+			Authorization: \`Basic \${Buffer.from(
+				\`\${SPOTIFY_CLIENT_ID}:\${SPOTIFY_CLIENT_SECRET}\`
+			).toString('base64')}\`,
+		},
+		body: new URLSearchParams({
+			grant_type: 'refresh_token',
+			refresh_token: SPOTIFY_REFRESH_TOKEN,
+		}),
+	});
+
+	if (!response.ok) {
+		const error = await response.text();
+		throw new Error(\`Failed to get access token: \${error}\`);
+	}
+
+	const data = await response.json();
+	accessToken = data.access_token;
+	// Set expiry to 55 minutes (tokens last 1 hour)
+	tokenExpiry = Date.now() + 55 * 60 * 1000;
+
+	if (!accessToken) {
+		throw new Error('Failed to get access token');
+	}
+
+	return accessToken;
+}
+
+export async function GET() {
+	try {
+		const token = await getAccessToken();
+
+		// Get currently playing track
+		const response = await fetch(
+			'https://api.spotify.com/v1/me/player/currently-playing',
+			{
+				headers: {
+					Authorization: \`Bearer \${token}\`,
+				},
+			}
+		);
+
+		if (response.status === 204) {
+			// No content - not playing anything
+			return NextResponse.json({ isPlaying: false });
+		}
+
+		if (!response.ok) {
+			return NextResponse.json({ isPlaying: false });
+		}
+
+		const data = await response.json();
+
+		if (!data.item) {
+			return NextResponse.json({ isPlaying: false });
+		}
+
+		// Return format expected by spotify-now-playing-card package
+		return NextResponse.json({
+			isPlaying: data.is_playing,
+			title: data.item.name,
+			artist: data.item.artists.map((a: any) => a.name).join(', '),
+			album: data.item.album.name,
+			albumImageUrl: data.item.album.images[0]?.url || data.item.album.images[1]?.url,
+			songUrl: data.item.external_urls.spotify,
+		});
+	} catch (error: any) {
+		console.error('Spotify API error:', error);
+		return NextResponse.json(
+			{ error: error.message || 'Failed to fetch Spotify data' },
+			{ status: 500 }
+		);
+	}
+}
+`
+  } else {
+    // Next.js Pages Router
+    apiCode = `import querystring from 'querystring'
+import axios from 'axios'
+
+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')
+const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
+const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'
+
+const getAccessToken = async () => {
+	const response = await axios.post(
+		TOKEN_ENDPOINT,
+		querystring.stringify({
+			grant_type: 'refresh_token',
+			refresh_token
+		}),
+		{
+			headers: {
+				Authorization: \`Basic \${basic}\`,
+				'Content-Type': 'application/x-www-form-urlencoded'
+			}
+		}
+	)
+
+	return response.data
+}
+
+const spotifyApi = async (req, res) => {
+	try {
+		const { access_token } = await getAccessToken()
+		const response = await axios.get(NOW_PLAYING_ENDPOINT, {
+			headers: {
+				Authorization: \`Bearer \${access_token}\`
+			}
+		})
+
+		if (
+			response.status === 204 ||
+			response.status > 400 ||
+			(response.data && response.data.currently_playing_type !== 'track')
+		) {
+			return res.status(200).json({ isPlaying: false })
+		}
+
+		const data = {
+			isPlaying: response.data.is_playing,
+			title: response.data.item.name,
+			album: response.data.item.album.name,
+			artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
+			albumImageUrl: response.data.item.album.images[0].url,
+			songUrl: response.data.item.external_urls.spotify
+		}
+
+		res.status(200).json(data)
+	} catch (error) {
+		console.error('Spotify API error:', error)
+		res.status(200).json({ isPlaying: false })
+	}
+}
+
+export default spotifyApi
+`
+  }
+
+  // Write API file
+  const fileExtension = framework === 'nextjs-app' ? 'ts' : 'js'
+  const apiFilePath = framework === 'nextjs-app' ? `${apiPath}.ts` : `${apiPath}.${fileExtension}`
+  
+  fs.writeFileSync(apiFilePath, apiCode)
+  console.log(`✅ Created API endpoint: ${apiFilePath}`)
+
+  // Update or create .env file
+  const envPath = '.env.local'
+  let envContent = ''
+  
+  if (fs.existsSync(envPath)) {
+    envContent = fs.readFileSync(envPath, 'utf8')
+  }
+
+  // Check if variables already exist
+  if (!envContent.includes('SPOTIFY_CLIENT_ID')) {
+    envContent += `\n# Spotify API Credentials\n`
+    envContent += `SPOTIFY_CLIENT_ID=${clientId}\n`
+    envContent += `SPOTIFY_CLIENT_SECRET=${clientSecret}\n`
+    envContent += `SPOTIFY_REFRESH_TOKEN=${refreshToken}\n`
+    fs.writeFileSync(envPath, envContent)
+    console.log(`✅ Updated ${envPath} with Spotify credentials`)
+  } else {
+    console.log(`⚠️  ${envPath} already contains Spotify credentials. Please update manually if needed.`)
+  }
+
+  console.log('\n✨ Setup complete!')
+  console.log('\nNext steps:')
+  console.log('1. Make sure your .env.local file is in .gitignore')
+  console.log('2. Import and use the component in your app:')
+  console.log('   import { SpotifyCard } from "spotify-now-playing-card"')
+  console.log('   import "spotify-now-playing-card/dist/styles.css"')
+  console.log('3. Use it: <SpotifyCard apiUrl="/api/spotify" />')
+  console.log('\n')
+
+  rl.close()
+}
+
+setup().catch(err => {
+  console.error('Error:', err)
+  rl.close()
+  process.exit(1)
+})
+

package/dist/SpotifyCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpotifyCard.d.ts","sourceRoot":"","sources":["../src/SpotifyCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsF3C,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SpotifyCard.d.ts","sourceRoot":"","sources":["../src/SpotifyCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsF3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/index.esm.js

@@ -3,11 +3,12 @@ import axios from 'axios';
 import { SiSpotify } from 'react-icons/si';
 import useSWR from 'swr';
 
+// CSS will be imported by users: import 'spotify-now-playing-card/dist/styles.css'
 const fetcher = (url) => axios.get(url).then(res => res.data);
 /**
  * SpotifyCard - A React component to display currently playing Spotify track
  */
-const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 30000, ...props }) => {
+const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 10000, ...props }) => {
     const { data, error } = useSWR(apiUrl, fetcher, {
         refreshInterval: refreshInterval,
         revalidateOnFocus: true
@@ -15,29 +16,29 @@ const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spot
     if (error) {
         console.error('SpotifyCard error:', error);
     }
+    // Use CSS classes by default (works without Tailwind)
+    // Users can override with Tailwind classes via styles prop if they want
     const defaultStyles = {
-        container: 'text-slate-400 border border-neutral-800 rounded-lg w-full mx-5 my-2',
-        link: 'relative flex items-center space-x-2 py-4 pl-2 transition-shadow hover:shadow-md',
-        image: 'w-14 shadow-sm',
-        title: 'font-bold text-md w-48 lg:w-72 truncate',
-        artist: 'text-sm font-semibold',
-        album: 'text-xs font-semibold w-48 lg:w-72 truncate',
-        icon: 'absolute right-1.5 top-1.5'
+        container: 'spotify-card-container',
+        link: 'spotify-card-link',
+        image: 'spotify-card-image',
+        title: 'spotify-card-title',
+        artist: 'spotify-card-artist',
+        album: 'spotify-card-album',
+        icon: 'spotify-card-icon'
     };
     const mergedStyles = {
-        container: `${defaultStyles.container} ${styles.container || ''} ${className}`,
-        link: `${defaultStyles.link} ${styles.link || ''}`,
-        image: `${defaultStyles.image} ${styles.image || ''}`,
-        title: `${defaultStyles.title} ${styles.title || ''}`,
-        artist: `${defaultStyles.artist} ${styles.artist || ''}`,
-        album: `${defaultStyles.album} ${styles.album || ''}`,
-        icon: `${defaultStyles.icon} ${styles.icon || ''}`
+        container: `${defaultStyles.container} ${styles.container || ''} ${className}`.trim(),
+        link: `${defaultStyles.link} ${styles.link || ''}`.trim(),
+        image: `${defaultStyles.image} ${styles.image || ''}`.trim(),
+        title: `${defaultStyles.title} ${styles.title || ''}`.trim(),
+        artist: `${defaultStyles.artist} ${styles.artist || ''}`.trim(),
+        album: `${defaultStyles.album} ${styles.album || ''}`.trim(),
+        icon: `${defaultStyles.icon} ${styles.icon || ''}`.trim()
     };
     const isPlaying = data?.isPlaying;
-    const titleColor = isPlaying
-        ? 'text-transparent bg-clip-text bg-gradient-to-r from-violet-500 via-blue-500 to-emerald-500'
-        : '';
-    return (jsx("div", { className: mergedStyles.container, ...props, children: jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsx("div", { className: 'w-15', children: isPlaying ? (jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsx(SiSpotify, { size: 30, color: '#1ED760' })) }), jsxs("div", { className: 'flex-1', children: [jsx("p", { className: `${mergedStyles.title} ${titleColor}`, children: isPlaying ? data?.title : notPlayingText }), jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsx("div", { className: mergedStyles.icon, children: jsx(SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
+    const titleClass = isPlaying ? 'spotify-card-title-gradient' : '';
+    return (jsx("div", { className: mergedStyles.container, ...props, children: jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsx("div", { className: "spotify-card-image-container", children: isPlaying ? (jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsx(SiSpotify, { size: 30, color: '#1ED760' })) }), jsxs("div", { className: "spotify-card-content", children: [jsx("p", { className: `${mergedStyles.title} ${titleClass}`.trim(), children: isPlaying ? data?.title : notPlayingText }), jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsx("div", { className: mergedStyles.icon, children: jsx(SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
 };
 
 export { SpotifyCard, SpotifyCard as default };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,CAAC,GAAW,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC;AAwCrE;;AAEG;AACH,MAAM,WAAW,GAA+B,CAAC,EAC/C,MAAM,GAAG,cAAc,EACvB,WAAW,GAAG,0BAA0B,EACxC,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,IAAI,EAChB,cAAc,GAAG,yBAAyB,EAC1C,eAAe,GAAG,KAAK,EACvB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAc,MAAM,EAAE,OAAO,EAAE;AAC3D,QAAA,eAAe,EAAE,eAAe;AAChC,QAAA,iBAAiB,EAAE;AACpB,KAAA,CAAC;IAEF,IAAI,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC;IAC5C;AAEA,IAAA,MAAM,aAAa,GAAsB;AACvC,QAAA,SAAS,EAAE,sEAAsE;AACjF,QAAA,IAAI,EAAE,kFAAkF;AACxF,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,KAAK,EAAE,yCAAyC;AAChD,QAAA,MAAM,EAAE,uBAAuB;AAC/B,QAAA,KAAK,EAAE,6CAA6C;AACpD,QAAA,IAAI,EAAE;KACP;AAED,IAAA,MAAM,YAAY,GAAsB;AACtC,QAAA,SAAS,EAAE,CAAA,EAAG,aAAa,CAAC,SAAe,CAAA,CAAA,EAAI,MAAM,CAAC,SAAS,IAAI,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;AACpF,QAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,IAAU,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA,CAAE;AACxD,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,MAAM,EAAE,CAAA,EAAG,aAAa,CAAC,MAAY,CAAA,CAAA,EAAI,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA,CAAE;AAC9D,QAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAC,KAAW,CAAA,CAAA,EAAI,MAAM,CAAC,KAAK,IAAI,EAAE,CAAA,CAAE;AAC3D,QAAA,IAAI,EAAE,CAAA,EAAG,aAAa,CAAC,IAAU,CAAA,CAAA,EAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAA;KACvD;AAED,IAAA,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS;IACjC,MAAM,UAAU,GAAG;AACjB,UAAE;UACA,EAAE;AAEN,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,SAAS,EAAA,GAAM,KAAK,YAC/CC,IAAA,CAAA,GAAA,EAAA,EACE,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,WAAW,EAC7C,SAAS,EAAE,YAAY,CAAC,IAAI,EAAA,QAAA,EAAA,CAE5BD,aAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EAClB,SAAS,IACRA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,YAAY,CAAC,KAAK,EAC7B,GAAG,EAAE,IAAI,EAAE,aAAa,EACxB,GAAG,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,EAAA,CACjC,KAEFA,GAAA,CAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,CAC1C,EAAA,CACG,EAENC,cAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrBD,WAAG,SAAS,EAAE,GAAG,YAAY,CAAC,KAAK,CAAA,CAAA,EAAI,UAAU,EAAE,EAAA,QAAA,EAChD,SAAS,GAAG,IAAI,EAAE,KAAK,GAAG,cAAc,EAAA,CACvC,EACJA,WAAG,SAAS,EAAE,YAAY,CAAC,MAAM,YAC9B,SAAS,GAAG,CAAA,QAAA,EAAW,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,EAAA,CAChD,EACH,SAAS,IAAI,SAAS,KACrBC,YAAG,SAAS,EAAE,YAAY,CAAC,KAAK,wBACtB,IAAI,EAAE,KAAK,CAAA,EAAA,CACjB,CACL,IACG,EAEL,SAAS,KACRD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,IAAI,EAAA,QAAA,EAC/BA,IAAC,SAAS,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CACrC,CACP,CAAA,EAAA,CACC,EAAA,CACA;AAEV;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/index.js

@@ -7,11 +7,12 @@ var axios = require('axios');
 var si = require('react-icons/si');
 var useSWR = require('swr');
 
+// CSS will be imported by users: import 'spotify-now-playing-card/dist/styles.css'
 const fetcher = (url) => axios.get(url).then(res => res.data);
 /**
  * SpotifyCard - A React component to display currently playing Spotify track
  */
-const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 30000, ...props }) => {
+const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spotify.com', className = '', styles = {}, showAlbum = true, notPlayingText = 'Currently not listening', refreshInterval = 10000, ...props }) => {
     const { data, error } = useSWR(apiUrl, fetcher, {
         refreshInterval: refreshInterval,
         revalidateOnFocus: true
@@ -19,29 +20,29 @@ const SpotifyCard = ({ apiUrl = '/api/spotify', fallbackUrl = 'https://open.spot
     if (error) {
         console.error('SpotifyCard error:', error);
     }
+    // Use CSS classes by default (works without Tailwind)
+    // Users can override with Tailwind classes via styles prop if they want
     const defaultStyles = {
-        container: 'text-slate-400 border border-neutral-800 rounded-lg w-full mx-5 my-2',
-        link: 'relative flex items-center space-x-2 py-4 pl-2 transition-shadow hover:shadow-md',
-        image: 'w-14 shadow-sm',
-        title: 'font-bold text-md w-48 lg:w-72 truncate',
-        artist: 'text-sm font-semibold',
-        album: 'text-xs font-semibold w-48 lg:w-72 truncate',
-        icon: 'absolute right-1.5 top-1.5'
+        container: 'spotify-card-container',
+        link: 'spotify-card-link',
+        image: 'spotify-card-image',
+        title: 'spotify-card-title',
+        artist: 'spotify-card-artist',
+        album: 'spotify-card-album',
+        icon: 'spotify-card-icon'
     };
     const mergedStyles = {
-        container: `${defaultStyles.container} ${styles.container || ''} ${className}`,
-        link: `${defaultStyles.link} ${styles.link || ''}`,
-        image: `${defaultStyles.image} ${styles.image || ''}`,
-        title: `${defaultStyles.title} ${styles.title || ''}`,
-        artist: `${defaultStyles.artist} ${styles.artist || ''}`,
-        album: `${defaultStyles.album} ${styles.album || ''}`,
-        icon: `${defaultStyles.icon} ${styles.icon || ''}`
+        container: `${defaultStyles.container} ${styles.container || ''} ${className}`.trim(),
+        link: `${defaultStyles.link} ${styles.link || ''}`.trim(),
+        image: `${defaultStyles.image} ${styles.image || ''}`.trim(),
+        title: `${defaultStyles.title} ${styles.title || ''}`.trim(),
+        artist: `${defaultStyles.artist} ${styles.artist || ''}`.trim(),
+        album: `${defaultStyles.album} ${styles.album || ''}`.trim(),
+        icon: `${defaultStyles.icon} ${styles.icon || ''}`.trim()
     };
     const isPlaying = data?.isPlaying;
-    const titleColor = isPlaying
-        ? 'text-transparent bg-clip-text bg-gradient-to-r from-violet-500 via-blue-500 to-emerald-500'
-        : '';
-    return (jsxRuntime.jsx("div", { className: mergedStyles.container, ...props, children: jsxRuntime.jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsxRuntime.jsx("div", { className: 'w-15', children: isPlaying ? (jsxRuntime.jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsxRuntime.jsx(si.SiSpotify, { size: 30, color: '#1ED760' })) }), jsxRuntime.jsxs("div", { className: 'flex-1', children: [jsxRuntime.jsx("p", { className: `${mergedStyles.title} ${titleColor}`, children: isPlaying ? data?.title : notPlayingText }), jsxRuntime.jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxRuntime.jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsxRuntime.jsx("div", { className: mergedStyles.icon, children: jsxRuntime.jsx(si.SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
+    const titleClass = isPlaying ? 'spotify-card-title-gradient' : '';
+    return (jsxRuntime.jsx("div", { className: mergedStyles.container, ...props, children: jsxRuntime.jsxs("a", { target: '_blank', rel: 'noreferrer', href: isPlaying ? data?.songUrl : fallbackUrl, className: mergedStyles.link, children: [jsxRuntime.jsx("div", { className: "spotify-card-image-container", children: isPlaying ? (jsxRuntime.jsx("img", { className: mergedStyles.image, src: data?.albumImageUrl, alt: data?.album || 'Album cover' })) : (jsxRuntime.jsx(si.SiSpotify, { size: 30, color: '#1ED760' })) }), jsxRuntime.jsxs("div", { className: "spotify-card-content", children: [jsxRuntime.jsx("p", { className: `${mergedStyles.title} ${titleClass}`.trim(), children: isPlaying ? data?.title : notPlayingText }), jsxRuntime.jsx("p", { className: mergedStyles.artist, children: isPlaying ? `Artist: ${data?.artist}` : 'Spotify' }), showAlbum && isPlaying && (jsxRuntime.jsxs("p", { className: mergedStyles.album, children: ["Album: ", data?.album] }))] }), isPlaying && (jsxRuntime.jsx("div", { className: mergedStyles.icon, children: jsxRuntime.jsx(si.SiSpotify, { size: 20, color: '#1ED760' }) }))] }) }));
 };
 
 exports.SpotifyCard = SpotifyCard;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","SiSpotify"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/SpotifyCard.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","SiSpotify"],"mappings":"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"}

package/dist/styles.css

@@ -0,0 +1,99 @@
+/* Default styles for spotify-now-playing-card */
+.spotify-card-container {
+  color: #94a3b8; /* slate-400 */
+  border: 1px solid #262626; /* neutral-800 */
+  border-radius: 0.5rem;
+  width: 100%;
+  margin: 0.5rem 1.25rem;
+}
+
+.spotify-card-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.5rem;
+  transition: box-shadow 0.2s;
+  text-decoration: none;
+  color: inherit;
+}
+
+.spotify-card-link:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.spotify-card-image-container {
+  width: 3.5rem;
+  flex-shrink: 0;
+}
+
+.spotify-card-image {
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.spotify-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.spotify-card-title {
+  font-weight: 700;
+  font-size: 1rem;
+  width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  line-height: 1.5;
+}
+
+@media (min-width: 1024px) {
+  .spotify-card-title {
+    width: 18rem;
+  }
+}
+
+.spotify-card-title-gradient {
+  background: linear-gradient(to right, #8b5cf6, #3b82f6, #10b981);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+.spotify-card-artist {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0.25rem 0 0 0;
+  line-height: 1.5;
+  color: #94a3b8;
+}
+
+.spotify-card-album {
+  font-size: 0.75rem;
+  font-weight: 600;
+  width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0.25rem 0 0 0;
+  line-height: 1.5;
+  color: #94a3b8;
+}
+
+@media (min-width: 1024px) {
+  .spotify-card-album {
+    width: 18rem;
+  }
+}
+
+.spotify-card-icon {
+  position: absolute;
+  right: 0.375rem;
+  top: 0.375rem;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spotify-now-playing-card",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "A beautiful React component to display your currently playing Spotify track",
   "main": "dist/index.js",
@@ -8,12 +8,11 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "bin",
     "README.md"
   ],
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "prepublishOnly": "npm run build"
+  "bin": {
+    "spotify-card-setup": "bin/setup.js"
   },
   "keywords": [
     "spotify",
@@ -28,7 +27,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/spotify-now-playing-card.git"
+    "url": "git+https://github.com/basskibo/spotify-now-playing-card.git"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -48,7 +47,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^4.6.1",
+    "rollup-plugin-copy": "^3.5.0",
     "tslib": "^2.8.1",
     "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "setup": "node bin/setup.js"
   }
-}
+}