Stream Sites

A static site boilerplate built for streamers by streamers. Proudly #BuiltWith11ty and TailwindCSS!

Visit the Demo Site

Getting Started

Method 1: One-Click Deploy to Netlify

You can deploy Stream Sites to Netlify with one click to be up and running in minutes! Once you're running, you can Connect Netlify CMS.

Method 2: Clone or Fork this Repo

1. Clone (or fork) this repo: git clone https://github.com/Somehow-Qualified/stream-sites.git your-site-name (set your-site-name to whatever you want the folder to be called).

2. Go into the project directory cd your-site-name and run npm install.

3. Once all the dependencies are installed run npm start.

4. Open your browser at http://localhost:8181 to see a live-reloading copy of your site while you make changes.

5. Log into the CMS at http://localhost:8181/admin by following the prompts.

Note: The port may vary depending on your local setup. You can change it in package.json under scripts: { "watch:html" : "... --port=8181" }.

For advanced users: You can extend Browsersync settings in eleventy.config.js for your needs.

Connect Netlify CMS

Before you can use the CMS, you need to do some configuration in Netlify. They provide a very handy guide to get started.

1. Once you’ve added the site to Netlify, go to “Settings” > “Identity” and enable Identity.

2. Scroll down to the “Git Gateway” area, click “Enable Git Gateway” and follow the steps.

3. Click the “Identity” tab at the top.

4. Once you’ve enabled Identity, click “Invite Users” and invite yourself.

5. Go to your email click the invite link sent to you.

6. Set a password in the popup box (and save it to your password manager).

7. Go to /admin on your site. Login with your email address and new password.

8. You’re in and ready to edit your content!

Deploying Local Changes

Method 1: Via Netlify Continuous Deployment

Commit and push your changes to a branch connected to Netlify. Netlify will take care of the rest with npm run build.

With continuous deployment, Netlify will automatically deploy new versions of your site when you push commits to your connected Git repository. This also facilitates features like Deploy Previews. (Some features must be enabled in the Netlify UI.) - Netlify Docs

Method 2: Manually

Use npm run build to compile your site. Now you can upload your static site to your own hosting.

Documentation

Todo... (Looking into Storybook.js for it.)

Build Commands

• build: Run all of the build scripts.
• build:html: Minify HTML via html-minifier.
• build:css: Uses postcss-cli for TailwindCSS with autoprefixer, cssnano, and PurgeCSS.
• build:css:dev: Minify CSS without purging; used for Netlify CMS preview templates.
• build:js: Minify JavaScript with terser.
• clean: Delete the dist folder so you can build a clean copy of the site.

Roadmap

Follow the journey on Stream Sites or the log.

Internal Dev Comment Flags

The following options generate the Todo list for Atom: TODO, FIXME, CHANGED, XXX, IDEA, HACK, NOTE, REVIEW, NB, BUG, QUESTION, COMBAK, TEMP

To-Dos/Up Next

• IN PROGRESS: Home page modules
• Collection for managing emotes, chat commands, point redemptions, sound effect previews, etc.; include copy-to-clipboard and searching on front-end
• Support the Channel collection + page for affiliate links, donations, etc.
• Merch collection + page (maybe this is the same as Support?)
• Next/Prev links for archives
• Add more Netlify CMS Styled Previews
• Rich snippet structured data (articles, videos) with schema markup and JSON-LD
• Microformats for IndieWeb
• Webmentions
• PWA mode with offline page showing available/saved content

Needs fine tuning

• Bug - Sitemap: Set to file modified date, not build date; same for RSS and Atom feeds
• Performance/Build: Inline SVGs from icon-library.svg at build to minimize network response time.
• Twitch Live Alert JS - Make it smart when closed, so it knows when to pop up again (game changed, new stream); Also, need to look into the OAuth Implications
• Dev: watch:html is ignoring changes in /templates so you have restart the live server to see changes, each time you want to see changes.

Done!

