bsod.mts

import { Plugin } from "vite";

export default function bsodPlugin(): Plugin {
  return {
    name: 'vite-plugin-blue-screen-of-death',
    apply: 'serve',
    transformIndexHtml(html) {
      const css = `body {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  background: #3973aa;
  color: #fefeff;
  height: 100vh;
  margin: 0;
}

#page {
  display: table;
  height: 100%;
  margin: 0 auto;
  margin-top: -10px;
  width: 70%;
  font-size: 1.9vw;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
  padding: 0;
  margin: 25px 0;
  margin-top: 0;
  font-weight: 300;
}

h1 {
  font-size: 6.5em;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.4em;
  line-height: 1.5em;
}

h5 {
  line-height: 1.1em;
  font-size: 1em;
}

#details {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  padding-top: 10px;
}

#qr {
  flex: 0 1 auto;
}

#image {
  background: white;
  padding: 5px;
  line-height: 0;
}

#image img {
  width: 9.8em;
  height: 9.8em;
}

#stopcode {
  padding-left: 10px;
  flex: 1 1 auto;
}

@media (min-width: 840px) {
  #page {
      font-size: 140%;
      width: 900px;
  }
}`
      const bsod = `<div id="page">
  <div id="container">
    <h1>:(</h1>
    <h2>Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for
      you.</h2>
    <h2>
      <span id="percentage">0</span>% complete</h2>
    <div id="details">
      <div id="qr">
        <div id="image">
          <img src="http://xontab.com/experiments/Javascript/BSOD/qr.png" alt="QR Code" />
        </div>
      </div>
      <div id="stopcode">
        <h5>For more information about this issue and possible fixes, visit
          <br/>https://windows.com/stopcode</h4>
        <h5>If you call a support person, give them this info:
          <br/>Stop Code: PAGE_FAULT_IN_NONPAGED_AREA
          <br/>What failed: csagent.sys </h5>
      </div>
    </div>
  </div>
</div>`;
      const script = `window.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      throw new Error('Blue screen of death');
    }
  });

  window.addEventListener('error', function (event) {
    const errorString = ${JSON.stringify(bsod)};
    document.body.innerHTML = errorString;

});`;
      return html.replace(
        '</head>',
        `
        <style>
        ${css}
        </style>
        <script>
          ${script}
        </script>
        </head>`
      );
    }
  }
}