jekyll-theme-zer0 0.21.2 → 0.22.0

data/_data/prompts.yml

@@ -0,0 +1,184 @@
+# _data/prompts.yml
+# Prompt templates for the Copilot Agent issue button in the intro section.
+# Each entry maps to a .github/prompts/*.prompt.md file.
+# The body is included in the GitHub issue when that prompt is selected.
+
+- id: article-review
+  label: "Article Review"
+  icon: "bi-file-text"
+  description: "Review article structure, metadata, and SEO"
+  body: |
+    Act as an Expert Content Editor and SEO Specialist.
+
+    Review this article, validate its structure/metadata, and suggest content expansions to improve depth and engagement.
+
+    **Review Checklist:**
+    - Front Matter: `title`, `description`, `categories`, `tags`, `date`, `layout` present and valid
+    - Content depth: flag sections that are too brief or superficial
+    - Clarity: identify jargon needing explanation
+    - Structure: verify logical flow with proper H2/H3 headings
+    - SEO: keyword placement in title, H1, and first paragraph
+    - Tone: professional, authoritative, yet accessible
+
+    **Deliverables:**
+    - Front Matter pass/fail report with specific fixes
+    - Bullet-point content issues
+    - Suggested expanded sections (provide actual text)
+
+- id: code-implementation
+  label: "Code Implementation"
+  icon: "bi-code-slash"
+  description: "Implement a feature with production-ready code"
+  body: |
+    Act as a Senior Software Engineer with expertise in clean code practices, design patterns, and production-ready development.
+
+    Implement the requested feature, module, or system component for this page/file.
+
+    **Requirements:**
+    - Follow existing code conventions and style
+    - Include error handling and edge cases
+    - Add inline documentation and comments
+    - Write unit tests if applicable
+    - Consider performance and security implications
+
+    **Deliverables:**
+    - Complete, working implementation
+    - Explanation of design decisions
+    - Test cases
+    - Usage examples
+
+- id: code-refactoring
+  label: "Code Refactoring"
+  icon: "bi-arrow-repeat"
+  description: "Refactor code for quality, readability, and performance"
+  body: |
+    Act as a Code Quality Expert and Refactoring Specialist.
+
+    Refactor the code in this file to improve quality, maintainability, and performance while preserving exact external behavior.
+
+    **Refactoring Goals:**
+    - Apply SOLID principles and clean code practices
+    - Eliminate duplication (DRY)
+    - Improve naming clarity
+    - Reduce complexity and nesting
+    - Optimize performance bottlenecks
+
+    **Deliverables:**
+    - Refactored code with before/after comparison
+    - Explanation of each change and its rationale
+    - Any breaking changes or migration notes
+
+- id: debugging
+  label: "Debugging"
+  icon: "bi-bug"
+  description: "Diagnose and fix issues in the code"
+  body: |
+    Act as a Senior Debugging Specialist and Software Troubleshooting Expert.
+
+    Analyze the provided code, error messages, and symptoms to identify the root cause and propose a targeted fix.
+
+    **Please provide in your response:**
+    - Root cause analysis (WHY it fails, not just WHAT)
+    - Targeted fix with code changes
+    - Verification steps to confirm the fix
+    - Preventive measures to avoid recurrence
+
+    **Steps to reproduce:** <!-- fill in below -->
+
+    **Expected behavior:** <!-- fill in below -->
+
+    **Actual behavior / error message:** <!-- fill in below -->
+
+- id: documentation
+  label: "Documentation"
+  icon: "bi-journal-text"
+  description: "Generate or improve technical documentation"
+  body: |
+    Act as a Technical Writer and Documentation Specialist.
+
+    Create or improve the documentation for the code, API, or content in this file.
+
+    **Documentation Scope:**
+    - Purpose and overview
+    - Installation / setup instructions
+    - Usage examples with code snippets
+    - API reference (parameters, return values, errors)
+    - Troubleshooting / FAQ section
+
+    **Standards:**
+    - Clear, concise language
+    - Consistent formatting (Markdown)
+    - Working code examples
+    - Proper heading hierarchy
+
+- id: requirements-analysis
+  label: "Requirements Analysis"
+  icon: "bi-list-check"
+  description: "Convert ideas into structured technical requirements"
+  body: |
+    Act as an expert Business Analyst and Technical Lead.
+
+    Analyze the content of this page and convert it into a comprehensive, structured technical requirements document.
+
+    **Output Structure:**
+    - Executive Summary
+    - Functional Requirements (user stories + acceptance criteria)
+    - Non-Functional Requirements (performance, security, scalability)
+    - Technical Constraints and Assumptions
+    - Out of Scope items
+    - Open Questions
+
+- id: system-design
+  label: "System Design"
+  icon: "bi-diagram-3"
+  description: "Design a scalable system architecture"
+  body: |
+    Act as a Senior Software Architect.
+
+    Design a comprehensive system architecture based on the requirements or content described in this page.
+
+    **Design Deliverables:**
+    - High-level architecture diagram (described in text/Mermaid)
+    - Component breakdown and responsibilities
+    - Data models and API contracts
+    - Security and authentication strategy
+    - Scalability and reliability considerations
+    - Technology stack recommendations with rationale
+
+- id: test-generation
+  label: "Test Generation"
+  icon: "bi-check2-square"
+  description: "Generate comprehensive tests for code"
+  body: |
+    Act as a QA Automation Engineer and Test Architect.
+
+    Generate a comprehensive test suite for the code or functionality described in this file.
+
+    **Test Coverage:**
+    - Unit tests for core logic
+    - Integration tests for component interactions
+    - Edge cases and error conditions
+    - Performance benchmarks (if applicable)
+
+    **Standards:**
+    - Follow existing test framework conventions
+    - Clear test descriptions
+    - Arrange-Act-Assert pattern
+    - Mocks/stubs for external dependencies
+
+- id: prompt-engineering
+  label: "Prompt Engineering"
+  icon: "bi-lightning"
+  description: "Craft an effective AI prompt for this task"
+  body: |
+    Act as an expert Prompt Engineer specializing in software development and AI-assisted workflows.
+
+    Craft a high-quality, effective prompt that will guide an AI agent to work on the content or task described in this page.
+
+    **Prompt Requirements:**
+    - Clear role definition (Act as...)
+    - Specific task instructions
+    - Input/output format specification
+    - Constraints and edge cases
+    - Example inputs and expected outputs
+    - Quality criteria for evaluation

