jekyll-theme-zer0 0.22.5 → 0.22.20

data/_includes/components/env-dashboard.html

@@ -0,0 +1,154 @@
+<!--
+  ===================================================================
+  ENV DASHBOARD — Full environment and build information
+  ===================================================================
+
+  File: env-dashboard.html
+  Path: _includes/components/env-dashboard.html
+  Purpose: Consolidates environment, build, theme, and plugin info
+           into a full admin page. Extends the data shown in the
+           gear modal's Environment tab.
+
+  Dependencies: Bootstrap 5 card/table, Jekyll variables
+  Used by: pages/_about/settings/environment.md
+  ===================================================================
+-->
+
+<!-- Environment Overview Cards -->
+<div class="row g-3 mb-4">
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-diamond fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">Jekyll {{ jekyll.version | default: "?" }}</div>
+        <small class="text-body-secondary">Jekyll Version</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-gem fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">{{ site.ruby_version | default: "?" }}</div>
+        <small class="text-body-secondary">Ruby Version</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 {% if jekyll.environment == 'production' %}border-success{% else %}border-warning{% endif %}">
+      <div class="card-body py-3">
+        <i class="bi bi-lightning-charge fs-3 {% if jekyll.environment == 'production' %}text-success{% else %}text-warning{% endif %}"></i>
+        <div class="fw-semibold mt-1 text-capitalize">{{ jekyll.environment }}</div>
+        <small class="text-body-secondary">Environment</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-clock-history fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">{{ site.time | date: "%b %d, %Y" }}</div>
+        <small class="text-body-secondary">Build Time</small>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row g-4">
+
+  <!-- Site Configuration -->
+  <div class="col-lg-6">
+    <div class="card h-100">
+      <div class="card-header"><i class="bi bi-globe me-1"></i> Site Configuration</div>
+      <div class="card-body p-0">
+        <table class="table table-sm mb-0">
+          <tbody>
+            <tr><td class="fw-semibold">Title</td><td>{{ site.title | escape }}</td></tr>
+            <tr><td class="fw-semibold">URL</td><td><code class="small">{{ site.url }}</code></td></tr>
+            <tr><td class="fw-semibold">Base URL</td><td><code class="small">{{ site.baseurl | default: "/" }}</code></td></tr>
+            <tr><td class="fw-semibold">Description</td><td class="small">{{ site.description | truncate: 80 | escape }}</td></tr>
+            <tr><td class="fw-semibold">Locale</td><td>{{ site.locale | default: "en_US" }}</td></tr>
+            <tr><td class="fw-semibold">Markdown</td><td><code class="small">{{ site.markdown | default: "kramdown" }}</code></td></tr>
+            <tr><td class="fw-semibold">Theme Skin</td><td>{{ site.theme_skin | default: "dark" }}</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Theme & Repository Info -->
+  <div class="col-lg-6">
+    <div class="card h-100">
+      <div class="card-header"><i class="bi bi-palette me-1"></i> Theme & Repository</div>
+      <div class="card-body p-0">
+        <table class="table table-sm mb-0">
+          <tbody>
+            <tr>
+              <td class="fw-semibold">Theme</td>
+              <td>{{ site.theme | default: "remote" }} {% if site.remote_theme %}<span class="badge bg-info">remote</span>{% endif %}</td>
+            </tr>
+            {% if site.remote_theme %}
+              <tr><td class="fw-semibold">Remote Theme</td><td><code class="small">{{ site.remote_theme }}</code></td></tr>
+            {% endif %}
+            <tr><td class="fw-semibold">GitHub User</td><td>{{ site.github_user | escape }}</td></tr>
+            <tr><td class="fw-semibold">Repository</td><td><code class="small">{{ site.repository_name }}</code></td></tr>
+            <tr><td class="fw-semibold">Local Repo</td><td><code class="small">{{ site.local_repo | default: "n/a" }}</code></td></tr>
+            <tr>
+              <td class="fw-semibold">Collections Dir</td>
+              <td><code class="small">{{ site.collections_dir | default: "." }}</code></td>
+            </tr>
+            <tr><td class="fw-semibold">Build Time</td><td><code class="small">{{ site.time | date: "%Y-%m-%d %H:%M:%S %Z" }}</code></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Plugins List -->
+<h5 class="mt-4 mb-3"><i class="bi bi-plug me-1"></i> Active Plugins</h5>
+{% if site.plugins %}
+  <div class="row g-2">
+    {% for plugin in site.plugins %}
+      <div class="col-6 col-md-4 col-lg-3">
+        <div class="card">
+          <div class="card-body py-2 px-3">
+            <i class="bi bi-puzzle me-1 text-primary"></i>
+            <span class="small fw-semibold">{{ plugin }}</span>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  <p class="text-body-secondary">No plugins configured.</p>
+{% endif %}
+
+<!-- URL Comparison (Dev vs Production) -->
+<h5 class="mt-4 mb-3"><i class="bi bi-link-45deg me-1"></i> URL Configuration</h5>
+<div class="table-responsive">
+  <table class="table table-sm">
+    <thead class="table-dark">
+      <tr>
+        <th>Setting</th>
+        <th>Current Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td class="fw-semibold">site.url</td><td><code>{{ site.url }}</code></td></tr>
+      <tr><td class="fw-semibold">site.baseurl</td><td><code>{{ site.baseurl | default: '""' }}</code></td></tr>
+      <tr><td class="fw-semibold">jekyll.environment</td><td><code>{{ jekyll.environment }}</code></td></tr>
+      <tr><td class="fw-semibold">Full base path</td><td><code>{{ site.url }}{{ site.baseurl }}</code></td></tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- Quick links back to admin -->
+<div class="mt-4">
+  <a href="{{ '/about/config/' | relative_url }}" class="btn btn-outline-secondary btn-sm me-2">
+    <i class="bi bi-gear me-1"></i> Full Configuration
+  </a>
+  <a href="{{ '/about/settings/analytics/' | relative_url }}" class="btn btn-outline-secondary btn-sm">
+    <i class="bi bi-graph-up me-1"></i> Analytics Dashboard
+  </a>
+</div>

