@lastfm-viewer/svelte
v2.0.4
Published
A Svelte component to view recent scrobbles for a last.fm user
Downloads
60
Maintainers
Readme
@lastfm-viewer/svelte
[!NOTE] This repository is now part of a monorepo if you want to start developing on it go to the original monorepo here
Homepage: lastfm-viewer.vercel.app
A sveltejs component to view recent scrobbles for a last.fm user
Quick start
Install it:
npm i @lastfm-viewer/svelte
# or
yarn add @lastfm-viewer/svelte
# or
pnpm add @lastfm-viewer/svelte
# or
bun i @lastfm-viewer/svelte
Initialize tailwind config:
npx @lastfm-viewer/ui init
# or
pnpm dlx @lastfm-viewer/ui init
# or
yarn dlx @lastfm-viewer/ui init
# or
bunx @lastfm-viewer/ui init
Install peer dependencies:
npm i -D @lastfm-viewer/utils @lastfm-viewer/tailwind-config @lastfm-viewer/ui @iconify/svelte @fontsource/inter
# or
pnpm i -D @lastfm-viewer/utils @lastfm-viewer/tailwind-config @lastfm-viewer/ui @iconify/svelte @fontsource/inter
# or
yarn add -D @lastfm-viewer/utils @lastfm-viewer/tailwind-config @lastfm-viewer/ui @iconify/svelte @fontsource/inter
# or
bun i -D @lastfm-viewer/utils @lastfm-viewer/tailwind-config @lastfm-viewer/ui @iconify/svelte @fontsource/inter
[!NOTE] If you're installing the component inside an Astro project do this instead:
npm install @astrojs/tailwind tailwindcss
# or
pnpm add @astrojs/tailwind tailwindcss
# or
yarn add @astrojs/tailwind tailwindcss
Inside astro.config.mjs
add the css nesting option:
import { defineConfig } from 'astro/config';
export default defineConfig({
integrations: [
// ...
tailwind({
nesting: true
})
// ...
]
});
Use it:
to start using the component you first need to get a last.fm API key from here, once you've done that just import the component and specify the username of the user you want to get scrobbling information from:
Please note that some users set their profile stats to private, so not every user is applicable, if you're using this component on your personal account just set your "Recent listening" stats to public here
<script>
import SvelteLastFmViewer from '@lastfm-viewer/svelte/SvelteLastFMViewer.svelte';
</script>
<SvelteLastFmViewer user="[username]" api_key="[API_KEY]" />
Props:
user: string
:
last.fm username
api_key: string
:
your last.fm public api key
updateInterval?: number
:
if you want to frequently fetch the user's listening info just specify the updateInterval
prop. (milliseconds) (it takes a number that determines the update interval):
<script>
import SvelteLastFmViewer from "@lastfm-viewer/svelte/SvelteLastFMViewer.svelte";
</script>
<SvelteLastFmViewer
user="[username]"
api_key="[API_KEY]"
updateInterval={20000} {/* 20 seconds */}
/>
[!CAUTION] setting the
updateInterval
prop to a low number might subject your api key for termination, to avoid this just use a higher more reasonable number.
mode?: ("dev" | "prod")
= "dev"
:
The default value for this prop is: "dev"
when using "dev"
mode any error that haapens will be viewed with the following message above it:
Hello developer👋, please consider handling the following error before deployment:
when using "prod"
mode the error is shown as is: