mmyoji

Install pnpm

https://pnpm.io/installation#using-corepack

$ corepack enable
$ corepack prepare pnpm@latest --activate
$ pnpm --version

ky28059

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:

bradtraversy

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.

bradtraversy

// 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;

jclosure

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/

mavieth

/**
 * 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

protrolium

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

nodesocket

<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 &amp; Canada)</option>
	<option value="-07:00">(GMT -7:00) Mountain Time (US &amp; Canada)</option>
	<option value="-06:00">(GMT -6:00) Central Time (US &amp; Canada), Mexico City</option>
	<option value="-05:00">(GMT -5:00) Eastern Time (US &amp; Canada), Bogota, Lima</option>

killwing

/* 
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>
*/