Sami Kalammallah SamX23

Spotiamp features a builtin Shoutcast® server, so you can easily stream the music to any device supporting Shoutcast, such as Sonos.

Download and install Winamp

I've installed version 5.8

https://www.winamp.com/

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

This gist was partially inspired by this blog about Next.js Vercel CI with GitHub actions.

The problem

An easy way to deploy and host websites for free is to use GitHub pages. If you've deployed a Next.js project to GitHub pages, you may have used a GitHub action similar to this in the past to automatically redeploy the site when a new commit is pushed:

# gh-pages-merge.yml
name: Deploy to gh-pages on merge
on:
  push:

	/*
	CSS stylesheet is based on Kevin Burke's Markdown.css project:
	http://kevinburke.bitbucket.org/markdowncss

	For code highlighting:
	<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/magula.min.css">
	<script src="http://yandex.st/highlightjs/6.1/highlight.js"></script>
	<script src="http://yandex.st/highlightjs/6.1/languages/cpp.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
	*/

	<select name="timezone_offset" id="timezone-offset" class="span5">
	<option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
	<option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
	<option value="-10:00">(GMT -10:00) Hawaii</option>
	<option value="-09:50">(GMT -9:30) Taiohae</option>
	<option value="-09:00">(GMT -9:00) Alaska</option>
	<option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option>
	<option value="-07:00">(GMT -7:00) Mountain Time (US & Canada)</option>
	<option value="-06:00">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
	<option value="-05:00">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>

	Each YouTube video has 4 generated images. They are predictably formatted as follows:

	http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
	http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
	http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
	http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

	The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

	http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

	/**
	* Basic CSS Media Query Template
	* TODO: I should probably use Sass...
	* Author: Michael Vieth
	* ------------------------------------------
	* Responsive Grid Media Queries - 1280, 1024, 768, 480
	* 1280-1024 - desktop (default grid)
	* 1024-768 - tablet landscape
	* 768-480 - tablet
	* 480-less - phone landscape & smaller

	// FIRESTORE RULES

	rules_version = '2';
	service cloud.firestore {
	match /databases/{database}/documents {
	// Listings
	match /listings/{listing} {
	allow read;
	allow create: if request.auth != null && request.resource.data.imgUrls.size() < 7;
	allow delete: if resource.data.userRef == request.auth.uid;