simulacrumparty
/
markarth


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
							import letter from './assets/letter';
import sun from './assets/sun';

const defaultStylesheet = `
  * {
    box-sizing: border-box;
    margin-top: 0;
  }

  body {
    background: #eaeaea;
    color: #121212;
    font-family: Helvetica Neue, sans-serif;
    font-size: 16px;
    margin: 0;
  }

  body.dark {
    background: #121212;
    color: #eaeaea;
  }

  body.serif {
    font-family: Garamond, serif;
  }

  a {
    color: #0366d6;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  body.dark a {
    color: #46a9ff;
  }

  pre, code {
    border-radius: 4px;
    font-family: Source Code Pro;
    font-size: 16px;
    overflow-x: scroll;
  }

  p code  {
    white-space: nowrap;
  }

  pre code {
    display: block;
    overflow-x: scroll;
    white-space: pre;
    width: 100%;
  }

  body.dark pre, body.dark code {
    background: #333333;
  }

  td {
    padding: .5em;
  }

  #settings, #container {
    box-sizing: border-box;
    margin: auto;
    max-width: 90ch;
    padding: 0 1em;
    width: 100%;
  }

  #settings {
    display: flex;
    padding: 1em;
  }

  #sun, #letter {
    cursor: pointer;
  }

  #sun:hover, #letter:hover {
    transform: scale(1.1);
  }

  #sun {
    margin-right: 1em;
  }

  #container {
    line-height: 1.5;
  }

  h2 {
    border-bottom: 1px solid #dddddd;
    padding-bottom: .3em;
  }
`;

export default (
  title: string,
  content: string,
  theme: string,
  stylesheet: string = defaultStylesheet,
) => `
  <html>
    <head>
      <title>Markarth - ${title}</title>
      <meta name="viewport" content="width=device-width">
      <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/${theme}.min.css">
      <style>
        ${stylesheet}
      </style>
    </head>
    <body>
      <div id="settings">
        ${sun} ${letter}
      </div>
      <div id="container">
        ${content}
      </div>
      <script>
        window.onload = () => {
          const ws = new WebSocket('ws://localhost:40510');

          ws.onmessage = ({ data }) => {
            console.log('Changes detected, reloading');
            document.querySelector('#container').innerHTML = data;
          }

          document.querySelector('#sun').addEventListener('click', (e) => {
            document.body.classList.toggle('dark');
          });

          document.querySelector('#letter').addEventListener('click', (e) => {
            document.body.classList.toggle('serif');
          });

          document.querySelectorAll('pre code').forEach(codeBlock => {
            codeBlock.classList.add('hljs');
          });
        }
      </script>
    </body>
  </html>
`;