docus 2.1.0 → 3.0.0-beta.1

package/components/content/BlockHero.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineProps({
+  cta: {
+    type: Array,
+    default: () => ['Get started', '/get-started'],
+  },
+  secondary: {
+    type: Array,
+    default: () => ['Open on GitHub', 'https://github.com'],
+  },
+  snippet: {
+    type: [String, Boolean],
+    default: () => false,
+  },
+})
+</script>
+
+<template>
+  <section class="py-12 lg:py-24">
+    <Container class="flex flex-col lg:flex-row my-8 md:my-16">
+      <div class="flex flex-col items-center pr-0 lg:items-start lg:pr-8 lg:w-2/3">
+        <h2
+          class="mb-4 text-4xl xs:text-5xl font-semibold sm:leading-none tracking-tighter text-center text-gray-900 lg:text-left dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mb-8"
+        >
+          <Markdown use="title" unwrap="p" />
+        </h2>
+        <p
+          class="mb-8 text-lg text-center text-gray-700 font-medium tracking-tight lg:text-left sm:text-xl xl:text-xl leading-base sm:mb-12 dark:text-gray-300"
+        >
+          <Markdown use="description" unwrap="p" />
+        </p>
+
+        <div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 lg:space-x-6 mb-8">
+          <ButtonLink v-if="cta" class="mx-auto md:mx-0" bold size="large" :href="cta[1]">
+            {{ cta[0] }}
+          </ButtonLink>
+
+          <a
+            v-if="secondary"
+            :href="secondary[1]"
+            class="py-px mt-px font-medium text-primary-500 border-b-1 border-transparent dark:text-primary-400 hover:border-primary-500 dark:hover:border-primary-400"
+          >
+            {{ secondary[0] }}
+          </a>
+        </div>
+      </div>
+      <div v-if="snippet" class="w-full mx-auto lg:w-1/3 sm:w-580px">
+        <div class="md:pl-2 md:mx">
+          <Terminal :snippet="snippet" />
+        </div>
+      </div>
+    </Container>
+  </section>
+</template>

package/components/content/ButtonLink.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { hasProtocol } from 'ufo'
+
+const props = defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  bold: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isExternal = computed(
+  () => hasProtocol(props.href, true),
+)
+</script>
+
+<template>
+  <NuxtLink class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href">
+    <Markdown :use="$slots.default" unwrap="p ul li" />
+
+    <IconExternalLink v-if="isExternal" class="w-4 h-4 ml-2" />
+  </NuxtLink>
+</template>
+
+<style lang="postcss" scoped>
+a.button-link {
+  @apply inline-flex items-center flex-none rounded-md px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
+
+  &.medium {
+    @apply px-4 py-2 text-base leading-4;
+  }
+
+  &.large {
+    @apply px-6 py-2.5 text-lg leading-6;
+  }
+}
+</style>

package/components/content/Card.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconClass: {
+    type: String,
+    default: '',
+  },
+})
+
+const isImage = (icon: string) => String(icon).includes('.')
+</script>
+
+<template>
+  <div class="flex">
+    <div class="relative w-full p-6 bg-gray-200 rounded-lg dark:bg-gray-800 dark:bg-opacity-50">
+      <img v-if="isImage(icon)" :src="icon" class="inline-block w-16 h-16 mb-3">
+      <component :is="icon" v-else class="inline-block w-16 h-16 mb-3 text-6xl" />
+
+      <slot />
+
+      <div class="text-lg">
+        <h3 class="mb-2 font-semibold tracking-tight inline mr-1">
+          {{ title }}
+        </h3>
+        <div class="inline font-medium text-primary">
+          <slot name="description">
+            <p v-if="description" class="inline font-medium tracking-tight">
+              {{ description }}
+            </p>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/content/CardGrid.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Features',
+  },
+})
+</script>
+
+<template>
+  <section class="py-12 lg:py-24 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
+    <Container>
+      <h2 class="mb-8 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
+        <slot name="title" />
+      </h2>
+      <div
+        class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 lg:grid-cols-3 2xl:gap-8"
+      >
+        <slot />
+      </div>
+    </Container>
+  </section>
+</template>

