c0ckp1t 1.0.0

package/components/xtree.vue

@@ -0,0 +1,140 @@
+<script setup>
+/*
+    Usage:
+      <x-tree :items="treeData" @select="onSelect"></x-tree>
+
+      // treeData is an Array of Node objects:
+      Node {
+        label: String,           // Display text
+        path: String,            // Unique identifier/path
+        isDirectory: Boolean,    // true = folder icon, false = file icon
+        expanded: Boolean,       // Initial expanded state (directories only)
+        children: Array<Node>,   // Child nodes (empty array [] for files/empty folders)
+      }
+
+      // Example:
+      const treeData = [
+        {
+          label: "src",
+          path: "/src",
+          isDirectory: true,
+          expanded: true,
+          children: [
+            { label: "App.vue", path: "/src/App.vue", isDirectory: false, expanded: false, children: [] }
+          ]
+        }
+      ]
+
+      function onSelect(item) {
+        console.log("Selected:", item.path)
+      }
+ */
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import { reactive, onMounted } from 'vue'
+
+// ________________________________________________________________________________
+// PROPERTIES & EMITS
+// ________________________________________________________________________________
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['select'])
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  expandedItems: []
+})
+
+// ________________________________________________________________________________
+// EVENTS
+// ________________________________________________________________________________
+function toggle(item) {
+  if (item.children) {
+    item.expanded = !item.expanded
+    select(item)
+    if (item.expanded) {
+      local.expandedItems.push(item)
+    } else {
+      local.expandedItems.splice(local.expandedItems.indexOf(item), 1)
+    }
+  }
+}
+
+function select(item) {
+  // console.log(item)
+  emit('select', item)
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+onMounted(async () => {
+  if (props.items?.length) {
+    local.expandedItems = props.items.filter(item => item.expanded)
+  }
+})
+
+</script>
+
+<template>
+  <div class="x-tree">
+    <div v-if="!items || items.length === 0" class="text-muted ps-2">
+      No Items
+    </div>
+    <ul v-else>
+      <li v-for="item in items" :key="item.path">
+        <div class="d-flex align-items-center">
+          <i class="fa-solid me-1" :class="{
+            'fa-folder': item.isDirectory && !item.expanded,
+            'fa-folder-open': item.isDirectory && item.expanded,
+            'fa-file': !item.isDirectory
+          }"></i>
+          <span class="folder" @click="toggle(item)" v-if="item.children?.length > 0">{{ item.label }}</span>
+          <span class="item" @click="select(item)" v-if="!item.children?.length">{{ item.label }}</span>
+        </div>
+        <x-tree @select="select" v-if="item.children?.length" :items="item.children" v-show="item.expanded"></x-tree>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.x-tree ul {
+  list-style: none;
+  padding-left: 1.2rem;
+  margin: 0;
+}
+
+.item {
+  min-width: 100px;
+}
+
+.item:hover {
+  cursor: pointer;
+  color: var(--bs-primary);
+  background-color: var(--bs-light);
+}
+
+.folder {
+  min-width: 100px;
+}
+
+.fa-folder {
+  color: #FFDB58;
+}
+
+.fa-folder-open {
+  color: #D2691E;
+}
+
+.folder:hover {
+  cursor: pointer;
+  color: var(--bs-primary);
+  background-color: var(--bs-light);
+}
+</style>

package/components/xupload.vue

