<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{{description}}">
  <meta name="author" content="{{author}}">
  <meta name="version" content="{{version}}">
  <meta name="date" content="{{date}}">
  
  <!-- Open Graph / Social Media Meta Tags -->
  <meta property="og:title" content="{{title}}">
  <meta property="og:description" content="{{description}}">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://udx.dev/docs/architecture/deploying-with-impunity/">
  <meta property="og:site_name" content="UDX.dev">
  
  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "TechArticle",
    "headline": "{{title}}",
    "description": "{{description}}",
    "author": {
      "@type": "Organization",
      "name": "{{author}}"
    },
    "datePublished": "{{date}}",
    "dateModified": "{{date}}",
    "publisher": {
      "@type": "Organization",
      "name": "UDX.dev",
      "logo": {
        "@type": "ImageObject",
        "url": "https://udx.dev/static/images/logo.png"
      }
    }
  }
  </script>
  
  <title>{{title}}</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          typography: {
            DEFAULT: {
              css: {
                maxWidth: '65ch',
                /* Optimized for reading */
                color: '#333',
                fontSize: '18px',
                lineHeight: '1.6',
                p: {
                  marginTop: '0',
                  marginBottom: '0',
                  fontSize: '18px',
                  lineHeight: '1.6',
                },
                /* Removed problematic adjacent selector rule */
                h1: {
                  fontSize: '64px',
                  marginTop: '3rem',
                  marginBottom: '2rem',
                  fontWeight: '700',
                  lineHeight: '1.2',
                },
                h2: {
                  fontSize: '48px',
                  marginTop: '2.5rem',
                  marginBottom: '1.5rem',
                  fontWeight: '600',
                  lineHeight: '1.3',
                },
                h3: {
                  fontSize: '36px',
                  marginTop: '2.2rem',
                  marginBottom: '1.2rem',
                  fontWeight: '600',
                  lineHeight: '1.4',
                },
                h4: {
                  fontSize: '28px',
                  marginTop: '2rem',
                  marginBottom: '1rem',
                  fontWeight: '600',
                  lineHeight: '1.4',
                },
                h5: {
                  fontSize: '22px',
                  marginTop: '2rem',
                  marginBottom: '1rem',
                  fontWeight: '600',
                  lineHeight: '1.4',
                },
                'h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p': {
                  marginTop: '1em',
                },
                ul: {
                  marginTop: '1.2em',
                  marginBottom: '2.2em',
                  paddingLeft: '2rem',
                },
                'ul > li': {
                  marginBottom: '0.5em',
                  position: 'relative',
                  paddingLeft: '0.25em',
                },
                ol: {
                  marginTop: '1.2em',
                  marginBottom: '2.2em',
                  paddingLeft: '2rem',
                },
                'ol > li': {
                  marginBottom: '0.5em',
                  paddingLeft: '0.25em',
                },
                'ul ul, ol ol, ul ol, ol ul': {
                  marginTop: '0.2em',
                  marginBottom: '0.2em',
                },
                'ol > li > ul, ol > li > ol': {
                  marginTop: '0.2em',
                  marginBottom: '0.5em',
                },
                'ul + p, ol + p, ul + pre, ol + pre': {
                  marginTop: '2em',
                },
                img: {
                  marginTop: '2em',
                  marginBottom: '0.5em',
                  borderRadius: '0.25em',
                },
                figure: {
                  marginTop: '2em',
                  marginBottom: '2em',
                },
                table: {
                  width: '100%',
                  tableLayout: 'fixed',
                  marginTop: '2em',
                  marginBottom: '2em',
                },
                'thead th': {
                  backgroundColor: 'rgba(0, 0, 0, 0.05)',
                  fontWeight: '600',
                  padding: '0.75em 1em',
                },
                'tbody td': {
                  padding: '0.75em 1em',
                  verticalAlign: 'top',
                  borderColor: 'rgba(0, 0, 0, 0.1)',
                },
                pre: {
                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
                  color: '#f8f8f2',
                  marginTop: '2em',
                  marginBottom: '2em',
                  padding: '1.5em',
                  borderRadius: '0.5em',
                  overflow: 'auto',
                },
                code: {
                  fontFamily: 'Monaco, Consolas, "Courier New", monospace',
                  fontSize: '16px',
                  backgroundColor: 'rgba(0, 0, 0, 0.05)',
                  padding: '0.2em 0.4em',
                  borderRadius: '0.25em',
                  color: '#333',
                  fontWeight: '500',
                },
                'pre code': {
                  backgroundColor: 'transparent',
                  color: '#f8f8f2',
                  padding: '0',
                  fontSize: '16px',
                },
                a: {
                  color: '#2563eb',
                  textDecoration: 'none',
                  fontWeight: '500',
                  '&:hover': {
                    textDecoration: 'underline',
                  },
                },
                strong: {
                  fontWeight: '600',
                  color: '#111',
                },
                blockquote: {
                  fontStyle: 'italic',
                  borderLeftWidth: '0.25rem',
                  borderLeftColor: '#e5e7eb',
                  paddingLeft: '1rem',
                  color: '#4b5563',
                },
                hr: {
                  marginTop: '3em',
                  marginBottom: '3em',
                },
              }
            }
          }
        }
      }
    }
  </script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
  <!-- External dependencies are commented out to reduce load time and avoid unnecessary dependencies -->
  <!-- <link rel="stylesheet" href="https://udx.dev/site/static/shared/css/science.usability.v1.css"> -->
  <!-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> -->
  <!-- <script src="https://udx.dev/site/static/shared/js/science.usability.v1.js"></script> -->
  
  <style>
    {{{styles}}}
  </style>
