feat: update quickstart instructions

site/assets/backups/export-profile/site-rockfrontend/install/assets/config-local.php

@@ -4,6 +4,12 @@
 
 /** @var Config $config */
 
+/**
+ * Local config for development
+ * DO NOT USE THIS FILE IN PRODUCTION!
+ * DO NOT ADD THIS FILE TO GIT!
+ */
+
 $config->debug = true;
 $config->advanced = true;
 $config->userAuthSalt = '{salt}';

site/assets/backups/export-profile/site-rockfrontend/install/install.sql

@@ -1,4 +1,4 @@
-# --- WireDatabaseBackup {"time":"2024-09-26 11:33:23","user":"","dbName":"db","description":"","tables":[],"excludeTables":["pages_drafts","pages_roles","permissions","roles","roles_permissions","users","users_roles","user","role","permission"],"excludeCreateTables":[],"excludeExportTables":["field_roles","field_permissions","field_email","field_pass","caches","session_login_throttle","page_path_history"]}
+# --- WireDatabaseBackup {"time":"2024-09-26 21:13:54","user":"","dbName":"db","description":"","tables":[],"excludeTables":["pages_drafts","pages_roles","permissions","roles","roles_permissions","users","users_roles","user","role","permission"],"excludeCreateTables":[],"excludeExportTables":["field_roles","field_permissions","field_email","field_pass","caches","session_login_throttle","page_path_history"]}
 
 DROP TABLE IF EXISTS `caches`;
 CREATE TABLE `caches` (
@@ -99,7 +99,7 @@ CREATE TABLE `field_title` (
   FULLTEXT KEY `data` (`data`)
 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8mb4_general_ci;
 
-INSERT INTO `field_title` (`pages_id`, `data`) VALUES('1', 'Home');
+INSERT INTO `field_title` (`pages_id`, `data`) VALUES('1', 'Quickstart');
 INSERT INTO `field_title` (`pages_id`, `data`) VALUES('2', 'Admin');
 INSERT INTO `field_title` (`pages_id`, `data`) VALUES('3', 'Pages');
 INSERT INTO `field_title` (`pages_id`, `data`) VALUES('6', 'Add Page');
@@ -304,7 +304,7 @@ INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('175',
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('187', 'AdminThemeUikit', '10', '{\"logoURL\":\"\",\"cssVersion\":2,\"configPhpHash\":\"43879acd08fa2616b08f3349a3dad97e\",\"useAsLogin\":\"\",\"userAvatar\":\"icon.user-circle\",\"userLabel\":\"{Name}\",\"logoAction\":\"0\",\"layout\":\"\",\"ukGrid\":\"0\",\"maxWidth\":1600,\"groupNotices\":\"1\",\"cssURL\":\"\",\"inputSize\":\"m\",\"noBorderTypes\":[],\"offsetTypes\":[],\"toggleBehavior\":\"1\"}', '2024-03-16 10:17:51');
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('200', 'ProcessLogger', '1', '', '2024-03-16 10:17:52');
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('205', 'InputfieldIcon', '0', '', '2024-03-16 10:17:52');
-INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('275', 'RockFrontend', '3', '{\"livereloadBackend\":1,\"liveReloadModules\":\"\",\"noLayoutFile\":\"\",\"copyLayoutFile\":1,\"layoutFile\":\"layout.latte\",\"ideLinkHandler\":\"cursor:\\/\\/file\\/%file\",\"webfonts\":\"\",\"remBase\":16,\"features\":[\"RockFrontend.js\",\"topbar\"],\"topbarz\":999,\"m_name\":\"\",\"m_theme_color\":\"\",\"m_background_color\":\"\",\"postCssTool\":\"\",\"profile\":\"\",\"uikit\":\"\",\"installTailwind\":1}', '2024-03-16 12:21:06');
+INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('275', 'RockFrontend', '3', '{\"livereloadBackend\":1,\"liveReloadModules\":\"\",\"noLayoutFile\":\"\",\"copyLayoutFile\":1,\"layoutFile\":\"_main.latte\",\"ideLinkHandler\":\"cursor:\\/\\/file\\/%file\",\"webfonts\":\"\",\"remBase\":16,\"features\":[\"RockFrontend.js\",\"topbar\"],\"topbarz\":999,\"m_name\":\"\",\"m_theme_color\":\"\",\"m_background_color\":\"\",\"postCssTool\":\"\",\"profile\":\"\",\"uikit\":\"\",\"installTailwind\":1}', '2024-03-16 12:21:06');
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('280', 'TextformatterMarkdownExtra', '1', '', '2024-03-16 12:21:07');
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('315', 'Less', '0', '', '2024-03-16 15:10:07');
 INSERT INTO `modules` (`id`, `class`, `flags`, `data`, `created`) VALUES('364', 'Site', '3', '', '2024-03-16 15:26:42');
@@ -340,7 +340,7 @@ CREATE TABLE `pages` (
   KEY `published` (`published`)
 ) ENGINE=MyISAM AUTO_INCREMENT=1030 DEFAULT CHARSET=utf8 COLLATE=utf8mb4_general_ci;
 
-INSERT INTO `pages` (`id`, `parent_id`, `templates_id`, `name`, `status`, `modified`, `modified_users_id`, `created`, `created_users_id`, `published`, `sort`) VALUES('1', '0', '1', 'home', '9', '2024-03-25 15:43:49', '41', '2024-03-16 10:17:38', '41', '2024-03-16 10:17:38', '0');
+INSERT INTO `pages` (`id`, `parent_id`, `templates_id`, `name`, `status`, `modified`, `modified_users_id`, `created`, `created_users_id`, `published`, `sort`) VALUES('1', '0', '1', 'home', '9', '2024-09-26 20:04:55', '41', '2024-03-16 10:17:38', '41', '2024-03-16 10:17:38', '0');
 INSERT INTO `pages` (`id`, `parent_id`, `templates_id`, `name`, `status`, `modified`, `modified_users_id`, `created`, `created_users_id`, `published`, `sort`) VALUES('2', '1', '2', 'cms', '1035', '2024-07-02 14:00:11', '40', '2024-03-16 10:17:38', '41', '2024-03-16 10:17:38', '7');
 INSERT INTO `pages` (`id`, `parent_id`, `templates_id`, `name`, `status`, `modified`, `modified_users_id`, `created`, `created_users_id`, `published`, `sort`) VALUES('3', '2', '2', 'page', '21', '2024-03-25 11:19:14', '41', '2024-03-16 10:17:38', '41', '2024-03-16 10:17:38', '0');
 INSERT INTO `pages` (`id`, `parent_id`, `templates_id`, `name`, `status`, `modified`, `modified_users_id`, `created`, `created_users_id`, `published`, `sort`) VALUES('6', '3', '2', 'add', '21', '2024-03-16 10:17:52', '40', '2024-03-16 10:17:38', '41', '2024-03-16 10:17:38', '1');
@@ -474,12 +474,12 @@ CREATE TABLE `templates` (
   KEY `fieldgroups_id` (`fieldgroups_id`)
 ) ENGINE=MyISAM AUTO_INCREMENT=43 DEFAULT CHARSET=utf8 COLLATE=utf8mb4_general_ci;
 
-INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('1', 'home', '1', '0', '0', '{\"useRoles\":1,\"editRoles\":[1025],\"addRoles\":[1025],\"createRoles\":[1025],\"noParents\":1,\"slashUrls\":1,\"compile\":0,\"modified\":1726437207,\"ns\":\"\\\\\",\"_lazy\":1,\"roles\":[37,1025]}');
-INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('2', 'admin', '2', '8', '0', '{\"useRoles\":1,\"parentTemplates\":[2],\"allowPageNum\":1,\"redirectLogin\":23,\"slashUrls\":1,\"noGlobal\":1,\"compile\":3,\"modified\":1726437207,\"ns\":\"ProcessWire\",\"_lazy\":1}');
+INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('1', 'home', '1', '0', '0', '{\"useRoles\":1,\"editRoles\":[1025],\"addRoles\":[1025],\"createRoles\":[1025],\"noParents\":1,\"slashUrls\":1,\"compile\":0,\"modified\":1727374743,\"ns\":\"\\\\\",\"_lazy\":1,\"roles\":[37,1025]}');
+INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('2', 'admin', '2', '8', '0', '{\"useRoles\":1,\"parentTemplates\":[2],\"allowPageNum\":1,\"redirectLogin\":23,\"slashUrls\":1,\"noGlobal\":1,\"compile\":3,\"modified\":1727346886,\"ns\":\"ProcessWire\",\"_lazy\":1}');
 INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('3', 'user', '3', '8', '0', '{\"useRoles\":1,\"noChildren\":1,\"parentTemplates\":[2],\"slashUrls\":1,\"pageClass\":\"User\",\"noGlobal\":1,\"noMove\":1,\"noTrash\":1,\"noSettings\":1,\"noChangeTemplate\":1,\"nameContentTab\":1}');
 INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('4', 'role', '4', '8', '0', '{\"noChildren\":1,\"parentTemplates\":[2],\"slashUrls\":1,\"pageClass\":\"Role\",\"noGlobal\":1,\"noMove\":1,\"noTrash\":1,\"noSettings\":1,\"noChangeTemplate\":1,\"nameContentTab\":1}');
 INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('5', 'permission', '5', '8', '0', '{\"noChildren\":1,\"parentTemplates\":[2],\"slashUrls\":1,\"guestSearchable\":1,\"pageClass\":\"Permission\",\"noGlobal\":1,\"noMove\":1,\"noTrash\":1,\"noSettings\":1,\"noChangeTemplate\":1,\"nameContentTab\":1}');
-INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('29', 'basic-page', '83', '0', '0', '{\"slashUrls\":1,\"compile\":3,\"modified\":1726437207,\"ns\":\"\\\\\",\"_lazy\":1}');
+INSERT INTO `templates` (`id`, `name`, `fieldgroups_id`, `flags`, `cache_time`, `data`) VALUES('29', 'basic-page', '83', '0', '0', '{\"slashUrls\":1,\"compile\":3,\"modified\":1727346886,\"ns\":\"\\\\\",\"_lazy\":1}');
 
 UPDATE pages SET created_users_id=41, modified_users_id=41, created=NOW(), modified=NOW();
 

site/assets/backups/export-profile/site-rockfrontend/modules/RockFrontend/RockFrontend.module.php

@@ -53,6 +53,7 @@ class RockFrontend extends WireData implements Module, ConfigurableModule
   const installedprofilekey = 'rockfrontend-installed-profile';
   const recompile = 'rockfrontend-recompile-less';
   const defaultVspaceScale = 0.66;
+  const layoutFile = '_main.latte';
 
   const ajax_noaccess = "ajax-noaccess";
   const ajax_rendererror = "ajax-render-error";
@@ -120,7 +121,7 @@ class RockFrontend extends WireData implements Module, ConfigurableModule
   /** @var Engine */
   private $latteWithLayout;
 
-  public $layoutFile = 'layout.latte';
+  public $layoutFile = self::layoutFile;
 
   /** @var WireArray $layoutFolders */
   public $layoutFolders;
@@ -1805,7 +1806,7 @@ public function latteLayoutFile()
     $tpl = rtrim($this->wire->config->paths->templates, "/");
     $layoutFile = ltrim($this->layoutFile, "/");
     if ($layoutFile) return "$tpl/$layoutFile";
-    return "$tpl/layout.latte";
+    return "$tpl/" . self::layoutFile;
   }
 
   /**
@@ -3113,7 +3114,7 @@ private function configLatte(InputfieldWrapper $inputfields): void
     $f->name = 'layoutFile';
     $f->label = 'Filename of Autoload-Layout';
     $f->icon = 'file-code-o';
-    $f->value = $this->layoutFile ?: 'layout.latte';
+    $f->value = $this->layoutFile ?: self::layoutFile;
     $f->notes = "File relative to $dir";
     $f->showIf = "noLayoutFile=0";
     $fs->add($f);

site/assets/backups/export-profile/site-rockfrontend/modules/RockFrontend/stubs/_rockfrontend.php

@@ -3,6 +3,8 @@
 namespace ProcessWire;
 
 /**
+ * DO NOT CHANGE THIS FILE!
+ *
  * This file was created by RockFrontend
  * Do not change it to make sure that updating RockFrontend will not break
  * your site! Use _init.php to add custom modifications to your site.

site/assets/backups/export-profile/site-rockfrontend/templates/_rockfrontend.php

@@ -3,6 +3,8 @@
 namespace ProcessWire;
 
 /**
+ * DO NOT CHANGE THIS FILE!
+ *
  * This file was created by RockFrontend
  * Do not change it to make sure that updating RockFrontend will not break
  * your site! Use _init.php to add custom modifications to your site.

site/assets/backups/export-profile/site-rockfrontend/templates/bundle/tailwind.css

@@ -112,14 +112,13 @@ This file is prefixed with _ so that it appears on top of the file list.
   --tw-contain-style:  
 }
 
-.border-orange-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 88 12 / var(--tw-border-opacity))
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity))
 }
 
-.text-orange-600 {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity))
+.p-5 {
+  padding: 1.25rem
 }
 
 /* here you can add custom tailwind compound classes via apply */

site/assets/backups/export-profile/site-rockfrontend/templates/home.php

@@ -4,14 +4,10 @@
  * Empty PHP file to tell ProcessWire that pages with this template are viewable.
  *
  * I'm usually leaving these files empty, but you could define custom variables
- * here that are specific to pages with this template. The load order is:
+ * here that are specific to pages with this template.
+ *
+ * The load order is:
  * _init.php
  * home.php
- * _rockfrontend.php --> layout.latte
- *
- * The footer.latte file outputs the $foo variable. As you can see in the footer
- * it will be "not available" in all pages other than the homepage, because
- * in basic-page.php it is not set.
+ * _rockfrontend.php (which will load the layout file, eg _main.latte)
  */
-
-$foo = "I am the foo variable, set in home.php!";

site/assets/backups/export-profile/site-rockfrontend/templates/sections/main.latte

@@ -6,16 +6,53 @@
 <main>
   <div class="uk-container uk-section-small">
     <h1>{$page->title}</h1>
-    <div class='uk-alert uk-alert-warning text-orange-600 border-orange-600' style='border:2px solid'>
-      <p style='margin-top:0px;'>Note: To finish the installation you have to run this command on the command line in the root directory of your project:</p>
-      <pre><code>npm install -D</code></pre>
-      <p>Once that is done either execute the RockShell command "pw:setup" or just copy this to your site config (make sure to add this only on your development config, not on production!):</p>
-      <pre><code>$config->livereload = 1;</code></pre>
-      <p>Then open the browsers devtools and reload this page. You should see this in your console:</p>
-      <pre><code>Loading LiveReload
-RockFrontend is listening for file changes...</code></pre>
-      <p>Then add the class "bg&#45;red&#45;500" to the &lt;h1&gt; tag in /site/templates/sections/main.latte; RockFrontend should reload the browser and the headline above should get a red background, which means that LiveReload + Tailwind is working 😎🚀</p>
-      <p>You can now remove this note and start developing your dream project. Enjoy!</p>
-    </div>
+
+    <h2>Hello World</h2>
+
+    <ul uk-accordion>
+      <li class="uk-open">
+        <a class="uk-accordion-title" href>Latte</a>
+        <div class="uk-accordion-content uk-alert uk-margin-remove-bottom">
+          <p>Latte is a great template engine by Nette - the folks behind TracyDebugger! See <a href='https://latte.nette.org/en/guide'>Getting Started with Latte</a> and also <a href='https://processwire.com/talk/topic/27367-why-i-love-the-latte-template-engine/'>Why I love the Latte Template Engine</a>.</p>
+
+          <p>See <a href='https://www.baumrock.com/en/processwire/modules/site-rockfrontend/docs/latte/'>docs</a> for further details.</p>
+        </div>
+      </li>
+      <li>
+        <a class="uk-accordion-title" href>LiveReload</a>
+        <div class="uk-accordion-content uk-alert uk-margin-remove-bottom">
+          <p>LiveReload should already be working. Try changing <code>Hello World</code> in <code>/site/templates/sections/main.latte</code> to <code>Hello Universe</code> and see if the browser reloads automatically.</p>
+
+          <p>See <a href='https://www.baumrock.com/en/processwire/modules/site-rockfrontend/docs/livereload/'>docs</a> for further details.</p>
+        </div>
+      </li>
+      <li>
+        <a class="uk-accordion-title" href>UIkit</a>
+        <div class="uk-accordion-content uk-alert uk-margin-remove-bottom">
+          <p>UIkit is loaded in <code>/site/templates/_init.php</code> and ready to use. You can go ahead and copy and paste examples from their <a href='https://getuikit.com/docs/'>docs</a>.</p>
+
+          <p>You can also modify UIkit LESS variables easily. Just edit <code>/site/templates/styles/_custom.less</code> and change the color for muted background to a light red: <pre><code>@global-muted-background: #f7a3a3;</code></pre></p>
+
+          <p>LiveReload should automatically reload the page and UIkit LESS files should automatically be compiled to CSS.</p>
+
+          <p>See <a href='https://www.baumrock.com/en/processwire/modules/site-rockfrontend/docs/uikit/'>docs</a> for further details.</p>
+        </div>
+      </li>
+      <li>
+        <a class="uk-accordion-title" href>TailwindCSS</a>
+        <div class="uk-accordion-content uk-alert uk-margin-remove-bottom">
+          <p>To use TailwindCSS, you need to install it first. All you have to do is run this command in the root directory of your project: <pre><code>npm install -D</code></pre></p>
+
+          <p>This will install all dependencies listed in <a href='https://github.com/baumrock/site-rockfrontend/blob/main/site/assets/backups/export-profile/site-rockfrontend/install/assets/package.json'>package.json</a> and add the <code>npm run build</code> command that will compile TailwindCSS to CSS for the browser.</p>
+
+          <p>Note: If livereload is enabled RockFrontend will automatically load the file <code>/site/livereload.php</code> on every reload. This file will then run <code>npm run build</code> via PHP's exec function. You can remove this file if you want to use your own build scripts or watchers.</p>
+
+          <p>Tailwind Example: Try adding <code>class='bg-red-500 p-5'</code> to the <code>Hello World</code> heading in <code>/site/templates/sections/main.latte</code>.</p>
+
+          <p>See <a href='https://www.baumrock.com/en/processwire/modules/site-rockfrontend/docs/tailwind/'>docs</a> for further details.</p>
+        </div>
+      </li>
+    </ul>
+
   </div>
-</main>
+</main>

site/templates/_rockfrontend.php

@@ -3,6 +3,8 @@
 namespace ProcessWire;
 
 /**
+ * DO NOT CHANGE THIS FILE!
+ *
  * This file was created by RockFrontend
  * Do not change it to make sure that updating RockFrontend will not break
  * your site! Use _init.php to add custom modifications to your site.

site/templates/bundle/tailwind.css

@@ -112,14 +112,13 @@ This file is prefixed with _ so that it appears on top of the file list.
   --tw-contain-style:  
 }
 
-.border-orange-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 88 12 / var(--tw-border-opacity))
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity))
 }
 
-.text-orange-600 {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity))
+.p-5 {
+  padding: 1.25rem
 }
 
 /* here you can add custom tailwind compound classes via apply */

site/templates/home.php

@@ -4,14 +4,10 @@
  * Empty PHP file to tell ProcessWire that pages with this template are viewable.
  *
  * I'm usually leaving these files empty, but you could define custom variables
- * here that are specific to pages with this template. The load order is:
+ * here that are specific to pages with this template.
+ *
+ * The load order is:
  * _init.php
  * home.php
- * _rockfrontend.php --> layout.latte
- *
- * The footer.latte file outputs the $foo variable. As you can see in the footer
- * it will be "not available" in all pages other than the homepage, because
- * in basic-page.php it is not set.
+ * _rockfrontend.php (which will load the layout file, eg _main.latte)
  */
-
-$foo = "I am the foo variable, set in home.php!";