webapp: Update blog

phoenix-api/migrations/0000.up.sql

@@ -18,7 +18,7 @@ CREATE TABLE blogs (
     name TEXT NOT NULL,
     slug TEXT NOT NULL UNIQUE,
     navigation JSONB NOT NULL,
-    description TEXT NOT NULL
+    description_html TEXT NOT NULL
 );
 CREATE UNIQUE INDEX index_blogs_on_slug ON blogs (slug);
 

phoenix-api/src/blogs/create_blog.ts

@@ -18,13 +18,13 @@ export async function createBlog(ctx: Context): Promise<Response> {
     name: apiInput.name,
     slug: apiInput.slug,
     navigation: {},
-    description: '',
+    description_html: '',
   };
 
   await ctx.var.db.query(`INSERT INTO blogs
-    (id, created_at, updated_at, name, slug, navigation, description)
+    (id, created_at, updated_at, name, slug, navigation, description_html)
     VALUES($1, $2, $3, $4, $5, $6, $7)`,
-    [blog.id, blog.created_at, blog.updated_at, blog.name, blog.slug, blog.navigation, blog.description],
+    [blog.id, blog.created_at, blog.updated_at, blog.name, blog.slug, blog.navigation, blog.description_html],
   );
 
   return ctx.json(convertToApiResponse(blog));

phoenix-api/src/blogs/create_page.ts

@@ -36,5 +36,7 @@ export async function createPage(ctx: Context): Promise<Response> {
     [page.id, page.created_at, page.updated_at, page.slug, page.type, page.title, page.content_html, page.blog_id],
   );
 
+  await ctx.var.db.query(`UPDATE blogs SET updated_at = $1 WHERE id = $2`, [now, blog.id]);
+
   return ctx.json(convertToApiResponse(page));
 }

phoenix-api/src/blogs/delete_page.ts

@@ -1,14 +1,24 @@
+import { NotFoundError } from "@phoenix/core/errors";
 import { Context } from "../hono_bindings";
 import { checkAuth, checkIsAdmin, parseAndValidateApiInput } from "../utils";
 import { DeletePageInputValidator, convertToApiResponse } from "@phoenix/core/api";
+import { Page } from "@phoenix/core/entities";
 
 export async function deletePage(ctx: Context): Promise<Response> {
   const userId = await checkAuth(ctx);
   await checkIsAdmin(ctx.var.db, userId);
 
   const apiInput = await parseAndValidateApiInput(ctx, DeletePageInputValidator);
 
+  const pageRes = await ctx.var.db.query('SELECT * FROM pages WHERE id = $1', [apiInput.page_id]);
+  if (pageRes.rowCount !== 1) {
+    throw new NotFoundError('page not found');
+  }
+  const page: Page = pageRes.rows[0];
+  const now = new Date();
+
   await ctx.var.db.query('DELETE FROM pages WHERE id = $1', [apiInput.page_id]);
+  await ctx.var.db.query(`UPDATE blogs SET updated_at = $1 WHERE id = $2`, [now, page.blog_id]);
 
   return ctx.json(convertToApiResponse({ ok: true }));
 }

phoenix-api/src/blogs/headless_get_posts.ts

