wbmnfktr

For TailwindCSS v 4.x I asked Grok (or maybe even Cascade itself - not sure) to read the migration/upgrade guide and compress it down to the bare minimum. I put that file into my `docs` folder, added it to the context and let Cascade do its work.

Besides those changes, TailwindCSS didn't change that much so most of it worked as before.

I also added a new base tailwindcss.css file with the new config syntax and changes and when necessary I mention that there is no need to setup TailwindCSS again. Works pretty well.

/*file: `/site/templates/src/tailwind.css` */
@import 'tailwindcss';

/* PLUGINS */
/* @plugin "@tailwindcss/typography"; */
/* @plugin "@tailwindcss/forms"; */

/* CUSTOM */
@theme {
  /* 480px */
  --breakpoint-xs: 30rem;
}

/* SOURCE */
@source "../../templates/**/*.html";
@source "../../templates/**/*.html.twig";
@source "../../templates/**/*.js";
@source "../../templates/**/*.latte";
@source "../../templates/**/*.php";
@source "../../templates/**/*.twig";

/* SOURCE NOT */
@source not "../../../node_modules/**/*";

/* ALPINE JS */
[x-cloak] {
  display: none !important;
}

It's shocking to ask just the basics. Try:

Quote

what's the latest version of these frameworks/libraries you know off?

- nextjs
- astrojs
- processwire
- tailwindcss

and whats your name, version, and release date?
what llm are you using - name, version, and release date?

Correct.
You have to test everything with your setup, workflow, and everything. Even between projects I have to tweak lots of things.

I guess in total about 5 different variations of setup are in that repo. Test it. Tweak it. Even feel free to raise a PR.

On 4/23/2025 at 4:37 PM, elabx said:

miss PHPStorm

Have you tried Windsurf for PhpStorm? Or was that the "AI they integrated"?
https://plugins.jetbrains.com/plugin/20540-windsurf-plugin-formerly-codeium-for-python-js-java-go--

On 4/23/2025 at 4:37 PM, elabx said:

Anyone working with rules for ProcessWire? 

Working? It's more a fight, especially with ProcessWire but most of the time and patience everything works out great.
Recently pushed my last/latest iteration of my PWAI setup. Very opinionated especially in terms of settings, tools, and extensions, but hey...

https://github.com/webmanufaktur/pwai

I totally support what @bernhardsaid and I just want to add:

VS Code Insiders with Github Copilot - for free.

Not sure why and how but the results feel a bit more nuanced at times.
Combined with Cline/Roo you even could add a free Gemini 2.0/2.5 key which outperforms in conceptual tasks (PRDs/SOPs) quite often.

