TRMNL Last.fm

\n \n \n \n \n \n \n \n \n \n \n

\n TRMNL Last.fm Plugin\n

\n {isConnected\n ? (\n \n )\n : (\n \n )}\n

\n \n

\n );\n}",[],[182,188],{"_102":197,"_95":198,"_152":199,"_154":183,"_155":137,"_156":200,"_158":159,"_104":201,"_99":202,"_161":192,"_163":203,"_164":22,"_165":-5,"_166":204,"_98":205},"106d8208-cc93-11f0-8cad-42dde27851f2","ConnectLastfm.tsx","6741b462-cc72-11f0-ad23-42dde27851f2",87,["D",1764359245627],12,"/** @jsxImportSource https://esm.sh/react@19.2.0 */\n\nexport function ConnectLastfm(\n { uuid, firstName, pluginId, lastfmClientId }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n lastfmClientId: string;\n },\n) {\n return (\n

\n Hello, {firstName}!\n

\n \n

\n Connect Your Last.fm Account\n

\n Connect your Last.fm account to display your music data on your TRMNL\n Device\n

\n {\n globalThis.location.href =\n `http://www.last.fm/api/auth/?api_key=${lastfmClientId}&cb=https://trmnl-lastfm.val.run/lastfm/callback?state=${uuid}`;\n }}\n >\n Connect with Last.fm\n \n

\n You'll be redirected to Last.fm to authorize this connection.\n

\n \n

\n );\n}",[],[182,198],{"_102":207,"_95":208,"_152":209,"_154":183,"_155":137,"_156":210,"_158":159,"_104":211,"_99":32,"_161":192,"_163":212,"_164":22,"_165":-5,"_166":213,"_98":214},"674f3196-cc72-11f0-ad23-42dde27851f2","TrmnlSettings.tsx","674f324a-cc72-11f0-ad23-42dde27851f2",19,["D",1764345218002],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { useState } from \"https://esm.sh/react@19.2.0\";\n\nexport function TrmnlSettings(\n { uuid, firstName, pluginId, preferences }: {\n uuid: string;\n firstName: string;\n pluginId: number;\n preferences: { displayType: string; timeRange: string };\n },\n) {\n const [loading, setLoading] = useState(false);\n const [display, setDisplay] = useState(\n preferences.displayType || \"recent_tracks\",\n );\n const [time, setTime] = useState(preferences.timeRange || \"short_term\");\n const [notification, setNotification] = useState({\n visible: false,\n type: \"success\",\n message: \"\",\n });\n\n const savePrefs = async function () {\n setLoading(true);\n\n const resp = await fetch(\"/api/prefs\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n uuid,\n prefs: {\n displayType: display,\n timeRange: time,\n },\n }),\n });\n\n setLoading(false);\n\n if (resp.status === 200) {\n setNotification({\n visible: true,\n type: \"success\",\n message: \"Preferences saved!\",\n });\n } else {\n setNotification({\n visible: true,\n type: \"danger\",\n message: `Failed to save preferences: ${resp.statusText}`,\n });\n }\n\n setTimeout(\n () => setNotification({ ...notification, visible: false }),\n 5000,\n );\n };\n\n return (\n

\n Hello, {firstName}!\n

\n Use the options below to configure what should be displayed on your TRMNL. Don't forget to hit the Save Preferences button!\n

\n {notification.visible\n ? (\n

{notification.message}

\n )\n : \"\"}\n

\n Display\n

\n \n

\n \n \n \n

\n Choose what Spotify data you want to show on your TRMNL Device\n

\n {display === \"top_artists\" || display === \"top_tracks\"\n ? (\n

\n Time Range\n

\n \n

\n \n \n \n

\n )\n : \"\"}\n

\n \n \n \n \n Save Preferences!\n \n

\n Preview\n \n {display === \"recent_tracks\" && $\"\"$ }\n {display === \"top_artists\" && $\"\"$ }\n {display === \"top_tracks\" && $\"\"$ }\n \n

\n The preview does not use your actual data.\n

\n \n

\n );\n}",[],[182,208],{"_102":216,"_95":217,"_152":218,"_154":183,"_155":137,"_156":219,"_158":159,"_104":220,"_99":32,"_161":175,"_163":221,"_164":22,"_165":-5,"_166":222,"_98":223},"6737e676-cc72-11f0-ad23-42dde27851f2","favicon.svg","6737e856-cc72-11f0-ad23-42dde27851f2",16,["D",1764345217849],"",[],[182,217],{"_102":225,"_95":226,"_152":227,"_154":183,"_155":137,"_156":228,"_158":159,"_104":229,"_99":230,"_161":175,"_163":231,"_164":22,"_165":-5,"_166":232,"_98":233},"8c1892b2-cc98-11f0-9649-42dde27851f2","index.html","67144950-cc72-11f0-82b4-42dde27851f2",94,["D",1764361600591],5,"\n\n \n \n \n TRMNL Last.fm\n \n \n \n \n \n \n \n

\n \n

\n TRMNL Last.fm Plugin\n

\n \n

+

\n Hey, welcome! 👋\n

\n Bring your listening habits to life on your TRMNL! Track what you’ve been listening to, discover\n your top artists and songs, and enjoy a personal snapshot of\n your Last.fm throughout the day.\n

