@fc3/mmcadi 0.1.0 → 0.1.1

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

@@ -1,1267 +0,0 @@
-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;