RockFrontend 🔥🚀 The Powerful Toolbox for ProcessWire Frontend Development

[wbmnfktr]

In case you want a copy paste version to use RockFrontend with RepeaterMatrix from within a .latte file:

{* templateExample.latte *}
{foreach $page->repeaterMatrixField as $block}
{$rockfrontend->render("fields/repeaterMatrixField/" . $block->type , ["block" => $block])|noescape}
{/foreach}

{* blockExample.latte *}
<div>
    <h1>{$block->headline}</h1>
    {$block->body}
    <img src="{$block->image->url}" alt="{$block->image->description}">
</div>

 

[bernhard]

v1.15.4 adds support for rendering RepeaterMatrix fields easily:

RockFrontend and RepeaterMatrix

While you can always render repeater matrix fields manually RockFrontend has some nice helpers. This is the long and manual way of rendering a matrix field:

// main.php
foreach($page->your_matrix_field as $item) {
  // render every block and make the $page variable be the current block
  // instead of the viewed page.
  echo $rockfrontend->render("/matrix/".$item->type, ['page' => $item]);
}

// matrix type foo (/site/templates/matrix/foo.php)
<h1><?= $page->title ?></h1>

Or simply use the shortcut:

echo $rockfrontend->render($page->your_matrix);

// or in a latte file
{$rockfrontend->render($page->your_matrix)}

// example matrix block: /site/templates/fields/your_matrix/foo.latte
<h1>Foo block having id {$page->id}</h1>

 

Note that when using $rockfrontend->render() to render matrix fields you can also use latte files for rendering and the $page variable in the view file will be the current matrix block instead of the currently viewed page. If you need to access the current page you can use $wire->page instead of $page.

[Stefanowitsch]

I am starting to dive into the possibilites of RockFrontend. I have a very simple question that came to my mind right at the beginning.

To render markup you offer the new $rockfrontend->render() function.

What is the advantage of this function over the default $file->render() function of processwire? 

Basically I can change all $file->render() code parts into $rockfrontend->render() and everything still works. But I guess there is a secret behind this ? this new render function supports the integration of Latte PHP templates, is this the main advantage?

 

If I am allowed add something to the wishlist: When adding assets via RockFrontend it would be awesome if you could offer a minify option for CSS/JS files. (for example when debugging is disabled). 

[bernhard]

35 minutes ago, Stefanowitsch said:

Basically I can change all $file->render() code parts into $rockfrontend->render() and everything still works. But I guess there is a secret behind this ? this new render function supports the integration of Latte PHP templates, is this the main advantage?

Jep, that's the main advantage and it supports short paths like "sections/header". But under the hood it's just using PW's render() method ? 

35 minutes ago, Stefanowitsch said:

If I am allowed add something to the wishlist: When adding assets via RockFrontend it would be awesome if you could offer a minify option for CSS/JS files. (for example when debugging is disabled). 

Yes, I agree and I'm open to any suggestions for which libraries to use for that purpose as I have no experience with that. For minification of CSS we could simply use the Less module. JS is a different story though...

[Jan Romero]

Maybe you could use AIOM+ if it's installed?

[bernhard]

Not sure if that is still supported and safe to use? @David Karich ?

[Stefanowitsch]

46 minutes ago, Jan Romero said:

Maybe you could use AIOM+ if it's installed?

41 minutes ago, bernhard said:

Not sure if that is still supported and safe to use? @David Karich ?

I am using AIOM+ for years now and it works really well!

The syntax for minifying styles with this module looks like this:

  <link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS($stylesheets); ?>"/>

$stylesheets is an array which looks like this. I now there is only one file here so it's not necessary to use an array for that ?

$stylesheets = array(
  'styles/styles.css'
);

I have not tried it yet but it should be possible to insert the RockFrontend AssetsArrray here (?)

[bernhard]

2 hours ago, Stefanowitsch said:

What is the advantage of this function over the default $file->render() function of processwire? 

I've improved the render method even further, so as from version 1.15.7 you don't need to add the |noescape filter any more when rendering a file via the render() method ? 