data/_includes/components/author-eeat.html

@@ -0,0 +1,133 @@
+<!--
+  ===================================================================
+  AUTHOR E-E-A-T BLOCK - Experience, Expertise, Authority, Trust
+  ===================================================================
+
+  File: author-eeat.html
+  Path: _includes/components/author-eeat.html
+  Purpose: Displays a visible author credibility block for AIEO
+           (AI Engine Optimization) and E-E-A-T signals.
+
+  Parameters:
+  - author_key (optional): Key from _data/authors.yml (default: "bamr87")
+  - style (optional): "banner" | "card" (default: "banner")
+
+  Usage:
+    include components/author-eeat.html
+    include components/author-eeat.html author_key="bamr87" style="card"
+
+  Dependencies:
+  - _data/authors.yml: Author data
+  - Bootstrap 5 utility classes
+  ===================================================================
+-->
+
+{% assign author_key = include.author_key | default: "bamr87" %}
+{% assign author = site.data.authors[author_key] %}
+{% assign eeat_style = include.style | default: "banner" %}
+
+{% if author %}
+
+{% if eeat_style == "banner" %}
+<!-- E-E-A-T Author Banner -->
+<div class="bg-body-secondary border-top border-bottom py-4 mt-5" itemscope itemtype="https://schema.org/Person">
+  <div class="container-xl px-4 px-md-5">
+    <div class="row align-items-center g-3">
+      <div class="col-auto">
+        {% if author.avatar %}
+          <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ author.avatar }}"
+               alt="{{ author.display_name | default: author.name }}"
+               class="rounded-circle border border-2 border-primary"
+               width="64" height="64"
+               style="object-fit: cover;"
+               itemprop="image">
+        {% else %}
+          <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
+               style="width: 64px; height: 64px;">
+            <i class="bi bi-person fs-3"></i>
+          </div>
+        {% endif %}
+      </div>
+      <div class="col">
+        <p class="mb-1 fw-semibold" itemprop="name">
+          Built by <strong>{{ author.display_name | default: author.name }}</strong>
+          {% if author.role %}<span class="text-body-secondary"> — {{ author.role }}</span>{% endif %}
+        </p>
+        <p class="mb-0 text-body-secondary small" itemprop="description">
+          {{ author.bio }}
+        </p>
+        <div class="mt-2 d-flex gap-2 flex-wrap">
+          {% if author.github %}
+            <a href="https://github.com/{{ author.github }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-github me-1"></i>GitHub
+            </a>
+          {% endif %}
+          {% if author.twitter %}
+            <a href="https://twitter.com/{{ author.twitter }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-twitter me-1"></i>Twitter
+            </a>
+          {% endif %}
+          {% if author.linkedin %}
+            <a href="https://linkedin.com/in/{{ author.linkedin }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-linkedin me-1"></i>LinkedIn
+            </a>
+          {% endif %}
+          {% if author.website %}
+            <a href="{{ author.website }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="url">
+              <i class="bi bi-globe me-1"></i>Website
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% elsif eeat_style == "card" %}
+<!-- E-E-A-T Author Card -->
+<div class="card border-0 shadow-sm" itemscope itemtype="https://schema.org/Person">
+  <div class="card-body p-4">
+    <div class="d-flex align-items-start">
+      {% if author.avatar %}
+        <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ author.avatar }}"
+             alt="{{ author.display_name | default: author.name }}"
+             class="rounded-circle me-3 border border-2 border-primary"
+             width="72" height="72"
+             style="object-fit: cover;"
+             itemprop="image">
+      {% else %}
+        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
+             style="width: 72px; height: 72px;">
+          <i class="bi bi-person fs-2"></i>
+        </div>
+      {% endif %}
+      <div class="flex-grow-1">
+        <h5 class="card-title mb-1" itemprop="name">{{ author.display_name | default: author.name }}</h5>
+        {% if author.role %}
+          <p class="text-primary mb-2 small" itemprop="jobTitle">{{ author.role }}</p>
+        {% endif %}
+        <p class="card-text text-body-secondary small mb-2" itemprop="description">{{ author.bio }}</p>
+        <div class="d-flex gap-2 flex-wrap">
+          {% if author.github %}
+            <a href="https://github.com/{{ author.github }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-github"></i>
+            </a>
+          {% endif %}
+          {% if author.twitter %}
+            <a href="https://twitter.com/{{ author.twitter }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-twitter"></i>
+            </a>
+          {% endif %}
+          {% if author.linkedin %}
+            <a href="https://linkedin.com/in/{{ author.linkedin }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs">
+              <i class="bi bi-linkedin"></i>
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endif %}
+
+{% endif %}

