scambier/paste
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: scambier:7a0b49364fe0d831461653842d30c3eb8df55d18
Branches Tags
scambier:master
...
compare: scambier:e1b7961f456269a32e1f7356aab642a26cfb8bdf
Branches Tags
scambier:master

4 Commits
7a0b49364f ... e1b7961f45

Author SHA1 Message Date
Simon Cambier
e1b7961f45 Make sure the sharing url is up-to-date before switch from editor to preview 2023-11-25 08:37:17 +01:00
Simon Cambier
f72b7f2f56 Cleaning 2023-11-25 08:36:59 +01:00
Simon Cambier
c4c2c54d23 Updated about page 2023-11-25 08:36:41 +01:00
Simon Cambier
f44cb83657 Meta tags 2023-11-25 08:09:44 +01:00
6 changed files with 44 additions and 13 deletions
Show Stats Expand all files Collapse all files

4
src/app.html
View File

@ -13,6 +13,10 @@ npm/codemirror@5.65.16/lib/codemirror.min.css,
npm/codemirror@5.65.16/theme/nord.min.css" npm/codemirror@5.65.16/theme/nord.min.css"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Paste - No-database paste service" />
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/bokub/nopaste@images/logo.png" />
<meta property="og:url" content="https://paste.scambier.xyz" />
<meta property="og:type" content="website" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

10
src/components/EditForm.svelte
View File

