c0ckp1t 1.0.0

package/components/xmarkdown.vue

@@ -0,0 +1,269 @@
+<!-- -------------------------------------------------------------------------------- -->
+<!--                                 SCRIPT                                           -->
+<!-- -------------------------------------------------------------------------------- -->
+<script setup>
+/*
+    <XMarkdown :v="local.text"
+               :fetchImage="apiMain.fetchImage"
+               :fetchText="apiMain.fetchText"
+               @href="href"
+    ></XMarkdown>
+*/
+// ______________________________________________________________________________________
+// IMPORT
+// ______________________________________________________________________________________
+import {reactive, ref, markRaw, onMounted,  watch, computed, onErrorCaptured, defineAsyncComponent} from 'vue'
+// import {store, methods} from 'GlobalStore'
+import {getLogger} from "Logging"
+import {md} from "./Markdown.mjs"
+
+import CodeItem from "/core/sfc/code-item.vue"
+
+import {
+  replaceHrefLinks,
+  replaceImgLinks,
+  replaceVueSpecial,
+  removeMarkdownHeader,
+  slugify,
+  extractSizeFromAlt, decorateTableHTML
+} from "./MarkdownUtils.mjs";
+
+const props = defineProps({
+  v: {
+    type: String,
+    default: "## Empty v directive"
+  },
+  adjustHrefPath: Function,
+  fetchImage: Function,
+  fetchText: {
+    type: Function,
+    default: async (url) => `${url} text`
+  }
+})
+
+const emit = defineEmits(['href'])
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'xmarkdown.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("init")
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+
+  markdownComponent: null,
+
+  images: null,
+  text: null,
+})
+
+// ______________________________________________________________________________________
+// RENDING VUE COMPONENT
+// ______________________________________________________________________________________
+// Note: Helper functions have been extracted to MarkdownUtils.mjs for testability
+
+
+// We do not support recursive injection
+async function injectText(text) {
+  logger.debug(`Scanning for markdown injection`)
+
+  // Fetch all
+  const promises = [];
+  text.replace(/{%\s*include\s+(.*?)\s*%}/g, (match, param) => {
+    logger.debug(`[REGEX_INJECT] match=${match} param=${param}`)
+    const promise = props.fetchText(param)
+    promises.push(promise);
+  });
+
+  // Replace all
+  const results = await Promise.all(promises)
+
+  let currentIndex = 0;
+  return text.replace(/{%\s*include\s+(.*?)\s*%}/g, () => results[currentIndex++]);
+}
+
+async function injectTextV2(text) {
+  logger.debug(`[INJECT_TEXT] - Version 2`)
+
+  // Fetch all
+  const promises = [];
+  text.replace(/<div data-ref="([^"]+)".*?><\/div>/g, (match, param) => {
+    logger.debug(`match=${match} param=${param}`)
+
+    const refRegex = /data-(id|lines)="([^"]+)"/g;
+    const refMatch = refRegex.exec(match)
+    if(refMatch !== null) {
+      logger.debug(`type=${refMatch[1]} refId=${refMatch[2]}`)
+      const promise = props.fetchText(param, refMatch[2])
+      promises.push(promise);
+    } else {
+      const promise = props.fetchText(param)
+      promises.push(promise);
+    }
+
+  });
+
+  // Replace all
+  const results = await Promise.all(promises);
+  logger.trace("received injection text:")
+  logger.trace(results)
+  let currentIndex = 0;
+  return text.replace(/<div data-ref="([^"]+)".*?><\/div>/g, () => results[currentIndex++]);
+}
+
+
+async function fetchAllText() {
+  const fetchPromises = Object.keys(local.text).map(relativeURL => {
+    logger.debug(`fetchText - ${relativeURL}`)
+    return props.fetchText(relativeURL).then(text => {
+      logger.debug(text)
+      local.text[relativeURL] = text
+    });
+  });
+  await Promise.all(fetchPromises);
+}
+
+async function fetchAllImages() {
+  const fetchPromises = Object.keys(local.images).map(relativeURL => {
+    logger.debug(`fetchImage - ${relativeURL}`)
+    return props.fetchImage(relativeURL).then(blobUrl => {
+      console.log(blobUrl)
+      local.images[relativeURL] = blobUrl
+    });
+  });
+  await Promise.all(fetchPromises);
+}
+
+// ______________________________________________________________________________________
+// markdown component
+// ______________________________________________________________________________________
+function renderMarkdown(html) {
+  logger.debug("debugHTML")
+  logger.debug(html)
+
+  return {
+    template: html,
+    components: {
+      CodeItem,
+    },
+    data: () => {
+      return {
+        images: local.images,
+        text: local.text
+      }
+    },
+    methods: {
+      href(path) {
+        emit('href', path)
+      },
+      scrollToAnchor(anchor) {
+        // Remove the # from anchor
+        let id = anchor.startsWith('#') ? anchor.slice(1) : anchor
+
+        // Normalize the ID using the same slugification as markdown-it-anchor
+        // This ensures we find headers even if the markdown link wasn't perfectly formatted
+        const normalizedId = slugify(id)
+
+        // Try normalized ID first
+        let target = document.getElementById(normalizedId)
+
+        // Fallback: try the original ID in case it was already correct
+        if (!target && normalizedId !== id) {
+          target = document.getElementById(id)
+          logger.debug(`Trying original ID: ${id}`)
+        }
+
+        if (target) {
+          // Smooth scroll to the element
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          })
+
+          // Optional: Update URL hash without triggering router
+          // history.replaceState(null, '', `${window.location.pathname}${window.location.search}${anchor}`)
+
+          logger.debug(`Scrolled to anchor: ${anchor} (normalized: ${normalizedId})`)
+        } else {
+          logger.warn(`Anchor target not found: ${anchor} (tried IDs: ${normalizedId}, ${id})`)
+        }
+      }
+    },
+    mounted() {
+      fetchAllImages()
+    }
+  }
+}
+
+// ______________________________________________________________________________________
+// MAIN - each time markdown text form prop.v changes we re-build vue component
+// ______________________________________________________________________________________
+watch(() => props.v, (val) => {
+  if(val !== null && val !== "") {
+    buildComponent(val)
+  }
+})
+
+async function buildComponent(markdownText) {
+  logger.trace("markdown original text")
+  logger.trace(markdownText)
+
+  let markdown =  removeMarkdownHeader(markdownText)
+  // markdown = await injectText(markdown)
+  markdown = await injectTextV2(markdown)
+  logger.trace("markdown after injection")
+  logger.trace(markdown)
+
+  let html = md.render(markdown)
+  html = `<div>${html}</div>`
+  html = replaceVueSpecial(html)
+  html = replaceHrefLinks(html, props.adjustHrefPath)
+  html = decorateTableHTML(html)
+
+  // Initialize images object before replacing img links
+  local.images = {}
+  html = replaceImgLinks(html)
+
+  local.markdownComponent = markRaw(renderMarkdown(html))
+}
+
+
+// ______________________________________________________________________________________
+// INIT
+// ______________________________________________________________________________________
+
+onMounted(() => {
+  logger.debug(`init`)
+  buildComponent(props.v)
+})
+
+onErrorCaptured((err, instance, info) => {
+  logger.warn("onErrorCaptured")
+  console.log(instance)
+  console.log(info)
+  console.log(err)
+  return false; // prevents the error from propagating further
+})
+</script>
+
+<template>
+  <div class="xmarkdown" v-if="local.markdownComponent !== null">
+    <component :is=local.markdownComponent ></component>
+  </div>
+</template>
+
+
+<style scoped>
+/* xmarkdown.vue */
+.xmarkdown {
+  //width: 100%;
+  //overflow-x: auto;  /* Enable horizontal scrolling for wide content */
+  //min-width: 0;      /* Allow shrinking in flex context */
+}
+
+</style>

