mess around

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -1,56 +1,74 @@
 <script>
-    import { currentStream, currentSongIndex } from '$lib/stores.js';
-    import {} from 'svelte';
-    import { jumpToTrack } from './Player.svelte';
+	import { currentStream, currentSongIndex } from '$lib/stores.js';
+	import { jumpToTrack } from './Player.svelte';
+	import { Carta } from 'carta-md';
+	import { sanitize } from 'isomorphic-dompurify';
 
-    function prettyPrintTime(s) {
-        return new Date(s * 1000).toISOString().slice(11, 19);
-    }
+	const carta = new Carta({
+		sanitizer: sanitize
+	});
+
+	function prettyPrintTime(s) {
+		return new Date(s * 1000).toISOString().slice(11, 19);
+	}
 </script>
 
 <div class="description-bubble">
-    {$currentStream.description === '' ? 'No description available.' : $currentStream.description}
+	{@html carta.renderSSR($currentStream.description || 'No description available.')}
 </div>
 
 <div>
-    <table>
-        <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
-        {#each $currentStream.tracks as track, i}
-            <tr on:click={() => jumpToTrack(track[0])} class:current={i == $currentSongIndex}>
-                <td>{prettyPrintTime(track[0])}</td>
-                <td>{track[1]}</td>
-                <td>{track[2]}</td>
-            </tr>
-        {/each}
-    </table>
+	<table>
+		<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
+		{#each $currentStream.tracks as track, i}
+			<tr on:click={() => jumpToTrack(track[0])} class:current={i == $currentSongIndex}>
+				<td>{prettyPrintTime(track[0])}</td>
+				<td>{track[1]}</td>
+				<td>{track[2]}</td>
+			</tr>
+		{/each}
+	</table>
 </div>
 
 <style>
-    .current {
-        background-color: gray;
-    }
-    .description-bubble {
-        position: relative;
-        background-color: #fff;
-        border: 1px solid #ccc;
-        padding: 10px;
-        margin: 10px;
-        border-radius: 5px;
-        max-width: 80%;
-        width: fit-content;
-        white-space: pre-line;
-        min-width: 50%;
-    }
+	td {
+		height: 1.3em;
+	}
+	.current {
+		background-color: gray;
+	}
+	.description-bubble {
+		position: relative;
+		background-color: #fff;
+		border: 1px solid #ccc;
+		color: black;
+		padding: 10px;
+		margin: 10px;
+		border-radius: 5px;
+		max-width: 80%;
+		width: fit-content;
+		min-width: 50%;
+		font-family: Verdana;
+		font-size: small;
+	}
 
-    .description-bubble::after {
-        content: '';
-        position: absolute;
-        border-style: solid;
-        border-width: 10px 0 10px 10px;
-        border-color: transparent transparent transparent #ccc;
-        top: 0;
-        right: -10px;
-        width: 0;
-        height: 0;
-    }
+	.description-bubble :global(:first-child) {
+		margin-top: 0px !important;
+	}
+
+	.description-bubble :global(:last-child) {
+		margin-bottom: 0px !important;
+	}
+
+	.description-bubble::after {
+		content: '';
+		position: absolute;
+		border-style: solid;
+		border-width: 10px 0 10px 10px;
+		border-color: transparent transparent transparent #ccc;
+		top: 0;
+		right: -10px;
+		width: 0;
+		height: 0;
+	}
 </style>