Merge pull request #3 from JackalLabs/marston/draft-box

pull into main

.github/workflows/test-deploy.yml

@@ -0,0 +1,35 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy
+
+on:
+  # Runs on pushes targeting the default branch
+  pull_request:
+  push:
+
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  test-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build-only

src/components/DraftDocuments.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="background-blocker" v-if="shouldName" @click.self="cancel">
-    <div id="name-modal" class="modal">
+  <div class="background-blocker" v-if="shouldDraftName || shouldPubName" @click.self="cancel">
+    <div id="name-modal" class="modal" v-if="shouldDraftName">
       <h2>Save Draft</h2>
       <div id="draft-name"><label>
         Draft Name:
@@ -11,11 +11,28 @@
         <button id="btn-cancel" @click="cancel">Cancel</button>
       </div>
     </div>
+    <div id="name-modal" class="modal" v-if="shouldPubName">
+      <h2>Publish Document</h2>
+      <div id="draft-name"><label>
+        Published Name:
+        <input type="text" required v-model="saveDraftFileName"/>
+      </label></div>
+      <div id="draft-buttons">
+        <button id="btn-save" @click="publishFile">Save</button>
+        <button id="btn-cancel" @click="cancel">Cancel</button>
+      </div>
+    </div>
+  </div>
+  <div id="loading" v-if="loading">
+    Loading...
   </div>
 
 <div class="draft-docs">
   <h2>Drafts</h2>
-  <h3 class="add-button" @click="openSaveDraft">+</h3>
+  <div class="action-buttons">
+    <button class="add-button" @click="openSaveDraft">+</button>
+    <button class="public-button" @click="openPubDraft">P</button>
+  </div>
   <ul class="files">
     <li v-for="item in files">
       <div class="file-card" @click="loadFile(item)">
@@ -31,45 +48,58 @@
 
   import { ref, onMounted, Ref } from 'vue'
   import { FolderHandler } from '@jackallabs/jackal.js'
-  const shouldName = ref(false)
+  const shouldDraftName = ref(false)
+  const shouldPubName = ref(false)
+
+  const loading = ref(false)
   const saveDraftFileName = ref("")
 
-  const props = defineProps(['content'])
+  const props = defineProps(['content', 'setter'])
 
   const files:Ref<string[]> = ref([])
 
   function cancel() {
-    shouldName.value = false;
+    shouldDraftName.value = false;
+    shouldPubName.value = false;
   }
 
   function openSaveDraft() {
-    shouldName.value = true;
+    shouldDraftName.value = true;
+  }
+  function openPubDraft() {
+    shouldPubName.value = true;
   }
 
+  function refreshDrafts() {
+    const folder = bStore.getDraftsFolder()
+    files.value = Object.keys(folder.getChildFiles())
+  }
 
   onMounted(() => {
-    bStore.getDraftsFolder().then((folder:FolderHandler) => {
-
-      console.dir(folder)
-
-      const children = folder.getChildFiles()
-      files.value = Object.keys(children)
-    }).catch((e) => {
-      alert(e)
-    })
+    refreshDrafts()
   })
 
   async function saveDraft() {
-    console.log("saving!")
-    console.log(props.content)
-
+    loading.value = true
     await bStore.saveDraft(saveDraftFileName.value, props.content).catch(alert)
+    cancel()
+    refreshDrafts()
+    loading.value = false
+  }
 
+  async function publishFile() {
+    loading.value = true
+    await bStore.publishFinal(saveDraftFileName.value, props.content).catch(alert)
     cancel()
+    refreshDrafts()
+    loading.value = false
   }
 
-  function loadFile(filename:string) {
-    console.log(filename)
+  async function loadFile(filename:string) {
+    loading.value = true
+    const s = await bStore.loadDraft(filename).catch(alert)
+    props.setter(s)
+    loading.value = false
   }
 
 
@@ -95,16 +125,24 @@
   }
 
   .file-card {
-    background-color: lightgray;
-    border-radius: 8px;
+    border-radius: 4px 4px 0px 4px;
     align-items: flex-start;
     flex-direction: column;
     display: flex;
     padding: 4px 10px 4px 10px;
     cursor: pointer;
+    border-left: lightcoral solid 4px;
+    border-bottom: black solid 1px;
+    box-sizing: border-box;
   }
-  .file-card:hover > * {
-    text-decoration: underline;
+
+  button {
+    background-color: lightblue;
+  }
+
+  .file-card:hover {
+    background-color: #f0f0f0;
+    border-bottom: black solid 3px;
   }
 
   .files {
@@ -127,17 +165,20 @@
     border-left: none;
   }
 
-  .add-button {
-    text-align: center;
-    width: 100%;
-    padding: 4px 0px 4px 0px;
+  .action-buttons > * {
     cursor: pointer;
+  }
 
+  .action-buttons {
+    width: 100%;
+    padding: 4px 0px 4px 0px;
     border-bottom: #888888 solid;
-  }
 
-  .add-button:hover {
-    text-decoration: underline;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 10px;
+
   }
 
   .background-blocker {
@@ -147,6 +188,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(255, 255, 255, 0.5);
+    z-index: 100;
   }
 
   .modal {
@@ -168,9 +210,7 @@
     border-width: 6px;
   }
 
-  button {
-    background-color: lightblue;
-  }
+
 
   #draft-buttons {
     margin-top: 30px;
@@ -184,4 +224,11 @@
     margin-top: 10px;
   }
 
+  #loading {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-size: 2rem;
+  }
+
 </style>

src/components/NavBar.vue

@@ -1,6 +1,7 @@
 <template>
   <nav>
     <ul>
+
       <li v-for="(item, index) in navItems" :key="index">
         <router-link :to="item.path">
           <span class="text">{{ item.label }}</span>
@@ -27,6 +28,7 @@ import { navItems } from '@/config/nav.ts'
     float: left;
   }
 
+
   li a {
     display: block;
     color: white;

src/router/index.ts

@@ -13,9 +13,19 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/UserSettings.vue')
   },
   {
-    path: '/:user/:stub(.*)*',
+    path: '/',
     name: 'Home',
     component: () => import('@/views/HomePage.vue')
+  },
+  {
+    path: '/:user/:slug(.*)*',
+    name: 'Article',
+    component: () => import('@/views/HomePage.vue')
+  },
+  {
+    path: '/:user',
+    name: 'Profile',
+    component: () => import('@/views/UserPage.vue')
   }
 ]