Removed spotify... its hard to maintain and also fuck spotify
Some checks failed
Docker Deploy / build-and-push (push) Has been cancelled

This commit is contained in:
2025-06-27 15:44:43 -06:00
parent 6c2f4e1b81
commit 9dbdd265ba
10 changed files with 16 additions and 611 deletions

View File

@ -1,4 +0,0 @@
SPOTIFY_CLIENT_ID=your_client_id_here
SPOTIFY_CLIENT_SECRET=your_client_secret_here
SPOTIFY_ACCESS_TOKEN=BQA...
SPOTIFY_REFRESH_TOKEN=AQA...

View File

@ -42,7 +42,6 @@ export default defineConfig({
"arrow-left",
],
"simple-icons": [
"spotify",
"gitea",
"bluesky",
"react",

View File

@ -5,8 +5,4 @@ services:
- "${APP_PORT}:4321"
environment:
NODE_ENV: production
SPOTIFY_CLIENT_ID: ${SPOTIFY_CLIENT_ID}
SPOTIFY_CLIENT_SECRET: ${SPOTIFY_CLIENT_SECRET}
SPOTIFY_REFRESH_TOKEN: ${SPOTIFY_REFRESH_TOKEN}
SPOTIFY_ACCESS_TOKEN: ${SPOTIFY_ACCESS_TOKEN}
restart: unless-stopped

View File

@ -1,31 +1,20 @@
---
import { Icon } from "astro-icon/components";
import SpotifyIcon from "./SpotifyIcon";
import { socialLinks } from "../config/data";
// Helper function to check if icon is a string (Astro icon)
function isAstroIcon(icon: any): icon is string {
return typeof icon === "string";
}
// Helper function to check if icon is SpotifyIcon component
function isSpotifyIcon(icon: any): boolean {
return icon === SpotifyIcon;
}
---
<div class="flex flex-row gap-4 text-3xl">
{
socialLinks.map((link) => {
if (isSpotifyIcon(link.icon)) {
return <SpotifyIcon profileUrl={link.url} client:load />;
} else if (isAstroIcon(link.icon)) {
return (
<a
href={link.url}
target={
link.url.startsWith("http") ? "_blank" : undefined
}
target={link.url.startsWith("http") ? "_blank" : undefined}
rel={
link.url.startsWith("http")
? "noopener noreferrer"
@ -37,8 +26,6 @@ function isSpotifyIcon(icon: any): boolean {
<Icon name={link.icon} />
</a>
);
}
return null;
})
}
</div>

View File

@ -1,207 +0,0 @@
import { useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
interface SpotifyTrack {
name: string;
artists: { name: string }[];
is_playing: boolean;
external_urls?: {
spotify: string;
};
}
interface SpotifyResponse {
is_playing: boolean;
item: SpotifyTrack;
}
interface SpotifyIconProps {
profileUrl?: string;
}
// Spotify SVG icon component
const SpotifySVG = ({ className }: { className?: string }) => (
<svg
viewBox="0 0 24 24"
fill="currentColor"
className={className}
width="24"
height="24"
>
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z" />
</svg>
);
export default function SpotifyIcon({
profileUrl = "https://open.spotify.com",
}: SpotifyIconProps) {
const currentTrack = useSignal<SpotifyTrack | null>(null);
const isPlaying = useSignal(false);
const isDynamicEnabled = useSignal(false);
const hasLoggedError = useSignal(false);
useEffect(() => {
// First, check if Spotify is properly configured
const checkConfiguration = async () => {
try {
const response = await fetch("/api/spotify/config");
if (!response.ok) {
throw new Error(
`Spotify config endpoint returned status ${response.status}`,
);
}
const { configured } = await response.json();
if (!configured) {
if (!hasLoggedError.value) {
console.warn(
"[Spotify] Dynamic features disabled: missing or invalid environment variables.",
);
hasLoggedError.value = true;
}
isDynamicEnabled.value = false;
return;
}
isDynamicEnabled.value = true;
initializeSpotifyConnection();
} catch (error: any) {
if (!hasLoggedError.value) {
console.error(
"[Spotify] Could not enable dynamic features:",
error?.message || error,
);
hasLoggedError.value = true;
}
isDynamicEnabled.value = false;
}
};
checkConfiguration();
}, []);
const initializeSpotifyConnection = () => {
// Set up Server-Sent Events connection
const eventSource = new EventSource("/api/spotify/stream");
eventSource.onopen = () => {
// Only log on first open
if (!hasLoggedError.value) {
console.info("[Spotify] SSE connected for dynamic icon.");
}
};
eventSource.onmessage = (event) => {
try {
const message = JSON.parse(event.data);
// Handle different message types
if (message.type === "keepalive") {
// Just a keepalive, no need to do anything
return;
}
if (message.type === "track" && message.data) {
const data: SpotifyResponse = message.data;
if (data.is_playing && data.item) {
currentTrack.value = data.item;
isPlaying.value = data.is_playing;
} else {
currentTrack.value = null;
isPlaying.value = false;
}
}
} catch (err) {
if (!hasLoggedError.value) {
console.error(
"[Spotify] Error parsing SSE data:",
err,
"Raw data:",
event.data,
);
hasLoggedError.value = true;
}
// Fail silently - will revert to static mode
}
};
eventSource.onerror = (event) => {
if (!hasLoggedError.value) {
console.error(
"[Spotify] SSE connection error. Falling back to static icon.",
{
readyState: eventSource.readyState,
url: eventSource.url,
event: event,
},
);
hasLoggedError.value = true;
}
// Close the connection to prevent retries
eventSource.close();
// Set to static mode
isDynamicEnabled.value = false;
currentTrack.value = null;
isPlaying.value = false;
};
// Cleanup on unmount
return () => {
eventSource.close();
};
};
const getTooltipText = () => {
if (isDynamicEnabled.value && currentTrack.value && isPlaying.value) {
const artists = currentTrack.value.artists
.map((artist) => artist.name)
.join(", ");
return `${currentTrack.value.name} by ${artists} (click to open in Spotify)`;
}
return "Spotify";
};
const getSpotifyUrl = () => {
// If we have a current track with external URL, use that
if (
isDynamicEnabled.value &&
currentTrack.value &&
isPlaying.value &&
currentTrack.value.external_urls?.spotify
) {
return currentTrack.value.external_urls.spotify;
}
// Otherwise, use the provided profile URL or fallback to general Spotify
return profileUrl;
};
return (
<div className="tooltip tooltip-top" data-tip={getTooltipText()}>
<a
href={getSpotifyUrl()}
target="_blank"
rel="noopener noreferrer"
aria-label="Spotify"
className="hover:text-primary transition-colors relative inline-block"
>
<div
className={`transition-transform duration-1000 ${
isDynamicEnabled.value && isPlaying.value ? "animate-spin" : ""
}`}
style={{
animation:
isDynamicEnabled.value && isPlaying.value
? "spin 3s linear infinite"
: "none",
}}
>
<SpotifySVG className="w-6 h-6" />
</div>
{isDynamicEnabled.value && isPlaying.value && (
<div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
)}
</a>
</div>
);
}

View File

@ -20,8 +20,6 @@ import {
Megaphone,
} from "lucide-preact";
import SpotifyIcon from "../components/SpotifyIcon";
import logo from "../assets/logo_real.webp";
// Astro Icon references
@ -222,13 +220,6 @@ export const socialLinks: SocialLink[] = [
icon: BLUESKY_ICON,
ariaLabel: "Bluesky Profile",
},
{
id: "spotify",
name: "Spotify",
url: "https://open.spotify.com/user/31pjwuuqwnn5zr7fnhfjjmi7c4bi?si=1be2bfdc844c4d85",
icon: SpotifyIcon,
ariaLabel: "Spotify Profile",
},
];
export const techLinks: TechLink[] = [

View File

@ -1,48 +0,0 @@
import type { APIRoute } from "astro";
import {
getSpotifyCredentials,
isSpotifyConfigured,
} from "../../../utils/spotify";
export const GET: APIRoute = async () => {
try {
const isConfigured = isSpotifyConfigured();
if (!isConfigured) {
const credentials = getSpotifyCredentials();
console.log(
"Spotify integration disabled - missing environment variables:",
{
hasClientId: !!credentials?.clientId,
hasClientSecret: !!credentials?.clientSecret,
hasRefreshToken: !!credentials?.refreshToken,
},
);
}
return new Response(
JSON.stringify({
configured: isConfigured,
}),
{
status: 200,
headers: {
"Content-Type": "application/json",
},
},
);
} catch (error) {
console.error("Error checking Spotify configuration:", error);
return new Response(
JSON.stringify({
configured: false,
}),
{
status: 200,
headers: {
"Content-Type": "application/json",
},
},
);
}
};

View File

@ -1,268 +0,0 @@
import type { APIRoute } from "astro";
import { getSpotifyCredentials } from "../../../utils/spotify";
// Refresh the access token
async function refreshSpotifyToken(
refreshToken: string,
clientId: string,
clientSecret: string,
) {
const response = await fetch("https://accounts.spotify.com/api/token", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
Authorization: `Basic ${btoa(`${clientId}:${clientSecret}`)}`,
},
body: new URLSearchParams({
grant_type: "refresh_token",
refresh_token: refreshToken,
}),
});
if (!response.ok) {
throw new Error("Failed to refresh token");
}
return await response.json();
}
// Function to fetch current track from Spotify
async function fetchCurrentTrack(
clientId: string,
clientSecret: string,
refreshToken: string,
accessToken?: string,
) {
try {
let currentAccessToken = accessToken;
// Try to fetch current track with existing token
let spotifyResponse = await fetch(
"https://api.spotify.com/v1/me/player/currently-playing",
{
headers: {
Authorization: `Bearer ${currentAccessToken}`,
"Content-Type": "application/json",
},
},
);
// If token is expired (401), refresh it
if (spotifyResponse.status === 401) {
try {
const tokenData = await refreshSpotifyToken(
refreshToken,
clientId,
clientSecret,
);
currentAccessToken = tokenData.access_token;
// Retry the request with new token
spotifyResponse = await fetch(
"https://api.spotify.com/v1/me/player/currently-playing",
{
headers: {
Authorization: `Bearer ${currentAccessToken}`,
"Content-Type": "application/json",
},
},
);
} catch (refreshError) {
console.error("Failed to refresh token:", refreshError);
return null;
}
}
if (spotifyResponse.status === 204) {
// Nothing is currently playing
return {
is_playing: false,
item: null,
};
}
if (!spotifyResponse.ok) {
return null;
}
const data = await spotifyResponse.json();
return {
is_playing: data.is_playing,
item: data.item
? {
name: data.item.name,
artists: data.item.artists,
is_playing: data.is_playing,
external_urls: data.item.external_urls,
}
: null,
};
} catch (error) {
console.error("Spotify API Error:", error);
return null;
}
}
export const GET: APIRoute = async ({ request }) => {
try {
// Get Spotify credentials
const credentials = getSpotifyCredentials();
if (!credentials) {
console.log(
"Spotify SSE stream disabled - missing environment variables",
);
return new Response(JSON.stringify({ error: "Spotify not configured" }), {
status: 503,
headers: {
"Content-Type": "application/json",
},
});
}
const { clientId, clientSecret, refreshToken, accessToken } = credentials;
// Set up Server-Sent Events
const encoder = new TextEncoder();
let controller: ReadableStreamDefaultController<Uint8Array>;
let isClosed = false;
let pollInterval: NodeJS.Timeout | null = null;
const stream = new ReadableStream({
start(ctrl) {
controller = ctrl;
// Send initial data immediately to establish connection
const message = `data: ${JSON.stringify({ type: "connected", timestamp: Date.now() })}\n\n`;
controller.enqueue(encoder.encode(message));
},
cancel() {
// Client disconnected
console.log("SSE stream cancelled by client");
isClosed = true;
cleanup();
},
});
// Function to send SSE message
const sendMessage = (data: any) => {
if (isClosed) {
return; // Don't try to send if stream is closed
}
try {
const message = `data: ${JSON.stringify(data)}\n\n`;
controller.enqueue(encoder.encode(message));
} catch (error) {
if (
error instanceof TypeError &&
error.message.includes("Controller is already closed")
) {
console.log("SSE controller is closed, stopping polling");
isClosed = true;
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
} else {
console.error("Error sending SSE message:", error);
}
}
};
// Start polling and sending updates
let lastTrackData: any = null;
const poll = async () => {
if (isClosed) {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
return;
}
try {
const currentTrack = await fetchCurrentTrack(
clientId,
clientSecret,
refreshToken,
accessToken,
);
// Only send if data has changed and stream is still open
if (
!isClosed &&
JSON.stringify(currentTrack) !== JSON.stringify(lastTrackData)
) {
lastTrackData = currentTrack;
sendMessage({
type: "track",
data: currentTrack || { is_playing: false, item: null },
timestamp: Date.now(),
});
}
} catch (error) {
if (!isClosed) {
console.error("Polling error:", error);
}
}
};
// Send initial data immediately
poll();
// Poll every 3 seconds
pollInterval = setInterval(poll, 3000);
// Send keepalive every 30 seconds to prevent connection timeout
const keepaliveInterval = setInterval(() => {
if (!isClosed) {
sendMessage({ type: "keepalive", timestamp: Date.now() });
}
}, 30000);
// Clean up keepalive interval too
const cleanup = () => {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
if (keepaliveInterval) {
clearInterval(keepaliveInterval);
}
};
// Clean up when client disconnects (abort signal)
request.signal.addEventListener("abort", () => {
console.log("SSE request aborted");
isClosed = true;
cleanup();
});
return new Response(stream, {
headers: {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache, no-store, must-revalidate",
Connection: "keep-alive",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "Cache-Control",
"X-Accel-Buffering": "no",
"CF-Cache-Status": "BYPASS",
"Transfer-Encoding": "chunked",
Vary: "Accept-Encoding",
},
});
} catch (error) {
console.error("Error setting up Spotify SSE stream:", error);
return new Response(
JSON.stringify({ error: "Failed to initialize stream" }),
{
status: 500,
headers: {
"Content-Type": "application/json",
},
},
);
}
};

View File

@ -4,7 +4,7 @@ import type { ComponentType } from "preact";
// Icon Types
export type LucideIcon = ComponentType<{ size?: number; class?: string }>;
export type AstroIconName = string; // For astro-icon string references like "mdi:email"
export type CustomIconComponent = ComponentType<any>; // For custom components like SpotifyIcon
export type CustomIconComponent = ComponentType<any>;
export type IconType = LucideIcon | AstroIconName | CustomIconComponent;
export interface Talk {

View File

@ -1,41 +0,0 @@
interface SpotifyCredentials {
clientId: string;
clientSecret: string;
refreshToken: string;
accessToken?: string;
}
/**
* Get Spotify credentials from environment variables
* Checks both process.env and import.meta.env for compatibility
*/
export function getSpotifyCredentials(): SpotifyCredentials | null {
const clientId =
process.env.SPOTIFY_CLIENT_ID || import.meta.env.SPOTIFY_CLIENT_ID;
const clientSecret =
process.env.SPOTIFY_CLIENT_SECRET ||
import.meta.env.SPOTIFY_CLIENT_SECRET;
const refreshToken =
process.env.SPOTIFY_REFRESH_TOKEN ||
import.meta.env.SPOTIFY_REFRESH_TOKEN;
const accessToken =
process.env.SPOTIFY_ACCESS_TOKEN || import.meta.env.SPOTIFY_ACCESS_TOKEN;
if (!clientId || !clientSecret || !refreshToken) {
return null;
}
return {
clientId,
clientSecret,
refreshToken,
accessToken,
};
}
/**
* Check if Spotify integration is properly configured
*/
export function isSpotifyConfigured(): boolean {
return getSpotifyCredentials() !== null;
}