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

Compare commits

base: scambier:b700ef73ada6fc3109547cdbfda593f6f4633a74
Branches Tags
scambier:master
..
compare: scambier:a55a5f6b06b07125265379ec0eab7fd298552bab
Branches Tags
scambier:master

No commits in common. "b700ef73ada6fc3109547cdbfda593f6f4633a74" and "a55a5f6b06b07125265379ec0eab7fd298552bab" have entirely different histories.
b700ef73ad ... a55a5f6b06

14 changed files with 78 additions and 145 deletions
Show Stats Expand all files Collapse all files

15
.prettierrc
View File

@ -1,11 +1,10 @@
{ {
"useTabs": false, "useTabs": false,
"bracketSameLine": true, "singleQuote": true,
"singleQuote": true, "trailingComma": "es5",
"trailingComma": "es5", "printWidth": 100,
"printWidth": 100, "plugins": ["prettier-plugin-svelte"],
"plugins": ["prettier-plugin-svelte"], "pluginSearchDirs": ["."],
"pluginSearchDirs": ["."],
"semi": false, "semi": false,
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

14
src/app.d.ts vendored
View File

@ -1,12 +1,12 @@
// See https://kit.svelte.dev/docs/types#app // See https://kit.svelte.dev/docs/types#app
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
// interface Error {} // interface Error {}
// interface Locals {} // interface Locals {}
// interface PageData {} // interface PageData {}
// interface Platform {} // interface Platform {}
} }
} }
export {} export {};

2
src/app.html
View File

@ -23,7 +23,7 @@ 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:title" content="Paste - No-database paste service" />
<meta property="og:url" content="https://paste.scambier.xyz" /> <meta property="og:url" content="https://paste.scambier.xyz" />
<meta property="og:type" content="website" /> <meta property="og:type" content="article" />
<meta <meta
name="description" name="description"
property="og:description" property="og:description"

22
src/components/CodeView.svelte
View File