data/_includes/components/feature-card.html

@@ -0,0 +1,94 @@
+<!--
+  ===================================================================
+  FEATURE CARD - Data-driven feature display from features.yml
+  ===================================================================
+
+  File: feature-card.html
+  Path: _includes/components/feature-card.html
+  Purpose: Reusable card component that renders a single feature from
+           the _data/features.yml registry. Used by the features page,
+           news index, documentation, and any page that needs to
+           display feature information consistently.
+
+  Parameters:
+  - feature  (hash)   : A single feature object from site.data.features.features (required)
+  - style    (string) : Card border color class — "primary", "success", "info", etc. (optional, default: none)
+  - icon     (string) : Bootstrap Icon class, e.g. "bi-rocket-takeoff" (optional, default: "bi-check-circle-fill")
+  - icon_color (string): Icon text-color class, e.g. "text-success" (optional, default: "text-success")
+  - show_refs (bool)  : Show file references list (optional, default: false)
+  - compact  (bool)   : Compact mode — hides sub-features list (optional, default: false)
+  - features_limit (int) : Max sub-features shown in the list (optional, default: 5)
+
+  Usage:
+    {% assign f = site.data.features.features | where: "id", "ZER0-001" | first %}
+    {% include components/feature-card.html feature=f style="primary" icon="bi-bootstrap" icon_color="text-primary" %}
+  ===================================================================
+-->
+{% assign f = include.feature %}
+{% assign border = include.style %}
+{% assign icon = include.icon | default: "bi-check-circle-fill" %}
+{% assign icon_color = include.icon_color | default: "text-success" %}
+{% assign show_refs = include.show_refs | default: false %}
+{% assign compact = include.compact | default: false %}
+{% assign features_limit = include.features_limit | default: 5 %}
+<div class="card h-100 {% unless border == blank %}border-{{ border }}{% endunless %}">
+  <div class="card-body">
+    <h5 class="card-title">
+      <i class="bi {{ icon }} {{ icon_color }} me-2"></i>
+      {{ f.title }}
+    </h5>
+    <p class="card-text">{{ f.description }}</p>
+
+    {% unless compact %}
+      {% if f.features %}
+      <div class="mt-3">
+        <h6 class="text-muted small">Key Features:</h6>
+        <ul class="small mb-0">
+          {% for item in f.features limit:features_limit %}
+          <li>{{ item }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endif %}
+    {% endunless %}
+
+    {% if show_refs and f.references %}
+    <div class="mt-3">
+      <h6 class="text-muted small">References:</h6>
+      <ul class="small mb-0">
+        {% for ref in f.references %}
+          {% assign key = ref[0] %}
+          {% assign value = ref[1] %}
+          {% if value.first %}
+            {% for file in value %}
+            <li><code>{{ file }}</code></li>
+            {% endfor %}
+          {% else %}
+            <li><code>{{ value }}</code></li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </div>
+    {% endif %}
+
+    <div class="mt-3">
+      <span class="badge bg-primary">{{ f.id }}</span>
+      <span class="badge bg-secondary">v{{ f.version }}</span>
+      {% for tag in f.tags limit:3 %}
+      <span class="badge bg-light text-dark">{{ tag }}</span>
+      {% endfor %}
+    </div>
+  </div>
+  {% if f.docs %}
+  <div class="card-footer">
+    <a href="{{ f.docs }}" class="btn btn-sm btn-outline-{% unless border == blank %}{{ border }}{% else %}primary{% endunless %}">
+      <i class="bi bi-book me-1"></i>Documentation
+    </a>
+    {% if f.link and f.link != "/" %}
+    <a href="{{ f.link }}" class="btn btn-sm btn-outline-secondary ms-1">
+      <i class="bi bi-box-arrow-up-right me-1"></i>Demo
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>