@ -5,6 +5,7 @@
import { shareUrl, selectedLang } from '../store' import { shareUrl, selectedLang } from '../store'
import ComboBox from './ComboBox.svelte' import ComboBox from './ComboBox.svelte'
import Icon from '@iconify/svelte' import Icon from '@iconify/svelte'
import { goto } from '$app/navigation'
type Language = { type Language = {
text: string text: string
@ -80,6 +81,11 @@
function closeUrlInput() { function closeUrlInput() {
isUrlInputVisible = false isUrlInputVisible = false
} }
async function goToPreview() {
await updateShareUrl()
goto($shareUrl)
}
</script> </script>
<div class={cssClass}> <div class={cssClass}>
@ -116,9 +122,9 @@
</button> </button>
<!-- Switch to readonly view --> <!-- Switch to readonly view -->
<a class="button" href={$shareUrl}> <button class="button" on:click={goToPreview}>
<Icon class="text-xl" icon="fluent:eye-12-regular" /> <Icon class="text-xl" icon="fluent:eye-12-regular" />
</a> </button>
</div> </div>
{/if} {/if}
</div> </div>

2
src/components/TopBar.svelte
View File

@ -5,7 +5,7 @@
<h1 class="text-xl">Paste</h1> <h1 class="text-xl">Paste</h1>
<span class="ml-8 text-xs"> <span class="ml-8 text-xs">
<a <a
href="/?l=md#G0oEIKySx5UfTkdu1XoEsNFTBka+1+MnKOMEeLUaweWLc/oYlbttJz93QOgIkhdODeUmDs/+u3T5RANkM7+ktGLRxbTN0WIKyb2AWJbsnIoNDvzMtbcgQpsQYPWXPwUeRkuMWOXIEYIfzvnjqY85WNtT9Rjq3Y4/qHB1+mjzCQsTvr9UIfLbq28+i4joe5i/F2SQCTO9G/SlgnojZOKr9BSbIq0EPVBnVgg9T8+zls2Ezgg67tZTjX8pVB70RIghiwfFeqn/ZMQv9VGcbEWDIHnUlL52CL4FeCQ6DMJ4OOtVWk9jWI3i1CRvzxbmHudPlk1iA4pD9wHgOOILFPKQUAntulosi6VRhJ9eeSmViKpbloonQX9cDQVUkg8rzdkoBllTTfnVcYwDRsMS3UjTv/I+befAQeNMiRc7ESFegwUd6yEFPyVJG8RCXcgvw1QfdBe93uXQ9qGBL6BhLpjlpqxjmf9fwkKHFYClXmn7yaZrc/HrW6YH5F6Ei9MGKMvY5be++/noh6TJ5MeGgDzeJgNr0rjvcltZrDRS8wumbWpseMjTY1bz/rp/fJVQxwy/Rd+kXjlGrMJLZsVVwED5b0Jr26wUAm85shUyLX50kklq6ZIRfnzNX4LWrnl72vWR1YaTr/3n+Cp+6IBEliYA" href="/?l=md#G44EgKwOeI4yftHdG1GcYD0C2OgpAyPf6/ETlHECvFqN4PKltfWVNNq/dxrd9ewVthcNrRISpdBi1XTRGItQbvfun9ZUSnWU0lQGCcpkEJbBdA0TP9vjSaAFsO2p4LH9Adeibgx4TX7JBFZmhsOj7P6S8zax1FrwAo6ThHI9QsENX5XxzPeWwayeTAn2aH0JfzJBI06twNrEUJCGmyQ/QSTQ7RnOHAcRZsWhKwg8TWX1D6q/JyngVmhCYuxN6kMC+iX1DekfSKS0p+gLeM0nTMX64lnL3WfeDIHcoIFFW7lAc0Dc/G/MpzYT8CznnlTx5xQf/+t7UkXNNrbIqehgqM3BIp/9mypDdR2Zpwexg32yXST1ZrbTPIurASmrD1OYNrYwRJ8BV3e0WqOyQog/U258yp0VYvgQK3OWt4AAgFrTYw27HSWh9LkmD5lAtakv6/n0fj/z+tyTqEaU5PdchoyhVqKyqjEJ2/cXe+kD01BMTd/zor4kfwAE1jaN5RiLwagKFfibyqw1SXed+Ywf1urDGbT92ILFgpZ+4VpQg0yY1RwBbgVZwqmsUFbcfNLLJIticha+GM6vi5k9FHqXND1s57VyV1Q5IhAP4zRimzipR2rEkKpHjeRpAoJIa0qLaLkNfN8HgcCA0gec+bDZ206cfvqtdJqnkvNWhsTFGQw="
target="_blank" target="_blank"
> >
About About

3
src/lib/utils.ts
View File

@ -33,3 +33,6 @@ export function getLangFromUrl() {
} }
export const byId = (id: string) => document.getElementById(id) export const byId = (id: string) => document.getElementById(id)
export const staticMetaDescription =
'Paste is a client-side paste service with no database, and no back-end code. The data is stored entirely in the shared link'

29
src/routes/+page.svelte
View File

@ -10,15 +10,26 @@
import 'highlight.js/styles/nord.min.css' import 'highlight.js/styles/nord.min.css'
import TopBar from '../components/TopBar.svelte' import TopBar from '../components/TopBar.svelte'
import Icon from '@iconify/svelte' import Icon from '@iconify/svelte'
import { getLangFromUrl } from '$lib/utils' import { getLangFromUrl, staticMetaDescription } from '$lib/utils'
let decompressed: string let decompressed: string
let htmlContent: string
let isMarkdown = false let isMarkdown = false
let isPlainText = false let isPlainText = false
// Meta description
$: metaDescription = (() => {
if (decompressed) {
const text = decompressed.slice(0, 100)
return text + (text.length === 100 ? '...' : '')
}
return staticMetaDescription
})()
onMount(async () => { onMount(async () => {
let lang = getLangFromUrl() let lang = getLangFromUrl()
lang = lang === 'mrwn' || lang === 'gflm' ? 'md' : lang // back compatiblity with old links // Remove github flavored markdown, redundant with markdown
lang = lang === 'gflm' ? 'md' : lang
// extract the part in the url after the hash // extract the part in the url after the hash
const hash = window.location.hash.slice(1) const hash = window.location.hash.slice(1)
@ -37,7 +48,7 @@
.use(rehypeStringify) .use(rehypeStringify)
.process(decompressed) .process(decompressed)
isMarkdown = true isMarkdown = true
decompressed = html.toString() htmlContent = html.toString()
} }
// Plain text // Plain text
else if (lang === 'plt' || !lang) { else if (lang === 'plt' || !lang) {
@ -45,7 +56,7 @@
} }
// Code // Code
else { else {
decompressed = hljs.highlight(lang, decompressed).value htmlContent = hljs.highlight(lang, decompressed).value
} }
} else { } else {
// Redirect to editor page // Redirect to editor page
@ -59,7 +70,7 @@
</script> </script>
<div class="overflow-hidden h-screen flex flex-col"> <div class="overflow-hidden h-screen flex flex-col">
{#if decompressed} {#if htmlContent || decompressed}
<TopBar> <TopBar>
<a <a
href={'/editor' + getUrlDataPart()} href={'/editor' + getUrlDataPart()}
@ -72,19 +83,23 @@
<div class="overflow-y-auto grow"> <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"> <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} {#if isMarkdown}
{@html decompressed} {@html htmlContent}
{:else if isPlainText} {:else if isPlainText}
<div class="whitespace-pre-line"> <div class="whitespace-pre-line">
{decompressed} {decompressed}
</div> </div>
{:else} {:else}
<pre><code>{@html decompressed}</code></pre> <pre><code>{@html htmlContent}</code></pre>
{/if} {/if}
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
<svelte:head>
<meta name="description" property="og:description" content={metaDescription} />
</svelte:head>
<style lang="scss"> <style lang="scss">
:global(pre code.hljs) { :global(pre code.hljs) {
background-color: transparent; background-color: transparent;

9
src/routes/editor/+page.svelte
View File

@ -2,7 +2,7 @@
import type { Editor } from 'codemirror' import type { Editor } from 'codemirror'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import * as brotli from '$lib/brotli' import * as brotli from '$lib/brotli'
import { byId } from '$lib/utils' import { byId, staticMetaDescription } from '$lib/utils'
import TopBar from '../../components/TopBar.svelte' import TopBar from '../../components/TopBar.svelte'
import { selectedLang, shareUrl } from '../../store' import { selectedLang, shareUrl } from '../../store'
import EditForm from '../../components/EditForm.svelte' import EditForm from '../../components/EditForm.svelte'
@ -18,7 +18,8 @@
if (editor) { if (editor) {
const url = new URL(window.location.origin) const url = new URL(window.location.origin)
compressed = await brotli.compress(editor.getValue()) compressed = await brotli.compress(editor.getValue())
if ($selectedLang) { // Set the language (ignore for plain text, since it's the default)
if ($selectedLang && $selectedLang !== 'plt') {
url.searchParams.set('l', $selectedLang) url.searchParams.set('l', $selectedLang)
} }
url.hash = compressed url.hash = compressed
@ -32,6 +33,8 @@
}, 1000) }, 1000)
async function initCodeEditor() { async function initCodeEditor() {
$selectedLang = new URLSearchParams(window.location.search).get('l') ?? ' plt'
CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/%N/%N.js' CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/%N/%N.js'
editor = new CodeMirror(byId('editor'), { editor = new CodeMirror(byId('editor'), {
lineNumbers: true, lineNumbers: true,
@ -64,11 +67,11 @@
} }
} }
$selectedLang = new URLSearchParams(window.location.search).get('l') ?? ' plt'
} }
</script> </script>
<svelte:head> <svelte:head>
<meta name="description" property="og:description" content={staticMetaDescription} />
<script <script
src="https://cdn.jsdelivr.net/combine/ src="https://cdn.jsdelivr.net/combine/
npm/codemirror@5.65.16, npm/codemirror@5.65.16,