@ -1,22 +0,0 @@
<script lang="ts">
export let isMarkdown: boolean
export let isPlainText: boolean
export let decompressed: string
export let htmlContent: string
let cssClass = ''
export { cssClass as class }
</script>
<div class={cssClass}>
{#if isMarkdown}
<div class="h-full p-2">
{@html htmlContent}
</div>
{:else if isPlainText}
<div class="whitespace-pre-line h-full">
{decompressed}
</div>
{:else}
<pre class="h-full"><code>{@html htmlContent}</code></pre>
{/if}
</div>

9
src/components/ComboBox.svelte
View File

@ -62,10 +62,12 @@
type="text" type="text"
bind:value={filter} bind:value={filter}
bind:this={inputFilter} bind:this={inputFilter}
class={$$restProps.class ?? ''} /> class={$$restProps.class ?? ''}
/>
<div <div
class="absolute top-full left-0 w-full bg-gray-700 max-h-[90vh] overflow-y-auto" class="absolute top-full left-0 w-full bg-gray-700 max-h-[90vh] overflow-y-auto"
bind:this={divContainer}> bind:this={divContainer}
>
{#each filteredItems as item} {#each filteredItems as item}
<div class="p-1 hover:bg-gray-600" on:click={() => selectItem(item)}>{item.text}</div> <div class="p-1 hover:bg-gray-600" on:click={() => selectItem(item)}>{item.text}</div>
{/each} {/each}
@ -76,7 +78,8 @@
readonly readonly
value={value?.text ?? ''} value={value?.text ?? ''}
class={$$restProps.class ?? ''} class={$$restProps.class ?? ''}
on:click={showOptions} /> on:click={showOptions}
/>
{/if} {/if}
</div> </div>

51
src/components/EditForm.svelte
View File

@ -69,25 +69,6 @@
await updateShareUrl() await updateShareUrl()
isUrlInputVisible = true isUrlInputVisible = true
await tick() await tick()
urlInput.value = $shareUrl
urlInput.select()
}
async function showMarkdownLink() {
await updateShareUrl()
isUrlInputVisible = true
await tick()
urlInput.value = `[Paste snippet](${$shareUrl})`
urlInput.select()
}
async function showIframeCode() {
await updateShareUrl()
isUrlInputVisible = true
await tick()
// @ts-ignore
const height = Math.min(editor['doc'].height * 1.1 + 45, 500)
urlInput.value = `<iframe width="100%" height="${height}" frameborder="0" src="${$shareUrl}"></iframe>`
urlInput.select() urlInput.select()
} }
@ -113,13 +94,11 @@
<input <input
bind:this={urlInput} bind:this={urlInput}
type="text" type="text"
class="border border-gray-300 bg-transparent p-1 grow" /> class="border border-gray-300 bg-transparent p-1 grow"
<button class="button" on:click={copyUrl} title="Copy"> value={$shareUrl}
<Icon class="text-xl" icon="fluent:copy-16-regular" /> />
</button> <button class="button" on:click={copyUrl}>Copy</button>
<button class="button" on:click={closeUrlInput} title="Close"> <button class="button" on:click={closeUrlInput}>Close</button>
<Icon class="text-xl" icon="material-symbols:close" />
</button>
</div> </div>
{:else} {:else}
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
@ -127,8 +106,11 @@
<ComboBox <ComboBox
items={languages} items={languages}
bind:value={selectedLanguage} bind:value={selectedLanguage}
class="bg-gray-700 border border-gray-300 p-1" /> class="bg-gray-700 border border-gray-300 p-1"
/>
</div> </div>
<!-- Show link input-->
<button class="button" on:click={showUrlInput}>Get Link</button>
<!-- Toggle text wrap --> <!-- Toggle text wrap -->
<button class="button" title="Toggle text wrap" on:click={() => (textWrap = !textWrap)}> <button class="button" title="Toggle text wrap" on:click={() => (textWrap = !textWrap)}>
@ -139,21 +121,6 @@
{/if} {/if}
</button> </button>
<!-- Show link input -->
<button class="button" on:click={showUrlInput} title="Get sharing link">
<Icon class="text-xl" icon="ph:link-bold" />
</button>
<!-- Show markdown link -->
<button class="button" on:click={showMarkdownLink} title="Get markdown link">
<Icon class="text-xl" icon="simple-icons:markdown" />
</button>
<!-- Show HTML iframe -->
<button class="button" on:click={showIframeCode} title="Get iframe code">
<Icon class="text-xl" icon="fluent:code-24-regular" />
</button>
<!-- Switch to readonly view --> <!-- Switch to readonly view -->
<button class="button" on:click={goToPreview} title="Switch to read-only view"> <button class="button" on:click={goToPreview} title="Switch to read-only view">
<Icon class="text-xl" icon="fluent:eye-12-regular" /> <Icon class="text-xl" icon="fluent:eye-12-regular" />

5
src/components/TopBar.svelte
View File

@ -2,10 +2,11 @@
</script> </script>
<div <div
class="flex flex-wrap justify-between items-center px-3 py-1 text-sm w-full z-10 shadow-md gap-2 font-mono bg-gray-700"> class="flex flex-wrap justify-between items-center px-3 py-1 text-sm w-full z-10 shadow-md gap-2 font-mono bg-gray-700"
>
<div class="flex items-center"> <div class="flex items-center">
<h1 class="text-xl"> <h1 class="text-xl">
<a href="/new" title="Create a new note">Paste</a> <a href="/create" title="Create a new note">Paste</a>
</h1> </h1>
<span class="ml-8 text-xs"> <span class="ml-8 text-xs">
<a href="/about">About</a> <a href="/about">About</a>

3
src/lib/utils.ts
View File

