@docsector/docsector-reader 3.4.0 → 3.6.0

package/src/components/DPageEmbeddedUrl.vue

@@ -0,0 +1,375 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { resolveEmbeddedUrl } from '../composables/useEmbeddedUrl'
+
+defineOptions({
+  name: 'DPageEmbeddedUrl'
+})
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  caption: {
+    type: String,
+    default: ''
+  }
+})
+
+const { t } = useI18n()
+
+const resolved = computed(() => {
+  return resolveEmbeddedUrl(props.url, {
+    title: props.title
+  })
+})
+
+const isEmbedded = computed(() => {
+  return resolved.value.mode === 'embed' && resolved.value.embedSrc !== ''
+})
+
+const isCompactEmbed = computed(() => {
+  return isEmbedded.value && resolved.value.provider === 'spotify'
+})
+
+const displayTitle = computed(() => {
+  return resolved.value.title || props.title || resolved.value.providerLabel || props.url
+})
+
+const displayUrl = computed(() => {
+  return resolved.value.displayUrl || props.url
+})
+
+const compactUrl = computed(() => {
+  return String(displayUrl.value || '').replace(/^https?:\/\//i, '')
+})
+
+const frameStyle = computed(() => {
+  const style = {}
+
+  if (resolved.value.aspectRatio) {
+    style.aspectRatio = resolved.value.aspectRatio
+  } else {
+    style.aspectRatio = 'auto'
+  }
+
+  if (resolved.value.frameHeight > 0) {
+    style.height = `${resolved.value.frameHeight}px`
+    style.minHeight = `${resolved.value.frameHeight}px`
+  }
+
+  return style
+})
+
+const openHref = computed(() => {
+  return resolved.value.canonicalUrl || props.url
+})
+</script>
+
+<template>
+<div
+  class="d-page-embedded-url"
+  :class="{
+    'd-page-embedded-url--compact': isCompactEmbed,
+    'd-page-embedded-url--embedded': isEmbedded,
+    'd-page-embedded-url--fallback': !isEmbedded
+  }"
+>
+  <div
+    v-if="isEmbedded"
+    class="d-page-embedded-url__frame-shell"
+    :style="frameStyle"
+  >
+    <iframe
+      class="d-page-embedded-url__frame"
+      :src="resolved.embedSrc"
+      :title="displayTitle"
+      :allow="resolved.allow || undefined"
+      :allowfullscreen="resolved.allowFullscreen"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>
+  </div>
+
+  <div
+    v-if="!isCompactEmbed || caption"
+    class="d-page-embedded-url__body"
+  >
+    <template v-if="!isCompactEmbed">
+    <div
+      v-if="!isEmbedded"
+      class="d-page-embedded-url__media"
+      aria-hidden="true"
+    >
+      <q-icon
+        :name="resolved.icon || 'link'"
+        size="28px"
+      />
+    </div>
+
+    <div class="d-page-embedded-url__content">
+      <div
+        v-if="resolved.providerLabel"
+        class="d-page-embedded-url__provider"
+      >
+        <q-icon
+          :name="resolved.icon || 'link'"
+          size="16px"
+        />
+        <span>{{ resolved.providerLabel }}</span>
+      </div>
+
+      <div class="d-page-embedded-url__title">{{ displayTitle }}</div>
+
+      <div
+        v-if="compactUrl"
+        class="d-page-embedded-url__url"
+      >{{ compactUrl }}</div>
+
+      <div
+        v-if="caption"
+        class="d-page-embedded-url__caption"
+        v-html="caption"
+      ></div>
+    </div>
+
+    <div class="d-page-embedded-url__actions">
+      <q-btn
+        no-caps
+        unelevated
+        padding="8px 12px"
+        class="d-page-embedded-url__action-button"
+        icon="open_in_new"
+        :label="t('page.file.open')"
+        :href="openHref"
+        target="_blank"
+        rel="noopener noreferrer"
+      />
+    </div>
+    </template>
+
+    <div
+      v-else-if="caption"
+      class="d-page-embedded-url__compact-caption"
+      v-html="caption"
+    ></div>
+  </div>
+</div>
+</template>
+
+<style lang="sass">
+body.body--light
+  --d-page-embedded-url-bg: linear-gradient(180deg, #f7faf5 0%, #ffffff 100%)
+  --d-page-embedded-url-border: rgba(52, 85, 54, 0.14)
+  --d-page-embedded-url-shadow: rgba(52, 85, 54, 0.08)
+  --d-page-embedded-url-frame-bg: rgba(44, 60, 45, 0.04)
+  --d-page-embedded-url-media-bg: rgba(255, 255, 255, 0.92)
+  --d-page-embedded-url-media-border: rgba(52, 85, 54, 0.08)
+  --d-page-embedded-url-accent: #30583a
+  --d-page-embedded-url-meta: #56715c
+  --d-page-embedded-url-caption: #405148
+  --d-page-embedded-url-action-border: rgba(52, 85, 54, 0.18)
+  --d-page-embedded-url-action-hover: rgba(52, 85, 54, 0.06)
+
+body.body--dark
+  --d-page-embedded-url-bg: linear-gradient(180deg, rgba(226, 255, 234, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%)
+  --d-page-embedded-url-border: rgba(214, 245, 224, 0.14)
+  --d-page-embedded-url-shadow: rgba(0, 0, 0, 0.3)
+  --d-page-embedded-url-frame-bg: rgba(255, 255, 255, 0.03)
+  --d-page-embedded-url-media-bg: rgba(255, 255, 255, 0.06)
+  --d-page-embedded-url-media-border: rgba(255, 255, 255, 0.1)
+  --d-page-embedded-url-accent: #b9e2c5
+  --d-page-embedded-url-meta: rgba(255, 255, 255, 0.72)
+  --d-page-embedded-url-caption: rgba(255, 255, 255, 0.9)
+  --d-page-embedded-url-action-border: rgba(214, 245, 224, 0.16)
+  --d-page-embedded-url-action-hover: rgba(214, 245, 224, 0.08)
+
+.d-page-embedded-url
+  margin: 1.5rem 0
+  border: 1px solid var(--d-page-embedded-url-border)
+  border-radius: 18px
+  background: var(--d-page-embedded-url-bg)
+  box-shadow: 0 16px 36px var(--d-page-embedded-url-shadow)
+  overflow: hidden
+
+.d-page-embedded-url__frame-shell
+  position: relative
+  width: 100%
+  min-height: 240px
+  aspect-ratio: 16 / 9
+  background: var(--d-page-embedded-url-frame-bg)
+  border-bottom: 1px solid var(--d-page-embedded-url-border)
+
+.d-page-embedded-url__frame
+  position: absolute
+  inset: 0
+  width: 100%
+  height: 100%
+  border: 0
+  background: transparent
+
+.d-page-embedded-url__body
+  display: flex
+  align-items: center
+  gap: 1rem
+  padding: 0.95rem 1rem
+
+.d-page-embedded-url--embedded
+  .d-page-embedded-url__body
+    padding-top: 1.25rem
+
+  .d-page-embedded-url__content
+    padding-top: 0.1rem
+
+.d-page-embedded-url--compact
+  border: 0
+  border-radius: 0
+  background: transparent
+  box-shadow: none
+  overflow: visible
+
+  .d-page-embedded-url__frame-shell
+    border: 0
+    background: transparent
+
+  .d-page-embedded-url__body
+    display: block
+    padding: 0.6rem 0 0
+
+.d-page-embedded-url__compact-caption
+  margin-top: 0.65rem
+  color: var(--d-page-embedded-url-caption)
+
+  > :first-child
+    margin-top: 0
+
+  > :last-child
+    margin-bottom: 0
+
+.d-page-embedded-url__media
+  width: 56px
+  height: 56px
+  flex: 0 0 56px
+  display: flex
+  align-items: center
+  justify-content: center
+  border-radius: 16px
+  background: var(--d-page-embedded-url-media-bg)
+  box-shadow: inset 0 0 0 1px var(--d-page-embedded-url-media-border)
+  color: var(--d-page-embedded-url-accent)
+
+.d-page-embedded-url__content
+  min-width: 0
+  flex: 1 1 auto
+
+.d-page-embedded-url__provider
+  display: inline-flex
+  align-items: center
+  gap: 0.35rem
+  margin-bottom: 0.35rem
+  color: var(--d-page-embedded-url-meta)
+  font-size: 0.82rem
+  font-weight: 700
+  line-height: 1
+  text-transform: uppercase
+  letter-spacing: 0.06em
+
+.d-page-embedded-url__title
+  font-size: 1rem
+  font-weight: 700
+  line-height: 1.4
+  word-break: break-word
+
+.d-page-embedded-url__url
+  margin-top: 0.2rem
+  color: var(--d-page-embedded-url-meta)
+  font-size: 0.84rem
+  line-height: 1.35
+  word-break: break-all
+
+.d-page-embedded-url__caption
+  margin-top: 0.45rem
+  color: var(--d-page-embedded-url-caption)
+
+  > :first-child
+    margin-top: 0
+
+  > :last-child
+    margin-bottom: 0
+
+.d-page-embedded-url__actions
+  flex: 0 0 auto
+  display: flex
+  align-items: center
+  align-self: stretch
+
+.d-page-embedded-url__action-button
+  min-height: 40px
+  border-radius: 10px
+  border: 1px solid var(--d-page-embedded-url-action-border)
+  background: transparent !important
+  color: var(--d-page-embedded-url-accent) !important
+  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease
+
+  .q-btn__content
+    gap: 0.45rem
+    font-size: 0.9rem
+    font-weight: 600
+    line-height: 1
+
+  .q-focus-helper,
+  &:before,
+  &:after
+    display: none
+
+  &:hover
+    transform: translateY(-1px)
+    background: var(--d-page-embedded-url-action-hover) !important
+
+  &:focus-visible
+    outline: 2px solid var(--d-page-embedded-url-accent)
+    outline-offset: 2px
+
+.d-page-embedded-url--fallback
+  .d-page-embedded-url__body
+    padding-block: 1.05rem
+
+@media (max-width: 720px)
+  .d-page-embedded-url__frame-shell
+    min-height: 200px
+
+  .d-page-embedded-url__body
+    flex-wrap: wrap
+    align-items: flex-start
+
+  .d-page-embedded-url__actions
+    width: 100%
+    justify-content: flex-start
+
+  .d-page-embedded-url__action-button
+    width: 100%
+    justify-content: center
+
+@media (max-width: 520px)
+  .d-page-embedded-url__body
+    gap: 0.85rem
+    padding: 0.9rem
+
+  .d-page-embedded-url__media
+    width: 48px
+    height: 48px
+    flex-basis: 48px
+
+  .d-page-embedded-url__provider
+    font-size: 0.76rem
+
+  .d-page-embedded-url__title
+    font-size: 0.95rem
+</style>

package/src/components/DPageTokens.vue

@@ -24,6 +24,8 @@ import DMermaidDiagram from './DMermaidDiagram.vue'
 import DPageBlockquote from './DPageBlockquote.vue'
 import DPageImage from './DPageImage.vue'
 import DPageFile from './DPageFile.vue'
+import DPageEmbeddedUrl from './DPageEmbeddedUrl.vue'
+import DBlockCard from './DBlockCard.vue'
 import DQuickLinks from './DQuickLinks.vue'
 import DPageExpandable from './DPageExpandable.vue'
 </script>
@@ -105,6 +107,13 @@ import DPageExpandable from './DPageExpandable.vue'
     :caption="token.caption"
   />
 
+  <d-page-embedded-url
+    v-else-if="token.tag === 'embedded-url'"
+    :url="token.url"
+    :title="token.title"
+    :caption="token.caption"
+  />
+
   <d-page-source-code
     v-else-if="token.tag === 'code'"
     :index="id + token.codeIndex"
@@ -120,6 +129,12 @@ import DPageExpandable from './DPageExpandable.vue'
     :content="token.content"
   />
 
+  <d-block-card
+    v-else-if="token.tag === 'cards'"
+    :title="token.title"
+    :items="token.items"
+  />
+
   <d-quick-links
     v-else-if="token.tag === 'quick-links'"
     :title="token.title"

package/src/components/page-section-tokens.js

@@ -13,9 +13,11 @@ const ALERT_MESSAGE_TYPES = new Set([
   'caution'
 ])
 
+const CARDS_MARKER_PREFIX = '@@DOCSECTOR_CARDS_'
 const QUICK_LINKS_MARKER_PREFIX = '@@DOCSECTOR_QUICK_LINKS_'
 const EXPANDABLE_MARKER_PREFIX = '@@DOCSECTOR_EXPANDABLE_'
 const FILE_MARKER_PREFIX = '@@DOCSECTOR_FILE_'
+const EMBEDDED_URL_MARKER_PREFIX = '@@DOCSECTOR_EMBEDDED_URL_'
 const CODE_SEGMENT_MARKER_PREFIX = '@@DOCSECTOR_CODE_SEGMENT_'
 const MATH_KATEX_OPTIONS = {
   throwOnError: false,
@@ -189,6 +191,55 @@ const extractQuickLinksBlocks = (source = '') => {
   }
 }
 
+const extractCardsBlocks = (source = '') => {
+  const map = new Map()
+  let index = 0
+
+  const blockPattern = /<d-(?:block-)?cards\b([^>]*)>([\s\S]*?)<\/d-(?:block-)?cards>/gi
+  const replaced = String(source).replace(blockPattern, (_, blockAttrsRaw, inner) => {
+    const blockAttrs = parseCustomTagAttributes(blockAttrsRaw)
+    const items = []
+    const itemPattern = /<d-(?:block-)?card\b([^>]*)\/?\s*>/gi
+
+    let itemMatch = itemPattern.exec(inner)
+    while (itemMatch !== null) {
+      const itemAttrs = parseCustomTagAttributes(itemMatch[1])
+      const title = itemAttrs.title || ''
+      const description = itemAttrs.description || ''
+      const to = itemAttrs.to || ''
+      const href = itemAttrs.href || ''
+
+      if (title && description && (to || href)) {
+        items.push({
+          title,
+          description,
+          to,
+          href,
+          image: itemAttrs.image || '',
+          icon: itemAttrs.icon || ''
+        })
+      }
+
+      itemMatch = itemPattern.exec(inner)
+    }
+
+    const marker = `${CARDS_MARKER_PREFIX}${index}@@`
+    index++
+
+    map.set(marker, {
+      title: blockAttrs.title || '',
+      items
+    })
+
+    return `\n${marker}\n`
+  })
+
+  return {
+    source: replaced,
+    cardsMap: map
+  }
+}
+
 const parseExpandableOpenState = (raw = '') => {
   return ['1', 'true', 'yes', 'on'].includes(String(raw).trim().toLowerCase())
 }
@@ -274,6 +325,41 @@ const extractFileBlocks = (source = '') => {
   }
 }
 
+const extractEmbeddedUrlBlocks = (source = '') => {
+  const map = new Map()
+  let index = 0
+
+  const replaceBlock = (match, rawAttrs, rawCaption = '') => {
+    const attrs = parseCustomTagAttributes(rawAttrs)
+    const url = decodeHtmlEntities(attrs.url || attrs.href || attrs.src || '').trim()
+
+    if (!url) {
+      return match
+    }
+
+    const marker = `${EMBEDDED_URL_MARKER_PREFIX}${index}@@`
+    index++
+
+    map.set(marker, {
+      url,
+      title: decodeHtmlEntities(attrs.title || '').trim(),
+      caption: String(rawCaption).trim()
+    })
+
+    return `\n${marker}\n`
+  }
+
+  const replacedSelfClosing = String(source).replace(/<d-embedded-url\b([^>]*)\/\s*>/gi, (match, rawAttrs) => {
+    return replaceBlock(match, rawAttrs)
+  })
+  const replaced = replacedSelfClosing.replace(/<d-embedded-url\b([^>]*)>([\s\S]*?)<\/d-embedded-url>/gi, replaceBlock)
+
+  return {
+    source: replaced,
+    embeddedUrlMap: map
+  }
+}
+
 const parseFenceAttributes = (raw = '') => {
   const parsed = {}
   const pattern = /([\w-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s;]+))/g
@@ -565,8 +651,10 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
     })
   })
 