data/_includes/components/cookie-consent.html

@@ -49,17 +49,17 @@ Usage: Include in root.html layout
 Configuration: Uses site.posthog settings from _config.yml
 {% endcomment %}
 
-<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg">
-  <div class="container-fluid">
-    <div class="row align-items-center">
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light py-3 px-3 shadow-lg">
+  <div class="container-xl px-3 px-md-4">
+    <div class="row align-items-center g-2">
       <div class="col-12 col-lg-8">
-        <h6 class="mb-2 mb-lg-0">
-          <i class="bi bi-shield-check me-2"></i>
+        <p class="h6 fw-semibold mb-2 mb-lg-0">
+          <i class="bi bi-shield-check me-2" aria-hidden="true"></i>
           We value your privacy
-        </h6>
-        <p class="mb-2 mb-lg-0 small">
-          This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content. 
-          <a href="/privacy-policy/" class="text-light text-decoration-underline">Learn more in our Privacy Policy</a>.
+        </p>
+        <p class="mb-2 mb-lg-0 small text-white-50">
+          This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content.
+          <a href="{{ '/privacy-policy/' | relative_url }}" class="text-white text-decoration-underline">Learn more in our Privacy Policy</a>.
         </p>
       </div>
       <div class="col-12 col-lg-4">

data/_includes/components/dev-shortcuts.html