</head>
<body class="bg-primary-100">
  
  <div class="min-h-screen bg-primary-100">
    <div class="chapter-nav-container">
      <nav id="chapter-navigation" class="chapter-navigation" aria-label="Chapter navigation">
        <ul class="chapter-nav-list" role="list">
          {{#each chapters}}
            {{#if (eq this.level 2)}}
              <li class="chapter-nav-item" data-chapter-id="{{this.id}}" role="listitem">
                <a href="#{{this.id}}" class="chapter-nav-link">{{this.title}}</a>
              </li>
            {{/if}}
          {{/each}}
        </ul>
      </nav>
      <!-- Mobile dropdown navigation -->
      <nav class="mobile-chapter-nav" aria-label="Chapter navigation on mobile">
        <div class="mobile-chapter-dropdown">
          <button id="chapter-dropdown-btn" class="chapter-dropdown-btn" aria-expanded="false" aria-controls="chapter-dropdown-menu" aria-haspopup="true">
            <span class="current-chapter" aria-live="polite">Current Section</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="dropdown-icon" viewBox="0 0 16 16" aria-hidden="true">
              <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
            </svg>
          </button>
          <div id="chapter-dropdown-menu" class="chapter-dropdown-menu" role="menu">
            <ul>
              {{#each chapters}}
                {{#if (eq this.level 2)}}
                  <li data-chapter-id="{{this.id}}" role="menuitem">
                    <a href="#{{this.id}}">{{this.title}}</a>
                  </li>
                {{/if}}
              {{/each}}
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 chapter-content">
      <article class="prose prose-lg lg:prose-xl mx-auto max-w-4xl" data-document-version="{{version}}" data-document-id="{{slugify title}}">
        <main class="article">
          {{{content}}}
        </main>
      </article>
    </main>
  </div>
  
  <script>
    {{{scripts}}}
  </script>
  
  <!-- Analytics and tracking - DO NOT REMOVE -->
  <script>
    window.onload = () => setTimeout(() => {
      // Create data-version attribute on article for tracking
      const articleEl = document.querySelector('article');
      const docVersion = '{{version}}' || 'v1';
      if (articleEl && !articleEl.hasAttribute('data-version')) {
        articleEl.setAttribute('data-version', docVersion);
      }
      console.debug(`Document Version: ${docVersion}`);
      
      // Track page view with dataLayer
      if (window.dataLayer) {
        dataLayer.push({
          'event': 'page_view',
          'page_title': document.title,
          'page_location': window.location.href,
          'page_path': window.location.pathname,
          'document_version': docVersion
        });
      }
      
      // Initialize Mermaid diagrams
      if (window.mermaid) {
        mermaid.initialize({
          startOnLoad: true,
          theme: 'default',
          securityLevel: 'loose',
          fontFamily: 'inherit'
        });
        
        // Convert mermaid code blocks to diagrams
        document.querySelectorAll('pre[data-file-type="mermaid"]').forEach((pre) => {
          const code = pre.querySelector('code');
          if (code) {
            const mermaidDiv = document.createElement('div');
            mermaidDiv.className = 'mermaid';
            mermaidDiv.setAttribute('aria-hidden', 'true');
            mermaidDiv.setAttribute('role', 'presentation');
            mermaidDiv.textContent = code.textContent;
            pre.parentNode.replaceChild(mermaidDiv, pre);
          }
        });
        
        // Re-render after conversion
        mermaid.init();
      }
      
      // Initialize the annotation system if available
      if (window.ScienceUsability && typeof ScienceUsability.init === 'function') {
        console.log('Initializing ScienceUsability annotation system...');
        ScienceUsability.init({
          dataEndpoint: '/static/api/web/',
          defaultArticle: '{{slugify title}}',
          smoothScroll: true,
          revealAnimations: true
        });
      } else {
        console.debug('ScienceUsability annotation system not available.');
      }
      
      // Track downloads and outbound links
      document.querySelectorAll('a').forEach(link => {
        if (!link.hasAttribute('data-tracked')) {
          link.setAttribute('data-tracked', 'true');
          link.addEventListener('click', (e) => {
            const href = link.getAttribute('href');
            const isDownload = link.hasAttribute('download') || href.match(/\.(pdf|docx?|xlsx?|zip|rar|gz|tar)$/i);
            const isExternal = href && href.startsWith('http') && !href.includes('udx.dev');
            
            if ((isDownload || isExternal) && window.dataLayer) {
              dataLayer.push({
                'event': isDownload ? 'file_download' : 'outbound_link',
                'event_category': isDownload ? 'Downloads' : 'Outbound Links',
                'event_label': href,
                'value': 1
              });
              console.debug(`Tracked ${isDownload ? 'download' : 'outbound link'}: ${href}`);
            }
          });
        }
      });
    }, 100);
  </script>
</body>
</html>