data/_includes/components/info-section.html

@@ -1,14 +1,14 @@
 <!--
   ===================================================================
-  INFO SECTION - Settings Modal with Tabbed Interface
+  INFO SECTION - Settings Offcanvas with Tabbed Interface
   ===================================================================
   
   File: info-section.html
   Path: _includes/components/info-section.html
-  Purpose: Unified settings modal with tabs for Settings, Environment, Developer
+  Purpose: Unified settings offcanvas panel with tabs for Settings, Environment, Developer
   
   Dependencies:
-  - Bootstrap 5 Modal, Tabs
+  - Bootstrap 5 Offcanvas, Tabs
   - _includes/components/env-switcher.html
   - _includes/components/theme-info.html
   - _includes/components/dev-shortcuts.html
@@ -16,167 +16,190 @@
   - _includes/navigation/breadcrumbs.html
   
   References:
-  - https://getbootstrap.com/docs/5.3/components/modal/
+  - https://getbootstrap.com/docs/5.3/components/offcanvas/
   - https://getbootstrap.com/docs/5.3/components/navs-tabs/
   ===================================================================
 -->
 
 {% include components/env-detect.html %}
-<!-- Settings Modal -->
-<div class="modal fade" id="info-section" tabindex="-1" aria-labelledby="infoSectionLabel" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
-    <div class="modal-content">
+<!-- Settings Offcanvas -->
+<div class="offcanvas offcanvas-end" tabindex="-1" id="info-section" aria-labelledby="infoSectionLabel">
+  
+  <!-- Offcanvas Header -->
+  <div class="offcanvas-header border-bottom pb-0 d-block">
+    <div class="d-flex align-items-center justify-content-between mb-2">
+      <h5 class="offcanvas-title" id="infoSectionLabel">
+        <i class="bi bi-gear-wide-connected me-2"></i>Settings
+      </h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    
+    <!-- Tab Navigation -->
+    <ul class="nav nav-tabs" id="infoTabs" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-pane" type="button" role="tab" aria-controls="settings-pane" aria-selected="true">
+          <i class="bi bi-sliders me-1"></i>
+          <span class="d-none d-sm-inline">Settings</span>
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="environment-tab" data-bs-toggle="tab" data-bs-target="#environment-pane" type="button" role="tab" aria-controls="environment-pane" aria-selected="false">
+          <i class="bi bi-hdd-network me-1"></i>
+          <span class="d-none d-sm-inline">Environment</span>
+          {% if is_production %}
+            <span class="badge bg-success ms-1 d-none d-md-inline-block">Prod</span>
+          {% else %}
+            <span class="badge bg-warning text-dark ms-1 d-none d-md-inline-block">Dev</span>
+          {% endif %}
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer-pane" type="button" role="tab" aria-controls="developer-pane" aria-selected="false">
+          <i class="bi bi-code-slash me-1"></i>
+          <span class="d-none d-sm-inline">Developer</span>
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="background-tab" data-bs-toggle="tab" data-bs-target="#background-pane" type="button" role="tab" aria-controls="background-pane" aria-selected="false">
+          <i class="bi bi-palette2 me-1"></i>
+          <span class="d-none d-sm-inline">Background</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+  
+  <!-- Offcanvas Body with Tab Content -->
+  <div class="offcanvas-body">
+    <div class="tab-content" id="infoTabContent">
       