All you need to do is installing VS Code Insiders, add Copilot through the interfaces provided (you can't miss them!). I enjoy writing mass content, like docs with it, as it doesn't ruin my credits in Windsurf/Cursor.

Family vacation/time > *

I haven't tried anything above 8.2 so far, but I am on the latest DEV version constantly without any issues in any of my project - from newest to oldest - with all kinds of modules/pro-modules.

Not sure if this helps, but I could try install your version in my setup and try here as well. But with DDEV you have all options.

You use apache-fpm and not nginx-fpm or some other weird setting in .ddev/config.yaml?

5 minutes ago, FireWire said:

ProcessWire 3.0.246
PHP 8.3

We see the most recent DEV version here so that's one thing AND PHP 8.3 which I never even considered trying. I have a feeling that PW and 8.3 aren't friends yet, but that's on me.

Not sure about your overall setup but could you switch to PHP 8.2 and/or to the latest stable just to check out what's happening then?

If this was my project, I'd switch to PHP 8.2 first, then change the PW version, but in a new install/copy-paste version.

I don't want to be that guy, but what versions and modules are installed?

Do use use the PageListCustomChildren module or similar ones, like VirtualParents, that put's pages in other views?

This can be everywhere.

From a page, to a translation file, straight from a template, a custom module.

First of all look through the page tree of your website and identify which page you are looking at, afterwards check the fields in that page or the template to make sure.

Who built that site? Maybe you should contact them and ask.

FrankenUI was the sole reason for me to dig into UIKIT again after years of ignoring it.

Still not using either of them but it's great to have options.

5 hours ago, Ivan Gretsky said:

Can you share the hannacode?

$out = '';
$out .= <<<EOT
<div class="player youtube">
    <iframe 
        src="" 
        data-src="https://www.youtube-nocookie.com/embed/$video"
        data-category="external_media"
        data-ask-consent="1" 
        frameborder="0"
        scrolling="no"
        width="640"
        height="480"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="link youtube">
    <a href="https://www.youtube.com/watch?v=$video" rel="nofollow" target="_blank">Watch on YouTube.com</a>
</div>
EOT;


echo $out;

This already has PrivacyWire attributes to make it work with it.

Here is the HannaCode export:

!HannaCode:youtube:eyJuYW1lIjoieW91dHViZSIsInR5cGUiOiI2IiwiY29kZSI6IlwvKmhjX2F0dHJcbnZpZGVvPVwiSHNEamxrZGpMZHdcIlxuaGNfYXR0cipcL1xuJG91dCA9ICcnO1xuJG91dCAuPSA8PDxFT1RcbjxkaXYgY2xhc3M9XCJwbGF5ZXIgeW91dHViZVwiPlxuICAgIDxpZnJhbWUgXG4gICAgICAgIHNyYz1cIlwiIFxuICAgICAgICBkYXRhLXNyYz1cImh0dHBzOlwvXC93d3cueW91dHViZS1ub2Nvb2tpZS5jb21cL2VtYmVkXC8kdmlkZW9cIlxuICAgICAgICBkYXRhLWNhdGVnb3J5PVwiZXh0ZXJuYWxfbWVkaWFcIlxuICAgICAgICBkYXRhLWFzay1jb25zZW50PVwiMVwiIFxuICAgICAgICBmcmFtZWJvcmRlcj1cIjBcIlxuICAgICAgICBzY3JvbGxpbmc9XCJub1wiXG4gICAgICAgIHdpZHRoPVwiNjQwXCJcbiAgICAgICAgaGVpZ2h0PVwiNDgwXCJcbiAgICAgICAgYWxsb3c9XCJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlXCIgYWxsb3dmdWxsc2NyZWVuPjxcL2lmcmFtZT5cbjxcL2Rpdj5cbjxkaXYgY2xhc3M9XCJsaW5rIHlvdXR1YmVcIj5cbiAgICA8YSBocmVmPVwiaHR0cHM6XC9cL3d3dy55b3V0dWJlLmNvbVwvd2F0Y2g/dj0kdmlkZW9cIiByZWw9XCJub2ZvbGxvd1wiIHRhcmdldD1cIl9ibGFua1wiPkRpcmVrdCBiZWkgWW91VHViZSBhbnNjaGF1ZW48XC9hPlxuPFwvZGl2PlxuRU9UO1xuXG5cbmVjaG8gJG91dDsifQ==/!HannaCode

As @qtgurusaid.

Thank you @Wanzefor Template Engine Factory and the Twig extension for it.

Can't go without it.

I know I used this module a while back but moved on and used custom HannaCodes for video embeds for several reasons.

Maybe this could be your way as well - combined with HannaCodeDialog to insert the code into your textarea fields.

🥰

9 hours ago, planmacher said:

So what ist correct way to handle both, jquery for the website and for frontend editing?

Even though I haven't used jQuery in a long time I know that both backend and frontend are independent from another in most cases - unless you use some modules like FormBuilder or LoginRegisterPro which use jQuery on their own.

So therefore it shouldn't be a problem to use different version until some backend modules (like those mentioned aboved) come into play. There could still be issues for when you are an admin and both jQuery scripts are loaded (in some weird cases, like cache or whatever).

In your case ProcessWire's jQuery might be necessary for frontend-editing to make it work. Your solution works for now, but maybe you could try another approach like putting your scripts into an if-statement and only load your jQuery in case someone is NOT logged-in.
See: https://processwire.com/api/ref/user/is-loggedin/

Wow... 🤯

On 3/23/2025 at 6:23 AM, gebeer said:

Would you mind sharing those rules?

They will be ready soon.

Update/additional details to make things clear:
While I was pretty happy with the first iteration of my ProcessWire rules (from Grok and others) they seemed to be too large in total for Cursor and Windsurf to handle them each time.

Right now I'm splitting that one rule file into smaller chunks so that whenever a PW-specific topic comes up, the IDE can find a single file with details (or I mention that file to make sure). Especially in regards to modules, which is a larger topic, or URL hooks which is only a blog post and therefore was probably never in any training data (I'm assuming here, as ChatGPT and Sonnet all imagined their own version of that that could have been).

