Skip to content

Commit

Permalink
Merge pull request #21 from statamic/livewire
Browse files Browse the repository at this point in the history
Replace Turbo and Alpine with Livewire 3
  • Loading branch information
jackmcdade authored Aug 25, 2023
2 parents 02a0541 + e46ed72 commit d3c43e3
Show file tree
Hide file tree
Showing 17 changed files with 82 additions and 137 deletions.
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
57 changes: 57 additions & 0 deletions public/build/assets/site-380fa510.js

Large diffs are not rendered by default.

86 changes: 0 additions & 86 deletions public/build/assets/site-381f6df3.js

This file was deleted.

1 change: 0 additions & 1 deletion public/build/assets/site-4ed993c7.js

This file was deleted.

1 change: 0 additions & 1 deletion public/build/assets/site-9bd4acd3.css

This file was deleted.

1 change: 0 additions & 1 deletion public/build/assets/site-ab9fe09b.css

This file was deleted.

1 change: 1 addition & 0 deletions public/build/assets/tailwind-8c065969.css

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions public/build/manifest.json
Original file line number Diff line number Diff line change
@@ -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"
}
Expand Down
25 changes: 0 additions & 25 deletions resources/js/site.js
Original file line number Diff line number Diff line change
@@ -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', {
Expand Down Expand Up @@ -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)
})
})
2 changes: 1 addition & 1 deletion resources/views/episodes/_card.antlers.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading

0 comments on commit d3c43e3

Please sign in to comment.