protro

@bernhard It should be fixed now. I just pushed the latest version which updates the Privacy Policy and the consenty mechanism to include Vimeo and Bandcamp. All thumbnails are now local files on the server.

Many thanks @ngrmm for the explanation. FOUC issues are resolved. Appreciate your elaboration 🙂 Regarding @bernhard recommendation for YouTube embed consent, I have updated the website so that it includes Consenty and wrapped all YouTube embeds in a template which disables them until a user prompt to explicitly Allow YouTube Embeds has been clicked, and included a Privacy Policy page with further details. Thank you for alerting me to this GDPR-compliant practice. ⚠️

Thanks @ngrmm I tried moving oswald.css above the other styles … but it didn't seem to have any effect. I wonder if it's trying to load too many fonts at once. $rockfrontend->styles() ->add("/site/templates/styles/oswald.css") ->add("/site/templates/uikit/src/less/uikit.theme.less") ->add("/site/templates/styles/custom.less") ->addDefaultFolders() ;

Thank you @bernhard I appreciate it especially coming from you. Rockfrontend/Latte have been indispensable tools! So the @import in the main custom.less was brought-in from a previous PW codebase I used … I was trying to load fonts locally instead of from external Google Fonts references and it must be there because I remebmer some discussion of that here in the PW forums, but honestly I can't specifically recall why I decided on that. My thinking was that @import was an outdated way of achieving this? CSS variables are used to control the dark-mode/light-mode functionality. I'm interested in what you have in mind for any CSS variables in future Rockfrontend releases. The webp function in ready.php is coming from a ProcessWire documentation post @ryan made about serving webp … specifically under Strategy 2. I'm still unclear exactly what it's doing except that this snippet seemed to be recommended. Good catch pointing out the inaccuracies in README, I will fix those in the next commit. And thank you again for kind feedback on the site itself!

If anyone can offer suggestions on how to fix for FOUC (flash of unstyled content) … especially with regards to font-family, I would be grateful. Feels like I've been running in circles trying to overcome that in PW. 🕳️

Greetings PW forum, I have completed a revamp of the artist collective The Teaching Machine's website, which was once built on Cargo Collective, then Wordpress, and is now using ProcessWire with the Rockfrontend Module, Duplicator Module, and the Latte template engine (among some others). The site codebase can be found here. (I don't understand why GitHub thinks it's 99% CSS … that will be for another day). The site menu is right-justified, with a simple navigation and dark-mode toggle. Individual project pages can contain galleries (also right-justified), media embeds, and will display similar items in the same category as well as site-wide items. A Zones page displays overarching categories, and randomly selects new projects each time the page is visited. The Home page displays the latest projects in descending chronological order. The Teaching Machine is an independent arts laboratory devising strategies for amalgamated practices within the cinematic imaginary, musical zeitgeist, and networked hyperstructures. Founded by hypermedia artist Strangeloop in 2011, with members in Los Angeles, Barcelona, and Singapore.

@flydev I confirm that is what the file path appears on dev and production, but on production i would get 404s on paths because they included the domain as a prefix to the path i.e. https://my-site/my-site/site/assets/files/1/44849-the-image-2016.897x0-is.jpg I was able to do a hot fix on my prod server by using @ryan TextformatterFindReplace module and attaching it to the body textarea fields in question that had the images added via TinyMCE … and set the rule to e.g. my-site/= This fixed my issue, by converting the redundant domain name to an empty string.

This is how I approach local dev environments with ProcessWire + MAMP on macOS. (The virtual host section is optional). https://gavart.ist/#MAMP %2B Processwire For Local Development Hope it helps!

Not sure if I am missing something, but it seems Duplicator may be skipping over images added via the TinyMCE text-editor in PW, because migrating from local to production, everything works great except for images added in a TinyMCE textarea field. Inspector shows the img site path twice ("https://my-site.com/my-site/site/assets/files/…") etc where /my-site/ is the proper local path but should be removed once migrating to production. Do I need to make a Custom excluded files and paths declaration in the Duplicator plugin option ? Many thanks!

Thanks for this insight @da² I've thought about this. For this particular project, it's more of an interactive art experience where each page has a video embed as the background. As far as I am aware, you can't stream a video from youtube as a background video without all of the GUI elements (?) … which we would like to avoid.

@Jonathan Lahijani many greetz, I would like to look into this bootstrapping idea, it's the first I've come across it. I'll be investigating this further. Your approach makes sense to me in the abstract. If I make progress on it I will share the code I use. Thank you for pointing me towards the PHP-ffmpeg repo as well.

I have a question about a workflow I'd like to find. A client has asked me if they could populate a ProcessWire site with 1080p video files in several page fields; one video per page. I'd like to be able to retroactively create and serve smaller versions of those video files on the front-end. I'm not sure how to achieve this in batch. The PW assets structure can be confusing, as not all the uploaded videos will appear in one directory. I know how to batch convert in ffmpeg. I'm trying to learn if there is a way to do this with some combination of PW and TracyDebugger. I appreciate any ideas on this matter.

Great tip! Thank you @dotnetic

In my case I created a custom Page class, which hooks to the Pages::saveReady method. Let's say I query an API that needs authentication with a secret key, is it safe to call for example $pages->get('name=api')->secret from within a function that gets triggered when a user logged into the backend triggers a page save ?

Really nice work @Macrura. I love the repertoire list table that is searchable. Fabulous. UIKit really coming through once again.

