Merge pull request #21 from statamic/livewire

Replace Turbo and Alpine with Livewire 3

README.md

@@ -6,9 +6,9 @@
 ## Features
 
 This kit is deceptively simple – it may look like a 3 page site but there's a whole treasure trove of business logic and UI detail just under the surface.
-### Turbo Powered
+### Livewire Powered
 
-Podcaster's frontend uses [Turbo](https://turbo.hotwire.dev/) to eliminate full page reloads, allowing the podcast player to persist across page changes without having to build and maintain the site as a SPA (single page application). State changes to the UI (such as which episode is playing) are persisted using [Alpine.js](https://alpinejs.dev).
+Podcaster's frontend uses [Livewire](https://livewire.laravel.com.dev/) to eliminate full page reloads, allowing the podcast player to persist across page changes without having to build and maintain the site as a SPA (single page application).
 
 ### The Player
 
@@ -75,3 +75,9 @@ Just a few extra things built on the PHP/Laravel site to make the experience bet
 - AddSlashes Modifier
 - PubSubHubbub Event Listener
 - Getting Started Dashboard Widget
+
+### Customize the Frontend
+
+If you want to customize the frontend (it's a _starter_ kit after all), all you need to do while working on the site is run `npm run dev` for Vite to watch changes and recompile your Tailwind-driven CSS or JS.
+
+In production, use `npm run build` in your deploy script instead for Production-ready compiled resources.

package.json

@@ -12,8 +12,6 @@
         "vite": "^4.0.0"
     },
     "dependencies": {
-        "@hotwired/turbo": "^7.0.0-rc.1",
-        "alpinejs": "^3.9.3",
         "chroma-js": "^2.1.2",
         "plyr": "^3.6.8"
     }

public/build/manifest.json

@@ -1,11 +1,11 @@
 {
-  "resources/css/site.css": {
-    "file": "assets/site-ab9fe09b.css",
+  "resources/css/tailwind.css": {
+    "file": "assets/tailwind-8c065969.css",
     "isEntry": true,
-    "src": "resources/css/site.css"
+    "src": "resources/css/tailwind.css"
   },
   "resources/js/site.js": {
-    "file": "assets/site-381f6df3.js",
+    "file": "assets/site-380fa510.js",
     "isEntry": true,
     "src": "resources/js/site.js"
   }

resources/js/site.js

@@ -1,6 +1,4 @@
-import * as Turbo from "@hotwired/turbo"
 import Plyr from 'plyr';
-import Alpine from 'alpinejs';
 import chroma from "chroma-js";
 
 Alpine.store('ui', {
@@ -61,26 +59,3 @@ Alpine.store('player', {
         plyr.togglePlay()
     },
 });
-
-Alpine.start();
-window.Alpine = Alpine;
-
-// Turbo + Alpine.js 3 bridge
-// via: https://gist.github.com/calebporzio/20cf74af4a015644c7bef5166cffd86c
-document.addEventListener('turbo:before-render', () => {
-    let permanents = document.querySelectorAll('[data-turbo-permanent]')
-
-    let undos = Array.from(permanents).map(el => {
-        el._x_ignore = true
-
-        return () => {
-            delete el._x_ignore
-        }
-    })
-
-    document.addEventListener('turbo:render', function handler() {
-        while(undos.length) undos.shift()()
-
-        document.removeEventListener('turbo:render', handler)
-    })
-})

resources/views/episodes/_card.antlers.html

@@ -2,7 +2,7 @@
     {{ partial:play-button }}
     <div class="pt-[2px]">
         <h3 class="mb-3">
-            <a href="{{ url }}" class="text-lg font-bold hover:text-gray-700 leading-snug">{{ title | widont }}</a>
+            <a wire:navigate href="{{ url }}" class="text-lg font-bold hover:text-gray-700 leading-snug">{{ title | widont }}</a>
         </h3>
         <p class="text-sm antialiased">{{ summary }}</p>
         <div class="mt-4 font-mono text-gray-400 text-xs flex flex-wrap space-x-2 md:space-x-4 uppercase tracking-widest">