feat: add seo docs and new manifest config settings

baumrock · Apr 2, 2023 · 47e6668 · 47e6668
1 parent 92672ea
commit 47e6668
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 8 deletions.
diff --git a/RockFrontend.module.php b/RockFrontend.module.php
@@ -2091,6 +2091,8 @@ private function configTools(&$inputfields)
     $fs = new InputfieldFieldset();
     $fs->label = "Tools";
 
+    $this->manifestConfig($fs);
+
     $f = new InputfieldText();
     $f->name = "postCssTool";
     $f->label = "PostCSS";
@@ -2191,6 +2193,64 @@ private function configTools(&$inputfields)
     $inputfields->add($fs);
   }
 
+  private function manifestConfig(InputfieldWrapper $fs)
+  {
+    $wrapper = new InputfieldFieldset();
+    $wrapper->label = 'Manifest File';
+    $wrapper->collapsed = Inputfield::collapsedYes;
+    $create = false;
+
+    $wrapper->add([
+      'type' => 'markup',
+      'label' => 'Docs',
+      'value' => 'RockFrontend Docs: <a href=https://www.baumrock.com/modules/RockFrontend/docs/seo/#website-manifest-file">https://www.baumrock.com/modules/RockFrontend/docs/seo/#website-manifest-file</a>
+        <br>Mozilla Reference: <a href=https://developer.mozilla.org/en-US/docs/Web/Manifest>https://developer.mozilla.org/en-US/docs/Web/Manifest</a>',
+    ]);
+
+    $wrapper->add([
+      'type' => 'text',
+      'label' => 'Name',
+      'name' => 'm_name',
+      'value' => $this->m_name,
+    ]);
+    if ($this->m_name) $create = true;
+
+    $wrapper->add([
+      'type' => 'text',
+      'label' => 'Theme-Color',
+      'name' => 'm_theme_color',
+      'value' => $this->m_theme_color,
+      'notes' => 'eg #00bb86',
+    ]);
+    if ($this->m_theme_color) $create = true;
+
+    $wrapper->add([
+      'type' => 'text',
+      'label' => 'Background-Color',
+      'name' => 'm_background_color',
+      'value' => $this->m_background_color,
+      'notes' => 'Leave blank for white background.',
+    ]);
+    if ($this->m_background_color) $create = true;
+
+    $wrapper->add([
+      'type' => 'markup',
+      'label' => 'Icon',
+      'value' => 'TBD',
+    ]);
+
+    if ($create) {
+      $this->manifest()
+        ->name($this->m_name)
+        ->themeColor($this->m_theme_color)
+        ->backgroundColor($this->m_background_color ?: '#fff')
+        ->saveToFile();
+      $this->message('Manifest File has been saved to PW root folder.');
+    }
+
+    $fs->add($wrapper);
+  }
+
   private function downloadCDN()
   {
     $url = $this->wire->input->post('cdn', 'url');

diff --git a/Seo.php b/Seo.php
@@ -279,12 +279,6 @@ public function ___getStringValue($tag, $key = 'value'): string
    */
   public function ___setupDefaults()
   {
-    // branding
-    // you can remove the branding by adding ->setMarkup('branding', '')
-    // please consider donating if you do so and the module helps you
-    // https://github.com/sponsors/baumrock/ THANK YOU
-    $this->setMarkup('branding', "\n  <!-- RockFrontend SEO by baumrock.com -->");
-
     // title
     $this->setMarkup('title', '<title>{value:60}</title>');
     $this->setMarkup('og:title', '<meta property="og:title" content="{value:95}">');

diff --git a/docs/seo/manifest.jpg b/docs/seo/manifest.jpg
diff --git a/docs/seo/manifest2.png b/docs/seo/manifest2.png
diff --git a/docs/seo/readme.md b/docs/seo/readme.md
@@ -1 +1,129 @@
-# SEO Tools
+# SEO Tools
+
+RockFrontend comes with tools that help you build SEO optimized websites in no time.
+
+## Usage
+
+While you can customise every aspect of the output the main goal is that usage is still very simple.
+
+For example you just return a `PageImage` object in the `og:image` tag and RockFrontend will take care of getting the correct image url and size.
+
+Or you can just throw the content of a TinyMCE field into the `description()` function and RockFrontend will take care of removing all html tags and truncating the text to the desired length:
+
+`label: /site/templates/_main.php`
+```php
+<head>
+  ...
+  <?php
+  echo $rockfrontend->seo()
+
+    ->title("ACME - " . $page->title)
+
+    ->description(function (Page $page) {
+      if($page->template == 'car') return $page->cardescription;
+      return $page->body;
+    })
+
+    ->setValue('og:image', function (Page $page) {
+      if($page->coverpic) return $page->coverpic;
+      if($page->heroimage) return $page->heroimage;
+      return $this->wire->pages->get(1)->defaultpic;
+    });
+  ?>
+</head>
+```
+
+Most values can either be set as string (for simple situations like the `title` in the example above) or as a callback that receives the current `$page` as first argument (like in the `description` in the example above).
+
+## Default Configuration
+
+If you don't want to use the default configuration, all tags are fully configurable. The default configuration can be inspected by dumping the RockFrontend Seo object:
+
+```php
+bd($rockfrontend->seo());
+```
+
+<img src=seo.png class=blur alt='Default SEO Configuration'>
+
+The recommendations are mostly inspired from https://moz.com/learn/seo.
+
+You can manipulate tags via `setMarkup()` and `setValue()`:
+
+### setMarkup()
+
+Let's say we wanted to add a new `foo` tag to our SEO tools:
+
+```php
+$rockfrontend->seo()
+  ->setMarkup("foo", "<meta property='foo' content='{value:20}'>");
+```
+
+### setValue()
+
+Now we can set a new value for the `foo` tag based on the page's title:
+
+`label: string`
+```php
+$rockfrontend->seo()
+  ->setValue($page->title);
+```
+
+Note that as we defined `{value:20}` in the tag's markup the page title will be truncated to 20 characters!
+
+## Page Title
+
+The page title can either be set as a string or as a callback:
+
+`label: string`
+```php
+$rockfrontend->seo()->title($page->title);
+```
+
+`label: callback`
+```php
+$rockfrontend->seo()
+  ->title(function ($page) {
+    if ($page->headline) return "{$page->title} - {$page->headline}";
+    return $page->title;
+  });
+```
+
+This will not only set the `<title>` tag but also the `og:title` tag:
+
+`label: output`
+```html
+<title>RockFrontend - SEO Tools</title>
+<meta property="og:title" content="RockFrontend - SEO Tools">
+```
+
+## Page Description
+
+The same concept applies to the page description tag:
+
+`label: string`
+```php
+$rockfrontend->seo()->description($page->body);
+```
+
+`label: callback`
+```php
+$rockfrontend->seo()
+  ->description(function ($page) {
+    if ($page->template == 'car') return $page->cardescription;
+    return $page->body;
+  });
+```
+
+`label: output`
+```html
+<meta name="description" content="Your Page Description">
+<meta property="og:description" content="Your Page Description">
+```
+
+## Website Manifest File
+
+You can create your website's manifest file from the RockFrontend module config. RockFrontend will then add that manifest file to your site's `<head>` section which will make the website appear in your selected color theme:
+
+<img src=manifest.jpg class=blur alt='Manifest File Preview' width=250>
+
+<img src=manifest2.png class=blur alt='Manifest File Settings' width=250>
diff --git a/docs/seo/seo.png b/docs/seo/seo.png
diff --git a/docs/template-engines/readme.md b/docs/template-engines/readme.md
@@ -57,7 +57,7 @@ Then you can render twig files like this:
 echo $rockfrontend->render('sections/header.twig');
 ```
 
-## Others
+## Adding Other Template Engines
 
 You can easily add any other Template Engine to RockFrontend. Say we wanted to add the `Foo` engine that renders all `.foo` files.