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">
+  {#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>

web-app/src/routes/(authenticated)/+page.svelte

@@ -136,7 +136,7 @@
               >
                 <input type="hidden" name="id" value={id} />
 
-                <button type="submit">Permanently delete website</button>
+                <button type="submit">Delete website</button>
               </form>
             </Modal>
           </div>

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -57,7 +57,7 @@
         <input type="password" name="password" required />
       </label>
 
-      <button type="submit">Permanently delete account</button>
+      <button type="submit">Delete account</button>
     </form>
   </Modal>
 </section>

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -35,7 +35,7 @@
         />
       </label>
       <label>
-        Light accent color:
+        Dark accent color:
         <input
           type="color"
           name="accent-color-dark"

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts

@@ -50,12 +50,13 @@ export const load = async ({ params, fetch, cookies, url, parent }) => {
   });
 
   const articles = await articlesData.json();
-  const { website } = await parent();
+  const { website, home } = await parent();
 
   return {
     totalArticleCount,
     articles,
-    website
+    website,
+    home
   };
 };
 

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -94,7 +94,7 @@
               >
                 <input type="hidden" name="id" value={id} />
 
-                <button type="submit">Permanently delete article</button>
+                <button type="submit">Delete article</button>
               </form>
             </Modal>
           </div>

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -12,7 +12,8 @@
 <WebsiteEditor
   id={data.website.id}
   title={data.website.title}
-  previewContent={data.article.main_content}
+  previewContent={data.article.main_content ||
+    "Put some markdown content in main content to see a live preview here"}
 >
   <section>
     <h2>Edit article</h2>

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts

@@ -0,0 +1,19 @@
+import { randomUUID } from "node:crypto";
+import { mkdir, writeFile } from "node:fs/promises";
+import { extname, join, relative } from "node:path";
+
+export const load = async ({ parent }) => {
+  const { website } = await parent();
+
+  return {
+    website
+  };
+};
+
+export const actions = {
+  publishWebsite: async ({ fetch }) => {
+    console.log("test");
+  }
+};
+
+const generateWebsiteOutput = async () => {};

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+
+  const { data } = $props();
+</script>
+
+<WebsiteEditor
+  id={data.website.id}
+  title={data.website.title}
+  previewContent="https://aurora.thilohohlt.com"
+  fullPreview={true}
+>
+  <section>
+    <h2>Publish website</h2>
+
+    <p>
+      The preview area on this page allows you to see exactly how your website will look when it is
+      is published. If you are happy with the results, click the button below and your website will
+      be published on the Internet.
+    </p>
+
+    <form method="POST" action="?/publishWebsite" use:enhance>
+      <button type="submit">Publish</button>
+    </form>
+  </section>
+</WebsiteEditor>