Thanks @bernhard I will check out DDEV. One last thing I am seeing is this in the Inspector Application Tab Deprecated: Creation of dynamic property RockFrontend\LiveReload::$config is deprecated in /Applications/MAMP/htdocs/my-project/site/modules/RockFrontend/LiveReload.php on line 24

Hi @bernhard I recently acquired a new work machine and am getting this unexpected EventSource error every 2-3 saves with PW + Rockfrontend. It's driving me mad because I know you are seeking reproducible steps and I can't seem to pinpoint exactly what is causing it, except for editing CSS classes within pre-existing HTML markup is OKAY and livereload is triggered, but addition of new HTML syntax and/or Latte syntax throws the error. pseudo-Reproducible Steps: Hardware: MacBook with macOS 13.6.1 Software: VS Code 1.84.0, MAMP 6.8, ProcessWire 3.0.229, Rockfrontend 3.7.0, Chrome 119.0.6045.105 php no longer ships with new macOS versions so I installed via brew install php. MAMP has its own php 8.2 binary, which I thought I needed to set VS Code's settings.json to: php.validate.executablePath": "/Applications/MAMP/bin/php/php8.2.0/bin/php", but that seems to have no effect. Either way, just wanted to bring this to your attention. I am quite perplexed.

Thank you @flydev for this example api / json request. I appreciate it because it is very clear what it is doing and it is helping me make sense of these capabilities that aren't as carefully documented in PW docs. So a huge thanks. I think a Ko-fi is in order! On the case of Svelte, it seems to be the choice framework of some devs that I have spoken with and trust. I did not realize that the Rainbowkit is React only (I saw it does support Vite though). However, I think at this point, with the little interest I have devoted to React, I choose to go the Svelte route, as it does seem the most promising. I hope that there is further ambition within web3 wallet sdks to support it as well, as it seems this would be a fantastic expansion of the currently supported frameworks. Good to know on the inertia modules being somewhat outdated. I was curious to see how some of it worked, and glad that it did. I look forward to your Vite module and what that will entail. Exciting stuff.

thank you @clsource I got this working with MAMP locally (just needed to set php version below 8 to 7.4.xx). I look forward to learning about the Svelte routing and configuration. There's a lot going on here. 👍

updating this topic for visibility. The best tutorials and working repo I have come across so far are from 0x3 Studio: https://blog.0x3.studio/a-very-simple-to-offer-a-connect-wallet-option-for-your-website-thanks-to-rainbowkit/ The project is bootstrapped using NextJS and RainbowKit. This leaves me with some questions as to whether or not I want to integrate the functionality into a pre-existing ProcessWire site or create a Next.js SPA on a subdomain that accomplishes the functionality I am trying to achieve. It seems like there is not much documentation on working with NextJS and PW at the moment, although these modules seem to be pointing in that direction: Inertia.js for ProcessWire https://github.com/joyofpw/inertia Vue with headless PW: https://medium.com/icf-church-developers/processwire-vue-js-a-lovestory-d4d5bca365 Currently it's beyond my understanding on the best marriage with a front-end framework and/or PW either as a headless CMS, API, or non-headless, but the above examples are leading me into interesting territory.

Wow @clsource thank you for making this and sharing it. Just what I was looking for in learning the possibilities of using something like Vue/React in conjunction with ProcessWire. Looking forward to trying this out.

very helpful @Stefanowitsch thank you very much for pointing out those different conditions. Another awesome demonstration of Rockfrontend's capabilities 🙂 In my case I spoke too soon and what I was actually attempting to do was to inject code into the _main.php <head> if I was on a certain template / page / etc. But because I am using the ProcessWire $config->urls->templates method to obtain the url for the script via php, I can't do that by loading an external.js file via AddIf … for example: <!-- threejs code --> <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "<?php echo $config->urls->templates?>scripts/build/three.module.js", "three/addons/": "<?php echo $config->urls->templates?>scripts/jsm/" } } </script> But then I came across a section of the Markup Regions in ProcessWire post which explained what I was attempting to do, and for me is a new discovery of ProcessWire 🙂 So what I did was create a _main_webgl.php file and specify in my template to ignore _main.php and load this one instead. Maybe not the most elegant solution, but it is separating the logic nicely and allowing me to not have to load unnecessary scripts depending on the page / template. Very nice!

Hi @bernhard is it possible to load a <script> tag or to load specific javascript file for only a specific page and/or template using Rockfrontend ? Right now _main.php is handling all scripts site-wide. Was wondering how granular this can go. Thanks for such a great module.

this is outside of my usual expertise @flydev … conceptually it makes sense but I have been not the best problem-solver when it comes to determining how to handle these responses from backend -> front end. I'd like to follow best practice from security standpoint, of course … and I feel like I'm getting very much "in the weeds" meaning I may be over-complicating things, as you stated. Locally everything works fine with the env variables in my PrePros/MAMP proxy setup. It's on the production site where I am running into questions and complications, as I am trying to be as careful as possible to not leak any keys.

thanks @flydev this helps. I haven't got php dotenv to work yet. I realize my API secrets were getting bundled into PrePros's JS dist bundle. I've been looking for solutions, even thought that maybe I could store it in a PW page's field, but I have hit a block when thinking of ways I'd be able to access that from within my javascript src code. Looks like with Vercel, Netlify, et al the ENV variables can be stored in their dashboard. Otherwise it looks like a proxy server for API keys on the backend is the way to go, but a little complicated for my situation.