@@ -0,0 +1,129 @@
+<script setup>
+import {ref, reactive, computed, onMounted, onUnmounted} from 'vue'
+
+const props = defineProps({
+  progress: {
+    type: Number,
+    default: 0,
+  },
+  type: {
+    type: String,
+    default: "IMAGE"
+  }
+})
+
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  src: null,
+  updatedMs: null,
+  file: null
+})
+
+const fileInput = ref();
+const files = ref();
+
+const emit = defineEmits(['callback'])
+
+async function handleChange() {
+  files.value = fileInput.value.files;
+}
+
+async function uploadSelectedFiles() {
+  emit("callback", files.value)
+}
+
+
+const typeObj = computed(() => {
+  // if you change type src must be reset to null
+  local.src = null
+  if(props.type === 'IMAGE') {
+    return {
+      allowUpload: true,
+      accept: `${props.type.toLowerCase()}/*`,
+    }
+  } else if(props.type === 'IMAGE') {
+    return {
+      allowUpload: true,
+      accept: `${props.type.toLowerCase()}/*`,
+    }
+  } else if(props.type === 'VIDEO') {
+    return {
+      allowUpload: true,
+      accept: `${props.type.toLowerCase()}/*`,
+    }
+  } else {
+    return {
+      allowUpload: false,
+      accept: `${props.type.toLowerCase()}/*`,
+    }
+  }
+})
+
+function handleImagePreview(event) {
+  local.file = event.target.files[0];
+  if (!local.file) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    local.src = e.target.result;
+    local.updatedMs = Date.now();
+  };
+  reader.readAsDataURL(local.file);
+}
+
+</script>
+
+
+<template>
+  <div class="x-component x-upload">
+
+    <div class="row">
+      <div class="col">
+        <input ref="fileInput" @change="handleImagePreview" class="form-control" type="file" :accept="typeObj.accept" multiple>
+      </div>
+      <div class="col-auto">
+        <button @click="uploadSelectedFiles" :disabled="!files || files.length === 0">Upload</button>
+      </div>
+    </div>
+
+
+    <div v-if="props.type === 'IMAGE'" class="image-preview mt-2">
+      <img :src="local.src"  class="img-thumbnail"/>
+    </div>
+    <div v-if="props.type === 'AUDIO'" class="mt-2">
+      <audio :src="local.src" controls class="w-100"></audio>
+    </div>
+    <div v-if="props.type === 'VIDEO'" class="mt-2">
+      <video :src="local.src" controls class="w-100"></video>
+    </div>
+
+
+
+    <div v-if="files" class="progress mt-2" role="progressbar" aria-label="Success example" :aria-valuenow="props.progress" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-success" :style="`width: ${Math.max(props.progress, 1)}%`">{{(props.progress >= 100) ? 'DONE' : props.progress}}</div>
+    </div>
+
+    <div v-if="local.src" class="image-preview mt-2">
+      <img :src="local.src" alt="Preview" class="img-thumbnail"/>
+    </div>
+    <div v-if="local.src" class="image-preview mt-2">
+      <audio :src="local.src" controls class="w-100"></audio>
+    </div>
+
+
+  </div>
+</template>
+
+<style scoped>
+/* xupload.vue */
+
+.x-upload {
+  border: 1px solid black;
+  padding: 10px;
+}
+
+
+</style>

package/core/Content.mjs