-  const { source: sourceWithQuickLinks, quickLinksMap } = extractQuickLinksBlocks(sourceWithExpandables)
+  const { source: sourceWithCards, cardsMap } = extractCardsBlocks(sourceWithExpandables)
+  const { source: sourceWithQuickLinks, quickLinksMap } = extractQuickLinksBlocks(sourceWithCards)
   const { source: sourceWithFiles, fileMap } = extractFileBlocks(sourceWithQuickLinks)
+  const { source: sourceWithEmbeddedUrls, embeddedUrlMap } = extractEmbeddedUrlBlocks(sourceWithFiles)
 
   fileMap.forEach((data, marker) => {
     fileMap.set(marker, {
@@ -575,10 +663,17 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
     })
   })
 
+  embeddedUrlMap.forEach((data, marker) => {
+    embeddedUrlMap.set(marker, {
+      ...data,
+      caption: restoreShieldedCodeSegments(data.caption, codeSegmentsMap)
+    })
+  })
+
   const markdown = createMarkdownBlockParser()
   const markdownInline = createMarkdownInlineParser()
   const markdownEnv = {}
-  const parsed = markdown.parse(restoreShieldedCodeSegments(sourceWithFiles, codeSegmentsMap), markdownEnv)
+  const parsed = markdown.parse(restoreShieldedCodeSegments(sourceWithEmbeddedUrls, codeSegmentsMap), markdownEnv)
   const tokens = []
 
   let level = 0
@@ -735,6 +830,17 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
             break
           }
 
+          if (cardsMap.has(element.content.trim())) {
+            const data = cardsMap.get(element.content.trim())
+
+            tokens.push({
+              tag: 'cards',
+              title: data.title,
+              items: data.items
+            })
+            break
+          }
+
           if (quickLinksMap.has(element.content.trim())) {
             const data = quickLinksMap.get(element.content.trim())
 
@@ -762,6 +868,21 @@ export const tokenizePageSectionSource = (source = '', options = {}) => {
             break
           }
 
+          if (embeddedUrlMap.has(element.content.trim())) {
+            const data = embeddedUrlMap.get(element.content.trim())
+
+            tokens.push({
+              tag: 'embedded-url',
+              map: element.map,
+              url: data.url,
+              title: data.title,
+              caption: data.caption !== ''
+                ? markdownInline.renderInline(data.caption, markdownEnv)
+                : ''
+            })
+            break
+          }
+
           if (tag === 'p') {
             const imageToken = parseStandaloneImageToken(element.content)