@omega.js/web 0.1.0

package/defaults/pages/test/libraries/lazy-loading.html

@@ -0,0 +1,450 @@
+---
+layout: frontend/core/base
+permalink: /test/libraries/lazy-loading
+
+meta:
+  title: "Lazy loading test page"
+  description: "Test page for demonstrating lazy loading functionality"
+  breadcrumb: "Lazy loading test"
+  index: false
+---
+
+<section>
+<div class="container">
+  <div class="row">
+    <div class="col-lg-8 mx-auto">
+      <h1 class="h2 mb-4">Lazy loading test page</h1>
+      <p class="lead mb-5">This page demonstrates lazy loading of images, iframes, and other media. Scroll down to see content load as it comes into view.</p>
+
+      <!-- Instructions -->
+      <div class="alert alert-info mb-5">
+        <h5 class="alert-heading">How to Test:</h5>
+        <ol class="mb-0">
+          <li>Open browser DevTools → Network tab</li>
+          <li>Filter by Images/Media</li>
+          <li>Scroll down slowly to see images load dynamically</li>
+          <li>Images should only load when they're about to enter the viewport</li>
+        </ol>
+      </div>
+
+      <!-- First visible image (should load immediately) -->
+      <section>
+        <h2 class="h3 mb-3">1. Above the fold image (lazy loading starts immediately)</h2>
+        <p>This image is visible on page load, so it should start loading immediately:</p>
+        <img data-lazy="@src https://placehold.co/800x400?text=Immediate+Load"
+             class="card-img-top lazy"
+             alt="Immediately loaded image">
+      </section>
+
+      <!-- Spacer to push content below fold -->
+      <div class="d-flex align-items-center justify-content-center text-muted vh-100">
+        <div class="text-center">
+          <i class="fa-solid fa-arrow-down fa-3xl mb-3"></i>
+          <p class="h4">Scroll down to trigger lazy loading...</p>
+        </div>
+      </div>
+
+      <!-- Lazy loaded images with data-src -->
+      <section>
+        <h2 class="h3 mb-3">2. Standard lazy loading (data-src)</h2>
+        <p>These images use <code>data-src</code> attribute and will load when scrolled into view:</p>
+
+        <div class="row g-4 mb-4">
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://placehold.co/400x300?text=Lazy+Image+1"
+                   class="card-img-top"
+                   alt="Lazy loaded image 1">
+              <div class="card-body">
+                <p class="card-text">Image #1 - Loads when visible</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://placehold.co/400x300?text=Lazy+Image+2"
+                   class="card-img-top"
+                   alt="Lazy loaded image 2">
+              <div class="card-body">
+                <p class="card-text">Image #2 - Loads when visible</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Responsive images with srcset -->
+      <section>
+        <h2 class="h3 mb-3">3. Responsive Images with srcset</h2>
+        <p>These images use <code>data-srcset</code> for responsive loading:</p>
+
+        <img data-lazy="@src https://placehold.co/800x400?text=Responsive+800w"
+             class="img-fluid rounded shadow mb-4"
+             alt="Responsive lazy loaded image">
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Picture element with multiple sources -->
+      <section>
+        <h2 class="h3 mb-3">4. Picture Element with Art Direction</h2>
+        <p>Picture element with different sources for different screen sizes:</p>
+
+        <picture>
+          <source data-lazy="@srcset https://placehold.co/1200x400?text=Desktop+View"
+                  media="(min-width: 768px)">
+          <source data-lazy="@srcset https://placehold.co/600x600?text=Tablet+View"
+                  media="(min-width: 576px)">
+          <img data-lazy="@src https://placehold.co/400x400?text=Mobile+View"
+               class="img-fluid rounded shadow"
+               alt="Art directed image">
+        </picture>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Background images -->
+      <section>
+        <h2 class="h3 mb-3">5. Background Images</h2>
+        <p>These divs use <code>data-lazy-bg</code> for background images:</p>
+
+        <div class="row g-4">
+          <div class="col-md-4">
+            <div data-lazy="@bg https://placehold.co/400x400?text=BG+1"
+                 class="rounded shadow"
+                 style="height: 250px; background-size: cover; background-position: center;">
+              <div class="d-flex align-items-end h-100 p-3">
+                <span class="badge bg-dark">Background Image 1</span>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div data-lazy="@bg https://placehold.co/400x400?text=BG+2"
+                 class="rounded shadow"
+                 style="height: 250px; background-size: cover; background-position: center;">
+              <div class="d-flex align-items-end h-100 p-3">
+                <span class="badge bg-dark">Background Image 2</span>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div data-lazy="@bg https://placehold.co/400x400?text=BG+3"
+                 class="rounded shadow"
+                 style="height: 250px; background-size: cover; background-position: center;">
+              <div class="d-flex align-items-end h-100 p-3">
+                <span class="badge bg-dark">Background Image 3</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Lazy Classes -->
+      <section>
+        <h2 class="h3 mb-3">6. Lazy loaded classes</h2>
+        <p>These elements get classes added when they come into view:</p>
+
+        <div class="row g-4">
+          <div class="col-md-4">
+            <div data-lazy="@class animation-slide-up"
+                 class="p-4 rounded border">
+              <h5>Fade in left</h5>
+              <p>This box will fade in from the left when visible</p>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div data-lazy="@class animation-popup-long"
+                 class="p-4 rounded border">
+              <h5>Fade in up</h5>
+              <p>This box will fade in from below when visible</p>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div data-lazy="@class animation-slide-up"
+                 class="p-4 rounded border">
+              <h5>Fade in right</h5>
+              <p>This box will fade in from the right when visible</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <div data-lazy="@class bg-primary text-white"
+               class="p-4 rounded">
+            <h5>Dynamic styling</h5>
+            <p>This box will get Bootstrap primary background and white text when visible</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Iframes -->
+      <section>
+        <h2 class="h3 mb-3">7. Lazy loaded iframes</h2>
+        <p>YouTube videos and other iframes that load on scroll:</p>
+
+        <div class="ratio ratio-16x9 mb-4">
+          <iframe data-lazy="@src https://www.youtube.com/embed/dQw4w9WgXcQ"
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen></iframe>
+        </div>
+
+        <div class="ratio ratio-16x9 mb-4">
+          <iframe data-lazy="@src https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.0917678282367!2d-74.00601228459395!3d40.71643097933047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb7ae1b%3A0x5e0cab9c0e0b6f0e!2sOne%20World%20Trade%20Center!5e0!3m2!1sen!2sus!4v1234567890"
+                  style="border:0;"
+                  allowfullscreen=""
+                  referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Gallery of many images -->
+      <section>
+        <h2 class="h3 mb-3">8. Image Gallery</h2>
+        <p>A grid of many images to test performance with multiple lazy-loaded elements:</p>
+
+        <div class="row g-3">
+          {% for i in (9..20) %}
+          <div class="col-6 col-md-4 col-lg-3">
+            <div class="card">
+              <img data-lazy="@src https://placehold.co/300x300?text=Image+{{ i }}"
+                   class="card-img-top"
+                   alt="Gallery image {{ i }}">
+              <div class="card-body p-2">
+                <small class="text-muted">Image #{{ i }}</small>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Video -->
+      <section>
+        <h2 class="h3 mb-3">9. Lazy loaded video</h2>
+        <p>HTML5 video that loads when scrolled into view:</p>
+
+        <video data-lazy="@src https://www.w3schools.com/html/mov_bbb.mp4"
+               controls
+               class="w-100 rounded shadow">
+          Your browser does not support the video tag.
+        </video>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Slow Loading Test with Picsum -->
+      <section>
+        <h2 class="h3 mb-3">10. Slow loading test (loading animation demo)</h2>
+        <p>These images from picsum.photos load slowly, so you can see the loading animation:</p>
+
+        <div class="row g-4">
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://picsum.photos/600/400?random=100"
+                   class="card-img-top"
+                   alt="Slow loading image 1">
+              <div class="card-body">
+                <p class="card-text">Watch the shimmer loading animation</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://picsum.photos/600/400?random=101"
+                   class="card-img-top"
+                   alt="Slow loading image 2">
+              <div class="card-body">
+                <p class="card-text">This should show loading state longer</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row g-4 mt-2">
+          <div class="col-md-4">
+            <img data-lazy="@src https://picsum.photos/400/300?random=102"
+                 class="img-fluid rounded shadow"
+                 alt="Slow loading image 3">
+          </div>
+          <div class="col-md-4">
+            <img data-lazy="@src https://picsum.photos/400/300?random=103"
+                 class="img-fluid rounded shadow"
+                 alt="Slow loading image 4">
+          </div>
+          <div class="col-md-4">
+            <img data-lazy="@src https://picsum.photos/400/300?random=104"
+                 class="img-fluid rounded shadow"
+                 alt="Slow loading image 5">
+          </div>
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- HTML Loading Test -->
+      <section>
+        <h2 class="h3 mb-3">11. Lazy Loaded HTML Content</h2>
+        <p>This container will load HTML content when scrolled into view:</p>
+
+        <div data-lazy="@html <div class='alert alert-success'><h4 class='alert-heading'>🎉 HTML Loaded!</h4><p class='mb-0'>This HTML content was injected when you scrolled to this section.</p></div>"
+             class="border rounded p-3 mb-4"
+             style="min-height: 100px;">
+        </div>
+
+        <div data-lazy="@html <div class='card'><div class='card-body'><h5 class='card-title'>Dynamic card</h5><p class='card-text'>This entire card was lazy loaded as HTML content.</p><a href='#' class='btn btn-primary btn-sm'>Example button</a></div></div>"
+             class="mb-4">
+        </div>
+      </section>
+
+      <!-- Another spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Error handling test -->
+      <section>
+        <h2 class="h3 mb-3">12. Error handling test</h2>
+        <p>These images have invalid URLs to test error handling:</p>
+
+        <div class="row g-4">
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://itwcreativeworks.com/image.jpg"
+                   class="card-img-top"
+                   alt="This should show error state">
+              <div class="card-body">
+                <p class="card-text text-danger">This image should fail to load</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="card">
+              <img data-lazy="@src https://placehold.co/400x300?text=Success+Load"
+                   class="card-img-top"
+                   alt="This should load successfully">
+              <div class="card-body">
+                <p class="card-text text-success">This image should load successfully</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Final spacer -->
+      <div class="vh-50"></div>
+
+      <!-- Very last image -->
+      <section>
+        <h2 class="h3 mb-3">13. Final Image at Bottom</h2>
+        <p>This image is at the very bottom of the page:</p>
+
+        <img data-lazy="@src https://placehold.co/800x400?text=Final+Image"
+             class="img-fluid rounded shadow"
+             alt="Final lazy loaded image">
+      </section>
+
+      <!-- Status indicator -->
+      <div class="alert alert-success text-center">
+        <h5 class="mb-0">🎉 You've reached the end!</h5>
+        <p class="mb-0">All lazy-loaded content should now be visible.</p>
+      </div>
+
+      <!-- Dynamic content test -->
+      <section>
+        <h2 class="h3 mb-3">14. Dynamic content test</h2>
+        <p>Click the button below to dynamically add new lazy-loaded images to test MutationObserver:</p>
+
+        <button id="add-dynamic-images" class="btn btn-primary mb-4">Add dynamic images</button>
+
+        <div id="dynamic-content-container" class="row g-3">
+          <!-- Dynamic images will be added here -->
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+</section>
+
+<!-- Script for dynamic content test -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  let dynamicImageCount = 0;
+
+  document.getElementById('add-dynamic-images')?.addEventListener('click', function() {
+    const container = document.getElementById('dynamic-content-container');
+
+    // Add 3 new images
+    for (let i = 0; i < 3; i++) {
+      dynamicImageCount++;
+
+      const col = document.createElement('div');
+      col.className = 'col-md-4';
+
+      // Use picsum for one of the images to test slower loading
+      const imageUrl = i === 1
+        ? `https://picsum.photos/400/300?random=${Date.now() + dynamicImageCount}`
+        : `https://placehold.co/400x300?text=Dynamic+${dynamicImageCount}`;
+
+      col.innerHTML = `
+        <div class="card">
+          <img data-lazy="@src ${imageUrl}"
+               class="card-img-top"
+               alt="Dynamically added image ${dynamicImageCount}">
+          <div class="card-body">
+            <p class="card-text">Dynamic Image #${dynamicImageCount}</p>
+            <small class="text-muted">Added at ${new Date().toLocaleTimeString()}</small>
+          </div>
+        </div>
+      `;
+
+      container.appendChild(col);
+    }
+
+    // Show alert
+    const alert = document.createElement('div');
+    alert.className = 'alert alert-info mt-3';
+    alert.innerHTML = `<strong>Added 3 new images!</strong> They should automatically be picked up by the lazy loader.`;
+    container.parentElement.insertBefore(alert, container.nextSibling);
+
+    // Remove alert after 3 seconds
+    setTimeout(() => alert.remove(), 3000);
+  });
+});
+</script>
+
+<!-- Add some CSS for loading states -->
+<!-- Error state CSS only (loading and loaded states are in core CSS) -->
+<style>
+  .lazy-error {
+    background: #ffe0e0;
+    border: 2px dashed #ff0000;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .lazy-error::after {
+    content: "⚠️ Failed to load";
+    color: #ff0000;
+    font-weight: bold;
+  }
+</style>

