feat: Reimplement SourceLink and Ellipsis components from Elements (#869

)

components/app/Ellipsis.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  width: {
+    type: String,
+    default: '10rem'
+  },
+  height: {
+    type: String,
+    default: '10rem'
+  },
+  zIndex: {
+    type: String,
+    default: '10'
+  },
+  top: {
+    type: String,
+    default: '0'
+  },
+  left: {
+    type: String,
+    default: 'auto'
+  },
+  right: {
+    type: String,
+    default: 'auto'
+  },
+  blur: {
+    type: String,
+    default: '50px'
+  },
+  colors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(0, 71, 225, 0.22)', 'rgba(26, 214, 255, 0.22)', 'rgba(0, 220, 130, 0.22)']
+  }
+})
+</script>
+
+<template>
+  <div class="ellipsis">
+    <div class="ellipsis-item" />
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.ellipsis': {
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: (props) => props.top,
+    insetInlineStart: (props) => props.left,
+    insetInlineEnd: (props) => props.right,
+    zIndex: (props) => props.zIndex,
+    width: '-webkit-fill-available',
+    maxWidth: (props) => props.width,
+    height: (props) => props.height,
+    filter: (props) => `blur(${props.blur})`,
+    '.ellipsis-item': {
+      width: '100%',
+      height: '100%',
+      background: (props) => `linear-gradient(97.62deg, ${props?.colors?.[0]} 2.27%, ${props?.colors?.[1]} 50.88%, ${props?.colors?.[2]} 98.48%)`,
+    }
+  }
+})
+</style>

components/docs/SourceLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps({
+  source: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <ProseP>
+    <!--
+    <GithubLink v-slot="data" :source="source" :edit="false">
+      <NuxtLink :href="data?.url" target="_blank" rel="noopener" class="hover:text-primary-500 flex items-center gap-1 text-sm font-semibold">
+        <Icon name="fa-brands:github" class="mr-1 h-5 w-5" />
+        <span>Show Source</span>
+      </NuxtLink>
+    </GithubLink>
+    -->
+  </ProseP>
+</template>