@@ -9,6 +9,7 @@ export async function headlessGetPosts(ctx: Context): Promise<Response> {
   const pagesRes = await ctx.var.db.query(`SELECT pages.* FROM pages
     INNER JOIN blogs ON pages.blog_id = blogs.id
     WHERE blogs.slug = $1
+    ORDER by id DESC
   `,
     [blogSlug],
   );

phoenix-api/src/blogs/update_blog.ts

@@ -20,12 +20,12 @@ export async function updateBlog(ctx: Context): Promise<Response> {
   blog.slug = apiInput.slug ?? blog.slug;
   blog.name = apiInput.name ?? blog.name;
   blog.navigation = apiInput.navigation ?? blog.navigation;
-  blog.description = apiInput.description ?? blog.description;
+  blog.description_html = apiInput.description_html ?? blog.description_html;
 
   await ctx.var.db.query(`UPDATE blogs SET
-    updated_at = $1, slug = $2, name = $3, navigation = $4, description = $5
+    updated_at = $1, slug = $2, name = $3, navigation = $4, description_html = $5
     WHERE id = $6`,
-    [blog.updated_at, blog.slug, blog.name, blog.navigation, blog.description, blog.id],
+    [blog.updated_at, blog.slug, blog.name, blog.navigation, blog.description_html, blog.id],
   );
 
   return ctx.json(convertToApiResponse(blog));

phoenix-api/src/blogs/update_page.ts

@@ -16,7 +16,8 @@ export async function updatePage(ctx: Context): Promise<Response> {
   }
   const page: Page = pageRes.rows[0];
 
-  page.updated_at = new Date();
+  const now = new Date();
+  page.updated_at = now;
   page.slug = apiInput.slug ?? page.slug;
   page.title = apiInput.title ?? page.title;
   page.content_html = apiInput.content_html ?? page.content_html;
@@ -26,6 +27,7 @@ export async function updatePage(ctx: Context): Promise<Response> {
     WHERE id = $5`,
     [page.updated_at, page.slug, page.title, page.content_html, page.id],
   );
+  await ctx.var.db.query(`UPDATE blogs SET updated_at = $1 WHERE id = $2`, [now, page.blog_id]);
 
   return ctx.json(convertToApiResponse(page));
 }

phoenix-api/wrangler.toml

@@ -2,7 +2,22 @@ name = "phoenix-api"
 main = "src/app.ts"
 compatibility_date = "2023-09-18"
 
+
+
+vars = []
+
+
+r2_buckets = [
+  { binding = "r2", bucket_name = "phoenix-dev" }
+]
+
 [placement]
 mode = "smart"
 
-[vars]
+
+
+[env.production]
+
+r2_buckets = [
+  { binding = "r2", bucket_name = "phoenix" }
+]

phoenix-webapp/src/app/router.ts

@@ -9,6 +9,7 @@ import BlogSettings from '@/pages/blogs/settings.vue'
 import Pages from '@/pages/blogs/pages/pages.vue'
 import NewPage from '@/pages/blogs/pages/new.vue'
 import Page from '@/pages/blogs/pages/page.vue'
+import Assets from '@/pages/blogs/assets.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,7 +21,7 @@ const router = createRouter({
     { path: '/blogs/new', component: NewBlog },
     { path: '/blogs/:blog_id', redirect: (to) => `/blogs/${to.params.blog_id}/pages` },
     { path: '/blogs/:blog_id/settings', component: BlogSettings },
-
+    { path: '/blogs/:blog_id/assets', component: Assets },
     { path: '/blogs/:blog_id/pages', component: Pages },
     { path: '/blogs/:blog_id/pages/new', component: NewPage },
     { path: '/blogs/:blog_id/pages/:page_id', component: Page },

phoenix-webapp/src/components/editor.vue → phoenix-webapp/src/components/html_editor.vue

@@ -1,5 +1,6 @@
 <template>
-  <editor-content :editor="editor" class="h-96 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300"/>
+  <editor-content :editor="editor"
+    class="h-96 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300"/>
 </template>
 
 <script lang="ts" setup>

phoenix-webapp/src/components/page_editor.vue

@@ -91,8 +91,12 @@
     </div>
 
       <div class="flex mt-5 w-full">
-          <Editor v-model="contentHtml" name="contentHtml" id="contentHtml" placeholder="What are you thinking about today?" rows="30"
-          />
+        <CfButton>
+          Upload image
+        </CfButton>
+        <HtmlEditor v-model="contentHtml" name="contentHtml" id="contentHtml"
+          placeholder="What are you thinking about today?"
+        />
       </div>
 
 
@@ -111,7 +115,7 @@ import { PageType, type Page } from '@phoenix/core/entities';
 import { useApiClient } from '@/app/api_client';
 import * as api from '@phoenix/core/api';
 import SelectPageType from '@/components/select_page_type.vue';
-import Editor from '@/components/editor.vue';
+import HtmlEditor from '@/components/html_editor.vue';
 
 // props
 const props = defineProps({

phoenix-webapp/src/components/sidebar.vue

@@ -57,6 +57,7 @@ import {
   Cog6ToothIcon,
   HomeIcon,
   DocumentIcon,
+  PhotoIcon,
 } from '@heroicons/vue/24/outline';
 import {
   Menu,
@@ -100,6 +101,7 @@ function setNav() {
     navigation.value = [
       { name: 'Home', to: `/`, icon: HomeIcon, current: false },
       { name: 'Pages', to: `/blogs/${blogId}/pages`, icon: DocumentIcon, current: false },
+      { name: 'Assets', to: `/blogs/${blogId}/assets`, icon: PhotoIcon, current: false },
       { name: 'Settings', to: `/blogs/${blogId}/settings`, icon: Cog6ToothIcon, current: false },
     ];
   } else {

phoenix-webapp/src/pages/blogs/assets.vue

@@ -0,0 +1,21 @@
+<template>
+  <h1>Assets</h1>
+</template>
+
+<script lang="ts" setup>
+// props
+
+// events
+
+// composables
+
+// lifecycle
+
+// variables
+
+// computed
+
+// watch
+
+// functions
+</script>

phoenix-webapp/src/pages/blogs/settings.vue

@@ -17,6 +17,39 @@
     <div v-if="blog">
       <div class="flex flex-col">
 
+        <div class="flex mt-5 w-full">
+          <div class="flex flex-col w-full">
+            <label for="name" class="block text-sm font-medium text-gray-700">
+              Name
+            </label>
+            <div class="mt-1">
+              <input id="name" name="name" type="text"
+                v-model="blog.name" placeholder="Something awesome"
+                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex mt-5 w-full">
+          <div class="flex flex-col w-full">
+            <label for="description" class="block text-sm font-medium text-gray-700">
+              Description
+            </label>
+            <div class="mt-1">
+              <HtmlEditor v-model="blog.description_html" name="description" id="description"
+                placeholder="My awesome blog"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex mt-5 w-full">
+          <CfButton @click="onUpdateBlogClicked" :loading="loading"
+            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
+              Save
+          </CfButton>
+        </div>
+
 
         <div class="flex flex-col">
           <div class="pt-8 grid grid-cols-1 gap-y-6 sm:grid-cols-6 sm:gap-x-6">
@@ -48,6 +81,8 @@ import type { Blog } from '@phoenix/core/entities';
 import { onBeforeMount, ref, type Ref } from 'vue';
 import { getBlog, deleteBlog } from '@phoenix/core/api_client';
 import { useRoute, useRouter } from 'vue-router';
+import HtmlEditor from '@/components/html_editor.vue';
+import * as api from '@phoenix/core/api';
 
 // props
 
@@ -86,6 +121,24 @@ async function fetchData() {
   }
 }
 
+async function onUpdateBlogClicked() {
+  loading.value = true;
+  error.value = '';
+  const apiInput: api.UpdateBlogInput = {
+    blog_id: blogId,
+    name: blog.value!.name,
+    description_html: blog.value!.description_html,
+  };
+
+  try {
+    blog.value = await api.updateBlog($apiClient, apiInput);
+  } catch (err: any) {
+    error.value = err.message;
+  } finally {
+    loading.value = false;
+  }
+}
+
 async function onDeleteClicked() {
   loading.value = true;
   error.value = '';