For those wondering:
I always added snippets/recipes/examples to each section to make sure the IDE uses the code I want to see as a result later on. Sure, with placeholders and relying most of the time on basic PHP code, yet PW is a different animal. Neither Cursor, nor Windsurf are really keen about what's going on. The sample/training data was probably way too little at all. Hallucinations were way too common and ... you could imagine.

How I found these issues:
I have two larger and more complex projects on the desk right now and it didn't work out as expected and I had write most of the code by myself on a basic level with inline docs and @TODO comments, and just asked the IDE/AI to make it follow PHP's best practices - such as error handling (which didn't work most of the time, as PW has it's own way - kind of).

So...:
While I'm still super happy with the outline of rules created by Grok3, the IDE/AI needed and needs more input and details about PW most of the time. It helps to have snippets, like RockMigrations by @bernhard provides - which was still off for quite some times but were easy to fix manually.

On 2/20/2025 at 4:40 AM, gebeer said:

User Prompt Rephrasing

Based on the given Rephrasing prompt from @gebeer I played around and created this file/rule to import either globally or put it inside my rules file - could be a self-contained .mdc file as well in the future:

<!-- Global Rule: 1 -->
---
name: Global Rule #1
description: The very first global rule to apply the moment the user starts a task
globs: **/*.*
alwaysApply: true
---
# Before starting a task
1. analyze the given prompt and understand the intention
2. rephrase the user prompt in concise technical terms focusing on:
   - specific technical task scope
   - affected components/files
   - required functionality changes
3. preserve the users intent in the rephrased prompt
4. output the rephrased prompt and ask for confirmation with exact phrase "Act on the rephrased prompt? [y/n]"
5. IMPORTANT: after asking for confirmation, STOP and wait for explicit user response
6. proceed ONLY after receiving "y" confirmation, otherwise ask for clarification
7. when proceeding, act only on the rephrased prompt and start your output with "✨✨✨" and {name} of rule
<!-- /Global Rule: 1 -->

It's pretty much the same prompt but in a different structure with additional metadata. Cursor and Windsurf seem to love those little nuggets of metadata.

The frontmatter - indicated by leading/trailing triple dashes - allows to add metadata.
In this case you could output the rule name later on when needed like in #7., or give additional context whenever this rule should be applied.

So far it works pretty much as expected in my testcases - which where in bash scripting (.sh), Laravel (.blade.php), PHP, PW-specific, AstroJS (.astro, .tsx), NextJS (.tsx).

In total about 100 credits in Windsurf through various projects I had to do stuff in.

Example 1:

Built this maintenance script - based of 3-5 other scripts, with about 15 prompts to make it work on Ubuntu, Debian, Arch.
I'm pretty happy so far as the script also adds whatever I need - like NPM, PNPM, Flatpaks if not installed.

Could become a whole project on its own. Super stoked!

Example 2:

Asked for optimising my .gitconfig file and put suggestions into a new file.

The result... looks good, not sure about each and every detail based on personal preferences but... YEAH!

23 minutes ago, Jim Bailie said:

How are exactly are you using Astro? Are you using it as sort of a template engine, then moving the final output into a PW instance?

Or are you using Astro as an application itself and talking to PW via endpoints? If this is the case how are you positioning both Astro and PW on the same server?

I'm a bit short in time right now so I might have to write a follow-up to give you a real and more complete answer here. But in the meantime - a short summary:

• each and every client/side project of mine get's a click-dummy of the final product to see how it could work out, what's needed and so on.
   
• I use Astro JS for that as it's super flexible to work with, I can deploy it somewhere at Netlify, Vercel, or Cloudflare. Each commit is a new build. I can share it with everyone - frontend and backend-wise. It's more or less just HTML, CSS, JS - some parts of it might have a TailwindCSS or AlpineJS flavor but still super basic. And the big plus: ALL build steps (TailwindCSS, AlpineJS, ...) are already in place.
   
• If needed I can connect it to an API to fetch articles, news, or whatever kind of data to make it look more real or to go super fast - especially when migrating from WordPress where there is a RestAPI or GraphQL almost always in place already. For sideprojects I connect to api.domain.tld, grab JSON and render out either pages or just parts of the project on-build.
   
• for side projects in very early stages that would be the state for the next 3 to 6 months to see if the project get's some kind of traffic - for client projects this is the base to start the real work.
   
• from there I take all the component and move them from .astro to .twig - the difference is so minimal I could use Regex to make the changes most of the time.
   
• feeding all layouts, components, partials, blocks, however we want to call those code snippets into ProcessWire is pretty easy, when you know where things have to go and most of the time you only change the parts that define the source - so from a JS fetch() to a $pages->find('...') - and of course you have to build out the ProcessWire backend stuff, hooks, automation, and whatever you need or want.

Some would say there are a lot of unnecessary steps in this process and they could be right, but I prefer to test projects early on and hate to look at Figma files or Illustrator screenshots. So there is that. I always worked that way and that will probably never change.

On the technical site you have think about 2 systems running side by side.

1. Astro JS on Netlify, Vercel, Cloudflare or a VPS with NodeJS and ... lots of other stuff
2. ProcessWire with database and everything it needs on a sub-domain.

You could fit everything onto one server but it can be quite painful to get this up and running so I use a regular hosting provider for ProcessWire and one of those mentioned above for Astro JS.

The output is, most of the time, 100% static and build on-demand with data and content available at that moment. You could make it more dynamic with AlpineJS or HTMX but only for small parts, and not for articles and news - as those wouldn't exist within the static build.

As this turned out to be broader as expected please feel free to ask about more details where needed.

11 hours ago, ryangorley said:

"LoOk aT WhAt i MaDe wItH Ai mOm!" posts

Put those posts here in the Dev Talk in their own topical threads. I personally love those posts and looks behind the scenes. So... a +1 from me here.

Add a 2nd build file that only uses parts of your CSS/less.

/
├── dist
│   ├── backend.css
│   └── frontend.css
└── src
    ├── _index-backend.less
    ├── _index-frontend.less
    └── less
        ├── blocks.less
        ├── buttons.less
        └── ...

In the build file you only import those parts you need/want in the backend or WYSIWYG editor, while the frontend will have everything.

// _index-backend.less
// we only need the buttons in the backend
@import "buttons.less";

That's how I structured my .less/.sass/.scss files.

Just a little side note for those that like to play and experiment:

I was playing around with Grok 3 beta (via x.com/grok.com) and asked for specific Processwire rule files to use in Cursor/Windsurf.

And let's say: I'm quite impressed how good those rule files look.
🤯

I'm in the process of moving everything around and can't tell if they work as good as they look but Grok3 seems to be even better than Sonnet 3.5 and 3.7 for technical tasks like these.

On 3/17/2025 at 7:39 PM, ryangorley said:

Is anyone currently using any of the solutions suggested in this topic, especially with multilingual content?

Back when I started this thread I tried multiple ways, modules, and custom exports. From JSON to AppApi to GraphQL and everything in-between.

I still use basic JSON in some projects or just grab what I need via HTMX nowadays.
I pull in only simple data via JSON I might need on build time or fully rendered HTML with HTMX in my AstroJS projects.

Whenever I start a new project and need a MVP-like skeleton of it, I go with static content in Markdown/MDX in AstroJS, later on I'll migrate to 100% ProcessWire in most cases. It just works, I feel home, know how to handle stuff, have everything I need and with ProCache, LoginRegisterPro, and FormBuilder I can keep everything on my server and don't need things like Supabase, Neon, FormSpark or whatever.

So to finally answer your question: no, not anymore

Is there a chance you are using RockMigrations and somehow triggered an older migration that removed fields from that template?

Happened to me yesterday and took me a while to find. And to make it clear: it's intended behaviour - see screenshot.

The minus tells RockMigrations to only have listed fields in that template.
Without the minus I could add fields via backend and run migrations without removing manually added fields.