@@ -0,0 +1,92 @@
+
+/**
+ * This module manages the content articles for the application.
+ */
+import {reactive, ref, markRaw, onMounted, watch, computed, onErrorCaptured} from 'vue'
+import { get, set, del } from '/js_ext/idb-keyval-6.2.2.mjs'
+
+export const articlesFiltered = computed(() => {
+    return Content.articles.filter(article => {
+        return true
+    })
+})
+
+const articlePathToSha1=  "article-path-to-sha1"
+
+export const Content = reactive({
+    // ________________________________________________________________________________
+    // ARTICLES
+    // ________________________________________________________________________________
+    articlesUpdated: null,
+    /**
+     *  [
+     *     {
+     *       name: "Generating Kotlin Documentation",
+     *       desc: "Use Dokka to generate documentation for your Kotlin projects with ease.",
+     *       to: "/docs?p=/Java-Documentation.md",
+     *       updated: "2024-01-01",
+     *       tags: ['programming']
+     *     }, ...
+     *  ]
+     */
+
+    articlePathToSha1Table: {},
+    articles: [],
+    articleTags: []
+})
+
+/**
+ *
+ * @param key
+ * @returns
+ */
+export async function cacheGet(key ) {
+    return get(key) ?? null
+}
+
+export async function cachePut(key, text) {
+    // prevent caching if article no longer exists
+    if(!Content.articlePathToSha1Table[key]){
+        return text
+    }
+    return set(key, text)
+}
+
+export async function cacheDelete(key, text) {
+    return del(key)
+}
+
+async function fetchArticles() {
+    // This table always has latest sha1 for each article path
+    const articlePathToSha1Table = await get(articlePathToSha1) ?? {}
+    const resArticles = await fetch('/documentation/published_articles.json')
+    const jsonArr = (await resArticles.json()).map(article => {
+        article.to = `/docs/${article.path}`
+        article.desc = "N/A"
+        article.updated = article.updatedMs ? new Date(article.updatedMs).toISOString().slice(0, 10) : null
+        article.created = article.createdMs ? new Date(article.createdMs).toISOString().slice(0, 10) : null
+        article.sha1 = article.kv?.sha1 ?? null
+        article.createdMs = null
+
+        if(articlePathToSha1Table[article.path]) {
+            if(articlePathToSha1Table[article.path] !== article.sha1) {
+                del(article.path);
+            }
+        } else {
+            articlePathToSha1Table[article.path] = article.sha1
+        }
+
+        return article
+    }).sort((a, b) => b.updatedMs - a.updatedMs)
+    Content.articles = jsonArr
+    Content.articlesUpdated = Date.now()
+    Content.articleTags = Array.from(new Set(jsonArr.flatMap(article => article.tags || []))).sort()
+
+    await set(articlePathToSha1, articlePathToSha1Table)
+    Content.articlePathToSha1Table = articlePathToSha1Table;
+}
+
+// fetchArticles()
+
+
+

package/core/DocUtils.mjs