@@ -8,31 +8,36 @@
   Purpose: Provide quick access to source code editing in various IDEs
   
   Dependencies:
-  - site.repository, site.branch, site.collections_dir
+  - site.repository, site.branch, site.collections_dir, site.local_git, site.repository_name
   - page.collection, page.path
+  - is_production (from env-detect.html in info-section.html) — vscode:// link only when not production
   ===================================================================
 -->
 
-{% comment %} Determine page directory for collections {% endcomment %}
+{% comment %} Determine page directory for collections (same segments as GitHub blob links) {% endcomment %}
 {% if page.collection %}
   {% capture page_dir %}{{ site.collections_dir }}{% endcapture %}
 {% else %}
   {% assign page_dir = "" %}
 {% endif %}
 
+{% assign rel_site_path = page.path %}
+{% if page_dir != "" %}
+  {% assign rel_site_path = page_dir | append: "/" | append: page.path %}
+{% endif %}
+
+{% assign git_home = site.local_git | join: "" %}
+{% assign vscode_full_path = git_home | append: "/" | append: site.repository_name | append: "/" | append: rel_site_path %}
+{% assign vscode_full_path = vscode_full_path | replace: "//", "/" | replace: "//", "/" %}
+
 <div class="dev-shortcuts">
   <div class="d-flex flex-column gap-2">
-    
-    <!-- Section Label -->
-    <small class="text-body-secondary fw-medium text-uppercase">
-      <i class="bi bi-code-slash me-1"></i>Source Code
-    </small>
-    
-    <!-- Button Group -->
+
+    <!-- Button Group (section title is the parent h6 in info-section.html) -->
     <div class="btn-group-vertical" role="group" aria-label="Source code shortcuts">
-      
+
       <!-- View on GitHub -->
-      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch }}/{{ page_dir }}/{{ page.path }}" 
+      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch }}/{{ rel_site_path }}"
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
@@ -45,9 +50,9 @@
         </span>
         <i class="bi bi-box-arrow-up-right text-body-secondary small"></i>
       </a>
-      
+
       <!-- Edit in GitHub.dev -->
-      <a href="https://github.dev/{{ site.repository }}/blob/{{ site.branch }}/{{ page_dir }}/{{ page.path }}" 
+      <a href="https://github.dev/{{ site.repository }}/blob/{{ site.branch }}/{{ rel_site_path }}"
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
@@ -60,31 +65,35 @@
         </span>
         <i class="bi bi-box-arrow-up-right text-body-secondary small"></i>
       </a>
-      
-      <!-- Open in Local VS Code -->
-      <a href="vscode://file{{ site.local_git }}/{{ site.repository_name }}/{{ page_dir }}/{{ page.path }}"
-         class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
-         data-bs-toggle="tooltip"
-         data-bs-placement="left"
-         title="Open in local VS Code (requires local clone)">
+
+      {% comment %}Local vscode:// only when not deployed production, and local_git is configured{% endcomment %}
+      {% unless is_production %}
+        {% if git_home != "" %}
+      <a href="vscode://file{{ vscode_full_path }}"
+          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
+          data-bs-toggle="tooltip"
+          data-bs-placement="left"
+          title="Open in local VS Code (requires local clone at this path)">
         <span>
           <i class="bi bi-code-square me-2"></i>
           Open in VS Code
         </span>
         <i class="bi bi-window text-body-secondary small"></i>
       </a>
