3fingers

Hi @bernhard, this is what worked for me: <?php namespace ProcessWire; $wire->addHook('/emit', function ($event) { header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $reference = $event->pages->get('/')->page_selector->title; $selector = $event->pages->getRaw("title=$reference, field=id|title|text|image, entities=1"); $result = json_encode($selector); while (true) { echo "event: ping" . PHP_EOL; echo "data: " . $result . PHP_EOL; echo PHP_EOL; ob_end_flush(); flush(); sleep(1); } }); In the frontend then: // Init SSE and listen to php page emitter let source = new EventSource("/sse/emit/"); source.addEventListener("ping", function(event) { getData(event) }); // Retrieve ping data, parse it and pass the result to the resolveData function function getData(event) { return new Promise((resolve, reject) => { if (event.data) { let result = JSON.parse(event.data); resolve(result); } }).then((result) => { resolveData(result) }); } // Resolve data and update alpine data function resolveData(result) { console.log(new Date().getSeconds()); // It logs correctly every 1 sec Object.assign(Alpine.store('sse'), { fragmentShow: true, id: result.id, title: result.title, text: result.text, image: result.image[0].data, imageDescription: result.image[0].description }); }

Hello all! A client asked us to implement a landing page where some content would have to swap in real time when needed. Basically I need to implement a way to select in the backend (via a select dropdown or whatever) which page I want to use as the "replacer", save and then immediately use its html content to swap the old content, in real-time, on the front-end. I've read about htmx and its sse implementation, and also took a look at this simple example on how to dispach an event via php every second. The front-end part looks way easier to implement, but the backend one it's over my knowledge at the time of this writing. I know @netcarver did some test and also @kongondo is playing with those technology a bit lately. This is the first time I came to such a request and I'm looking for some advice from you guys! :)

Now we are talking 🙂 That's what I meant in my previous post, using pw-panels to have some more options capabilities per single, matrix block, field. In your example video (where the panel is used), is there any reason beyond your preference to not have a repeater field in your main editing page? IMHO the real potential benefit would be delegating custom, reusable options (something like a combo field) for each single repeater matrix entry (if needed). Doing so we could de-clutter the interface and gain more clarity for both us and the user.

I really like the idea behind the third approach where every block has its sets of options to work with. I don't really like the way to access them, via a modal interface, even tought I think you've used it since it's the current best way pw gives us to stay in the state of the page edit. One better approach would be to have somewhere a tab (or tabs) for each and every component inside the block (in this case image and text, as for your example) where the options might have their place to live, something similar to what we already have for the rest of the pages. Or maybe, and even better, use the pw native sliding panels to edit the content of each block. Great job by the way!

That can be easily done changing colour variables inside tailwind.config.js as suggested on my previous post. In addition to that it might be useful, for theming purpose, to create a single preset for every theme you want to have, and switch between them per project-basis. More here https://tailwindcss.com/docs/presets Not something possible out of the box as far as I am aware of. Utility variables are top level and not tied directly to custom sections.

I tried to understand your question but I'm missing something for sure. Can you elaborate a bit deeper please? 🙂 As a quick guess, is this page something you were looking for?

I've found myself that the most useful classes are the ones dedicated to wireframe the layout itself, like margins and paddings. Using them in early stages of the blocking phase seem to be the most effective way for me. So I tend to do the opposite of what you are suggesting: utility classes first and layout tweaking with custom rules later (if needed). There is plenty of utility classes I never had to use, and that's ok. This is also true for vanilla css declarations as well, it all depends on the specific project. To me it's not about how many utility classes I would use, but how many of them I can reuse inside a single project, avoding inconsistencies all over the place. Having the ability to tweak them in one single configuration file is a bonus. Of course this is also true if you are smart enough to go with "pure" css custom variables inside the :root selector of your css. This is certainly an option, if you have found something inside Bootstrap, Bulma or whatever is missing from Tailwind. I don't see the point anyway, because with the new jit mode from Tailwind you will have just the utility classes baked inside your "dist" css, without any bloating useless css.

Nothing wrong with vanilla css at all indeed 🙂 For me tailwind is just a tool that makes me quicker to write my css declarations and development in general. Take the above example: .btn { @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; } In plain css it would be: .btn { padding: var(--margin-tb) var(--margin-lr); border-radius: var(--medium-radius); font-weight: 600; // and this might be a custom property too if needed background: var(--bg-lighter-gray); color: var(--text-black); } It's more verbose I think. I've intentionally wrote css variables to slightly emulate what tailwind does: helping you to create and use a design system, with consistent values at disposal throughout the entire application. Not to mention purgecss, which is included out of the box, and for me it's a no brainer. It drastically reduce the size of the css to be used in production. That being said I always find myself in the situation where I have to write my custom css classes, where defaults values I set before are enough no more and need more control. There is this new option where you can set arbitrary values directly on the html markup (https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) but I'm not really sold and I still prefer to organize them by myself. Having another tool in the box might be convenient from time to time.

It doesn't work because your condition must be inside the foreach loop below, why you need it to be outside of the loop?

I've read the stencil documentation but I'm not sure how much advantages I could have in learning it and how to integrate it efficiently with Processwire. Have you got some pointers for guides/video courses on this topic? Any reccomendations on how mix processwire with stencil (routes and api generation in particular) ? 🙂 Nice animation and flow on the site by the way, good job!

What about this? (not tested) $pages->addHookAfter('saveReady', function($event) { $p = $event->arguments('page'); if($p->template != 'artist') return; if($p->artist_last_name) return; $ln = explode(' ', $p->title); $lastname = array_pop($ln); $p->set('artist_last_name',$lastname); })

Try to change the trigger from "saveReady to "save"? // Before public function ready() { $this->pages->addHook('saveReady', $this, 'afterSaveReady'); } // After public function ready() { $this->pages->addHookAfter('save', $this, 'afterSaveReady'); }

I've used Mailjet (from the same company of Mailgun) and it worked fine for me. 6.000 emails per month for free are more than enough for testing purpose I think 😛

Create a new php file inside template folder (or a subdirectory of it, ex. "inc") and paste your html portion you want to include in all the other templates, save it. Then, in all the templates, where you want that portion to appear just: <?php include('path/to/partial.php'); ?> // replace the path with yours.

$featured = $all->find("limit=4, check_featured!={$page->check_featured}"); // Just 4 results here $items = $all->find("limit=6"); // Cannot be 6 here Spot the mistake?