iframe layout
This commit is contained in:
parent
a55a5f6b06
commit
30e4d5c87e
|
@ -23,7 +23,7 @@ npm/codemirror@5.65.16/theme/nord.min.css"
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta property="og:title" content="Paste - No-database paste service" />
|
||||
<meta property="og:url" content="https://paste.scambier.xyz" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
name="description"
|
||||
property="og:description"
|
||||
|
|
22
src/components/CodeView.svelte
Normal file
22
src/components/CodeView.svelte
Normal file
|
@ -0,0 +1,22 @@
|
|||
<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>
|
|
@ -69,6 +69,25 @@
|
|||
await updateShareUrl()
|
||||
isUrlInputVisible = true
|
||||
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()
|
||||
}
|
||||
|
||||
|
@ -95,10 +114,13 @@
|
|||
bind:this={urlInput}
|
||||
type="text"
|
||||
class="border border-gray-300 bg-transparent p-1 grow"
|
||||
value={$shareUrl}
|
||||
/>
|
||||
<button class="button" on:click={copyUrl}>Copy</button>
|
||||
<button class="button" on:click={closeUrlInput}>Close</button>
|
||||
<button class="button" on:click={copyUrl} title="Copy">
|
||||
<Icon class="text-xl" icon="fluent:copy-16-regular" />
|
||||
</button>
|
||||
<button class="button" on:click={closeUrlInput} title="Close">
|
||||
<Icon class="text-xl" icon="material-symbols:close" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-end gap-2">
|
||||
|
@ -109,8 +131,6 @@
|
|||
class="bg-gray-700 border border-gray-300 p-1"
|
||||
/>
|
||||
</div>
|
||||
<!-- Show link input-->
|
||||
<button class="button" on:click={showUrlInput}>Get Link</button>
|
||||
|
||||
<!-- Toggle text wrap -->
|
||||
<button class="button" title="Toggle text wrap" on:click={() => (textWrap = !textWrap)}>
|
||||
|
@ -121,6 +141,21 @@
|
|||
{/if}
|
||||
</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 -->
|
||||
<button class="button" on:click={goToPreview} title="Switch to read-only view">
|
||||
<Icon class="text-xl" icon="fluent:eye-12-regular" />
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
>
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-xl">
|
||||
<a href="/create" title="Create a new note">Paste</a>
|
||||
<a href="/new" title="Create a new note">Paste</a>
|
||||
</h1>
|
||||
<span class="ml-8 text-xs">
|
||||
<a href="/about">About</a>
|
||||
|
|
|
@ -34,3 +34,6 @@ export function getLangFromUrl() {
|
|||
|
||||
export const byId = (id: string) => document.getElementById(id)
|
||||
|
||||
export function isInIframe(): boolean {
|
||||
return window !== window.parent
|
||||
}
|
||||
|
|
|
@ -8,9 +8,10 @@
|
|||
import rehypeStringify from 'rehype-stringify'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/nord.min.css'
|
||||
import { getLangFromUrl, isInIframe } from '$lib/utils'
|
||||
import TopBar from '../components/TopBar.svelte'
|
||||
import Icon from '@iconify/svelte'
|
||||
import { getLangFromUrl } from '$lib/utils'
|
||||
import CodeView from '../components/CodeView.svelte'
|
||||
|
||||
let decompressed: string
|
||||
let htmlContent: string
|
||||
|
@ -61,6 +62,7 @@
|
|||
</script>
|
||||
|
||||
<div class="overflow-hidden h-screen flex flex-col">
|
||||
{#if !isInIframe()}
|
||||
<TopBar>
|
||||
<a
|
||||
href={'/editor' + getUrlDataPart()}
|
||||
|
@ -70,21 +72,36 @@
|
|||
<Icon class="text-xl" icon="fluent:document-edit-16-regular" />
|
||||
</a>
|
||||
</TopBar>
|
||||
{/if}
|
||||
|
||||
{#if htmlContent || decompressed}
|
||||
<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 htmlContent}
|
||||
{:else if isPlainText}
|
||||
<div class="whitespace-pre-line">
|
||||
{#if isInIframe()}
|
||||
<CodeView
|
||||
class="prose dark:prose-invert w-full max-w-full h-full"
|
||||
{isMarkdown}
|
||||
{isPlainText}
|
||||
{decompressed}
|
||||
</div>
|
||||
{htmlContent}
|
||||
/>
|
||||
{:else}
|
||||
<pre><code>{@html htmlContent}</code></pre>
|
||||
<CodeView
|
||||
class="prose dark:prose-invert lg:py-12 p-[0.5em] md:max-w-3xl md:mx-auto lg:max-w-4xl"
|
||||
{isMarkdown}
|
||||
{isPlainText}
|
||||
{decompressed}
|
||||
{htmlContent}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/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>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
Loading…
Reference in New Issue
Block a user