\n \n \n Click to Install this Plugin on TRMNL!\n \n \n

\n Preview\n \n \n \n

\n \n \n \n \n \n",[],[182,226],{"_102":235,"_95":236,"_152":237,"_154":183,"_155":137,"_156":238,"_158":159,"_104":239,"_99":240,"_161":175,"_163":241,"_164":22,"_165":-5,"_166":242,"_98":243},"01027f9a-cc83-11f0-891d-42dde27851f2","lastfm-logo.svg","ddc5a034-cc82-11f0-a6b5-42dde27851f2",54,["D",1764352347812],4,"",[],[182,236],{"_102":245,"_95":246,"_152":247,"_154":183,"_155":137,"_156":248,"_158":159,"_104":249,"_99":174,"_161":175,"_163":250,"_164":22,"_165":-5,"_166":251,"_98":252},"76df3abc-cc85-11f0-b68e-42dde27851f2","settings.html","6732efa4-cc72-11f0-99f5-42dde27851f2",60,["D",1764353404536],"\n\n \n \n \n TRMNL Last.fm\n \n \n \n \n \n \n \n

\n \n \n

Loading...

\n \n \n \n \n \n \n",[],[182,246],{"_102":254,"_95":255,"_152":256,"_154":183,"_155":137,"_156":257,"_158":159,"_104":258,"_99":174,"_161":192,"_163":259,"_164":22,"_165":-5,"_166":260,"_98":261},"fe6e8ae4-cc87-11f0-8994-42dde27851f2","settings.tsx","673dc640-cc72-11f0-bc7f-42dde27851f2",70,["D",1764354490970],"/** @jsxImportSource https://esm.sh/react@19.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@19.2.0/client\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n uuid: string;\n firstName: string;\n pluginId: number;\n isConnected: boolean;\n lastfmClientId: string;\n preferences: object;\n };\n }\n}\n\ncreateRoot(root).render();",[],[182,255],{"_102":263,"_95":264,"_152":265,"_154":183,"_155":137,"_156":266,"_158":159,"_104":267,"_99":32,"_161":175,"_163":268,"_164":22,"_165":-5,"_166":269,"_98":270},"671c3034-cc72-11f0-88b9-42dde27851f2","trmnl-logo.svg","671c3138-cc72-11f0-88b9-42dde27851f2",13,["D",1764345217591],"\n \n \n \n \n \n \n \n",[],[182,264],[182],{"_102":273,"_95":274,"_152":275,"_154":-5,"_155":137,"_156":230,"_158":159,"_104":276,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":277,"_98":342},"66615f02-cc72-11f0-9641-42dde27851f2","routes","66616006-cc72-11f0-9641-42dde27851f2",["D",1764345216441],[278,287,297,306,315,324,333],{"_102":279,"_95":280,"_152":281,"_154":275,"_155":137,"_156":282,"_158":159,"_104":283,"_99":174,"_161":192,"_163":284,"_164":22,"_165":-5,"_166":285,"_98":286},"70ffdfae-cc92-11f0-a97a-42dde27851f2","index.ts","681b2aa8-cc72-11f0-828d-42dde27851f2",84,["D",1764358978150],"export * from \"./install.ts\";\nexport * from \"./markup.ts\";\nexport * from \"./uninstall.ts\";\nexport * from \"./settings.ts\";\nexport * from \"./lastfmCallback.ts\";\nexport * from \"./preferences.ts\";",[],[274,280],{"_102":288,"_95":289,"_152":290,"_154":275,"_155":137,"_156":291,"_158":159,"_104":292,"_99":293,"_161":192,"_163":294,"_164":22,"_165":-5,"_166":295,"_98":296},"72aa4098-cc91-11f0-ba22-42dde27851f2","install.ts","67f4ae50-cc72-11f0-b74c-42dde27851f2",75,["D",1764358551450],2,"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\n\nexport async function install(c: Context) {\n // read env vars\n const TRMNL_CLIENT_ID = process.env.TRMNL_CLIENT_ID;\n const TRMNL_CLIENT_SECRET = process.env.TRMNL_CLIENT_SECRET;\n\n // read query params\n const code = c.req.query(\"code\");\n const callbackUrl = c.req.query(\"installation_callback_url\");\n\n // prepare TRMNL payload\n const payload = {\n code: code,\n client_id: TRMNL_CLIENT_ID,\n client_secret: TRMNL_CLIENT_SECRET,\n grant_type: \"authorization_code\",\n };\n\n // get access token from TRMNL\n const resp = await fetch(\"https://usetrmnl.com/oauth/token\", {\n method: \"post\",\n headers: {\n \"content-type\": \"application/json\",\n },\n body: JSON.stringify(payload),\n });\n\n if (!resp.ok) {\n const data = await resp.text();\n console.error(`Error ${resp.status}: ${data}`);\n c.status(500);\n return c.text(\"Error trying to get access token from TRMNL!\");\n }\n\n // success redirect back to TRMNL's callback url\n return c.redirect(callbackUrl);\n}\n\nexport async function postInstall(c: Context) {\n const authHeader = c.req.header(\"Authorization\");\n const accessToken = authHeader.split(\" \")[1];\n\n const body = await c.req.json();\n const user = body.user;\n\n // insert installation\n const sql =\n \"insert into lastfm_installations(uuid, active, lastfm_connected, name, first_name, last_name, email, locale, time_zone_iana, plugin_setting_id, trmnl_access_token, preferences) values (:uuid, :active, :lastfm_connected, :name, :first_name, :last_name, :email, :locale, :time_zone_iana, :plugin_setting_id, :trmnl_access_token, :preferences)\";\n\n // insert installation\n await sqlite.execute({\n sql: sql,\n args: {\n uuid: user.uuid,\n active: 1,\n lastfm_connected: 0,\n name: user.name,\n first_name: user.first_name,\n last_name: user.last_name,\n email: user.email,\n locale: user.locale,\n time_zone_iana: user.time_zone_iana,\n plugin_setting_id: user.plugin_setting_id,\n trmnl_access_token: accessToken,\n preferences: JSON.stringify({\n displayType: \"recent_tracks\",\n timeRange: \"short_term\",\n }),\n },\n });\n\n return c.text(\"OK\");\n}",[],[274,289],{"_102":298,"_95":299,"_152":300,"_154":275,"_155":137,"_156":301,"_158":159,"_104":302,"_99":202,"_161":192,"_163":303,"_164":22,"_165":-5,"_166":304,"_98":305},"b6e55e34-cc99-11f0-b1aa-42dde27851f2","lastfmCallback.ts","67f08550-cc72-11f0-980e-42dde27851f2",97,["D",1764362101889],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\nimport * as crypto from \"node:crypto\";\n\nconst LASTFM_CLIENT_ID = process.env.LASTFM_CLIENT_ID;\nconst LASTFM_CLIENT_SECRET = process.env.LASTFM_CLIENT_SECRET;\n\nexport async function lastfmCallback(c: Context) {\n // get token and state from request\n const token = c.req.query(\"token\");\n const state = c.req.query(\"state\");\n\n const params =\n `api_key${LASTFM_CLIENT_ID}methodauth.getSessiontoken${token}${LASTFM_CLIENT_SECRET}`;\n const signature = crypto.createHash(\"md5\").update(params).digest(\"hex\");\n\n // prepare query params\n const body = new URLSearchParams();\n body.append(\"method\", \"auth.getSession\");\n body.append(\"api_key\", LASTFM_CLIENT_ID);\n body.append(\"token\", token);\n body.append(\"format\", \"json\");\n body.append(\"api_sig\", signature);\n\n // request session\n const response = await fetch(\n `https://ws.audioscrobbler.com/2.0?${body.toString()}`,\n );\n const data = await response.json();\n console.log(data);\n\n // update installation to set lastfm as active and session key\n await sqlite.execute({\n sql:\n \"update lastfm_installations set lastfm_connected = 1, lastfm_session = :lastfm_session where uuid = :uuid\",\n args: {\n lastfm_session: data.session.key,\n uuid: state,\n },\n });\n\n // redirect back to settings page\n return c.redirect(`/trmnl/settings?uuid=${state}`);\n}",[],[274,299],{"_102":307,"_95":308,"_152":309,"_154":275,"_155":137,"_156":310,"_158":159,"_104":311,"_99":32,"_161":192,"_163":312,"_164":22,"_165":-5,"_166":313,"_98":314},"681088d2-cc72-11f0-b656-42dde27851f2","markup.ts","68108986-cc72-11f0-b656-42dde27851f2",44,["D",1764345219236],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport qs from \"npm:qs@6.14.0\";\nimport {\n getRecentTracks,\n getTopArtists,\n getTopTracks,\n refreshToken,\n} from \"../utils/spotifyService.ts\";\nimport { render } from \"../utils/renderer.ts\";\n\nexport async function markup(c: Context) {\n const body = qs.parse(await c.req.text());\n const uuid = body.user_uuid;\n\n // grab installation and tokens from database\n const sql =\n \"SELECT i.spotify_connected, i.preferences, t.access_token, t.refresh_token, t.expires_at FROM installations i, tokens t WHERE i.uuid = :uuid AND t.uuid = :uuid\";\n const result = await sqlite.execute({\n sql: sql,\n args: {\n uuid: uuid as string,\n },\n });\n\n // if spotify is not yet connected, render welcome instructions\n if (result.rows.length === 0 || result.rows[0][0] === 0) {\n const rendered = await render(\"welcome\", { trmnl: body.trmnl });\n return c.json(rendered);\n }\n\n // check if spotify token is still valid\n const expiresAt = result.rows[0][4];\n const now = Math.floor(Date.now() / 1000);\n\n let accessToken = result.rows[0][2];\n if (now > expiresAt) {\n accessToken = await refreshToken(result.rows[0][0], result.rows[0][3]);\n }\n\n // get user preferences\n const prefs = JSON.parse(result.rows[0][1]);\n\n let rendered;\n switch (prefs.displayType) {\n case \"top_artists\": {\n const artists = await getTopArtists(accessToken, prefs.timeRange, 10);\n rendered = await render(\"top_artists\", { ...artists, trmnl: body.trmnl });\n break;\n }\n case \"top_tracks\": {\n const tracks = await getTopTracks(accessToken, prefs.timeRange, 10);\n rendered = await render(\"top_tracks\", { ...tracks, trmnl: body.trmnl });\n break;\n }\n default: {\n const tracks = await getRecentTracks(accessToken, 10);\n rendered = await render(\"recent_tracks\", {\n ...tracks,\n trmnl: body.trmnl,\n });\n }\n }\n\n return c.json(rendered);\n}",[],[274,308],{"_102":316,"_95":317,"_152":318,"_154":275,"_155":137,"_156":319,"_158":159,"_104":320,"_99":32,"_161":192,"_163":321,"_164":22,"_165":-5,"_166":322,"_98":323},"6813e43c-cc72-11f0-b74c-42dde27851f2","preferences.ts","6813e52c-cc72-11f0-b74c-42dde27851f2",45,["D",1764345219280],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nexport async function savePreferences(c: Context) {\n const body = await c.req.json();\n\n // save to database\n await sqlite.execute({\n sql:\n \"update installations set preferences = :preferences where uuid = :uuid\",\n args: {\n uuid: body.uuid,\n preferences: JSON.stringify(body.prefs),\n },\n });\n\n return c.text(\"ok\");\n}",[],[274,317],{"_102":325,"_95":326,"_152":327,"_154":275,"_155":137,"_156":328,"_158":159,"_104":329,"_99":293,"_161":192,"_163":330,"_164":22,"_165":-5,"_166":331,"_98":332},"f588bada-cc91-11f0-8208-42dde27851f2","settings.ts","68035e0a-cc72-11f0-b3eb-42dde27851f2",76,["D",1764358771012],"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\nimport process from \"node:process\";\n\nconst LASTFM_CLIENT_ID = process.env.LASTFM_CLIENT_ID;\n\nexport async function settings(c: Context) {\n // extract uuid from request\n const uuid = c.req.query(\"uuid\");\n\n if (uuid === null || uuid === undefined) {\n c.status(400);\n return c.text(\"Missing 'uuid' query parameter\");\n }\n\n // get lastfm connection status, plugin setting id and preferences\n const result = await sqlite.execute({\n sql:\n \"select first_name, lastfm_connected, plugin_setting_id, preferences from lastfm_installations where uuid = :uuid\",\n args: {\n uuid: uuid,\n },\n });\n\n const firstName = result.rows[0][0];\n const lastfmConnected = result.rows[0][1];\n const pluginId = result.rows[0][2];\n const preferences = JSON.parse(result.rows[0][3]);\n\n // prepare index.html file\n let html = await readFile(\"/frontend/settings.html\");\n\n // inject the initial data as a global variable inside a script tag\n const dataScript = ``;\n\n // insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n}",[],[274,326],{"_102":334,"_95":335,"_152":336,"_154":275,"_155":137,"_156":337,"_158":159,"_104":338,"_99":174,"_161":192,"_163":339,"_164":22,"_165":-5,"_166":340,"_98":341},"837a4c60-cc87-11f0-b03c-42dde27851f2","uninstall.ts","680b3eae-cc72-11f0-b74c-42dde27851f2",68,["D",1764354284688],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { Context } from \"npm:hono@4\";\n\nexport async function uninstall(c: Context) {\n // extract uuid from request\n const data = await c.req.json();\n const uuid = data.user_uuid;\n\n // update database (soft delete)\n const sql =\n \"update lastfm_installations set active = 0, updated_at = CURRENT_TIMESTAMP, uninstalled_at = CURRENT_TIMESTAMP where uuid = :uuid\";\n\n await sqlite.execute({\n sql: sql,\n args: {\n uuid: uuid,\n },\n });\n\n return c.text(\"Uninstalled\");\n}",[],[274,335],[274],{"_102":344,"_95":345,"_152":346,"_154":-5,"_155":137,"_156":240,"_158":159,"_104":347,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":348,"_98":520},"663f8d0a-cc72-11f0-88b9-42dde27851f2","templates","663f8daa-cc72-11f0-88b9-42dde27851f2",["D",1764345216220],[349,393,442,482],{"_102":350,"_95":351,"_152":352,"_154":346,"_155":137,"_156":353,"_158":159,"_104":354,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":355,"_98":392},"6684f7e6-cc72-11f0-9724-42dde27851f2","recent_tracks","6684f8cc-cc72-11f0-9724-42dde27851f2",6,["D",1764345216674],[356,365,374,383],{"_102":357,"_95":358,"_152":359,"_154":352,"_155":137,"_156":360,"_158":159,"_104":361,"_99":32,"_161":175,"_163":362,"_164":22,"_165":-5,"_166":363,"_98":364},"676b4ade-cc72-11f0-bc7f-42dde27851f2","full.liquid","676b4b92-cc72-11f0-bc7f-42dde27851f2",23,["D",1764345218136],"{% assign top5 = items | slice: 0, 5 %}\n{% assign top10 = items | slice: 5, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {{ item.track.name }}\n {{ item.track.album.name }}\n {%liquid\n # convert UTC date to UTC-3\n assign playedAt = item.played_at | date: \"%s\" | minus: 10800 | date: \"%b %e, %H:%M\"\n %}\n {{ playedAt }}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 5 }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[345,351,358],{"_102":366,"_95":367,"_152":368,"_154":352,"_155":137,"_156":369,"_158":159,"_104":370,"_99":32,"_161":175,"_163":371,"_164":22,"_165":-5,"_166":372,"_98":373},"67793554-cc72-11f0-ad23-42dde27851f2","hh.liquid","67793770-cc72-11f0-ad23-42dde27851f2",25,["D",1764345218240],"{% assign top2 = items | slice: 0, 2 %}\n{% assign top4 = items | slice: 2, 2 %}\n

\n {% for item in top2 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {{ item.track.name }}\n {{ item.track.album.name }}\n {%liquid\n # convert UTC date to UTC-3\n assign playedAt = item.played_at | date: \"%s\" | plus: trmnl.user.utc_offset | date: \"%b %e, %H:%M\"\n %}\n {{ playedAt }}\n

\n {% for artist in item.track.artists %}\n {{ artist.name }}\n {% endfor %}\n {%liquid\n # transform duration in milliseconds to mm:ss\n assign duration = item.track.duration_ms | divided_by: 1000.0 | divided_by: 60.0\n assign mins = duration | floor\n assign secs = duration | minus: mins | times: 60 | round: 0\n \n # transform to 2 digits (left pad with 0)\n assign mins = mins | prepend: '00' | slice: -2, 2\n assign secs = secs | prepend: '00' | slice: -2, 2\n %}\n \n

\n {% endfor %}\n

\n {% for item in top4 %}\n

\n {{ forloop.index | plus: 2 }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[345,351,367],{"_102":375,"_95":376,"_152":377,"_154":352,"_155":137,"_156":378,"_158":159,"_104":379,"_99":32,"_161":175,"_163":380,"_164":22,"_165":-5,"_166":381,"_98":382},"677cb634-cc72-11f0-9641-42dde27851f2","hv.liquid","677cb724-cc72-11f0-9641-42dde27851f2",26,["D",1764345218300],"{% assign top5 = items | slice: 0, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[345,351,376],{"_102":384,"_95":385,"_152":386,"_154":352,"_155":137,"_156":387,"_158":159,"_104":388,"_99":32,"_161":175,"_163":389,"_164":22,"_165":-5,"_166":390,"_98":391},"67737074-cc72-11f0-bee9-42dde27851f2","quad.liquid","67737150-cc72-11f0-bee9-42dde27851f2",24,["D",1764345218237],"{% assign top2 = items | slice: 0, 2 %}\n

\n {% for item in top2 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.track.album.images | last %}\n

\n {% endfor %}\n

\n Spotify\n Recent Tracks\n

",[],[345,351,385],[345,351],{"_102":394,"_95":395,"_152":396,"_154":346,"_155":137,"_156":397,"_158":159,"_104":398,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":399,"_98":441},"66ec5aa8-cc72-11f0-88b9-42dde27851f2","top_artists","66ec5b5c-cc72-11f0-88b9-42dde27851f2",9,["D",1764345217352],[400,408,416,424,432],{"_102":401,"_95":358,"_152":402,"_154":396,"_155":137,"_156":403,"_158":159,"_104":404,"_99":32,"_161":175,"_163":405,"_164":22,"_165":-5,"_166":406,"_98":407},"67c5efc0-cc72-11f0-ab59-42dde27851f2","67c5f04c-cc72-11f0-ab59-42dde27851f2",34,["D",1764345218777],"\n

\n {% assign artists = items | slice: 0, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n {% assign artists = items | slice: 4, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[345,395,358],{"_102":409,"_95":367,"_152":410,"_154":396,"_155":137,"_156":411,"_158":159,"_104":412,"_99":32,"_161":175,"_163":413,"_164":22,"_165":-5,"_166":414,"_98":415},"67df672a-cc72-11f0-b3eb-42dde27851f2","67df682e-cc72-11f0-b3eb-42dde27851f2",37,["D",1764345218945],"

\n {% assign artists = items | slice: 0, 4 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[345,395,367],{"_102":417,"_95":376,"_152":418,"_154":396,"_155":137,"_156":419,"_158":159,"_104":420,"_99":32,"_161":175,"_163":421,"_164":22,"_165":-5,"_166":422,"_98":423},"67e96c66-cc72-11f0-9641-42dde27851f2","67e96d2e-cc72-11f0-9641-42dde27851f2",39,["D",1764345219012],"

\n {% assign artists = items | slice: 0, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n {% assign artists = items | slice: 2, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[345,395,376],{"_102":425,"_95":385,"_152":426,"_154":396,"_155":137,"_156":427,"_158":159,"_104":428,"_99":32,"_161":175,"_163":429,"_164":22,"_165":-5,"_166":430,"_98":431},"67c9f4f8-cc72-11f0-a04a-42dde27851f2","67c9f58e-cc72-11f0-a04a-42dde27851f2",35,["D",1764345218805],"

\n {% assign artists = items | slice: 0, 2 %}\n {% for artist in artists %}\n {% assign cover = artist.images | first %}\n

\n {% endfor %}\n {% for artist in artists %}\n {{ artist.name }}\n {% endfor %}\n

\n Spotify\n Top Artists\n

",[],[345,395,385],{"_102":433,"_95":434,"_152":435,"_154":396,"_155":137,"_156":436,"_158":159,"_104":437,"_99":32,"_161":175,"_163":438,"_164":22,"_165":-5,"_166":439,"_98":440},"67d32d5c-cc72-11f0-9cb6-42dde27851f2","shared.liquid","67d32e06-cc72-11f0-9cb6-42dde27851f2",36,["D",1764345218865],"",[],[345,395,434],[345,395],{"_102":443,"_95":444,"_152":445,"_154":346,"_155":137,"_156":446,"_158":159,"_104":447,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":448,"_98":481},"66a51f94-cc72-11f0-82b4-42dde27851f2","top_tracks","66a52084-cc72-11f0-82b4-42dde27851f2",7,["D",1764345216887],[449,457,465,473],{"_102":450,"_95":358,"_152":451,"_154":445,"_155":137,"_156":452,"_158":159,"_104":453,"_99":32,"_161":175,"_163":454,"_164":22,"_165":-5,"_166":455,"_98":456},"67873eec-cc72-11f0-88b9-42dde27851f2","678740d6-cc72-11f0-88b9-42dde27851f2",27,["D",1764345218368],"{% assign top5 = items | slice: 0, 5 %}\n{% assign top10 = items | slice: 5, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 5 }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[345,444,358],{"_102":458,"_95":367,"_152":459,"_154":445,"_155":137,"_156":460,"_158":159,"_104":461,"_99":32,"_161":175,"_163":462,"_164":22,"_165":-5,"_166":463,"_98":464},"67952be2-cc72-11f0-bc7f-42dde27851f2","67952c78-cc72-11f0-bc7f-42dde27851f2",29,["D",1764345218459],"{% assign top5 = items | slice: 0, 2 %}\n{% assign top10 = items | slice: 2, 2 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n {% for item in top10 %}\n

\n {{ forloop.index | plus: 2 }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[345,444,367],{"_102":466,"_95":376,"_152":467,"_154":445,"_155":137,"_156":468,"_158":159,"_104":469,"_99":32,"_161":175,"_163":470,"_164":22,"_165":-5,"_166":471,"_98":472},"679f4d0c-cc72-11f0-9724-42dde27851f2","679f4dfc-cc72-11f0-9724-42dde27851f2",30,["D",1764345218523],"{% assign top5 = items | slice: 0, 5 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[345,444,376],{"_102":474,"_95":385,"_152":475,"_154":445,"_155":137,"_156":476,"_158":159,"_104":477,"_99":32,"_161":175,"_163":478,"_164":22,"_165":-5,"_166":479,"_98":480},"67913528-cc72-11f0-88b9-42dde27851f2","679135dc-cc72-11f0-88b9-42dde27851f2",28,["D",1764345218433],"{% assign top5 = items | slice: 0, 2 %}\n

\n {% for item in top5 %}\n

\n {{ forloop.index }}\n

\n {% assign cover = item.album.images | last %}\n

\n {{ item.name }}\n {{ item.album.name }}\n

\n {% for artist in item.artists %}\n {{ artist.name }}\n {% endfor %}\n

\n {% endfor %}\n

\n Spotify\n Top Tracks\n

",[],[345,444,385],[345,444],{"_102":483,"_95":484,"_152":485,"_154":346,"_155":137,"_156":486,"_158":159,"_104":487,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":488,"_98":519},"66c7c68e-cc72-11f0-9724-42dde27851f2","welcome","66c7c738-cc72-11f0-9724-42dde27851f2",8,["D",1764345217110],[489,497,504,511],{"_102":490,"_95":358,"_152":491,"_154":485,"_155":137,"_156":492,"_158":159,"_104":493,"_99":32,"_161":175,"_163":494,"_164":22,"_165":-5,"_166":495,"_98":496},"67a54e82-cc72-11f0-ad23-42dde27851f2","67a54f18-cc72-11f0-ad23-42dde27851f2",31,["D",1764345218566],"

\n {{ trmnl.user.first_name }}, welcome to the TRMNL Spotify Plugin!\n

This plugin requires you to connect your Spotify account before usage.

Open the plugin page and click on the Configure Spotify button to begin!

\n Spotify\n Welcome!\n

",[],[345,484,358],{"_102":498,"_95":367,"_152":499,"_154":485,"_155":137,"_156":500,"_158":159,"_104":501,"_99":32,"_161":175,"_163":494,"_164":22,"_165":-5,"_166":502,"_98":503},"67b44c3e-cc72-11f0-8d72-42dde27851f2","67b44d10-cc72-11f0-8d72-42dde27851f2",33,["D",1764345218659],[],[345,484,367],{"_102":505,"_95":376,"_152":506,"_154":485,"_155":137,"_156":507,"_158":159,"_104":508,"_99":32,"_161":175,"_163":494,"_164":22,"_165":-5,"_166":509,"_98":510},"67e34f16-cc72-11f0-ade5-42dde27851f2","67e35038-cc72-11f0-ade5-42dde27851f2",38,["D",1764345218960],[],[345,484,376],{"_102":512,"_95":385,"_152":513,"_154":485,"_155":137,"_156":514,"_158":159,"_104":515,"_99":32,"_161":175,"_163":516,"_164":22,"_165":-5,"_166":517,"_98":518},"67aa3b90-cc72-11f0-a741-42dde27851f2","67aa3c30-cc72-11f0-a741-42dde27851f2",32,["D",1764345218598],"

\n {{ trmnl.user.first_name }}, welcome to the TRMNL Spotify Plugin!\n

This plugin requires you to connect your Spotify account before usage.

Open the plugin page and click on the Configure Spotify button to begin!

\n Spotify\n Welcome!\n

",[],[345,484,385],[345,484],[345],{"_102":522,"_95":523,"_152":524,"_154":-5,"_155":137,"_156":293,"_158":159,"_104":525,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":526,"_98":553},"65f0820a-cc72-11f0-8cd7-42dde27851f2","utils","65f082d2-cc72-11f0-8cd7-42dde27851f2",["D",1764345215701],[527,535,544],{"_102":528,"_95":529,"_152":530,"_154":524,"_155":137,"_156":136,"_158":159,"_104":531,"_99":293,"_161":192,"_163":532,"_164":22,"_165":-5,"_166":533,"_98":534},"ea39b3ca-cc99-11f0-b37f-42dde27851f2","lastfmService.ts","d1ea941a-cc99-11f0-956e-42dde27851f2",["D",1764362187998],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport process from \"node:process\";\nimport { Buffer } from \"node:buffer\";\n\nconst { LASTFM_CLIENT_ID, LASTFM_CLIENT_SECRET } = process.env;\n\nexport async function getRecentTracks(accessToken: string, limit: number) {\n const resp = await fetch(\n `https://api.spotify.com/v1/me/player/recently-played?limit=${limit}`,\n {\n headers: {\n authorization: `Bearer ${accessToken}`,\n },\n },\n );\n\n return await resp.json();\n}\n\nexport async function getTopTracks(\n accessToken: string,\n timeRange: string,\n limit: number,\n) {\n const resp = await fetch(\n `https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=${limit}`,\n {\n headers: {\n authorization: `Bearer ${accessToken}`,\n },\n },\n );\n\n return await resp.json();\n}\n\nexport async function getTopArtists(\n accessToken: string,\n timeRange: string,\n limit: number,\n) {\n const resp = await fetch(\n `https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=${limit}`,\n {\n headers: {\n authorization: `Bearer ${accessToken}`,\n },\n },\n );\n\n return await resp.json();\n}",[],[523,529],{"_102":536,"_95":537,"_152":538,"_154":524,"_155":137,"_156":539,"_158":159,"_104":540,"_99":32,"_161":192,"_163":541,"_164":22,"_165":-5,"_166":542,"_98":543},"6759e5be-cc72-11f0-ad23-42dde27851f2","renderer.ts","6759e686-cc72-11f0-ad23-42dde27851f2",21,["D",1764345218072],"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Liquid } from 'npm:liquidjs@10.24.0';\n\nexport async function render(template: string, data: object) {\n const engine = new Liquid();\n\n // read all templates\n const fullTpl = await readFile(`/templates/${template}/full.liquid`);\n const hhTpl = await readFile(`/templates/${template}/hh.liquid`);\n const hvTpl = await readFile(`/templates/${template}/hv.liquid`);\n const quadTpl = await readFile(`/templates/${template}/quad.liquid`);\n const sharedTpl = await readFile(`/templates/${template}/shared.liquid`);\n\n // parse all\n const fullParsed = engine.parse(fullTpl);\n const hhParsed = engine.parse(hhTpl);\n const hvParsed = engine.parse(hvTpl);\n const quadParsed = engine.parse(quadTpl);\n const sharedParsed = engine.parse(sharedTpl);\n\n // generate all\n const full = await engine.render(fullParsed, data);\n const hh = await engine.render(hhParsed, data);\n const hv = await engine.render(hvParsed, data);\n const quad = await engine.render(quadParsed, data);\n const shared = await engine.render(sharedParsed, data);\n \n return {\n markup: full,\n markup_half_horizontal: hh,\n markup_half_vertical: hv,\n markup_quadrant: quad,\n shared: shared\n };\n}",[],[523,537],{"_102":545,"_95":546,"_152":547,"_154":524,"_155":137,"_156":548,"_158":159,"_104":549,"_99":32,"_161":192,"_163":550,"_164":22,"_165":-5,"_166":551,"_98":552},"6752d742-cc72-11f0-9641-42dde27851f2","spotifyService.ts","6752d800-cc72-11f0-9641-42dde27851f2",20,["D",1764345218024],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport process from \"node:process\";\nimport { Buffer } from \"node:buffer\";\n\nconst { SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET } = process.env;\n\nexport async function refreshToken(uuid: string, refreshToken: string) {\n const params = new URLSearchParams();\n params.append(\"grant_type\", \"refresh_token\");\n params.append(\"refresh_token\", refreshToken);\n\n const authHeader = Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString(\"base64\");\n\n const resp = await fetch(\"https://accounts.spotify.com/api/token\", {\n method: \"post\",\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n authorization: `Basic ${authHeader}`,\n },\n body: params,\n });\n\n // TODO: better error handling here (throw and catch on caller, then render error template)\n if (!resp.ok) {\n console.error(`Failed to refresh Spotify access token: ${await resp.text()}`);\n }\n\n const data = await resp.json();\n\n // calculate token expiration time\n const now = Math.floor(Date.now() / 1000);\n const expiresAt = now + data.expires_in;\n\n // update database\n await sqlite.execute({\n sql: \"update tokens set access_token = :access_token, refresh_token = :refresh_token, expires_at = :expires_at where uuid = :uuid\",\n args: {\n access_token: data.access_token,\n refresh_token: data.refresh_token ?? refreshToken, // use the same if not returned as per the Spotify docs\n expires_at: expiresAt,\n uuid: uuid,\n }\n });\n\n // return refreshed token\n return data.access_token;\n}\n\nexport async function getRecentTracks(accessToken: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/player/recently-played?limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n\n return await resp.json();\n}\n\nexport async function getTopTracks(accessToken: string, timeRange: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/top/tracks?time_range=${timeRange}&limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n \n return await resp.json();\n}\n\nexport async function getTopArtists(accessToken: string, timeRange: string, limit: number) {\n const resp = await fetch(`https://api.spotify.com/v1/me/top/artists?time_range=${timeRange}&limit=${limit}`, {\n headers: {\n authorization: `Bearer ${accessToken}`\n }\n });\n \n return await resp.json();\n}",[],[523,546],[523],{"_102":555,"_95":556,"_152":557,"_154":-5,"_155":137,"_156":558,"_158":159,"_104":559,"_99":240,"_161":560,"_163":561,"_164":22,"_165":96,"_166":562,"_98":563},"6782ee4e-cc92-11f0-a946-42dde27851f2","main.ts","67103518-cc72-11f0-ad23-42dde27851f2",83,["D",1764358962231],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4\";\nimport { bearerAuth } from \"npm:hono@4/bearer-auth\";\nimport {\n install,\n lastfmCallback,\n markup,\n postInstall,\n savePreferences,\n settings,\n uninstall,\n} from \"./routes/index.ts\";\n\n// create app\nconst app = new Hono();\n\n// root route\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\n\n// serve frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// setup trmnl routes token protection (only on hooks and markup)\napp.use(\n \"/trmnl/{(hooks\\/(install|uninstall)|markup)}\",\n bearerAuth({\n verifyToken: (token, c) => {\n return true;\n },\n }),\n);\n\n// installation route\napp.get(\"/trmnl/install\", install);\n\n// post installation webhook\napp.post(\"/trmnl/hooks/install\", postInstall);\n\n// markup route\napp.post(\"/trmnl/markup\", markup);\n\n// uninstallation route\napp.post(\"/trmnl/hooks/uninstall\", uninstall);\n\n// configuration route\napp.get(\"/trmnl/settings\", settings);\n\n// spotify callback route\napp.get(\"/lastfm/callback\", lastfmCallback);\n\n// save user preferences\napp.post(\"/api/prefs\", savePreferences);\n\nexport default app.fetch;",[],[556],"files",[149,168,180,186,196,206,215,224,234,244,253,262,272,278,287,297,306,315,324,333,343,349,356,365,374,383,393,400,408,416,424,432,442,449,457,465,473,482,489,497,504,511,521,527,535,544,554],"counts",{"_568":32,"_569":174,"_570":32,"_571":572},"pulls","branches","forks","envVars",{"_573":240,"_574":32},"count","emptyCount","contents",[577,580,583,586,589,592],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":578,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":579},["D",1764345215999],[151],{"_102":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":174,"_158":159,"_104":581,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":582},["D",1764345215398],[182],{"_102":273,"_95":274,"_152":275,"_154":-5,"_155":137,"_156":230,"_158":159,"_104":584,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":585},["D",1764345216441],[274],{"_102":344,"_95":345,"_152":346,"_154":-5,"_155":137,"_156":240,"_158":159,"_104":587,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":588},["D",1764345216220],[345],{"_102":522,"_95":523,"_152":524,"_154":-5,"_155":137,"_156":293,"_158":159,"_104":590,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":591},["D",1764345215701],[523],{"_102":555,"_95":556,"_152":557,"_154":-5,"_155":137,"_156":558,"_158":159,"_104":593,"_99":240,"_161":560,"_163":561,"_164":22,"_165":96,"_98":594},["D",1764358962231],[556],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":603,"_571":608},{"_102":103,"_95":96,"_104":604,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":605,"_131":606,"_134":607,"_146":22},["D",1764345214194],{"_93":94,"_129":130},{"_93":94,"_133":130,"_14":113},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[609,616,620,624],{"_610":611,"_104":612,"_613":-5,"_110":614,"_615":22},"key","TRMNL_CLIENT_SECRET",["D",1764358588862],"updatedAt","TRMNL Client Secret","isEmpty",{"_610":617,"_104":618,"_613":-5,"_110":619,"_615":22},"TRMNL_CLIENT_ID",["D",1764358570815],"TRMNL Client Id",{"_610":621,"_104":622,"_613":-5,"_110":623,"_615":22},"LASTFM_CLIENT_SECRET",["D",1764354000983],"Last.fm Client Secret",{"_610":625,"_104":626,"_613":-5,"_110":627,"_615":22},"LASTFM_CLIENT_ID",["D",1764353981147],"Last.fm Client Id","actionData","errors"]

sitnik

trmnl-lastfm

Environment variables