123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- import letter from './assets/letter';
- import sun from './assets/sun';
-
- const defaultStylesheet = `
- * {
- 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 {
- background: #dddddd;
- border-radius: 4px;
- font-family: Source Code Pro;
- font-size: 16px;
- overflow-x: scroll;
- }
-
- pre {
- padding: 5px;
- }
-
- 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, 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">
- <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');
- });
- }
- </script>
- </body>
- </html>
- `;
|