From dfcb129e69a1b6693a44fa185c49a20214ae2bc4 Mon Sep 17 00:00:00 2001
From: Thilo Hohlt <123883702+thiloho@users.noreply.github.com>
Date: Sat, 3 Aug 2024 18:07:27 +0200
Subject: [PATCH] Add base template for website preview route

---
 web-app/src/lib/components/Modal.svelte       | 15 +++++-----
 .../src/lib/components/WebsiteEditor.svelte   | 30 ++++++++++++++-----
 .../src/routes/(authenticated)/+page.svelte   |  2 +-
 .../(authenticated)/account/+page.svelte      |  2 +-
 .../website/[websiteId]/+page.svelte          |  2 +-
 .../[websiteId]/articles/+page.server.ts      |  5 ++--
 .../website/[websiteId]/articles/+page.svelte |  2 +-
 .../articles/[articleId]/+page.svelte         |  3 +-
 .../[websiteId]/publish/+page.server.ts       | 19 ++++++++++++
 .../website/[websiteId]/publish/+page.svelte  | 27 +++++++++++++++++
 10 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
 create mode 100644 web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte

diff --git a/web-app/src/lib/components/Modal.svelte b/web-app/src/lib/components/Modal.svelte
index 6fe7b3e..445c146 100644
--- a/web-app/src/lib/components/Modal.svelte
+++ b/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>
diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte
index f5fd048..a56b781 100644
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index 416fff8..eca1b74 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte
index 0c6e47b..c6e63ac 100644
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index 29972d5..a1e7a2b 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/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"
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
index 8c917ff..c275cc3 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/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
   };
 };
 
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
index 89522fa..592e459 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
index aea77df..bec604c 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/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>
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
new file mode 100644
index 0000000..0b69389
--- /dev/null
+++ b/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 () => {};
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
new file mode 100644
index 0000000..8a76c10
--- /dev/null
+++ b/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>