Merge pull request #1596 from Zokhoi/frontend

Frontend related features

deepwell/src/services/view/service.rs

@@ -91,21 +91,21 @@ impl ViewService {
         };
 
         // If None, means the main page for the site. Pull from site data.
-        let (page_slug, page_extra): (&str, &str) = match &route {
+        let (page_full_slug, page_extra): (&str, &str) = match &route {
             None => (&site.default_page, ""),
             Some(PageRoute { slug, extra }) => (slug, extra),
         };
 
-        let redirect_page = Self::should_redirect_page(page_slug);
+        let redirect_page = Self::should_redirect_page(page_full_slug);
         let options = PageOptions::parse(page_extra);
 
         // Get page, revision, and text fields
-        let (category_slug, page_slug) = split_category(page_slug);
+        let (category_slug, page_only_slug) = split_category(page_full_slug);
         let page_info = PageInfo {
-            page: cow!(page_slug),
+            page: cow!(page_only_slug),
             category: cow_opt!(category_slug),
             site: cow!(&site.slug),
-            title: cow!(page_slug),
+            title: cow!(page_only_slug),
             alt_title: None,
             score: ScoreValue::Integer(0), // TODO configurable default score value
             tags: vec![],
@@ -128,7 +128,7 @@ impl ViewService {
         let (status, wikitext, compiled_html) = match PageService::get_optional(
             ctx,
             site.site_id,
-            Reference::Slug(cow!(page_slug)),
+            Reference::Slug(cow!(page_full_slug)),
         )
         .await?
         {

framerail/src/lib/server/page/delete.ts

@@ -0,0 +1,28 @@
+import { wellfetch } from "$lib/server/deepwell/index.ts"
+import type { Optional } from "$lib/types.ts"
+
+export async function pageDelete(
+  siteId: number,
+  pageId: Optional<number>,
+  slug: string,
+  revisionComments: Optional<string>
+): Promise<object> {
+  const response = await wellfetch("/page", {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      siteId,
+      page: pageId ?? slug,
+      userId: 1, // TODO: identify user session and pass the user to the API request
+      revisionComments
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error("Unable to delete page")
+  }
+
+  return response.json()
+}

framerail/src/lib/server/page/edit.ts

@@ -0,0 +1,38 @@
+import { wellfetch } from "$lib/server/deepwell/index.ts"
+import type { Optional } from "$lib/types.ts"
+
+export async function pageEdit(
+  siteId: number,
+  pageId: Optional<number>,
+  slug: string,
+  revisionComments: Optional<string>,
+  wikitext: string,
+  title: string,
+  altTitle: string,
+  tags: string[]
+): Promise<object> {
+  let endpoint = pageId ? "/page" : "/page/create"
+  const response = await wellfetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      siteId,
+      page: pageId ?? slug,
+      slug,
+      userId: 1, // TODO: identify user session and pass the user to the API request
+      revisionComments,
+      wikitext,
+      title,
+      altTitle,
+      tags
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error("Unable to save data to server")
+  }
+
+  return response.json()
+}

framerail/src/lib/server/page/history.ts

@@ -0,0 +1,29 @@
+import { wellfetch } from "$lib/server/deepwell/index.ts"
+import type { Optional } from "$lib/types.ts"
+
+export async function pageHistory(
+  siteId: number,
+  pageId: Optional<number>,
+  revisionNumber: Optional<Number>,
+  limit: Optional<Number>
+): Promise<object> {
+  const response = await wellfetch("/page/revision/range", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      siteId,
+      pageId,
+      revisionNumber,
+      revisionDirection: "before",
+      limit
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error("Unable to get data from server")
+  }
+
+  return response.json()
+}

framerail/src/lib/server/page/index.ts

@@ -0,0 +1,4 @@
+export { pageDelete } from "$lib/server/page/delete"
+export { pageEdit } from "$lib/server/page/edit"
+export { pageHistory } from "$lib/server/page/history"
+export { pageMove } from "$lib/server/page/move"

framerail/src/lib/server/page/move.ts

@@ -0,0 +1,30 @@
+import { wellfetch } from "$lib/server/deepwell/index.ts"
+import type { Optional } from "$lib/types.ts"
+
+export async function pageMove(
+  siteId: number,
+  pageId: Optional<number>,
+  slug: string,
+  newSlug: string,
+  revisionComments: Optional<string>
+): Promise<object> {
+  const response = await wellfetch("/page/move", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      siteId,
+      page: pageId ?? slug,
+      newSlug,
+      userId: 1, // TODO: identify user session and pass the user to the API request
+      revisionComments
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error("Unable to send data to server")
+  }
+
+  return response.json()
+}

framerail/src/lib/sigma-esque/sigma-esque.svelte

@@ -0,0 +1,159 @@
+<div class="sigma-esque-container">
+  <div class="header">
+    <slot name="header" />
+  </div>
+
+  <div class="top-bar">
+    <slot name="top-bar" />
+  </div>
+
+  <div class="page-content-container">
+    <slot name="content" />
+  </div>
+
+  <div class="footer">
+    <slot name="footer" />
+  </div>
+</div>
+
+<!-- Ignoring the styling as being a theme it will inevitably style other elements in the entire layout -->
+<!-- svelte-ignore css-unused-selector -->
+<style global lang="scss">
+  body {
+    margin: 0;
+  }
+
+  .clickable {
+    cursor: pointer;
+    user-select: none;
+
+    &:disabled {
+      cursor: auto;
+    }
+  }
+
+  .sigma-esque-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+    min-height: 100vh;
+    background-color: #fff;
+
+    textarea,
+    input[type="text"] {
+      padding: 0.5em 1em;
+      border-radius: 0.5em;
+    }
+  }
+
+  .header {
+    box-sizing: border-box;
+    width: 100%;
+    height: 10em;
+    padding: 1em 2em;
+    color: #fff;
+    background: linear-gradient(180deg, #0068b5 0%, #19a9ff 100%);
+  }
+
+  .top-bar {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 3em;
+    padding: 0 2em;
+    color: #fff;
+    background-color: #2b2b32;
+  }
+
+  .page-content-container {
+    flex: 1;
+    width: 80vw;
+    margin: 2em auto;
+  }
+
+  .footer {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 3em;
+    padding: 0 2em;
+    color: #fff;
+    background-color: #2b2b32;
+  }
+
+  .action-row {
+    .action-button {
+      padding: 0.5em 1em;
+      border-radius: 0.5em;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    .sigma-esque-container {
+      color: #111;
+      background-color: #fff;
+
+      textarea,
+      input[type="text"] {
+        color: #111;
+        background-color: #fff;
+        border: 1px solid #0006;
+      }
+    }
+
+    .page-content-container {
+      hr {
+        color: #f0f0f0;
+      }
+      a {
+        color: #0066cc;
+      }
+    }
+
+    .action-row {
+      .action-button {
+        color: #111;
+        background-color: #fff;
+        border: 1px solid #0006;
+      }
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .sigma-esque-container {
+      color: #b6c2cf;
+      background-color: #222;
+
+      textarea,
+      input[type="text"] {
+        color: #b6c2cf;
+        background-color: #222;
+        border: 1px solid #b6c2cf;
+      }
+    }
+
+    .page-content-container {
+      hr {
+        color: #bbb;
+      }
+      a {
+        color: #44aaff;
+      }
+    }
+
+    .action-row {
+      .action-button {
+        color: #b6c2cf;
+        background-color: #222;
+        border: 1px solid #b6c2cf;
+      }
+    }
+  }
+</style>