@@ -0,0 +1,189 @@
+
+
+import {cacheGet, cachePut, cacheDelete} from "./Content.mjs"
+import {getLogger} from "Logging";
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'DocUtils.mjs'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+
+/**
+ * Documentation Utilities
+ *
+ * read/writes using  /sys/resolver exec interface
+ *  const args = ["read",  remotePathURL];
+ *  return registry.exec("/sys/resolver", args)
+ *
+ */
+export class DocUtils {
+
+    constructor(browserBasePath, remoteBasePath) {
+        this.browserBasePath = "/docs"
+        this.remoteBasePath = "/docs"
+        if(browserBasePath) {
+            if (typeof browserBasePath !== 'string' ) {
+                throw Error(`DocUtils.constructor - invalid browserBasePath=${browserBasePath}`)
+            }
+            this.browserBasePath = browserBasePath.trim()
+        }
+        if(remoteBasePath) {
+            if (typeof remoteBasePath !== 'string' ) {
+                throw Error(`DocUtils.constructor - invalid remoteBasePath=${remoteBasePath}`)
+            }
+            this.remoteBasePath = remoteBasePath.trim()
+        }
+    }
+
+    /**
+     *
+     * /Introduction.md -> /default/docs/Introduction.md
+     * @param currentBrowserPath
+     * @param documentPath
+     * @returns {*|string}
+     */
+    documentPathToBrowserPath = (currentBrowserPath, documentPath) => {
+        if (!documentPath || typeof documentPath !== 'string' || documentPath.trim() === '' ) {
+            return `${this.browserBasePath}/Introduction.md`;
+        }
+        if(documentPath.startsWith('/')) {
+            return normalizePath(`${this.browserBasePath}${documentPath}` )
+        }
+
+        const currentDir = currentBrowserPath.substring(0, currentBrowserPath.lastIndexOf('/') + 1) || '/';
+        const combined = currentDir + documentPath;
+        return normalizePath(combined )
+
+    }
+
+    /**
+     *
+     * /default/docs/Introduction.md -> /docs/Introduction.md
+     * @param browserPath
+     * @returns {*|string}
+     */
+    browserPathToRemotePath = (browserPath) => {
+        logger.debug(`[browserPathToRemotePath]\nbrowserPath=${browserPath}\nbrowserBasePath=${this.browserBasePath}\nremoteBasePath=${this.remoteBasePath}`)
+        return browserPath.replace(this.browserBasePath, this.remoteBasePath)
+    }
+
+    /**
+     * Convert documentURL to remotePath
+     */
+    documentPathToRemotePath = (instanceId, baseBrowserPath, currentPath, documentPath) => {
+        const browserPath = this.documentPathToBrowserPath(baseBrowserPath, currentPath, documentPath)
+        return this.browserPathToRemotePath(instanceId, browserPath)
+    }
+
+    browserPathToDocumentPath = (browserPath) => {
+        if (!browserPath || typeof browserPath !== 'string' || browserPath.trim() === '') {
+            return `/Introduction.md`;
+        }
+        return browserPath.replace(`${this.browserBasePath}/`, "/")
+    }
+
+    /**
+     * WARNING - spacing is important here
+     * @param remotePathURL
+     * @param message
+     * @return {string}
+     */
+    buildFailedMarkdown = (remotePathURL, message) => {
+        return `
+# fetch failed
+
+* remotePathURL=${remotePathURL}
+
+### result
+
+${message}
+`
+    }
+
+    removeFromCache = async (currentPath, documentURL) => {
+        const remotePathURL = this.documentPathToRemotePath(currentPath, documentURL)
+        const key = remotePathURL.substring(remotePathURL.lastIndexOf('/') + 1)
+        await cacheDelete(key)
+    }
+
+    retrieveText = async (registry, remotePath) => {
+        logger.info(`[retrieveText] - remotePath=${remotePath}`)
+        /**
+        const key = remotePathURL.substring(remotePathURL.lastIndexOf('/') + 1)
+        const cachedText = await cacheGet(key)
+        if(cachedText) {
+            logger.debug(`retrieveText: cache HIT for key=${key}`)
+            return {
+                isOk: true,
+                result: cachedText
+            }
+        } else {
+            logger.debug(`retrieveText: cache MISS for key=${key}`)
+        }
+         */
+
+        try {
+            const resp = await registry.getText(remotePath)
+            if(resp.isOk) {
+                // await cachePut(key, resp.result)
+                return resp
+            }
+            return {
+                isOk: false,
+                result: this.buildFailedMarkdown(remotePath, resp.result)
+            }
+        } catch(e) {
+            return {
+                isOk: false,
+                result: this.buildFailedMarkdown(remotePath, `${e.toLocaleString()}`)
+            }
+        }
+    }
+}
+
+// ________________________________________________________________________________
+// HELPER METHODS
+// ________________________________________________________________________________
+/**
+ * Normalize a path by resolving . and .. segments
+ * Won't allow .. to go above the base
+ * @param {string} remainingPath - The path to normalize (without base)
+ * @param {string} base - The base prefix that can't be traversed above (default: '/')
+ */
+export function normalizePath(remainingPath, base = '/') {
+    const segments = remainingPath.split('/');
+    const result = [];
+
+    for (const segment of segments) {
+        if (segment === '' || segment === '.') {
+            continue;
+        } else if (segment === '..') {
+            if (result.length > 0) {
+                result.pop();
+            }
+        } else {
+            result.push(segment);
+        }
+    }
+
+    return base + result.join('/');
+}
+
+/**
+ *  /admin/jte/docs/v4/actions/jte/docs/Introduction.md
+ *  -> /admin/jte/docs
+ *
+ * @param url
+ */
+export function extractBasePathFromURL(url) {
+    const docsMarker = '/docs';
+    const firstDocsIndex = url.indexOf(docsMarker);
+
+    if (firstDocsIndex === -1) {
+        throw Error(`extractBasePathFromURL - docs marker not found in url=${url}`)
+    }
+    return url.slice(0, firstDocsIndex + docsMarker.length);
+}