package/defaults/pages/test/libraries/verts.html

@@ -0,0 +1,149 @@
+---
+layout: frontend/core/base
+permalink: /test/libraries/verts
+
+meta:
+  title: "Vert unit test page"
+  description: "Test page for demonstrating verts/unit section types"
+  breadcrumb: "Vert unit test"
+  index: false
+---
+
+{% comment %}
+  The vert visual-QA page (successor to UJM's /test/libraries/ads): every
+  verts/unit format and every size preset on one scroll, each in a framed,
+  labeled slot showing the exact tag that produced it. Dev-only (noindex +
+  the /test sitemap exclusion). No fake providers: the units run the real
+  ladder for THIS site's advertising config, so an unconfigured brand shows
+  the terminal OMEGA promo and a configured one shows real fills.
+{% endcomment %}
+
+<section>
+<div class="container">
+  <div class="row">
+    <div class="col-lg-10 mx-auto">
+      <h1 class="h2 mb-3">Vert unit test page</h1>
+      <p class="lead mb-4">Every <code>verts/unit</code> format and size preset, side by side. Units behave exactly as they would on a real page.</p>
+
+      <!-- Config state: what the units on this page can actually do -->
+      <div class="card p-3 mb-5">
+        <div class="d-flex align-items-center gap-2 mb-2">
+          <i class="fa-solid fa-circle-info fa-sm"></i>
+          <strong>Advertising config</strong>
+        </div>
+        {% iftruthy resolved.config.advertising %}
+          <p class="mb-1 small">This build carries an <code>advertising</code> key, so the ladder runs: AdSense{% iftruthy resolved.config.advertising.providers.adsense.client %} (client <code>{{ resolved.config.advertising.providers.adsense.client }}</code>){% endiftruthy %}{% iffalsy resolved.config.advertising.providers.adsense.client %} (not configured){% endiffalsy %}, falling back to <code>{{ resolved.config.advertising.fallback | default: "nothing" }}</code>.</p>
+          <p class="mb-0 small text-muted">In-house source: <code>{{ resolved.config.advertising.providers.inhouse.source | default: "not configured" }}</code>. Paying users see none of these units (the standard auth binding hides them).</p>
+        {% endiftruthy %}
+        {% iffalsy resolved.config.advertising %}
+          <p class="mb-1 small">This build carries no <code>advertising</code> key, so auto placements (blog posts, the blog feed, the dashboard rail) emit nothing at all.</p>
+          <p class="mb-0 small text-muted">The hand-authored units below still mount and land on the built-in OMEGA promo: the terminal lane that keeps a unit from ever rendering empty.</p>
+        {% endiffalsy %}
+      </div>
+
+      <!-- ── Formats ────────────────────────────────────────────────────── -->
+      <h2 class="h4 mb-3">Formats</h2>
+
+      <div class="card p-3 mb-4">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "display" %&#125;</code></div>
+        <p class="mb-2"><strong>1. Display</strong>: the responsive all-purpose unit.</p>
+        {% section "verts/unit", type: "display" %}
+      </div>
+
+      <div class="card p-3 mb-4">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "in-article" %&#125;</code></div>
+        <p class="mb-2"><strong>2. In-article</strong>: the fluid unit auto-placed inside blog posts.</p>
+        {% section "verts/unit", type: "in-article" %}
+      </div>
+
+      <div class="card p-3 mb-4">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "in-feed" %&#125;</code></div>
+        <p class="mb-2"><strong>3. In-feed</strong>: the fluid unit that sits in a post listing.</p>
+        {% section "verts/unit", type: "in-feed" %}
+      </div>
+
+      <div class="card p-3 mb-4">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "multiplex" %&#125;</code></div>
+        <p class="mb-2"><strong>4. Multiplex</strong>: the grid of recommendations.</p>
+        {% section "verts/unit", type: "multiplex" %}
+      </div>
+
+      <div class="card p-3 mb-5">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "house", size: "rectangle" %&#125;</code></div>
+        <p class="mb-2"><strong>5. House</strong>: straight to the in-house or company inventory, no provider lane.</p>
+        {% section "verts/unit", type: "house", size: "rectangle" %}
+      </div>
+
+      <!-- ── Sizes ──────────────────────────────────────────────────────── -->
+      <h2 class="h4 mb-3">Size presets</h2>
+      <p class="text-muted mb-3">Each preset caps the unit's height (the client verts module owns the one px table). A raw pixel value works too.</p>
+
+      <div class="row g-3 mb-5">
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "leaderboard"</code> (90px)</div>
+            {% section "verts/unit", type: "display", size: "leaderboard" %}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "banner"</code> (150px)</div>
+            {% section "verts/unit", type: "display", size: "banner" %}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "rectangle"</code> (250px)</div>
+            {% section "verts/unit", type: "display", size: "rectangle" %}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "large-rectangle"</code> (600px)</div>
+            {% section "verts/unit", type: "display", size: "large-rectangle" %}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "skyscraper"</code> (600px)</div>
+            {% section "verts/unit", type: "display", size: "skyscraper" %}
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card p-3 h-100">
+            <div class="small text-muted mb-2"><code>size: "320"</code> (raw pixels)</div>
+            {% section "verts/unit", type: "display", size: "320" %}
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Narrow rail ────────────────────────────────────────────────── -->
+      <h2 class="h4 mb-3">Narrow rail</h2>
+      <p class="text-muted mb-3">A real sidebar rail: a 264px column (the app shell sidebar width) with the skyscraper preset. The card stacks (image on top) because the slot is narrower than the media row needs.</p>
+
+      <div class="card p-3 mb-5">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "display", size: "skyscraper" %&#125;</code> in a 264px column</div>
+        <div class="d-flex gap-3">
+          <div style="width: 264px; flex: 0 0 264px;">
+            {% section "verts/unit", type: "display", size: "skyscraper" %}
+          </div>
+          <div class="flex-grow-1">
+            <p class="mb-0"><strong>Rail context</strong>: this column stands in for page content beside the rail, so the unit renders at the width a real sidebar gives it. The host measures its own width and passes it to the document, which is what flips the card from the media row to the stacked layout.</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Big spacing so the next unit starts well below the fold -->
+      <div class="vh-50"></div>
+
+      <!-- ── Lazy arming ────────────────────────────────────────────────── -->
+      <h2 class="h4 mb-3">Lazy arming</h2>
+      <div class="card p-3">
+        <div class="small text-muted mb-2"><code>&#123;% section "verts/unit", type: "display" %&#125;</code></div>
+        <p class="mb-2">This unit arms only when it scrolls near the viewport (200px root margin), so a network panel proves the lazy lane.</p>
+        {% section "verts/unit", type: "display" %}
+      </div>
+    </div>
+  </div>
+</div>
+</section>

package/defaults/pages/test/redirect/external.md

@@ -0,0 +1,13 @@
+---
+layout: modules/utilities/redirect
+permalink: /test/redirect/external
+
+meta:
+  title: "External redirect test page"
+  description: "This is a test External Redirect page for the Ultimate Jekyll Manager."
+  breadcrumb: "External redirect test page"
+  index: false
+
+redirect:
+  url: "https://google.com"
+---

package/defaults/pages/test/redirect/internal.md

@@ -0,0 +1,13 @@
+---
+layout: modules/utilities/redirect
+permalink: /test/redirect/internal
+
+meta:
+  title: "Internal redirect test page"
+  description: "This is a test Internal Redirect page for the Ultimate Jekyll Manager."
+  breadcrumb: "Internal redirect test page"
+  index: false
+
+redirect:
+  url: "/test"
+---