iframe layout

src/app.html

@@ -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"

src/components/CodeView.svelte

@@ -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>

src/components/EditForm.svelte

@@ -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={copyUrl} title="Copy">
-      <button class="button" on:click={closeUrlInput}>Close</button>
+        <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" />

src/components/TopBar.svelte

@@ -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>

src/lib/utils.ts

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

src/routes/+page.svelte

@@ -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 isInIframe()}
-        {#if isMarkdown}
+        <CodeView
-          {@html htmlContent}
+          class="prose dark:prose-invert w-full max-w-full h-full"
-        {:else if isPlainText}
+          {isMarkdown}
-          <div class="whitespace-pre-line">
+          {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">