package/components/content/CodeBlock.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps({
+  /**
+     * Label to display for the tab
+     */
+  label: {
+    type: String,
+    required: true,
+  },
+  /**
+     * Select which tab should be active
+     */
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+     * Preiew block are bordered and have small padding.
+     */
+  preview: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <div
+    class="code-block"
+    :class="{
+      active: active,
+      'p-4 border-2 border-t-0 border-gray-100 dark:border-gray-800 rounded-b-lg': preview
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.code-block {
+  display: none;
+}
+
+.code-block.active {
+  display: block;
+}
+</style>

package/components/content/CodeGroup.vue

@@ -0,0 +1,134 @@
+<script lang="ts">
+import TabsHeader from './TabsHeader.vue'
+
+const isTag = (slot: any, tag: string) => {
+  return slot.type && slot.type.tag && slot.type.tag === tag
+}
+
+export default defineComponent({
+  data() {
+    return {
+      activeTabIndex: 0,
+      /**
+       * A simple number that increases on every changes
+       */
+      counter: 0,
+    }
+  },
+  render() {
+    const slots = this.$slots.default()
+    const tabs = slots
+      .filter(
+        slot =>
+          isTag(slot, 'code-block')
+            || isTag(slot, 'code'),
+      )
+      .map((slot, index) => {
+        return {
+          label: slot?.props?.filename || slot?.props?.label || `${index}`,
+          active: slot?.props?.active || false,
+          component: slot,
+        }
+      })
+
+    return h(
+      'div',
+      {
+        class: {
+          'code-group': true,
+          'first-tab': this.activeTabIndex === 0,
+        },
+      },
+      [
+        h(
+          TabsHeader,
+          {
+            'ref': 'tabs-header',
+            'activeTabIndex': this.activeTabIndex,
+            tabs,
+            'onUpdate:activeTabIndex': $event => (this.activeTabIndex = $event),
+          },
+        ),
+        h(
+          'div',
+          {
+            class: 'code-group-content',
+            text: this.activeTabIndex,
+          },
+          // Map slots to content children
+          slots.map(
+            (slot, index) => h(
+              'div',
+              {
+                // Current slot is displayed, others are hidden
+                style: { display: index === this.activeTabIndex ? 'block' : 'none' },
+                class: {
+                  '': !isTag(slot, 'code'),
+                },
+              },
+              // Display direct children if not a ```code``` block
+              [
+                isTag(slot, 'code')
+                  ? slot
+                  : h(
+                    'div',
+                    {
+                      class: {
+                        'preview-canvas': true,
+                      },
+                    },
+                    [slot.children.default()],
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    )
+  },
+})
+</script>
+
+<style lang="postcss">
+.prose {
+  li {
+    .code-group {
+      @apply my-4;
+    }
+  }
+}
+
+html.dark {
+  .code-group-content {
+    .preview-canvas {
+      @apply p-4 my-0 overflow-x-auto leading-normal bg-gray-900 rounded-lg rounded-tl-none rounded-tr-none z-0;
+    }
+  }
+}
+</style>
+
+<style scoped lang="postcss">
+.code-group {
+  :deep(.prose-code) {
+    @apply mt-0 rounded-tl-none rounded-tr-none !important;
+  }
+
+  :deep(pre) {
+    @apply mt-0 !important;
+  }
+
+  :deep(.filename) {
+    @apply hidden;
+  }
+}
+
+.code-group-content {
+  .preview-canvas {
+    @apply p-4 my-0 overflow-x-auto leading-normal bg-gray-100 dark:bg-gray-800 rounded-bl-lg rounded-br-lg z-0;
+
+    & > * {
+      @apply my-0;
+    }
+  }
+}
+</style>

package/components/content/CopyButton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Clipboard from 'clipboard'
+
+const copy = ref()
+const state = ref('init')
+
+onMounted(() => {
+  const copyCode = new Clipboard(copy.value, {
+    target(trigger) {
+      return trigger.previousElementSibling
+    },
+  })
+
+  copyCode.on('success', (event) => {
+    event.clearSelection()
+    state.value = 'copied'
+    window.setTimeout(() => {
+      state.value = 'init'
+    }, 1000)
+  })
+})
+</script>
+
+<template>
+  <button
+    ref="copy"
+    class="
+      copy
+      focus:outline-none
+      absolute
+      right-1
+      bottom-1
+      px-2
+      py-2
+      m-1
+      text-gray-400
+      bg-gray-900
+      text-xs
+      leading-none
+      rounded-lg
+      font-mono
+      font-semibold
+    "
+  >
+    <Icon v-if="state === 'copied'" name="fa-check" class="w-4 h-4" />
+    <Icon v-else name="fa-copy" class="w-4 h-4" />
+  </button>
+</template>

package/{dist/runtime/app/components/prose/ProseOl.vue → components/content/List.vue}

@@ -1,5 +1,5 @@
 <template>
-  <ol>
+  <div>
     <slot />
-  </ol>
+  </div>
 </template>

package/components/content/NeedContribution.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps({
+  to: {
+    type: String,
+    required: true,
+    default: '/community/contribution#documentation-guide',
+  },
+  icon: {
+    type: String,
+    required: true,
+    default: '🚧',
+  },
+})
+</script>
+
+<template>
+  <Alert type="warning" :icon="icon">
+    Documentation for this section is not yet complete. You can
+    <NuxtLink :to="to">
+      contribute to the documentation.
+    </NuxtLink>
+  </Alert>
+</template>

package/components/content/ReadMore.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+
+const props = defineProps({
+  link: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+// Guess title from link!
+const computedTitle = computed(() => (props.title || props.link).split('/').filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > '))
+</script>
+
+<template>
+  <Alert icon="👉">
+    Read more in <NuxtLink :to="link" v-html="computedTitle" />.
+  </Alert>
+</template>

package/components/content/Sandbox.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  repo: {
+    type: String,
+    default: '',
+  },
+  branch: {
+    type: String,
+    default: '',
+  },
+  dir: {
+    type: String,
+    default: '',
+  },
+  file: {
+    type: String,
+    default: 'app.vue',
+  },
+})
+
+const colorMode = useColorMode()
+
+const providers = {
+  CodeSandBox: () => `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${colorMode.value}`,
+  StackBlitz: () => `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${colorMode.value}`,
+}
+
+const providersTabs = Object.keys(providers).map(p => ({ label: p }))
+const activeTabIndex = ref(-1)
+const tabs = ref()
+const url = ref('')
+const provider = ref('')
+
+const changeProvider = (value) => {
+  provider.value = value
+  url.value = props.src || providers[provider.value]()
+  localStorage.setItem('docus_sandbox', value)
+}
+
+const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
+
+const updateTab = (i: number) => {
+  activeTabIndex.value = i
+  changeProvider(providersTabs[i].label)
+}
+
+onMounted(() => {
+  // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
+  provider.value = window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
+
+  url.value = props.src || providers[provider.value]()
+
+  // Set active tab
+  activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
+
+  setTimeout(() => tabs.value.updateTabs(activeTabIndex.value), 100)
+})
+</script>
+
+<template>
+  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-md sandbox mt-4">
+    <TabsHeader
+      v-if="!src"
+      ref="tabs"
+      :active-tab-index="activeTabIndex"
+      :tabs="providersTabs"
+      @update:active-tab-index="updateTab"
+    >
+      <template #footer>
+        <div class="absolute top-1/2 transform -translate-y-1/2 right-0 px-2">
+          <Link class="flex items-center text-gray-500 dark:text-gray-400" :to="sandBoxUrl" blank>
+            <IconExternalLink class="h-5 w-5" />
+          </Link>
+        </div>
+      </template>
+    </TabsHeader>
+
+    <iframe
+      v-if="url"
+      :src="url"
+      title="Sandbox editor"
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      class="w-full h-full min-h-[700px] overflow-hidden bg-gray-100 dark:bg-gray-800"
+    />
+
+    <span v-else class="text-white flex-1">Loading Sandbox...</span>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.sandbox,
+.sandbox iframe {
+  @apply w-full rounded-md rounded-tl-none rounded-tr-none overflow-hidden h-64;
+  height: 700px;
+}
+</style>

package/components/content/TabsHeader.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  tabs: {
+    type: Array as PropType<{ label: string }[]>,
+    required: true,
+  },
+  activeTabIndex: {
+    type: Number,
+    required: true,
+  },
+})
+
+defineEmits(['update:activeTabIndex'])
+</script>
+
+<template>
+  <div class="relative text-white rounded-t-lg bg-gray-200 dark:bg-gray-700">
+    <div v-if="tabs" class="relative z-0 px-2">
+      <button
+        v-for="({ label }, i) in tabs"
+        ref="tabs"
+        :key="`${i}${label}`"
+        class="relative px-3 py-1.5 xs:py-3 my-1.5 xs:my-0 text-sm font-mono font-medium tracking-tight focus:outline-none font-bold"
+        :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'text-gray-600 dark:text-gray-400']"
+        @click="$emit('update:activeTabIndex', i)"
+      >
+        {{ label }}
+      </button>
+      <span ref="highlight-underline" class="absolute -z-[1] highlight-underline h-full xs:py-1.5">
+        <span class="flex w-full h-full bg-gray-300 dark:bg-gray-600 rounded-md" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.highlight-underline {
+  /* bottom: -2px; */
+  /* height: 2px; */
+  transition: left 150ms, top 150ms, width 150ms, height 150ms;
+}
+</style>

package/components/content/Terminal.vue

@@ -0,0 +1,70 @@
+<script>
+import Clipboard from 'clipboard'
+
+export default defineComponent({
+  props: {
+    snippet: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const copyInstall = ref()
+    const copied = ref(false)
+
+    const setupCopyInstall = () => {
+      if (!copyInstall.value)
+        return nextTick(setupCopyInstall)
+
+      const instance = new Clipboard(copyInstall.value)
+
+      instance.on('success', () => {
+        copied.value = true
+
+        setTimeout(() => {
+          copied.value = false
+        }, 1000)
+      })
+    }
+
+    onMounted(() => setupCopyInstall())
+
+    return {
+      copyInstall,
+      copied,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    ref="copyInstall"
+    :data-clipboard-text="snippet"
+    class="relative flex flex-col w-full h-64 overflow-hidden text-gray-600 bg-gray-800 rounded-lg cursor-pointer group"
+  >
+    <div v-if="copied" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75" />
+      <div class="z-10 text-lg font-medium text-gray-100">
+        Copied!
+      </div>
+    </div>
+    <div class="relative flex items-center w-full h-12 border-b border-gray-700">
+      <div class="flex ml-4">
+        <div class="w-3 h-3 bg-red-400 rounded-full" />
+        <div class="w-3 h-3 ml-2 bg-yellow-400 rounded-full" />
+        <div class="w-3 h-3 ml-2 bg-green-400 rounded-full" />
+      </div>
+      <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full">
+        Bash
+      </div>
+    </div>
+    <div class="flex flex-1 p-4 font-mono">
+      <span class="inline-block mr-2 font-bold select-none">$</span>
+      <span class="inline-block text-gray-200">{{ snippet }}</span>
+    </div>
+    <div class="py-2 text-center transition-opacity opacity-0 group-hover:opacity-100">
+      Click to copy
+    </div>
+  </div>
+</template>