@fc3/mmcadi 0.1.20 → 0.1.23

package/dist/src/server/serializer/base.js

@@ -0,0 +1,1222 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const server_1 = require("./../../lib/server/index.js");
+const string_1 = require("./../../lib/string/index.js");
+const errors_1 = require("./../../lib/errors/index.js");
+const emoji_1 = __importDefault(require("./../../enum/emoji.js"));
+const color_1 = __importDefault(require("./../../enum/color.js"));
+const get_path_from_url_1 = __importDefault(require("./../utility/get-path-from-url.js"));
+const get_hex_for_color_1 = __importDefault(require("./../utility/get-hex-for-color.js"));
+const create_toast_path_1 = __importDefault(require("./../utility/create-toast-path.js"));
+class BaseResultSerializer extends server_1.HtmlResultSerializer {
+    constructor(result, path, referrer_url, session) {
+        super(result);
+        this.path = path;
+        this.referrer_url = referrer_url;
+        this.session = session;
+    }
+    getSession() {
+        return this.session;
+    }
+    serializeContent() {
+        const css = this.serializeCss();
+        const header = this.serializeHeader();
+        const main = this.serializeMain();
+        const footer = this.serializeFooter();
+        const js = this.serializeJs();
+        return `
+			${css}
+			${header}
+			${main}
+			${footer}
+			${js}
+		`;
+    }
+    // Override on child classes. Basically just the Page serializer.
+    isHome() {
+        return false;
+    }
+    // Override on child classes. Basically just the Page serializer.
+    isToday() {
+        return false;
+    }
+    isLoggedIn() {
+        const { account_id } = this.getSession();
+        return account_id !== null;
+    }
+    getUsername() {
+        const { username } = this.getSession();
+        return username;
+    }
+    getMetaMappings() {
+        const page_type = this.getPageType();
+        const logged_in = this.isLoggedIn();
+        return {
+            page_type,
+            logged_in
+        };
+    }
+    serializeHeader() {
+        return '';
+    }
+    serializeFooter() {
+        const home_link = (() => {
+            if (this.isHome()) {
+                return '';
+            }
+            const path = (0, create_toast_path_1.default)('/', {
+                message: `${emoji_1.default.HOUSE} home ${emoji_1.default.HOUSE}`,
+                color: color_1.default.BLUE
+            });
+            return `<a href="${path}">${emoji_1.default.LEFT_ARROW_UNICODE} home</a>`;
+        })();
+        const today_link = (() => {
+            if (this.isToday()) {
+                return '';
+            }
+            const path = (0, create_toast_path_1.default)('/today', {
+                message: `${emoji_1.default.SUNSHINE} today ${emoji_1.default.SUNSHINE}`,
+                color: color_1.default.YELLOW
+            });
+            return `<a href="${path}">today</a>`;
+        })();
+        const referrer_url = this.getReferrerUrl();
+        const referrer_path = (0, get_path_from_url_1.default)(referrer_url);
+        const source_path = encodeURIComponent(referrer_path);
+        const login_link = (() => {
+            if (this.isLoggedIn()) {
+                return `<a href="/logout?source=${source_path}">log out ${emoji_1.default.RIGHT_ARROW_UNICODE}</a>`;
+            }
+            else {
+                return `<a href="/login?source=${source_path}">log in ${emoji_1.default.RIGHT_ARROW_UNICODE}</a>`;
+            }
+        })();
+        return `
+			<footer>
+				<div class="section-wrapper">
+					<section class="transparent">
+						<table class="fixed">
+							<tbody>
+								<tr>
+									<td class="align-left">
+										${home_link}
+									</td>
+									<td>
+										${today_link}
+									</td>
+									<td class="align-right">
+										${login_link}
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</section>
+				</div>
+			</footer>
+		`;
+    }
+    serializeMain() {
+        const sections = this.serializeSections();
+        const breadcrumbs = this.serializeBreadcrumbs();
+        return `
+			<main>
+				<div class="section-wrapper">
+					${breadcrumbs}
+					${sections}
+				</div>
+			</main>
+		`;
+    }
+    // Override this as needed on child classes.
+    serializeBreadcrumbs() {
+        return '';
+    }
+    // Override this as needed on child classes.
+    serializeJs() {
+        if (this.cached_client_bundle === undefined) {
+            this.cached_client_bundle = this.initClientBundle();
+        }
+        return this.cached_client_bundle;
+    }
+    initClientBundle() {
+        const match = __dirname.match(/^(.*?\/dist)/);
+        if (match === null) {
+            throw new errors_1.InvariantViolation(`
+				Tried to read project dist path,
+				but current script was not located within it
+			`);
+        }
+        const dist_path = match[1];
+        const filepath = `${dist_path}/client.js`;
+        const contents = (0, fs_1.readFileSync)(filepath, string_1.StringEncoding.UTF8);
+        return `
+			<script>
+			${contents}
+			</script>
+		`;
+    }
+    serializeUtilityCss() {
+        const aspects = ['margin', 'padding'];
+        const sizes = [0, 2, 4, 8, 16, 32, 48, 64];
+        const sides = ['top', 'bottom', 'left', 'right'];
+        const colors = Object.values(color_1.default);
+        const rules = [];
+        aspects.forEach((aspect) => {
+            const aspect_shorthand = aspect.slice(0, 1);
+            sizes.forEach((size) => {
+                const classname = `${aspect_shorthand}-${size}`;
+                const rule = `.${classname} { ${aspect}: ${size}px !important; }`;
+                rules.push(rule);
+            });
+            sides.forEach((side) => {
+                const side_shorthand = side.slice(0, 1);
+                sizes.forEach((size) => {
+                    const classname = `${aspect_shorthand}${side_shorthand}-${size}`;
+                    const property = `${aspect}-${side}`;
+                    const rule = `.${classname} { ${property}: ${size}px !important; }`;
+                    rules.push(rule);
+                });
+            });
+        });
+        colors.forEach((color) => {
+            const hex = (0, get_hex_for_color_1.default)(color);
+            rules.push(`.text-${color} { color: ${hex} !important; }`);
+            rules.push(`.background-${color} { background: ${hex} !important; }`);
+        });
+        return `
+			<style>
+				${rules.join('\n\t\t\t\t')}
+
+				.quarter-opacity {
+					opacity: 0.25 !important;
+				}
+
+				.half-opacity {
+					opacity: 0.5 !important;
+				}
+
+				.three-quarter-opacity {
+					opacity: 75% !important;
+				}
+
+				.float-right {
+					float: right !important;
+				}
+
+				.no-background {
+					background: none !important;
+				}
+
+				.invisible {
+					visibility: hidden !important;
+				}
+
+				.align-top {
+					vertical-align: top !important;
+				}
+
+				.align-bottom {
+					vertical-align: bottom !important;
+				}
+
+				.align-left {
+					text-align: left !important;
+				}
+
+				.align-right {
+					text-align: right !important;
+				}
+
+				.centered {
+					text-align: center !important;
+				}
+
+				.hidden {
+					display: none !important;
+				}
+
+				.text-bold {
+					font-weight: bold;
+				}
+
+				.text-smaller {
+					font-size: 75% !important;
+				}
+
+				.text-very-large {
+					font-size: 150% !important;
+				}
+
+				.fuschia-border {
+					border-color: #F36 !important;
+				}
+
+				.maroon-border {
+					border-color: #603 !important;
+				}
+
+				.nowrap {
+					white-space: nowrap !important;
+				}
+
+				.wrap {
+					white-space: wrap !important;
+				}
+
+				.border-none {
+					border: none !important;
+				}
+			</style>
+		`;
+    }
+    serializeCss() {
+        const utility_css = this.serializeUtilityCss();
+        const biglink_color_classes = Object.values(color_1.default).map((color) => {
+            const hex = (0, get_hex_for_color_1.default)(color);
+            if (hex.length !== 4) {
+                throw new errors_1.InvariantViolation(`
+					Expected 3-character hex code,
+					but got: ${hex}
+				`);
+            }
+            const raw_r = hex[1];
+            const raw_g = hex[2];
+            const raw_b = hex[3];
+            const r = parseInt(`${raw_r}${raw_r}`, 16);
+            const g = parseInt(`${raw_g}${raw_g}`, 16);
+            const b = parseInt(`${raw_b}${raw_b}`, 16);
+            return `
+				.biglink.${color} {
+					background-image: repeating-linear-gradient(
+						-45deg,
+						rgba(${r}, ${g}, ${b}, 0.25),
+						rgba(${r}, ${g}, ${b}, 0.25) 10px,
+						#111 10px,
+						#111 20px
+					);
+
+					animation: stripes 4s linear infinite;
+					background-size: 200% 200%;
+					border-color: ${hex};
+					color: ${hex};
+				}
+
+				.biglink.${color}:hover,
+				.block.selected > .biglink.${color} {
+					background: rgba(${r}, ${g}, ${b}, 1);
+				}
+			`;
+        });
+        return `
+			<style>
+				body {
+					font-size: 24px;
+					font-family: monospace;
+					margin: 0 auto;
+					overflow-x: hidden;
+					color: #FFF;
+				}
+
+				header {
+					border-bottom: 4px solid rgba(255, 255, 255, 0.25);
+					position: sticky;
+					top: 0;
+					left: 0;
+					right: 0;
+					z-index: 1;
+				}
+
+				footer {
+					border-top: 4px solid rgba(255, 255, 255, 0.25);
+				}
+
+				header, footer {
+					padding: 16px 0px;
+				}
+
+				body, header {
+					background-image: url('data:image/svg+xml;utf8,` +
+            `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">` +
+            `<rect width="64" height="64" fill="black"/>` +
+            `<polygon points="0,0 7,0 0,7" fill="%23222" />` +
+            `<polygon points="57,64 64,57 64,64" fill="%23222" />` +
+            `<polygon points="0,57 57,0 64,0 64,7  7,64 0,64" fill="%23222" />` +
+            `<polygon points="0,25 25,0 39,0 0,39" fill="%23222" />` +
+            `<polygon points="25,64 64,25 64,39 39,64" fill="%23222" />` +
+            `</svg>');
+				}
+
+				body.editing, body.editing header {
+					background-image: url('data:image/svg+xml;utf8,` +
+            `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">` +
+            `<rect width="64" height="64" fill="black"/>` +
+            `<polygon points="0,0 7,0 0,7" fill="%23786400" />` +
+            `<polygon points="57,64 64,57 64,64" fill="%23786400" />` +
+            `<polygon points="0,57 57,0 64,0 64,7  7,64 0,64" fill="%23786400" />` +
+            `<polygon points="0,25 25,0 39,0 0,39" fill="%23786400" />` +
+            `<polygon points="25,64 64,25 64,39 39,64" fill="%23786400" />` +
+            `</svg>');
+				}
+
+				main {
+					padding: 16px 0px;
+					margin: 0 auto;
+					background: #111;
+				}
+
+				body.editing main {
+				}
+
+				ul {
+					list-style: none;
+					margin: 0;
+					padding: 0;
+				}
+
+				a {
+					color: #09F;
+				}
+
+				p:first-child {
+					margin-top: 0;
+				}
+
+				p:last-child {
+					margin-bottom: 0;
+				}
+
+				button {
+					all: unset;
+					cursor: pointer;
+				}
+
+				section {
+					border: 4px solid #333;
+					color: #FFF;
+					padding: 16px;
+					margin: 0 auto;
+					margin-bottom: 8px;
+					box-sizing: border-box;
+					position: relative;
+					text-align: left;
+				}
+
+				section.condensed {
+					padding: 0px;
+					border: none;
+					background: none;
+				}
+
+				section.block.condensed.link {
+					background: rgba(0, 0, 0, 0.75);
+				}
+
+				.section-wrapper {
+					max-width: 720px;
+					margin: 0 auto;
+				}
+
+				section::after, .clearfix::after {
+					content: "";
+					display: table;
+					clear: both;
+				}
+
+				section.transparent {
+					background: transparent;
+					border: 4px solid transparent;
+					color: #FFF;
+				}
+
+				section.editing {
+					min-height: 104px;
+					margin-left: 52px;
+					margin-right: 52px;
+				}
+
+				section nav {
+					display: none;
+					position: absolute;
+					width: 48px;
+					top: 0;
+					bottom: 0;
+				}
+
+				section nav.left {
+					left: -52px;
+				}
+
+				section nav.right {
+					right: -52px;
+				}
+
+				section nav .biglink {
+					width: 48px;
+					height: 48px;
+					color: #FFF;
+					line-height: 43px;
+					font-size: 32px;
+					text-align: center;
+					box-sizing: border-box;
+					padding: 0;
+					border-color: transparent;
+				}
+
+				section.editing nav {
+					display: block;
+				}
+
+				footer section {
+					border: 4px solid #333;
+				}
+
+				section h1 {
+					margin: 0px;
+					font-size: 150%;
+				}
+
+				section h2 {
+					margin: 0px;
+					padding: 16px 0px;
+					font-size: 125%;
+				}
+
+				section h4 {
+					margin: 0px;
+				}
+
+				section > time {
+					position: absolute;
+					border-width: 4px;
+					border-style: solid;
+					border-top: none;
+					border-color: #333;
+					color: #FFF;
+					background: #000;
+					right: -4px;
+					box-sizing: border-box;
+					bottom: -28px;
+					font-size: 80%;
+					line-height: 22px;
+					height: 28px;
+					padding: 0px 8px;
+					display: none;
+				}
+
+				section.with-time {
+					margin-bottom: 32px;
+				}
+
+				section.with-time time {
+					display: block;
+				}
+
+				.breadcrumb {
+					display: inline-block;
+					padding: 8px 16px;
+					background: #222;
+				}
+
+				a.breadcrumb:hover {
+					background: #09F;
+					color: #FFF;
+				}
+
+				.focus-cursor {
+					display: none;
+					position: absolute;
+					right: 100%;
+					top: 0;
+					bottom: 0;
+					align-items: center;
+					justify-content: center;
+					z-index: 1;
+					font-size: 200%;
+					padding: 0px 16px;
+				}
+
+				.block.selected > .focus-cursor {
+					display: flex;
+				}
+
+				.block.editing > .focus-cursor {
+					padding-right: 64px;
+				}
+
+				.block.folder {
+					padding: 0;
+					border-width: 0;
+				}
+
+				.block.folder.selected {
+				}
+
+				.block.background {
+					display: none;
+				}
+
+				.block.whitespace {
+					opacity: 0;
+				}
+
+				.focus-reticule {
+					display: none;
+					position: absolute;
+					border: 4px solid #FFF;
+					background: rgba(255, 255, 255, 0.5);
+					left: 0px;
+					right: 0px;
+					top: 0px;
+					bottom: 0px;
+					transform-origin: center;
+					z-index: 1;
+					pointer-events: none;
+				}
+
+				.block.selected > .focus-reticule {
+					display: block;
+				}
+
+				.focus-reticule.scaling {
+					animation: scaling-reticule 1s ease-out forwards;
+				}
+
+				.focus-reticule.flashing {
+					animation: flashing-reticule 1s ease-out forwards;
+				}
+
+				.focus-reticule-container {
+					position: relative;
+				}
+
+				@keyframes scaling-reticule {
+					0% {
+						border-width: 1px;
+						transform: scale(7);
+						opacity: 1;
+					}
+
+					75% {
+						opacity: 1;
+					}
+
+					100% {
+						border-width: 4px;
+						transform: scale(1);
+						opacity: 0;
+					}
+				}
+
+				@keyframes flashing-reticule {
+					0% {
+						opacity: 1;
+					}
+
+					100% {
+						opacity: 0;
+					}
+				}
+
+				img {
+					display: block;
+					width: 100%;
+					max-width: 100%;
+					image-rendering: pixelated;
+				}
+
+				.multi-column img {
+					aspect-ratio: 1 / 1;
+					object-fit: cover;
+					object-position: center;
+				}
+
+				input, label {
+					display: block;
+					width: 100%;
+					box-sizing: border-box;
+					margin-bottom: 12px;
+					font-size: 100%;
+				}
+
+				input {
+					padding: 8px;
+					border: 4px solid rgba(255, 255, 255, 0.5);
+					background: #FFF;
+				}
+
+				input:focused {
+					border: 4px solid #09F;
+					background: #FFF;
+				}
+
+				.color-option {
+					opacity: 0;
+					position: absolute;
+				}
+
+				.color-option + label {
+					float: left;
+					width: 32px;
+					height: 32px;
+					font-size: 80%;
+					text-indent: -1000px;
+					border: 1px solid #000;
+					overflow: hidden;
+					box-sizing: border-box;
+					cursor: pointer;
+					opacity: 0.5;
+				}
+
+				.color-option:checked + label {
+					border-color: #FFF;
+					border-width: 4px;
+					opacity: 1;
+				}
+
+				input[type="radio"] {
+					display: none;
+				}
+
+				input[type="radio"]:checked + label {
+					background: #FC3;
+					color: #000;
+				}
+
+				input[type="range"] {
+					width: 100%;
+					margin: 0;
+				}
+
+				input[type="checkbox"] {
+					display: inline-block;
+					width: 24px;
+					height: 24px;
+				}
+
+				input[type="checkbox"] + label {
+					display: inline;
+					font-size: 80%;
+					color: #CCC;
+					font-style: italic;
+					line-height: 24px;
+					vertical-align: text-top;
+				}
+
+				fieldset {
+					margin-bottom: 16px;
+				}
+
+				legend {
+					padding: 0px 8px;
+				}
+
+				label {
+					display: block;
+				}
+
+				.file-wrapper {
+					position: relative;
+				}
+
+				input[type="file"] {
+					opacity: 0;
+					z-index: 1;
+					position: absolute;
+					left: 0;
+					right: 0;
+					top: 0;
+					bottom: 0;
+					margin-bottom: 0px;
+					cursor: pointer;
+				}
+
+				summary {
+					cursor: pointer;
+				}
+
+				details:open summary {
+					margin-bottom: 16px;
+				}
+
+				.summary-label {
+					float: right;
+					font-size: 80%;
+					color: #AAA;
+				}
+
+				.summary-label .icon {
+					display: inline-block;
+					height: 18px;
+					width: 18px;
+					margin-right: 8px;
+				}
+
+				select {
+					display: block;
+					margin-bottom: 16px;
+					font-size: 28px;
+					width: 100%;
+				}
+
+				textarea {
+					display: block;
+					width: 100%;
+					resize: vertical;
+					margin-bottom: 16px;
+					font-size: 24px;
+					padding: 16px;
+					box-sizing: border-box;
+					min-height: 240px;
+					background: #CCC;
+				}
+
+				table {
+					width: 100%;
+					border-collapse: collapse;
+				}
+
+				table.fixed {
+					table-layout: fixed;
+				}
+
+				table.compact th {
+					text-align: left;
+				}
+
+				table.compact td {
+					font-size: 16px;
+					font-family: monospace;
+					color: #AAA;
+					text-align: right;
+				}
+
+				table.button-row td {
+					margin: 8px 0px;
+				}
+
+				table.button-row td:first-child {
+					margin-left: 0px;
+				}
+
+				table.button-row td:last-child {
+					margin-right: 0px;
+				}
+
+				.biglink:hover table.compact td {
+					color: #FFF;
+				}
+
+				td {
+					text-align: center;
+				}
+
+				audio {
+					width: 100%;
+				}
+
+				.markdown-wrapper h1:first-child,
+				.markdown-wrapper h2:first-child,
+				.markdown-wrapper h3:first-child {
+					margin-top: 0;
+				}
+
+				.markdown-wrapper th,
+				.markdown-wrapper td {
+					text-align: left;
+					padding: 4px 16px;
+				}
+
+				.markdown-wrapper td {
+					text-align: left;
+				}
+
+				.markdown-wrapper ul {
+					list-style: square;
+					padding: revert;
+				}
+
+				.biglink-container {
+					position: relative;
+					overflow: hidden;
+					border: 4px solid rgba(255, 255, 255, 0.5);
+				}
+
+				.biglink-container:hover {
+					border: 4px solid #FFF;
+					z-index: 1000;
+				}
+
+				.biglink {
+					display: block;
+					width: 100%;
+					background: none;
+					font-size: 100%;
+					position: relative;
+					border: none;
+					color: #09F;
+					box-sizing: border-box;
+					line-height: 100%;
+					white-space: nowrap;
+					text-align: center;
+					text-decoration: none;
+					cursor: pointer;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					border: 4px solid rgba(255, 255, 255, 0.5);
+				}
+
+				.biglink.align-left {
+					padding-left: 8px;
+				}
+
+				.biglink:hover {
+					background-image: repeating-linear-gradient(
+						-45deg,
+						#222,
+						#222 10px,
+						#111 10px,
+						#111 20px
+					);
+					animation: stripes 4s linear infinite;
+					background-size: 200% 200%;
+				}
+
+				${biglink_color_classes.join('\n')}
+
+				input[type="radio"]::checked + label {
+					cursor: default;
+				}
+
+				.stripes {
+					background-image: repeating-linear-gradient(
+						-45deg,
+						#222,
+						#222 10px,
+						#111 10px,
+						#111 20px
+					);
+					animation: stripes 4s linear infinite;
+					background-size: 200% 200%;
+				}
+
+				@keyframes stripes {
+					100% {
+						background-position: -28px -28px;
+					}
+				}
+
+				.biglink.stretch {
+					margin: -100em;
+					padding: 100em;
+					border-color: transparent;
+				}
+
+				.biglink a {
+					text-decoration: none;
+				}
+
+				.biglink:hover, .block.selected > .biglink {
+					border-color: #FFF;
+					color: #FFF;
+				}
+
+				.biglink:hover a, .block.selected > .biglink a {
+					color: #FFF;
+					text-decoration: none;
+				}
+
+				th {
+				}
+
+				th.padded {
+					padding: 8px;
+				}
+
+				th.navigation {
+					font-size: 18px;
+					background: none;
+					border: 1px solid #F36;
+				}
+
+				th.navigation a {
+					display: block;
+					padding: 16px;
+				}
+
+				th.navigation a:hover {
+					background: #FFF;
+					color: #F00;
+				}
+
+				.month {
+					vertical-align: top;
+				}
+
+				.month tr {
+				}
+
+				.weekday {
+					vertical-align: top;
+					padding: 0px;
+				}
+
+				.weekday-name {
+					display: block;
+					color: #666;
+				}
+
+				.weekday-date {
+					display: block;
+				}
+
+				.weekday-posts {
+					display: block;
+					word-wrap: anywhere;
+					text-align: left;
+					font-size: 80%;
+					margin-top: 8px;
+					padding: 0px;
+				}
+
+				.weekday-posts::after {
+					content: "";
+					display: table;
+					clear: both;
+				}
+
+				.weekday-post {
+					display: block;
+					float: left;
+					width: 25%;
+					text-align: center;
+					font-weight: normal;
+					color: transparent;
+					font-family: monospace;
+					aspect-ratio: 1 / 1;
+					overflow: hidden;
+				}
+
+				.weekday:hover .weekday-post {
+					text-indent: 0px;
+					background-color: transparent;
+				}
+
+				.weekday-post.image {
+					background: #FC3;
+				}
+
+				.weekday-post.video {
+					background: #F36;
+				}
+
+				.weekday-post.audio {
+					background: #09F;
+				}
+
+				.weekday-post.text {
+					background: #AAA;
+				}
+
+				a.day {
+					margin: 0 auto;
+					display: block;
+					padding: 8px;
+					color: #FFF;
+					text-decoration: none;
+					width: 32px;
+					height: 32px;
+					line-height: 32px;
+					border-radius: 32px;
+				}
+
+				a.day:hover {
+					background: #FFF;
+				}
+
+				a.day.active {
+					background: #FC3;
+					color: #000;
+				}
+
+				hr {
+					border: none;
+					border-top: 1px dashed #F00;
+					background: none;
+					margin: 32px 0px;
+				}
+
+				.squarelink {
+					height: 92px;
+					width: 92px;
+					font-size: 200%;
+					aspect-ratio: 1 / 1;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					text-decoration: none;
+					background: rgba(255, 255, 255, 0.25);
+					color: #000;
+				}
+
+				.squarelink:hover {
+					background: #FFF;
+				}
+
+				.squarelink.disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+
+				.squarelink.disabled:hover {
+					background: rgba(255, 255, 255, 0.25);
+				}
+
+				.toast {
+					pointer-events: none;
+					animation: fadeout 4s;
+					animation-fill-mode: forwards;
+					position: fixed;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					z-index: 1;
+					background: rgba(0, 0, 0, 0.75);
+				}
+
+				@keyframes fadeout {
+					0% {
+						opacity: 1;
+					}
+
+					50% {
+						opacity: 1;
+					}
+
+					100% {
+						opacity: 0;
+					}
+				}
+
+				@keyframes block {
+					0% {
+					}
+
+					100% {
+						display: none;
+						pointer-events: none;
+					}
+				}
+
+				input[type="checkbox"].toast-toggle {
+					position: fixed;
+					width: 100%;
+					height: 100%;
+					z-index: 2;
+					display: block;
+					opacity: 0;
+					animation: block 4s;
+					animation-fill-mode: forwards;
+				}
+
+				.toast-toggle:checked {
+					display: none;
+					pointer-events: none;
+				}
+
+				.toast-toggle:checked + .toast {
+					display: none;
+				}
+
+				.toast-wrapper {
+					position: relative;
+					top: 25%;
+					left: 0px;
+					right: 0px;
+					box-sizing: border-box;
+					color: #FFF;
+					background: #000;
+				}
+
+				.toast-message {
+					position: relative;
+					z-index: 1;
+					max-width: 720px;
+					margin: 0 auto;
+					padding: 32px;
+					text-align: center;
+					font-size: 150%;
+				}
+
+				.toast-background {
+					position: absolute;
+					inset: 8px 0px;
+					background: rgba(0, 0, 0, 0.5);
+					z-index: 0;
+				}
+
+				aside {
+					font-size: 80%;
+					font-style: italic;
+					color: #BBB;
+					padding: 16px;
+				}
+
+				.ephemeral {
+					color: #777;
+					font-size: 85%;
+					font-style: italic;
+				}
+
+				datalist {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					width: 100%;
+					writing-mode: vertical-lr;
+				}
+
+				datalist option {
+					padding: 0;
+					transform: rotate(-90deg);
+				}
+
+				.resource-list {
+					border-collapse: collapse;
+					white-space: nowrap;
+				}
+
+				.resource-list td {
+					padding: 8px;
+				}
+
+				.resource-list td, .resource-list th {
+					border-right: 1px solid #FFF;
+					border-bottom: 1px solid #FFF;
+				}
+
+				.resource-list th {
+					border-top: 1px solid #FFF;
+				}
+
+				.resource-list td:first-child, .resource-list th:first-child {
+					border-left: 1px solid #FFF;
+				}
+			</style>
+
+			${utility_css}
+		`;
+    }
+    getPath() {
+        return this.path;
+    }
+    getReferrerUrl() {
+        return this.referrer_url;
+    }
+}
+exports.default = BaseResultSerializer;
+//# sourceMappingURL=base.js.map