Also I've added support for a shorthand variable submission that is very handy for rendering lists (like blog post overview or such):

    <div class="uk-child-width-1-2@m" uk-grid>
      <div n:foreach="$page->children as $item">
        {$rockfrontend->render("partials/card", $item)}
      </div>
    </div>

That makes $item available as $page in card.latte ?

[Andi]

Hey @bernhard,

working through some chapters of the video. Lots of good stuff in there, just DDEV and livereload alone will be major game changers for me. And that's only the first 5 minutes ?

As for the module itself, everything's working nicely so far, but Firefox console is complaining that

Die Verbindung zu https://pw-rockfrontend-test.ddev.site/livereload.php?secret=###secretkey123456### wurde unterbrochen, während die Seite geladen wurde.

livereload.js:7:20

English: The connection to http://site/livereload.php broke up while the page was being loaded.

Happens on almost every page load, Frontend and Backend. Chromium seems fine. Also, despite the error message in FF, I'm not noticing anything breaking at all.

Any ideas what could be happening here?

Thanks in advance and servus from Regensburg!

[bernhard]

59 minutes ago, Andi said:

Any ideas what could be happening here?

No, sorry. Sometimes I have network problems as well (not related to livereload though) but restarting ddev/docker/my laptop has always helped ? 

59 minutes ago, Andi said:

working through some chapters of the video. Lots of good stuff in there, just DDEV and livereload alone will be major game changers for me. And that's only the first 5 minutes ?

Glad to hear that ? 

[Andi]

1 hour ago, bernhard said:

No, sorry. Sometimes I have network problems as well (not related to livereload though) but restarting ddev/docker/my laptop has always helped ? 

Thanks @bernhard! Tried that but somehow Firefox keeps acting up.. See the first two screenshots attached, one of these two pops up on every page reload (no addons activated).

Vs. no problems on Chromium (last screenshot).

Maybe something to keep an eye on.. I'll investigate some more and maybe try this on a live server later.

### Firefox 1:

### Firefox 2:

### Chromium:

[Andi]

Just a quick note, if you're on Linux & Code-OSS and have trouble opening your ALFRED / Tracy links to directly edit template code (around 34:00 in the video), you need to create a separate URL handler for vscode:// type links

in ~/.local/share/applications create a file code-oss-vscode-url-handler.desktop

#!/usr/bin/env xdg-open

[Desktop Entry]
Name=Code - OSS - VSCode URL Handler
Comment=Handles opening of vscode:// URLs in Code-OSS
GenericName=Text Editor
Exec=/usr/bin/code-oss --open-url %U
Icon=code-oss
Type=Application
NoDisplay=true
StartupNotify=true
StartupWMClass=Code - OSS
Categories=Utility;TextEditor;Development;IDE;
MimeType=x-scheme-handler/vscode
Keywords=vscode;
Terminal=false

Borrowed from here: https://github.com/Microsoft/vscode/issues/48528#issuecomment-414056547

And Alfred is your new best pal ?

[bernhard]

v1.17.0 adds a nice helper to download webfonts automatically to /site/templates/fonts

Austria is hit by a wave of legal letters demanding 190€ from website owners that serve google webfonts from the google servers directly instead of self-hosting them.

Selfhosting fonts on the other hand is tedious!! I know there is the google-webfonts-helper, but I wanted something better integretad into my PW workflows. So RockFrontend now downloads all the necessary files for you (eot/woff/woff2/ttf/svg) by sending separate HTTP requests to google with different user agents and saving the fonts with a readable name to /site/templates/fonts

Simply paste the url and hit save:

[Stefanowitsch]

14 hours ago, bernhard said:

v1.17.0 adds a nice helper to download webfonts automatically to /site/templates/fonts

Austria is hit by a wave of legal letters demanding 190€ from website owners that serve google webfonts from the google servers directly instead of self-hosting them.

Selfhosting fonts on the other hand is tedious!! I know there is the google-webfonts-helper, but I wanted something better integretad into my PW workflows. So RockFrontend now downloads all the necessary files for you (eot/woff/woff2/ttf/svg) by sending separate HTTP requests to google with different user agents and saving the fonts with a readable name to /site/templates/fonts

This is a nice little time saver!

By the way I find it hilarious that you get fined for not hosting the fonts on your own server. I always thought that this was the whole purpose of google fonts.