-      <!-- Modal Header -->
-      <div class="modal-header border-bottom-0 pb-0">
-        <div class="w-100">
-          <div class="d-flex align-items-center justify-content-between mb-2">
-            <h5 class="modal-title" id="infoSectionLabel">
-              <i class="bi bi-gear-wide-connected me-2"></i>Settings
-            </h5>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          
-          <!-- Tab Navigation -->
-          <ul class="nav nav-tabs" id="infoTabs" role="tablist">
-            <li class="nav-item" role="presentation">
-              <button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-pane" type="button" role="tab" aria-controls="settings-pane" aria-selected="true">
-                <i class="bi bi-sliders me-1"></i>
-                <span class="d-none d-sm-inline">Settings</span>
-              </button>
-            </li>
-            <li class="nav-item" role="presentation">
-              <button class="nav-link" id="environment-tab" data-bs-toggle="tab" data-bs-target="#environment-pane" type="button" role="tab" aria-controls="environment-pane" aria-selected="false">
-                <i class="bi bi-hdd-network me-1"></i>
-                <span class="d-none d-sm-inline">Environment</span>
-                {% if is_production %}
-                  <span class="badge bg-success ms-1 d-none d-md-inline-block">Prod</span>
-                {% else %}
-                  <span class="badge bg-warning text-dark ms-1 d-none d-md-inline-block">Dev</span>
-                {% endif %}
-              </button>
-            </li>
-            <li class="nav-item" role="presentation">
-              <button class="nav-link" id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer-pane" type="button" role="tab" aria-controls="developer-pane" aria-selected="false">
-                <i class="bi bi-code-slash me-1"></i>
-                <span class="d-none d-sm-inline">Developer</span>
-              </button>
-            </li>
-          </ul>
+      <!-- Settings Tab -->
+      <div class="tab-pane fade show active" id="settings-pane" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
+        
+        <!-- Search -->
+        <div class="mb-4">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-search me-1"></i>Search
+          </h6>
+          {% include components/searchbar.html %}
         </div>
-      </div>
-      
-      <!-- Modal Body with Tab Content -->
-      <div class="modal-body">
-        <div class="tab-content" id="infoTabContent">
-          
-          <!-- Settings Tab -->
-          <div class="tab-pane fade show active" id="settings-pane" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
-            
-            <!-- Search -->
-            <div class="mb-4">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-search me-1"></i>Search
-              </h6>
-              {% include components/searchbar.html %}
-            </div>
-            
-            <!-- Theme Toggle -->
-            <div class="mb-4">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-moon-stars me-1"></i>Appearance
-              </h6>
-              <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
-                <span>Theme Mode</span>
-                {% include components/halfmoon.html %}
-              </div>
-            </div>
-            
-            <!-- Theme Info (Collapsible) -->
-            <div class="mb-3">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-info-circle me-1"></i>About
-              </h6>
-              <button class="btn btn-outline-secondary btn-sm w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#themeInfoCollapse" aria-expanded="false" aria-controls="themeInfoCollapse">
-                <span>Theme & Build Info</span>
-                <i class="bi bi-chevron-down"></i>
-              </button>
-              <div class="collapse mt-2" id="themeInfoCollapse">
-                {% include components/theme-info.html %}
-              </div>
-            </div>
+        
+        <!-- Theme Toggle -->
+        <div class="mb-4">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-moon-stars me-1"></i>Appearance
+          </h6>
+          <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
+            <span>Theme Mode</span>
+            {% include components/halfmoon.html %}
           </div>
-          
-          <!-- Environment Tab -->
-          <div class="tab-pane fade" id="environment-pane" role="tabpanel" aria-labelledby="environment-tab" tabindex="0">
-            {% include components/env-switcher.html %}
+        </div>
+        
+        <!-- Theme Info (Collapsible) -->
+        <div class="mb-3">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-info-circle me-1"></i>About
+          </h6>
+          <button class="btn btn-outline-secondary btn-sm w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#themeInfoCollapse" aria-expanded="false" aria-controls="themeInfoCollapse">
+            <span>Theme & Build Info</span>
+            <i class="bi bi-chevron-down"></i>
+          </button>
+          <div class="collapse mt-2" id="themeInfoCollapse">
+            {% include components/theme-info.html %}
           </div>