-      
+        {% endif %}
+      {% endunless %}
+
     </div>
-    
+
     <!-- Config Links -->
     <small class="text-body-secondary fw-medium text-uppercase mt-2">
       <i class="bi bi-sliders me-1"></i>Configuration
     </small>
-    
+
     <div class="btn-group-vertical" role="group" aria-label="Configuration shortcuts">
-      
+
       <!-- Site Config -->
-      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch }}/_config.yml" 
+      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch }}/_config.yml"
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
@@ -97,8 +106,8 @@
         </span>
         <code class="small ms-2">_config.yml</code>
       </a>
-      
+
     </div>
-    
+
   </div>
 </div>

data/_includes/components/env-detect.html

@@ -0,0 +1,14 @@
+{% comment %}
+  Sets: build_env, is_local_url, is_production
+  Production badge only when Jekyll built as production AND site.url is not a local host.
+{% endcomment %}
+{% assign build_env = jekyll.environment | default: "development" %}
+{% assign site_url_lc = site.url | default: "" | downcase %}
+{% assign is_local_url = false %}
+{% if site_url_lc contains "localhost" or site_url_lc contains "127.0.0.1" or site_url_lc contains "0.0.0.0" %}
+  {% assign is_local_url = true %}
+{% endif %}
+{% assign is_production = false %}
+{% if build_env == "production" and is_local_url == false %}
+  {% assign is_production = true %}
+{% endif %}

data/_includes/components/env-switcher.html

@@ -8,23 +8,36 @@
   Purpose: Display current environment and provide URL switching
   
   Dependencies:
-  - jekyll.environment: Current build environment
-  - site.url: Production URL
+  - jekyll.environment: Build-time Jekyll env (production | development)
+  - site.domain_url: Canonical production origin (YAML array joined in Liquid); not overridden by jekyll serve
+  - site.url: Overwritten during jekyll serve — do not use alone for “Prod” quick links
   - site.port: Development port (default 4000)
   - Bootstrap 5 components
+  
+  Note: Docker / JEKYLL_ENV=production on localhost would show "Production"
+  while you are clearly on a dev machine. We treat localhost / 127.0.0.1 / 0.0.0.0
+  in site.url as development context for the badge and card styling.
   ===================================================================
 -->
 
-{% assign current_env = jekyll.environment | default: "development" %}
-{% assign is_production = current_env == "production" %}
-{% assign prod_url = site.url | append: site.baseurl %}
-{% assign dev_url = "http://localhost:" | append: site.port | default: 4000 | append: site.baseurl %}
+{% comment %}is_production / build_env / is_local_url: set by env-detect.html in info-section.html{% endcomment %}
+{% assign dev_port = site.port | default: 4000 %}
+{% comment %}Prod links must not use site.url during serve (Jekyll sets it to 0.0.0.0:4000 etc.){% endcomment %}
+{% if site.domain_url %}
+  {% assign canonical_prod_origin = site.domain_url | join: "" %}
+{% elsif site.production_url %}
+  {% assign canonical_prod_origin = site.production_url %}
+{% else %}
+  {% assign canonical_prod_origin = site.url %}
+{% endif %}
+{% assign prod_url = canonical_prod_origin | append: site.baseurl %}
+{% assign dev_url = "http://localhost:" | append: dev_port | append: site.baseurl %}
 
 <!-- Environment Status Card -->
-<div class="card border-{{ is_production | if: 'success', 'warning' }} mb-3">
-  <div class="card-header d-flex align-items-center justify-content-between py-2 bg-{{ is_production | if: 'success', 'warning' }} bg-opacity-10">
+<div class="card mb-3 {% if is_production %}border-success{% else %}border-warning{% endif %}">
+  <div class="card-header d-flex align-items-center justify-content-between py-2 {% if is_production %}bg-success{% else %}bg-warning{% endif %} bg-opacity-10">
     <span class="fw-semibold">