[David Karich]

On 8/17/2022 at 3:20 PM, bernhard said:

Not sure if that is still supported and safe to use? @David Karich ?

I can't tell you how the various forks are doing, but my official module is no longer in development and therefore deprecated.

[Stefanowitsch]

7 minutes ago, David Karich said:

I can't tell you how the various forks are doing, but my official module is no longer in development and therefore deprecated.

I am using the latest fork here. Works perfect for me.

https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify

[szabesz]

8 hours ago, Stefanowitsch said:

hilarious that you get fined for not hosting the fonts on your own server

As we all know, Google's services are never free, we all pay by providing our own data to them: https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html and we never know what they are using our data for, but this monkey business is quite profitable for them for sure.

[Andi]

@bernhard Trying this on a test project currently, I'm wondering if there's an easy way to add pages to RockFrontend the same way you're doing with $home.

Let's say, I normally have a /contact/ page, stored in $contact, holding all possible information, phone numbers, social media links etc., and I'd like to make that page available in all rendered files.

Right now, unless I'm missing something, I could use custom variables to pass to $rockfrontend->render(), but that doesn't seem to work with ->renderLayout()..

The other minor issue I'm having, if you use Alfred on an empty text block, you don't get the edit links, the whole block just disappears.

Other than that, very nice work, feels really good to be using Latte again ?

[bernhard]

You can either register your own api variable, eg in ready.php

$wire->wire('contact', $yourpage);

Or you simply add whatever property you need at runtime to the rockfrontend object:

$rockfrontend->foo = 'Foo!';
$rockfrontend->bar = 'Bar!';

Then you can simply access those variables in your latte files:

{$contact->title}
{$rockfrontend->foo}
{$rockfrontend->bar}

 

[bernhard]

v1.17.6 improves the UI/UX of ALFRED frontend editing even further and when using AdminStyleRock you'll get the same styling both on the backend and the frontend:

Backend:

Frontend:

[bernhard]

Edit: Sorry for double-posting, I forgot that I already posted that yesterday! I've fixed a bug though and the color now comes from the AdminStyleRock setting which makes it even more great ? 

---

When using the latest version of AdminStyleRock you'll get perfectly aligned frontend + backend styling using ALFRED frontend editing:

Backend

Inline Editor

Modal Editor

You'll get all that by changing only a single color in AdminStyleRock:

[Pavel Tajduš]

Hello. 
I am testing your module and It looks great. I have only issue with javascript. Scripts are blocked by browser, because RockFrontend is generating absolute paths.

Loading failed for the <script> with source “c:\laragon\www\rock\site\modules\RockFrontend\livereload.js?m=1662296904”.
Loading failed for the <script> with source “c:\laragon\www\rock\site\templates\uikit\dist\js\uikit.min.js?m=1662317498”.
Loading failed for the <script> with source “c:\laragon\www\rock\wire\modules\AdminTheme\AdminThemeUikit\uikit\dist\js\uikit.min.js?m=1653058463”.
Loading failed for the <script> with source “c:\laragon\www\rock\site\templates\assets\alpine.js?m=1662376565”.
Loading failed for the <script> with source “c:\laragon\www\rock\site\templates\bundle\main.js?m=1662317579”.

Is there some option, how to use relative paths? Or Am I missing something?

Thank you.

[bernhard]

Hey @Pavel Tajduš thx for the report. I guess it's a windows issue. It should just convert those paths to urls automatically.  @zoeck has no problems on windows I think?

For debugging can you please inspect what url it sets here: https://github.com/baumrock/RockFrontend/blob/64dfc3b2325185fa9dbba8bc50411a7c37c92990/Asset.php#L19

I'm already using Paths::normalizeSeparators() in getFile(), but maybe there is some other issue? https://github.com/baumrock/RockFrontend/blob/64dfc3b2325185fa9dbba8bc50411a7c37c92990/RockFrontend.module.php#L480

Let me know what you find!

[Pavel Tajduš]

I switched Laragon for DDEV just to test it, and now its working as it should. So there is something with Laragon enviroment. I have no propper IDE installed, so I cant debug.

[bernhard]

Would be great if you could check that Laragon issue and report back!