crucial-tracks.js

Last updated:

Embed your most recently shared tracks from Crucial Tracks

Add this to your page, replacing USERNAME with your username.

<script src="https://scripts.brebs.net/crucial-tracks/crucial-tracks.js?user=USERNAME"></script>

Optional parameters

<script src="https://scripts.brebs.net/crucial-tracks/crucial-tracks.js?user=USERNAME&limit=2&desc&date"></script>

Example Output

Thanks to Michael Borland for letting me link to his Tracks as the example.

Style overrides

You can customize the appearance of the embed by overriding the following CSS variables.

Variable Controls
--ct-bg Main card background
--ct-card-bg Inner song card background
--ct-text Default text color
--ct-heading Date heading color
--ct-link Link & footer button color
--ct-button-hover Hover background for buttons
--ct-button-border Hover border color
<!-- Optional: Override Crucial Tracks colors -->
  <style>
  .crucial_container {
    --ct-bg: #111827 !important;
    --ct-card-bg: #1f2937 !important;
    --ct-text: #e5e7eb !important;
    --ct-heading: #22c55e !important;
    --ct-link: #60a5fa !important;
    --ct-button-hover: rgba(255,255,255,0.08) !important;
  }
  </style>
  

Get the script

You can use the hosted version directly:

<script src="https://scripts.brebs.net/crucial-tracks/crucial-tracks.js"></script>

Self-hosting (if you like doing that)

If you prefer to host the script yourself, you can copy the source and host it anywhere that serves raw JavaScript.

One easy option is use omg.lol amazing service of paste.lol.

  1. Copy or download the code of crucial-tracks.js
  2. Create a new paste at paste.lol
  3. Name it something like crucial-tracks.js
  4. Use the /raw version of the paste as your script source

Example:

<script src="https://ericmwalk.paste.lol/crucial-tracks.js/raw"></script>
The /raw endpoint serves the JavaScript directly, so it can be used just like any other hosted script. After raw you can add your paramaters like /raw?user=USERNAME