404.html.haml

---
layout: default
title: Not Found
notitle: true
hideSearchBar: true
---

:css
  .errorcontainer {
    text-align: center;
  }

  .errorcontainer img {
    max-width: 12%;
    height: auto;
  }

  .searchcontainer {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:10px;
  }

  .searchcontainer .DocSearch-Button{
    width: 25%;
    margin-bottom: 30px;
  }

%div.errorcontainer
  %img{:src => '/images/fire-jenkins.svg'}

  %h3
    The page you requested could not be found.

  %p
  %a{:href => "/"} Back to homepage

%div.searchcontainer
  %h3
    Search for related pages

:javascript
  // fetch last segment from URL
  const path = window.location.pathname;
  const pathSegments = path.split('/').filter(Boolean);
  const lastSegmentIndex = pathSegments.length - 1;
  const lastSegment = pathSegments[lastSegmentIndex];

  const div = document.createElement('div');
  div.classList.add('searchcontainer');

  const scriptFileEl = document.createElement('script');
  scriptFileEl.setAttribute('defer', '');
  scriptFileEl.setAttribute('src', `https://cdn.jsdelivr.net/npm/@docsearch/js@3`);
  document.head.appendChild(scriptFileEl);

  scriptFileEl.addEventListener('load', () => {
    // enable docsearch
    window.docsearch({
      // point it at the renderroot
      container: div,
      indexName: 'jenkins',
      appId: "M6L7Q4Z8HS",
      apiKey: "52f8dfbff76ffd9106f1c68fee16154b",
      searchParameters: {
      },
      initialQuery: lastSegment,
    });
  });

  document.body.append(div);