@ -34,6 +34,3 @@ export function getLangFromUrl() {
export const byId = (id: string) => document.getElementById(id) export const byId = (id: string) => document.getElementById(id)
export function isInIframe(): boolean {
return window !== window.parent
}

60
src/routes/+page.svelte
View File

@ -8,11 +8,9 @@
import rehypeStringify from 'rehype-stringify' import rehypeStringify from 'rehype-stringify'
import hljs from 'highlight.js' import hljs from 'highlight.js'
import 'highlight.js/styles/nord.min.css' import 'highlight.js/styles/nord.min.css'
import { getLangFromUrl, isInIframe } from '$lib/utils'
import TopBar from '../components/TopBar.svelte' import TopBar from '../components/TopBar.svelte'
import Icon from '@iconify/svelte' import Icon from '@iconify/svelte'
import CodeView from '../components/CodeView.svelte' import { getLangFromUrl } from '$lib/utils'
import { goto } from '$app/navigation'
let decompressed: string let decompressed: string
let htmlContent: string let htmlContent: string
@ -53,7 +51,7 @@
} }
} else { } else {
// Redirect to editor page // Redirect to editor page
goto('/editor') window.location.href = '/editor'
} }
}) })
@ -63,42 +61,30 @@
</script> </script>
<div class="overflow-hidden h-screen flex flex-col"> <div class="overflow-hidden h-screen flex flex-col">
{#if !isInIframe()} <TopBar>
<TopBar> <a
<a href={'/editor' + getUrlDataPart()}
href={'/editor' + getUrlDataPart()} class="p-1 hover:bg-gray-600/50"
class="p-1 hover:bg-gray-600/50" title="Edit a copy of this note"
title="Edit a copy of this note"> >
<Icon class="text-xl" icon="fluent:document-edit-16-regular" /> <Icon class="text-xl" icon="fluent:document-edit-16-regular" />
</a> </a>
</TopBar> </TopBar>
{/if}
{#if htmlContent || decompressed} {#if htmlContent || decompressed}
<div class="overflow-y-auto grow pb-4"> <div class="overflow-y-auto grow">
{#if isInIframe()} <div class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl">
<CodeView {#if isMarkdown}
class="prose dark:prose-invert w-full max-w-full h-full" {@html htmlContent}
{isMarkdown} {:else if isPlainText}
{isPlainText} <div class="whitespace-pre-line">
{decompressed} {decompressed}
{htmlContent} /> </div>
{:else} {:else}
<CodeView <pre><code>{@html htmlContent}</code></pre>
class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl" {/if}
{isMarkdown} </div>
{isPlainText}
{decompressed}
{htmlContent} />
{/if}
</div> </div>
{/if} {/if}
<footer
class="absolute bottom-0 left-0 w-full bg-gray-700 px-4 py-1 font-mono text-xs"
class:hidden={!isInIframe()}>
<a href={window.location.href} target="_blank">Powered by Paste</a>
</footer>
</div> </div>
<style lang="scss"> <style lang="scss">

0
src/routes/new/+page.svelte → src/routes/create/+page.svelte
View File

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

@ -66,6 +66,7 @@
editor.setValue(decompressed) editor.setValue(decompressed)
} }
} }
} }
</script> </script>
@ -79,7 +80,8 @@ npm/codemirror@5.65.16/addon/mode/multiplex.min.js,
npm/codemirror@5.65.16/addon/mode/simple.min.js, npm/codemirror@5.65.16/addon/mode/simple.min.js,
npm/codemirror@5.65.16/addon/scroll/simplescrollbars.js, npm/codemirror@5.65.16/addon/scroll/simplescrollbars.js,
npm/codemirror@5.65.16/mode/meta.min.js" npm/codemirror@5.65.16/mode/meta.min.js"
on:load={initCodeEditor}></script> on:load={initCodeEditor}
></script>
</svelte:head> </svelte:head>
<div class="flex flex-col font-mono h-screen bg-gray-700"> <div class="flex flex-col font-mono h-screen bg-gray-700">

30
tsconfig.json
View File

@ -1,17 +1,17 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true "strict": true
} }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in
} }