@fc3/mmcadi 0.1.0

package/src/server/result-serializer/base.ts

@@ -0,0 +1,1267 @@
+import {readFileSync} from 'fs';
+
+import {HtmlResultSerializer} from 'lib/server';
+import {StringEncoding} from 'lib/string';
+import {Session} from 'lib/execution-context';
+import {InvariantViolation} from 'lib/errors';
+
+import Emoji from 'enum/emoji';
+import Color from 'enum/color';
+import getPathFromUrl from 'server/utility/get-path-from-url';
+import PageType from 'client/enum/page-type';
+import getHexForColor from 'server/utility/get-hex-for-color';
+import createToastPath from 'server/utility/create-toast-path';
+
+abstract class BaseResultSerializer<T extends object> extends HtmlResultSerializer<T> {
+	private session: Session;
+	private path: string;
+	private referrer_url: string;
+	private cached_client_bundle: string | undefined;
+
+	public constructor(
+		result: T,
+		path: string,
+		referrer_url: string,
+		session: Session
+	) {
+		super(result);
+
+		this.path = path;
+		this.referrer_url = referrer_url;
+		this.session = session;
+	}
+
+	protected getSession(): Session {
+		return this.session;
+	}
+
+	public serializeContent(): string {
+		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.
+	protected isHome(): boolean {
+		return false;
+	}
+
+	// Override on child classes. Basically just the Page serializer.
+	protected isToday(): boolean {
+		return false;
+	}
+
+	protected isLoggedIn(): boolean {
+		const {account_id} = this.getSession();
+
+		return account_id !== null;
+	}
+
+	protected getUsername(): string | null {
+		const {username} = this.getSession();
+
+		return username;
+	}
+
+	protected getMetaMappings(): Record<string, string | number | boolean> {
+		const page_type = this.getPageType();
+		const logged_in = this.isLoggedIn();
+
+		return {
+			page_type,
+			logged_in
+		};
+	}
+
+	protected serializeHeader(): string {
+		return '';
+	}
+
+	protected serializeFooter(): string {
+		const home_link = (() => {
+			if (this.isHome()) {
+				return '';
+			}
+
+			const path = createToastPath('/', {
+				message: `${Emoji.HOUSE} home ${Emoji.HOUSE}`,
+				color: Color.BLUE
+			});
+
+			return `<a href="${path}">${Emoji.LEFT_ARROW_UNICODE} home</a>`;
+		})();
+
+		const today_link = (() => {
+			if (this.isToday()) {
+				return '';
+			}
+
+			const path = createToastPath('/today', {
+				message: `${Emoji.SUNSHINE} today ${Emoji.SUNSHINE}`,
+				color: Color.YELLOW
+			});
+
+			return `<a href="${path}">today</a>`;
+		})();
+
+		const referrer_url = this.getReferrerUrl();
+		const referrer_path = getPathFromUrl(referrer_url);
+		const source_path = encodeURIComponent(referrer_path);
+
+		const login_link = (() => {
+			if (this.isLoggedIn()) {
+				return `<a href="/logout?source=${source_path}">log out ${Emoji.RIGHT_ARROW_UNICODE}</a>`;
+			} else {
+				return `<a href="/login?source=${source_path}">log in ${Emoji.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>
+		`;
+	}
+
+	protected serializeMain(): string {
+		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.
+	protected serializeBreadcrumbs(): string {
+		return '';
+	}
+
+	// Override this as needed on child classes.
+	protected serializeJs(): string {
+		if (this.cached_client_bundle === undefined) {
+			this.cached_client_bundle = this.initClientBundle();
+		}
+
+		return this.cached_client_bundle;
+	}
+
+	private initClientBundle(): string {
+		const match = __dirname.match(/^(.*?\/dist)/);
+
+		if (match === null) {
+			throw new 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 = readFileSync(filepath, StringEncoding.UTF8);
+
+		return `
+			<script>
+			${contents}
+			</script>
+		`;
+	}
+
+	private serializeUtilityCss(): string {
+		const aspects = ['margin', 'padding'];
+		const sizes = [0, 2, 4, 8, 16, 32, 48, 64];
+		const sides = ['top', 'bottom', 'left', 'right'];
+		const rules: string[] = [];
+
+		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);
+				});
+			});
+		});
+
+		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;
+				}
+
+				.text-yellow {
+					color: #FC3 !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>
+		`;
+	}
+
+	protected serializeCss(): string {
+		const utility_css = this.serializeUtilityCss();
+
+		const biglink_color_classes = Object.values(Color).map((color) => {
+			const hex = getHexForColor(color);
+
+			if (hex.length !== 4) {
+				throw new 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;
+					background: rgba(0, 0, 0, 0.75);
+					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;
+				}
+
+				.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;
+				}
+
+				.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}
+		`;
+	}
+
+	protected getPath(): string {
+		return this.path;
+	}
+
+	protected getReferrerUrl(): string {
+		return this.referrer_url;
+	}
+
+	protected abstract serializeSections(): string;
+	protected abstract getTitle(): string;
+	protected abstract getPageType(): PageType;
+}
+
+export default BaseResultSerializer;