-      <i class="bi bi-{{ is_production | if: 'cloud-check', 'pc-display' }} me-2"></i>
+      <i class="bi {% if is_production %}bi-cloud-check{% else %}bi-pc-display{% endif %} me-2"></i>
       Current Environment
     </span>
     {% if is_production %}
@@ -33,7 +46,7 @@
       </span>
     {% else %}
       <span class="badge bg-warning text-dark">
-        <i class="bi bi-code-slash me-1"></i>Development
+        <i class="bi bi-code-slash me-1"></i>Dev
       </span>
     {% endif %}
   </div>
@@ -45,11 +58,11 @@
       </label>
       <div class="input-group input-group-sm">
         <span class="input-group-text">
-          <i class="bi bi-{{ is_production | if: 'lock', 'unlock' }}"></i>
+          <i class="bi {% if is_production %}bi-lock{% else %}bi-unlock{% endif %}"></i>
         </span>
         <input type="text" 
                class="form-control font-monospace" 
-               value="{{ is_production | if: prod_url, dev_url }}{{ page.url }}" 
+               value="{% if is_production %}{{ prod_url }}{% else %}{{ dev_url }}{% endif %}{{ page.url }}" 
                readonly 
                id="currentUrlInput">
         <button class="btn btn-outline-secondary" 
@@ -75,6 +88,15 @@
           <strong class="small">v{{ jekyll.version }}</strong>
         </div>
       </div>
+      <div class="col-12">
+        <div class="p-2 bg-body-tertiary rounded text-start">
+          <small class="text-body-secondary d-block">Build env (JEKYLL_ENV)</small>
+          <strong class="small font-monospace text-body">{{ build_env }}</strong>
+          {% if is_local_url and build_env == "production" %}
+            <div class="small text-body-secondary mt-1">Serving on a local URL — UI shows <strong>Dev</strong> above.</div>
+          {% endif %}
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -97,7 +119,7 @@
            class="text-decoration-none font-monospace small text-truncate"
            style="max-width: 180px;"
            title="{{ prod_url }}{{ page.url }}">
-          {{ site.url | remove: "https://" | remove: "http://" | truncate: 25 }}{{ page.url | truncate: 15 }}
+          {{ canonical_prod_origin | remove: "https://" | remove: "http://" | truncate: 25 }}{{ page.url | truncate: 15 }}
         </a>
       </div>
       <div class="btn-group btn-group-sm">
@@ -127,7 +149,7 @@
            class="text-decoration-none font-monospace small text-truncate"
            style="max-width: 180px;"
            title="{{ dev_url }}{{ page.url }}">
-          localhost:{{ site.port | default: 4000 }}{{ page.url | truncate: 15 }}
+          localhost:{{ dev_port }}{{ page.url | truncate: 15 }}
         </a>
       </div>
       <div class="btn-group btn-group-sm">
@@ -169,12 +191,12 @@
 </div>
 
 <!-- Environment Tip -->
-<div class="alert alert-{{ is_production | if: 'success', 'warning' }} alert-dismissible fade show mt-3 py-2 small" role="alert">
+<div class="alert {% if is_production %}alert-success{% else %}alert-warning{% endif %} alert-dismissible fade show mt-3 py-2 small" role="alert">
   <i class="bi bi-info-circle me-1"></i>
   {% if is_production %}
     Viewing <strong>production</strong> build. Changes require deployment.
   {% else %}
-    <strong>Development</strong> mode. Changes auto-reload on save.
+    <strong>Dev</strong> context{% if is_local_url and build_env == "production" %} (local URL; JEKYLL_ENV is production){% endif %}. Changes auto-reload when using <code>jekyll serve</code>.
   {% endif %}
   <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert" aria-label="Close" style="padding: 0.5rem;"></button>
 </div>