Add base template for website preview route

web-app/src/lib/components/Modal.svelte

@@ -22,7 +22,10 @@
   }
 
   .modal:target {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
   }
 
   .modal__closeoverlay {
@@ -41,12 +44,10 @@
     background-color: var(--bg-primary);
     border-radius: var(--border-radius);
     border: var(--border-primary);
+    inline-size: 300px;
+    max-inline-size: 100%;
+    max-block-size: calc(100vh - 2rem);
+    overflow-y: auto;
     z-index: 20;
-    position: absolute;
-    max-inline-size: 300px;
-    margin-inline: auto;
-    inset-block-start: 2rem;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
   }
 </style>

web-app/src/lib/components/WebsiteEditor.svelte

@@ -3,10 +3,17 @@
   import markdownit from "markdown-it";
   import hljs from "highlight.js";
 
-  const { id, title, children, previewContent } = $props<{
+  const {
+    id,
+    title,
+    children,
+    fullPreview = false,
+    previewContent
+  } = $props<{
     id: string;
     title: string;
     children: Snippet;
+    fullPreview?: boolean;
     previewContent: string;
   }>();
 
@@ -31,13 +38,18 @@
   <nav class="operations__nav">
     <a href="/website/{id}">Settings</a>
     <a href="/website/{id}/articles">Articles</a>
+    <a href="/website/{id}/publish">Publish</a>
   </nav>
 
   {@render children()}
 </div>
 
 <div class="preview">
-  {@html md.render(previewContent)}
+  {#if fullPreview}
+    <iframe src={previewContent} title="Preview"></iframe>
+  {:else}
+    {@html md.render(previewContent)}
+  {/if}
 </div>
 
 <style>
@@ -53,12 +65,8 @@
 
   .operations__nav {
     margin-block: 1rem 2rem;
-  }
-
-  .operations__nav > a {
-    display: inline-block;
-    padding-inline: 0.5rem;
-    padding-block: 0.25rem;
+    display: flex;
+    gap: 1rem;
     overflow-x: auto;
   }
 
@@ -67,4 +75,10 @@
     flex-direction: column;
     gap: 1rem;
   }
+
+  iframe {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--border-primary);
+  }
 </style>