package/components/xnav.vue

@@ -0,0 +1,98 @@
+<script setup>
+/*
+v-model is a String that determine which item is selected.
+  We use v-model instead of emit so that we can programmatically select item
+
+arr is the list of items to display. It is a list of objects with the following schema:
+[
+  { id: "item1", label: "Item 1", },
+  { id: "item1", label: "Item 1", },
+]
+
+<x-nav :arr="local.xnav" v-model="local.xNavSel" :isVertical="true"></x-nav>
+<x-nav :arr="local.navItems" v-model="local.navSel"><x-nav>
+
+*/
+import {reactive, ref, computed} from 'vue'
+
+const props = defineProps({
+  isVertical: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: String,
+    default: "item1"
+  },
+  arr: {
+    type: Array,
+    default: [
+      {id: "item1", label: "Item 1"},
+      {id: "item2", label: "Item 2"}
+    ]
+  }
+})
+
+// const id = ref(`id${generateRandomInt32()}`)
+
+const emit = defineEmits(['update:modelValue', 'callback'])
+const v = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val)
+  }
+});
+
+function select(item) {
+  // console.log(`[${id}] - selected - ${item.id}`)
+  if (v.value === item.id) {
+    v.value = null
+  } else {
+    emit('callback', item.id)
+    v.value = item.id
+  }
+}
+
+
+</script>
+
+
+<template>
+  <nav class="nav custom-nav" :class="{'flex-column': props.isVertical}">
+    <a v-for="item in props.arr" class="nav-link" :class="{'active': item.id === v}" @click="select(item)">
+      {{ item.label }}
+    </a>
+  </nav>
+</template>
+
+<style scoped>
+
+
+.custom-nav {
+  border-radius: 0.375rem;
+  background-color: #f8f9fa;
+  padding: 0.5rem;
+}
+
+.nav-link.active {
+  background-color: #0d6efd;
+  color: white;
+  font-weight: 600;
+}
+
+.nav-link:hover {
+  background-color: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
+
+.nav-link {
+  color: #495057;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  margin: 0.125rem 0;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+</style>
+

package/components/xsection.vue

@@ -0,0 +1,164 @@
+<script setup>
+
+/*
+    Usage examples:
+    
+    <!-- Simple usage with heading level (1-6, similar to h1-h6) -->
+    <x-section :level="1" k="Page Title"></x-section>
+    <x-section :level="2" k="Major Section"></x-section>
+    <x-section :level="3" k="Section"></x-section>
+    <x-section :level="4" k="Subsection"></x-section>
+    <x-section :level="5" k="Minor Subsection"></x-section>
+    <x-section :level="6" k="Smallest Heading"></x-section>
+    
+    <!-- With color override -->
+    <x-section :level="3" color="danger" k="Warning Section"></x-section>
+    
+    <!-- With header slot for buttons/actions -->
+    <x-section :level="3" k="Configuration">
+      <template v-slot:header>
+        <button class="btn btn-light btn-sm ms-4">Save</button>
+      </template>
+      
+      <x-input k="Port" type="Number" v-model="local.config.port"></x-input>
+    </x-section>
+    
+    Heading Level Defaults:
+    Level 1: fs-1, bg-primary, text-light  (Page title)
+    Level 2: fs-2, bg-primary, text-light  (Major section)
+    Level 3: fs-3, bg-secondary, text-light (Section)
+    Level 4: fs-4, bg-secondary, text-light (Subsection)
+    Level 5: fs-5, bg-body-secondary, text-body (Minor subsection)
+    Level 6: fs-6, bg-body-tertiary, text-body-secondary (Smallest)
+*/
+
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, computed, watch} from 'vue'
+
+const props = defineProps({
+  k: {
+    type: String,
+    default: () => "Default Title"
+  },
+  visible: {
+    type: Boolean,
+    default: () => true
+  },
+  level: {
+    type: Number,
+    default: 3,
+    validator: (value) => value === null || (value >= 1 && value <= 6)
+  },
+  color: {
+    type: String,
+    default: null // Optional override: 'primary', 'secondary', 'success', 'danger', 'warning', 'info'
+  },
+})
+
+// ________________________________________________________________________________
+// LEVEL CONFIGURATION
+// ________________________________________________________________________________
+const levelConfig = {
+  1: { fontSize: 'fs-1', bgClass: 'bg-primary', textClass: 'text-light', btnClass: 'btn-primary' },
+  2: { fontSize: 'fs-2', bgClass: 'bg-primary', textClass: 'text-light', btnClass: 'btn-primary' },
+  3: { fontSize: 'fs-3', bgClass: 'bg-secondary', textClass: 'text-light', btnClass: 'btn-secondary' },
+  4: { fontSize: 'fs-4', bgClass: 'bg-secondary', textClass: 'text-light', btnClass: 'btn-secondary' },
+  5: { fontSize: 'fs-5', bgClass: 'bg-body-secondary', textClass: 'text-body', btnClass: 'btn-secondary' },
+  6: { fontSize: 'fs-6', bgClass: 'bg-body-tertiary', textClass: 'text-body-secondary', btnClass: 'btn-secondary' }
+}
+
+// ________________________________________________________________________________
+// COMPUTED PROPERTIES
+// ________________________________________________________________________________
+const config = computed(() => levelConfig[props.level])
+
+const fontSizeClass = computed(() => config.value.fontSize)
+
+const bgClass = computed(() => {
+  if (props.color) {
+    return `bg-${props.color}`
+  }
+  return config.value.bgClass
+})
+
+const textClass = computed(() => {
+  if (props.color) {
+    // When custom color is used, determine text color based on color type
+    const darkBgColors = ['primary', 'secondary', 'success', 'danger', 'info', 'dark']
+    return darkBgColors.includes(props.color) ? 'text-light' : 'text-dark'
+  }
+  return config.value.textClass
+})
+
+const btnClass = computed(() => {
+  if (props.color) {
+    return `btn-${props.color}`
+  }
+  return config.value.btnClass
+})
+
+watch(() => props.visible, (visible) => {
+  console.log(`visible is: ${visible}`)
+})
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  visible: props.visible
+})
+
+// ________________________________________________________________________________
+// EVENT METHODS
+// ________________________________________________________________________________
+function titleClick() {
+  local.visible = !local.visible
+}
+
+</script>
+
+
+<template>
+  <div class="x-section">
+
+    <div class="row no-select" :class="bgClass">
+      <div class="col" @click="titleClick">
+        <span :class="[fontSizeClass, textClass]" class="title"> {{ props.k }} </span>
+      </div>
+      <div class="col-auto d-flex align-items-center">
+        <slot name="header"></slot>
+        <button class="btn is-small ms-2" :class="btnClass" @click="titleClick">
+          <span class="icon is-small">
+            <i class="fa-solid fa-eye" v-if="local.visible"></i>
+            <i class="fa-solid fa-eye-slash" v-else></i>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="mt-2" v-if="local.visible">
+      <slot></slot>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.no-select {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+}
+
+.x-section {
+  width: 100%; /* Ensures it takes full width */
+}
+
+.title:hover {
+  text-decoration: underline;
+}
+</style>