• Script optimization: Build only into pages that need them
• Improved social links with icon selection
• Enable GitHub sponsors
• Set repo to public on Github
• Categories
• CMS: Map core fields
• iframe rendering for Twitch Clips, Twitch Vods, Twitch Collections, YouTube videos, YouTube playlists, and Vimeo
• LD-JSON: Page level complete
• Meta Extended: Privacy settings for search crawlers, Twitter, Pinterest; optional Google Site verification string
• Robots.txt to let the bots in (or block them)
• Search page for no-JS fallback
• RSS and Atom feeds
• Next/Prev links for posts
• Tag List generation
• Site search
• Twitch Live Alert (it died from the new OAuth requirements)
• Netlify CMS manual initialization
• PWA mode
• Light/Dark mode
• Archive collection (all posts)
• All of the Markdown options
• Styled Previews for Netlify CMS: Posts (Blog, Video), Pages (Core, Custom)
• Lazy loading images
• Meta: Google Schema, Twitter, Open Graph (Facebook), sameAs, feeds, JSON-LD
• Per post/page SEO settings and site level fallback
• Netlify CMS via CDN (swapped to manual initialization)
• Reading Time and Syntax Highlighting
• Sitemap
• Contact form
• Collections: Blog, Video, Archive (i.e. all posts), Tags
• Core pages: About, Contact, Privacy, 404, Link in Bio

Ideas and Opportunities

• Make it easy to add TailwindCSS options via extend; i.e. load a custom color palette through Netlify CMS. (I think the list widget with a child code widget might work)
• Make it easier to "install" custom fonts. Upload to the font directory, add it to extend, etc. all from Netlify CMS.
• Twitch Live Alert CSS - expose more styles as CSS variables for easy style modification
• Pull in latest Tweets - example
• Mobile nav [?]

Credits

The project started with Skeleventy, an Eleventy starter template using Nunjucks and TailwindCSS.

Stream Sites uses Netlify CMS via manual initialization as its git-based CMS.

Ghostwind, the default theme, is a clone of the Casper theme for Ghost by Tailwind Toolbox and expanded for Stream Sites.

CSS is kept lean with PurgeCSS and tiny with cssnano, as part of the build process with PostCSS and autoprefixer. HTML and JavaScript are processed with html-minifier and terser.

Additional features were made possible by scrounging through the internet for awesome examples and plugins:

• Many shoutouts to @skeemer for help with tons of JavaScript shenanigans!

• Contact form is built TailwindCSS Custom Forms and connected to with Netlify Forms.

• Sitemap is based on Eleventy Base Blog.

• Tags are based on the work of Bradley Taunt in Stacks and Taunt; with Tag List from Eleventy Base Blog.

• Reading time is courtesy of eleventy-plugin-reading-time.

• Date filters are built with Luxon for formatting and timezone handling.

• RSS/Atom is built upon eleventy-plugin-rss, RSS 2.0 Specification, and Atom Syndication Format.

• Syntax highlighting is courtesy of eleventy-plugin-syntaxhighlight. The default syntax theme (atom-dark) is by Joe Gibson.

• Lazy loading images is courtesy of eleventy-plugin-lazyimages.

• PWA mode is courtesy of workbox-cli.

• Dark mode is made possible by tailwindcss-dark-mode.

• Markdown flavoring comes from markdown-it and friends: markdown-it-anchor, markdown-it-attrs, markdown-it-collapsible, markdown-it-footnote, markdown-it-imsize, markdown-it-toc-done-right, and markdown-it-video.

• Search is a combination of Tailwind Toolbox's Searchy and Phil Hawksworth's Adding Search to a JAMstack Site.

• Previous and Next Links on posts come from this reply by pascalw.

• Categories are based on Philip Borenstein's Implementing Categories.

RIP

Features that have exploded due to external dependencies changing their rules. These need to be reevaluated and rewritten accordingly.

• Twitch Live Alert - Shoutout to @brob for his Twitch stream "Building a quick 11ty integration with the Twitch API" and my good luck of running into his Tweet. Combined with Standard Library, you can use Netlify Build Hooks to automate turning the alert on and off. This led to a separate journey into web components that doesn't need Build Hooks at all!