94 lines
2.6 KiB
Svelte
94 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte'
|
|
import { unified } from 'unified'
|
|
import remarkParse from 'remark-parse'
|
|
import remarkRehype from 'remark-rehype'
|
|
import remarkGfm from 'remark-gfm'
|
|
import rehypeHighlight from 'rehype-highlight'
|
|
import rehypeStringify from 'rehype-stringify'
|
|
import hljs from 'highlight.js'
|
|
import 'highlight.js/styles/nord.min.css'
|
|
import TopBar from '../components/TopBar.svelte'
|
|
import Icon from '@iconify/svelte'
|
|
import { getLangFromUrl } from '$lib/utils'
|
|
|
|
let decompressed: string
|
|
let isMarkdown = false
|
|
let isPlainText = false
|
|
|
|
onMount(async () => {
|
|
let lang = getLangFromUrl()
|
|
lang = lang === 'mrwn' || lang === 'gflm' ? 'md' : lang // back compatiblity with old links
|
|
|
|
// extract the part in the url after the hash
|
|
const hash = window.location.hash.slice(1)
|
|
if (hash) {
|
|
// decompress the data
|
|
const { decompress } = await import('$lib/brotli')
|
|
decompressed = await decompress(hash)
|
|
|
|
// Markdown
|
|
if (lang === 'md') {
|
|
const html = await unified()
|
|
.use(remarkParse)
|
|
.use(remarkGfm)
|
|
.use(remarkRehype)
|
|
.use(rehypeHighlight)
|
|
.use(rehypeStringify)
|
|
.process(decompressed)
|
|
isMarkdown = true
|
|
decompressed = html.toString()
|
|
}
|
|
// Plain text
|
|
else if (lang === 'plt' || !lang) {
|
|
isPlainText = true
|
|
}
|
|
// Code
|
|
else {
|
|
decompressed = hljs.highlight(lang, decompressed).value
|
|
}
|
|
} else {
|
|
// Redirect to editor page
|
|
window.location.href = '/editor'
|
|
}
|
|
})
|
|
|
|
function getUrlDataPart(): string {
|
|
return window.location.search + window.location.hash
|
|
}
|
|
</script>
|
|
|
|
<div class="overflow-hidden h-screen flex flex-col">
|
|
{#if decompressed}
|
|
<TopBar>
|
|
<a
|
|
href={'/editor' + getUrlDataPart()}
|
|
class="p-1 hover:bg-gray-600/50"
|
|
title="Edit a copy of this note"
|
|
>
|
|
<Icon class="text-xl" icon="fluent:document-edit-16-regular" />
|
|
</a>
|
|
</TopBar>
|
|
<div class="overflow-y-auto grow">
|
|
<div class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl">
|
|
{#if isMarkdown}
|
|
{@html decompressed}
|
|
{:else if isPlainText}
|
|
<div class="whitespace-pre-line">
|
|
{decompressed}
|
|
</div>
|
|
{:else}
|
|
<pre><code>{@html decompressed}</code></pre>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
:global(pre code.hljs) {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
</style>
|