-          
-          <!-- Developer Tab -->
-          <div class="tab-pane fade" id="developer-pane" role="tabpanel" aria-labelledby="developer-tab" tabindex="0">
-            
-            <!-- Page Location -->
-            <div class="mb-4">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-signpost-split me-1"></i>Page Location
-              </h6>
-              {% include navigation/breadcrumbs.html %}
-            </div>
-            
-            <!-- Source Code Shortcuts -->
-            <div class="mb-4">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-code-square me-1"></i>Source Code
-              </h6>
-              {% include components/dev-shortcuts.html %}
-            </div>
-            
-            <!-- Page Metadata -->
-            <div class="mb-3">
-              <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-                <i class="bi bi-file-earmark-code me-1"></i>Page Info
-              </h6>
-              <div class="table-responsive">
-                <table class="table table-sm table-hover mb-0 small">
-                  <tbody>
-                    <tr>
-                      <td class="text-body-secondary" style="width: 30%;">Layout</td>
-                      <td><code>{{ page.layout | default: "none" }}</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-body-secondary">Collection</td>
-                      <td><code>{{ page.collection | default: "none" }}</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-body-secondary">Path</td>
-                      <td><code class="text-break">{{ page.path }}</code></td>
-                    </tr>
-                    <tr>
-                      <td class="text-body-secondary">URL</td>
-                      <td><code class="text-break">{{ page.url }}</code></td>
-                    </tr>
-                    {% if page.date %}
-                    <tr>
-                      <td class="text-body-secondary">Date</td>
-                      <td><code>{{ page.date | date: "%Y-%m-%d" }}</code></td>
-                    </tr>
-                    {% endif %}
-                  </tbody>
-                </table>
-              </div>
-            </div>
+        </div>
+
+        <!-- Admin Quick Links -->
+        <div class="mb-3">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-speedometer2 me-1"></i>Admin Dashboard
+          </h6>
+          <div class="list-group list-group-flush small">
+            <a href="{{ '/about/config/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+              <i class="bi bi-gear me-2 text-body-secondary"></i>Configuration
+            </a>
+            <a href="{{ '/about/settings/theme/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+              <i class="bi bi-palette me-2 text-body-secondary"></i>Theme Customizer
+            </a>
+            <a href="{{ '/about/settings/navigation/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+              <i class="bi bi-signpost-2 me-2 text-body-secondary"></i>Navigation Editor
+            </a>
           </div>
-          
         </div>
       </div>
       
-      <!-- Modal Footer -->
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-          <i class="bi bi-x-lg me-1"></i>Close
-        </button>
+      <!-- Environment Tab -->
+      <div class="tab-pane fade" id="environment-pane" role="tabpanel" aria-labelledby="environment-tab" tabindex="0">
+        {% include components/env-switcher.html %}
+
+        <!-- Admin Link -->
+        <div class="mt-4 pt-3 border-top">
+          <a href="{{ '/about/settings/environment/' | relative_url }}" class="btn btn-outline-secondary btn-sm w-100">
+            <i class="bi bi-box-arrow-up-right me-1"></i>Full Environment &amp; Build Info
+          </a>
+        </div>
+      </div>
+      
+      <!-- Developer Tab -->
+      <div class="tab-pane fade" id="developer-pane" role="tabpanel" aria-labelledby="developer-tab" tabindex="0">
+        
+        <!-- Page Location -->
+        <div class="mb-4">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-signpost-split me-1"></i>Page Location
+          </h6>
+          {% include navigation/breadcrumbs.html %}
+        </div>
+        
+        <!-- Source Code Shortcuts -->
+        <div class="mb-4">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-code-square me-1"></i>Source Code
+          </h6>
+          {% include components/dev-shortcuts.html %}
+        </div>
+        
+        <!-- Page Metadata -->
+        <div class="mb-3">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-file-earmark-code me-1"></i>Page Info
+          </h6>
+          <div class="table-responsive">
+            <table class="table table-sm table-hover mb-0 small">
+              <tbody>
+                <tr>
+                  <td class="text-body-secondary" style="width: 30%;">Layout</td>
+                  <td><code>{{ page.layout | default: "none" }}</code></td>
+                </tr>
+                <tr>
+                  <td class="text-body-secondary">Collection</td>
+                  <td><code>{{ page.collection | default: "none" }}</code></td>
+                </tr>
+                <tr>
+                  <td class="text-body-secondary">Path</td>
+                  <td><code class="text-break">{{ page.path }}</code></td>
+                </tr>
+                <tr>
+                  <td class="text-body-secondary">URL</td>
+                  <td><code class="text-break">{{ page.url }}</code></td>
+                </tr>
+                {% if page.date %}
+                <tr>
+                  <td class="text-body-secondary">Date</td>
+                  <td><code>{{ page.date | date: "%Y-%m-%d" }}</code></td>
+                </tr>
+                {% endif %}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
       
+      <!-- Background Tab -->
+      <div class="tab-pane fade" id="background-pane" role="tabpanel" aria-labelledby="background-tab" tabindex="0">
+        {% include components/background-settings.html %}
+      </div>
+
     </div>
   </div>
+  
 </div>

data/_includes/components/js-cdn.html

@@ -28,4 +28,7 @@
 <script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}"></script>
 
 <!-- Search modal controller -->
-<script src="{{ '/assets/js/search-modal.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/search-modal.js' | relative_url }}"></script>
+
+<!-- fffuel-style background customizer (skin switching, toggle, opacity) -->
+<script src="{{ '/assets/js/background-customizer.js' | relative_url }}"></script>