feat: add rockblocks profile

baumrock · Oct 13, 2023 · 27ded7a · 27ded7a
1 parent af96137
commit 27ded7a
Show file tree

Hide file tree

Showing 9 changed files with 291 additions and 1 deletion.
diff --git a/profiles/rock-beginner/readme.md b/profiles/rock-beginner/readme.md
@@ -1 +1,3 @@
-tbd
+## Rock Beginner Profile
+
+The beginner rock profile is an UIkit based profile that does not use any advanced techniques. It uses plain PHP for template rendering and imports the UIkit CSS file instead of LESS, so you don't need any external modules.
diff --git a/profiles/rock-blocks/files/site/classes/HomePage.php b/profiles/rock-blocks/files/site/classes/HomePage.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace ProcessWire;
+
+use RockMigrations\MagicPage;
+
+/**
+ * This is a custom page class for the HomePage
+ * You can delete this file if you don't need it.
+ */
+class HomePage extends Page
+{
+  use MagicPage;
+
+  const tpl = 'home';
+
+  /** magic */
+
+  public function editForm($form)
+  {
+    $rm = $this->rockmigrations();
+
+    // global site seo wrapper
+    // add and remove fields as you like
+    $rm->wrapFields($form, [
+      RockFrontend::field_favicon,
+      RockFrontend::field_ogimage,
+    ], [
+      'label' => 'Global Site SEO Settings',
+      'collapsed' => Inputfield::collapsedYes,
+    ]);
+
+    // global site settings
+    // add and remove fields as you like
+    $rm->wrapFields($form, [
+      RockFrontend::field_footerlinks,
+    ], [
+      'label' => 'Global Site Settings',
+      'collapsed' => Inputfield::collapsedYes,
+    ]);
+  }
+
+  public function migrate()
+  {
+    $rm = $this->rockmigrations();
+    $rm->installModule("RockPageBuilder");
+    $rm->migrate([
+      'fields' => [],
+      'templates' => [
+        self::tpl => [
+          'fields' => [
+            'title',
+            // RockPageBuilder::field_blocks,
+            // RockPageBuilder::field_widgets,
+
+            RockFrontend::field_favicon,
+            RockFrontend::field_ogimage,
+            RockFrontend::field_footerlinks,
+          ],
+        ],
+      ],
+    ]);
+  }
+}
diff --git a/profiles/rock-blocks/files/site/templates/_main.php b/profiles/rock-blocks/files/site/templates/_main.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace ProcessWire;
+
+/** @var RockFrontend $rockfrontend */
+$rockfrontend->styles()
+  ->add('/site/templates/uikit/src/less/uikit.theme.less')
+  ->addDefaultFolders(); // autoload styles in sections, partials, etc
+$rockfrontend->scripts()
+  ->add('/site/templates/uikit/dist/js/uikit.min.js');
+?>
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <?= $rockfrontend->seo() ?>
+</head>
+
+<body>
+  <?php
+  // check if Less module is installed
+  // once installed you can remove this if/else and just render the layout
+  if ($modules->get('Less')) echo $rockfrontend->renderLayout($page);
+  else echo "<h1 style='text-align:center;padding:50px;color:red;'>Please install the Less module to use this profile!</h1>";
+  ?>
+</body>
+
+</html>
diff --git a/profiles/rock-blocks/files/site/templates/layouts/default.php b/profiles/rock-blocks/files/site/templates/layouts/default.php
@@ -0,0 +1,4 @@
+<?php
+echo $rf->render("sections/header");
+echo $rf->render("sections/main");
+echo $rf->render("sections/footer");
diff --git a/profiles/rock-blocks/files/site/templates/less/typography.less b/profiles/rock-blocks/files/site/templates/less/typography.less
@@ -0,0 +1,40 @@
+// if you don't want this file simply delete it ;)
+// heading sizes using the fluid font size feature
+// see here: https://www.youtube.com/watch?v=6ld4daFDQlY
+// background: https://www.youtube.com/watch?v=wARbgs5Fmuw
+h1,
+.uk-h1 {
+  font-size: rfGrow(32pxrem, 42pxrem);
+  line-height: rfGrow(38pxrem, 47pxrem);
+  margin: 0;
+}
+h2,
+.uk-h2 {
+  font-size: rfGrow(24pxrem, 32pxrem);
+  line-height: rfGrow(29pxrem, 37pxrem);
+  margin: 0;
+}
+h3,
+.uk-h3 {
+  font-size: rfGrow(20pxrem, 24pxrem);
+  line-height: rfGrow(24pxrem, 28pxrem);
+  margin: 0;
+}
+h4,
+.uk-h4 {
+  font-size: rfGrow(16pxrem, 20pxrem);
+  line-height: rfGrow(20pxrem, 24pxrem);
+  margin: 0;
+}
+h5,
+.uk-h5 {
+  font-size: 16pxrem;
+  line-height: 20pxrem;
+  margin: 0;
+}
+h6,
+.uk-h6 {
+  font-size: 14pxrem;
+  line-height: 18pxrem;
+  margin: 0;
+}
diff --git a/profiles/rock-blocks/files/site/templates/sections/footer.latte b/profiles/rock-blocks/files/site/templates/sections/footer.latte
@@ -0,0 +1,11 @@
+<footer {alfred()}>
+  <div
+    class="
+      uk-container uk-background-secondary uk-light
+      uk-text-center uk-padding
+    "
+  >
+    ## footer.latte ## &copy;
+    <script>document.write(new Date().getFullYear());</script>
+  </div>
+</footer>
diff --git a/profiles/rock-blocks/files/site/templates/sections/header.latte b/profiles/rock-blocks/files/site/templates/sections/header.latte
@@ -0,0 +1,128 @@
+{* here you can exclude items from main + mobile menu, eg template!=blogitem *}
+{do $wire->mainMenuSelector = "include=hidden"}
+{do $wire->mobileMenuSelector = $wire->mainMenuSelector}
+
+<header {alfred($page)}>
+  <div class="uk-container">
+    <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
+
+      {* navbar left - logo *}
+      <div class="uk-navbar-left">
+        <a
+          href="/"
+          class="uk-navbar-item uk-logo"
+          aria-label="Back to Home"
+          title="Back to Home"
+          uk-tooltip
+        >
+          Your Logo
+        </a>
+      </div>
+
+      {* navbar right *}
+      <div class="uk-navbar-right">
+
+        {* main menu *}
+        <ul class="uk-navbar-nav uk-visible@m">
+          {* define block that is used for recursion *}
+          {define mainmenu, $items, $first}
+            {foreach $items as $item}{* loop all items*}
+              {* define variables for inside the loop *}
+              {var $show = ($rockfrontend->isActive($item) or $item->parents->count()===1)}
+              {var $inDropdown = $item->parents->count()>1}
+              {var $active = $inDropdown ? $item==$page : $rockfrontend->isActive($item)}
+              {var $subid = "menu-".$item->id}
+              {var $numc = ($item->children($wire->mainMenuSelector)->count() && $item!==$first) }
+              {* list item markup *}
+              <li n:class="$active ? 'uk-active'">
+                <a
+                  href="{($inDropdown and $numc) ? '#' : $item->url}"
+                  n:attr="uk-toggle: ($inDropdown and $numc) ? 'target: #'.$subid.'; animation: uk-animation-fade'"
+                >
+                  {$item->title}
+                  <svg n:if="$numc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+                </a>
+                {* list for child-items *}
+                <div n:if="$numc" n:tag-if="!$inDropdown" class="uk-navbar-dropdown">
+                  <ul
+                    id="{$subid}"
+                    class="uk-nav uk-navbar-dropdown-nav uk-margin-left"
+                    {!$show?'hidden'}
+                  >
+                    {include
+                      mainmenu,
+                      $inDropdown
+                        ? $item->children($wire->mainMenuSelector)->prepend($item)
+                        : $item->children($wire->mainMenuSelector),
+                      $item
+                    }
+                  </ul>
+                </div>
+              </li>
+            {/foreach}
+          {/define}
+          {* now include the block for the first level of items *}
+          {include mainmenu, $home->children($wire->mainMenuSelector)}
+        </ul>
+
+        {* burger *}
+        <ul class="uk-navbar-nav uk-hidden@m">
+          <li>
+            <a href="#mobile-menu" uk-toggle>
+              <svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
+            </a>
+          </li>
+        </ul>
+
+      </div>
+
+    </nav>
+  </div>
+</header>
+
+{* mobile menu *}
+<div id="mobile-menu" uk-offcanvas="flip: true; overlay: true">
+  <div class="uk-offcanvas-bar rf-offcanvas">
+
+    <button class="uk-offcanvas-close" type="button" uk-close></button>
+
+    <ul class="uk-nav uk-nav-primary uk-margin-top uk-margin-large-bottom">
+      {* define block that is used for recursion *}
+      {define mobilemenu, $items, $first}
+        {foreach $items as $item}{* loop all items*}
+          {* define variables for inside the loop *}
+          {var $show = $rockfrontend->isActive($item)}
+          {var $active = $item==$page}
+          {var $subid = "mobile-".$item->id}
+          {var $numc = ($item->children($wire->mobileMenuSelector)->count() && $item!==$first) }
+          {* list item markup *}
+          <li n:class="$active ? 'uk-active'">
+            <a
+              href="{$numc ? '#' : $item->url}"
+              n:attr="uk-toggle: $numc ? 'target: #'.$subid.'; animation: uk-animation-fade'"
+            >
+              {$item->title}
+              <svg n:if="$numc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--tabler" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"></path></svg>
+            </a>
+            {* list for child-items *}
+            <ul
+              n:if="$numc"
+              id="{$subid}"
+              class="uk-nav-sub"
+              {!$show?'hidden'}
+            >
+              {include mobilemenu, $item->children($wire->mobileMenuSelector)->prepend($item), $item}
+            </ul>
+          </li>
+        {/foreach}
+      {/define}
+      {* now include the block for the first level of items *}
+      {include mobilemenu, $home->children($wire->mobileMenuSelector)}
+    </ul>
+
+  </div>
+</div>
+
+{* Reset page cache so that following $page->children() calls dont return
+false results that have prepended items from the built menu *}
+{do $pages->uncacheAll()}
diff --git a/profiles/rock-blocks/files/site/templates/sections/main.latte b/profiles/rock-blocks/files/site/templates/sections/main.latte
@@ -0,0 +1,3 @@
+<main>
+  {$rockblocks->render()}
+</main>
diff --git a/profiles/rock-blocks/readme.md b/profiles/rock-blocks/readme.md
@@ -0,0 +1,7 @@
+## RockBlocks Profile
+
+This advanced rock profile makes it super easy to kickstart new projects based on RockPageBuilder and RockBlocks.
+
+It uses the LESS module to compile the UIkit source files to CSS on the fly, so make sure to install that module first! https://processwire.com/modules/less/
+
+For rendering it uses LATTE files instead of plain PHP <a href=https://processwire.com/talk/topic/27367-why-i-love-the-latte-template-engine/ target=_blank>because LATTE is awesome :)</a>