Add some helpers for editing static content pages (#253)

Co-authored-by: Elevator Dev (ubuntu) <[email protected]>

.prettierrc.json

@@ -1 +1,4 @@
-{}
+{
+  "htmlWhitespaceSensitivity": "ignore",
+  "bracketSameLine": true
+}

src/css/app.css

@@ -96,6 +96,22 @@ a:hover {
   color: var(--app-textColor);
 }
 
+.prose img,
+.prose iframe {
+  border: 1px solid #ccc;
+  background: #eee;
+  border-radius: 0.5rem;
+}
+
+.prose iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.prose a {
+  font-weight: inherit;
+}
+
 h1,
 h2,
 h3,
@@ -149,3 +165,93 @@ h6 {
     transform: translate3d(4px, 0, 0);
   }
 }
+
+/**
+* CLASSES THAT CAN BE USED ON STATIC PAGES
+* (all prefixed with `el-` to avoid conflicts)
+**/
+
+.el-btn {
+  display: inline-block;
+  border: var(--app-button-borderWidth) solid var(--app-button-borderColor);
+  background: var(--app-button-primary-backgroundColor);
+  color: var(--app-button-primary-textColor);
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    border-color: var(--app-button-primary-hover-borderColor);
+    background: var(--app-button-primary-hover-backgroundColor);
+    color: var(--app-button-primary-hover-textColor);
+    text-decoration: none;
+  }
+
+  &:active {
+    border-color: var(--app-button-primary-active-borderColor);
+    background: var(--app-button-primary-active-backgroundColor);
+    color: var(--app-button-primary-active-textColor);
+    text-decoration: none;
+  }
+
+  &:disabled {
+    border-color: var(--app-button-primary-disabled-borderColor);
+    background: var(--app-button-primary-disabled-backgroundColor);
+    color: var(--app-button-primary-disabled-textColor);
+    cursor: not-allowed;
+  }
+}
+
+.el-text-center {
+  @apply text-center;
+}
+
+.el-alert {
+  @apply p-4 text-neutral-900 rounded-2xl border border-solid border-neutral-100 bg-neutral-100 text-sm;
+  background-image: url("/img/warning-icon.svg");
+  background-position: 1rem 1.25rem;
+  background-repeat: no-repeat;
+  background-size: 1.5rem;
+  padding-left: 3.5rem;
+
+  & p {
+    margin-bottom: 0;
+    margin-top: 0.5em;
+  }
+}
+
+.el-alert-warning {
+  @apply bg-amber-300;
+  background-image: url("/img/warning-icon.svg");
+}
+
+.el-grid {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 480px) {
+  .el-grid--2-cols,
+  .el-grid--1\/2-1\/2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .el-grid--3-cols {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .el-grid--2\/3-1\/3 {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  }
+  .el-grid--1\/3-2\/3 {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  }
+  .el-grid--1\/4-1\/4-1\/2 {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
+  }
+  .el-grid--1\/2-1\/4-1\/4 {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+
+/** END CLASSES THAT CAN BE USED ON STATIC PAGES **/

src/pages/HomePage/HomePage.vue

@@ -5,23 +5,20 @@
     </template>
     <SignInRequiredNotice
       v-if="isReady && !canSearchAndBrowse && !instanceStore.isLoggedIn"
-      class="my-8 mx-4"
-    />
+      class="my-8 mx-4" />
     <div
       v-if="isReady && canSearchAndBrowse"
       class="home-page-content flex-1 md:grid max-w-screen-xl w-full mx-auto"
       :class="{
         'md:grid-cols-2': !featuredAssetId,
         'md:grid-cols-3': featuredAssetId,
-      }"
-    >
+      }">
       <article class="page-content-block col-span-2 p-4 lg:p-8">
         <Transition v-if="page" name="fade">
           <SanitizedHTML
             v-if="page.content"
             :html="page.content"
-            class="prose prose-neutral"
-          />
+            class="prose prose-neutral" />
           <section v-else class="bg-white p-8 my-8 shadow-sm">
             <h1 class="text-4xl text-center font-bold">
               {{ instanceStore.instance?.name ?? "Elevator" }}
@@ -31,8 +28,7 @@
       </article>
       <aside
         v-if="featuredAssetId"
-        class="featured-asset-block col-span-1 p-4 lg:p-8"
-      >
+        class="featured-asset-block col-span-1 p-4 lg:p-8">
         <h2 class="text-sm font-bold uppercase mb-2">Featured</h2>
         <div class="mb-4">
           <SanitizedHTML :html="featuredAssetText" />
@@ -43,8 +39,7 @@
     <Notification
       v-else-if="isReady && !canSearchAndBrowse && instanceStore.isLoggedIn"
       title="Nothing to See Here"
-      class="my-8 mx-4"
-    >
+      class="my-8 mx-4">
       <p>
         Your account does not have permission to search and browse assets.
         Please contact your administrator if you believe this is an error.

src/pages/StaticContentPage/StaticContentPage.vue

@@ -5,12 +5,18 @@
     </template>
     <div
       v-if="page"
-      class="static-page__content p-4 lg:p-8 mx-auto flex-1 w-full max-w-screen-xl"
-    >
-      <div class="prose prose-neutral">
-        <h1 class="text-4xl font-bold">
-          {{ page.title || "No Title" }}
+      class="static-page__content p-4 lg:p-8 mx-auto flex-1 w-full max-w-screen-xl">
+      <a
+        v-if="canCurrentUserEdit"
+        :href="`${BASE_URL}/instances/editPage/${pageId}`"
+        class="float-right uppercase text-xs font-medium bg-blue-100 px-2 py-1 rounded-md no-underline hover:bg-blue-600 hover:text-blue-100 hover:no-underline">
+        Edit Page
+      </a>
+      <div class="prose prose-neutral mx-auto">
+        <h1 class="text-4xl font-bold text-center">
+          {{ page.title || "Untitled" }}
         </h1>
+
         <SanitizedHTML :html="page.content ?? ''" class="w-full" />
       </div>
     </div>
@@ -24,19 +30,28 @@ import DefaultLayout from "@/layouts/DefaultLayout.vue";
 import CustomAppHeader from "@/components/CustomAppHeader/CustomAppHeader.vue";
 import SanitizedHTML from "@/components/SanitizedHTML/SanitizedHTML.vue";
 import AppFooter from "@/components/AppFooter/AppFooter.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { ApiStaticPageResponse } from "@/types";
 import { useInstanceStore } from "@/stores/instanceStore";
 import api from "@/api";
+import config from "@/config";
 
 const instanceStore = useInstanceStore();
 
 const props = defineProps<{
   pageId: number;
 }>();
 
+const BASE_URL = config.instance.base.path;
 const page = ref<ApiStaticPageResponse | null>(null);
 
+const canCurrentUserEdit = computed(() => {
+  return (
+    instanceStore.currentUser?.isAdmin ||
+    instanceStore.currentUser?.isSuperAdmin
+  );
+});
+
 watch(
   () => props.pageId,
   async () => {