Astro Widgets

A set of Netlify ready widgets, just to be configured via the appropriate environment variables.

Contents

Instructions

  1. Deploy this repo as a new site on Netlify:

Deploy to Netlify

  1. Configure the environment variables, following the documentation below for each service you want to enable.

  2. Add the iframe to your site.

  3. There is no step 4.

Services

Last.fm

A widget to show the most listened to track, album or artist in a period of time for a given user.

<iframe 
  src="{YOUR_NETLIFY_DOMAIN}/lastfm" 
  style="width:100%;max-width:384px;border:0;height:80px;outline:0" 
  frameborder="0"
  scrolling="no"
/>

last.fm widget example

Configuration

Environment VariableDefaultDescription
LASTFM_API_KEY(mandatory)Follow the instructions on Last.fm
LASTFM_USER(mandatory)
LASTFM_ENTITYtrackOptions available: track, album, artist
LASTFM_TIMEFRAME7dayOptions available: overall, 7day, 1month, 3month, 6month, 12month
PUBLIC_LASTFM_BGCOLOR#a8302cAny color in any css digestible format, the text color will change according to contrast needs

Strava

A widget to show the distance ran/swam/cycled in a given period of time for the user.

N.B. This implementation won’t rely on a full OAuth but on an hardcoded refresh token. This, as per the OAuth design, means the build could fail at any time if the refresh_token changes. You should receive an email from Netlify, change the ENV variable and it re-build.

<iframe 
  src="{YOUR_NETLIFY_DOMAIN}/strava" 
  style="width:100%;max-width:320px;border:0;height:80px;outline:0" 
  frameborder="0"
  scrolling="no"
/>

strava widget example

Configuration

Environment VariableDefaultDescription
STRAVA_CLIENT(mandatory)Follow the instructions on Strava
STRAVA_SECRET(mandatory)
STRAVA_REFRESH_TOKEN(mandatory)
STRAVA_TYPErunOptions available: run, ride, swim
STRAVA_TIMEFRAMEytdOptions available: ytd (year to date), recent (last month), all
STRAVA_UNITkmOptions available: km, miles
PUBLIC_STRAVA_BGCOLOR#e95f29Any color in any css digestible format, the text color will change according to contrast needs

Literal.club

A widget to show the latest book marked “currently reading”. Style inspired by @aepicos’s work

<iframe 
  src="{YOUR_NETLIFY_DOMAIN}/literal" 
  style="width:100%;max-width:480px;border:0;height:{CHECK_THE_TABLE_BELOW};outline:0" 
  frameborder="0"
  scrolling="no"
/>

literal.club widget example

Configuration

Environment VariableDefaultDescription
LITERALCLUB_EMAIL(mandatory)As per the literal.club API instruction
LITERALCLUB_PWD(mandatory)
PUBLIC_LITERALCLUB_SIZEsmallOptions available small, medium, large. Iframe heights, respectively: 128px, 164px and 200px
PUBLIC_LITERALCLUB_BGCOLOR#e8e3d5Any color in any css digestible format, the text color will change according to contrast needs

Scheduling

There’s a scheduled function executing every Monday at midnight, which will trigger the build if you add the Netlify build hook url in the environment variables.

Environment VariableDescription
BUILD_HOOKNetlify Build Hook URL

Change Schedule

If you need a different schedule you can either use something like EasyCron to trigger the buld, or fork the repo and change it in this file.