91 lines
8.0 KiB
Vue
91 lines
8.0 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
white?: boolean
|
|
}>()
|
|
|
|
const isBlinking = ref(false)
|
|
const isHovering = ref(false)
|
|
const isTouchDevice = ref(false)
|
|
let cleanup: (() => void) | undefined
|
|
|
|
const color = computed(() => props.white ? 'text-white' : 'text-black dark:text-white')
|
|
|
|
function setupBlinking() {
|
|
const blinkDelay = Math.random() * 5000 + 2000
|
|
|
|
const timerId = setTimeout(() => {
|
|
isBlinking.value = true
|
|
|
|
const blinkTimerId = setTimeout(() => {
|
|
isBlinking.value = false
|
|
setupBlinking()
|
|
}, 200)
|
|
|
|
return () => clearTimeout(blinkTimerId)
|
|
}, blinkDelay)
|
|
|
|
return () => clearTimeout(timerId)
|
|
}
|
|
|
|
onMounted(() => {
|
|
cleanup = setupBlinking()
|
|
isTouchDevice.value = 'ontouchstart' in window
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
cleanup?.()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
viewBox="0 0 139 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
:class="color"
|
|
alt="Docus logo"
|
|
@mouseenter="isHovering = true"
|
|
@mouseleave="isHovering = false"
|
|
>
|
|
<path
|
|
v-if="isBlinking || (isHovering && !isTouchDevice)"
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 16.0501C26.697 16.0501 28.2332 17.8658 28.2332 15.9708C28.2332 15.9708 26.697 15 24.802 15C22.907 15 21.3708 15.9708 21.3708 15.9708C21.3708 17.8658 22.907 16.0501 24.802 16.0501ZM14.6182 16.0501C16.5133 16.0501 18.0494 17.866 18.0494 15.971C18.0494 15.971 16.395 15 14.5 15C12.605 15 11.1871 15.971 11.1871 15.971C11.1871 17.866 12.7233 16.0501 14.6182 16.0501Z"
|
|
fill="currentColor"
|
|
/>
|
|
|
|
<path
|
|
v-else
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M16.0752 0C7.21095 0 0 7.18587 0 16.0501V30.3853C0 31.2771 0.722918 32 1.61468 32H16.1002C24.9367 32 32.1002 24.8366 32.1002 16C32.1002 7.16344 24.9117 0 16.0752 0ZM24.802 19.402C26.697 19.402 28.2332 17.8658 28.2332 15.9708C28.2332 14.0758 26.697 12.5396 24.802 12.5396C22.907 12.5396 21.3708 14.0758 21.3708 15.9708C21.3708 17.8658 22.907 19.402 24.802 19.402ZM14.6182 19.4022C16.5133 19.4022 18.0494 17.866 18.0494 15.971C18.0494 14.076 16.5133 12.5398 14.6182 12.5398C12.7233 12.5398 11.1871 14.076 11.1871 15.971C11.1871 17.866 12.7233 19.4022 14.6182 19.4022Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M66.9254 19.7235C66.9254 21.3159 67.3047 22.7336 68.0589 23.983C68.8344 25.2345 69.9001 26.2128 71.2614 26.9192C72.6224 27.6255 74.1522 27.9808 75.8559 27.9808C77.58 27.9808 79.1197 27.6253 80.4803 26.9192C81.8415 26.2129 82.8968 25.2349 83.6521 23.9842C84.4068 22.7345 84.7864 21.3165 84.7864 19.7235C84.7864 18.1306 84.4068 16.7233 83.653 15.4945L83.6521 15.4931C82.8972 14.243 81.8427 13.2757 80.4828 12.5895L80.4803 12.5883C79.1197 11.8823 77.58 11.5267 75.8559 11.5267C74.1318 11.5267 72.5921 11.8823 71.2315 12.5883L71.2303 12.5889C69.8902 13.2748 68.8346 14.2426 68.0589 15.4943C67.3044 16.7442 66.9254 18.1519 66.9254 19.7235ZM78.487 22.7884L78.4893 22.7858C79.1787 22.025 79.5098 20.9944 79.5098 19.7235C79.5098 18.472 79.1782 17.4602 78.487 16.7192C77.7995 15.9821 76.9158 15.6155 75.8559 15.6155C74.796 15.6155 73.9122 15.9821 73.2248 16.7192C72.5336 17.4602 72.202 18.472 72.202 19.7235C72.202 20.9944 72.533 22.025 73.2224 22.7858L73.2248 22.7884C73.9122 23.5254 74.796 23.892 75.8559 23.892C76.9158 23.892 77.7995 23.5254 78.487 22.7884Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M102.777 23.9716C102.226 25.168 101.362 26.1218 100.178 26.8352C98.8826 27.5957 97.3382 27.9808 95.5355 27.9808C93.7706 27.9808 92.2006 27.6249 90.82 26.9186C89.4388 26.2119 88.3637 25.2336 87.5888 23.983C86.8345 22.7336 86.4553 21.3159 86.4553 19.7235C86.4553 18.1307 86.8347 16.7236 87.5884 15.495C88.363 14.2446 89.4374 13.2767 90.8176 12.5902L90.82 12.5889C92.2006 11.8826 93.7706 11.5267 95.5355 11.5267C97.3377 11.5267 98.8816 11.9217 100.177 12.7019L100.179 12.7032C101.362 13.3981 102.226 14.3415 102.777 15.536C102.812 15.6127 102.782 15.7129 102.692 15.7592L99.0173 17.6509C98.9272 17.6973 98.8018 17.6656 98.7381 17.559C97.9721 16.2774 96.8895 15.6155 95.5056 15.6155C94.4273 15.6155 93.5161 15.9808 92.7896 16.714L92.7871 16.7165C92.0745 17.4573 91.7318 18.4701 91.7318 19.7235C91.7318 20.9962 92.0739 22.0278 92.7847 22.7885L92.7871 22.7911L92.7896 22.7935C93.5162 23.5267 94.4273 23.892 95.5056 23.892C96.8895 23.892 97.9721 23.2301 98.7381 21.9485C98.8018 21.842 98.9272 21.8102 99.0173 21.8566L102.692 23.7483C102.782 23.7947 102.812 23.8948 102.777 23.9716Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M116.533 27.5185V25.5732L116.118 26.034C115.543 26.6721 114.853 27.1553 114.047 27.4846C113.238 27.8151 112.38 27.9808 111.471 27.9808C109.424 27.9808 107.811 27.3731 106.605 26.1761C105.427 24.9869 104.817 23.1837 104.817 20.7212V11.989C104.817 11.884 104.903 11.7988 105.008 11.7988H109.844C109.949 11.7988 110.034 11.884 110.034 11.989V19.784C110.034 21.0337 110.266 21.9976 110.777 22.6251C111.291 23.2566 112.035 23.5594 112.969 23.5594C113.93 23.5594 114.725 23.2222 115.333 22.5432C115.968 21.8368 116.263 20.7912 116.263 19.4514V11.989C116.263 11.884 116.348 11.7988 116.453 11.7988H121.29C121.395 11.7988 121.48 11.884 121.48 11.989V27.5185C121.48 27.6236 121.395 27.7087 121.29 27.7087H116.723C116.618 27.7087 116.533 27.6236 116.533 27.5185Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
d="M133.19 22.3635C133.033 22.198 132.813 22.0836 132.552 22.0061C132.068 21.8373 131.311 21.6843 130.294 21.5434L130.291 21.543C129.001 21.3828 127.905 21.1732 127.001 20.9156C126.145 20.6659 125.403 20.2057 124.772 19.5307C124.166 18.8818 123.848 17.9594 123.848 16.7305C123.848 15.7331 124.141 14.8573 124.727 14.0941L124.729 14.0918C125.316 13.3081 126.176 12.6868 127.322 12.2358L127.324 12.235C128.488 11.7654 129.884 11.5267 131.52 11.5267C132.682 11.5267 133.834 11.6459 134.977 11.8845C135.957 12.0892 136.792 12.3657 137.485 12.7111C137.561 12.7486 137.599 12.8448 137.559 12.9371L136.195 16.0508C136.152 16.151 136.024 16.2007 135.913 16.145C134.558 15.4693 133.102 15.1318 131.55 15.1318C130.644 15.1318 129.937 15.2416 129.465 15.4899C129 15.7145 128.705 16.053 128.705 16.5188C128.705 16.762 128.779 16.9814 128.933 17.1638C129.084 17.3421 129.298 17.4701 129.553 17.5599L129.558 17.5614L129.562 17.5628C130.04 17.7094 130.814 17.8627 131.874 18.0241C133.206 18.2247 134.303 18.4545 135.167 18.7122C136.003 18.9613 136.725 19.4206 137.336 20.0951L137.338 20.0977L137.341 20.1003C137.945 20.7286 138.263 21.6295 138.263 22.8375C138.263 23.8133 137.97 24.6901 137.382 25.4752C136.797 26.2372 135.919 26.849 134.731 27.301L134.73 27.3015C133.566 27.7517 132.149 27.9808 130.471 27.9808C129.131 27.9808 127.811 27.8318 126.511 27.5337C125.374 27.2555 124.443 26.9114 123.712 26.505C123.641 26.4657 123.606 26.3729 123.645 26.2838L125.008 23.1475C125.053 23.0442 125.188 22.9929 125.304 23.056C125.966 23.4151 126.719 23.7105 127.561 23.9439L127.565 23.9449C128.602 24.2117 129.631 24.3455 130.651 24.3455C131.573 24.3455 132.269 24.2564 132.701 24.0502L132.706 24.0479C133.163 23.8172 133.436 23.4641 133.436 22.9887C133.436 22.7491 133.354 22.5358 133.19 22.3635Z"
|
|
fill="currentColor"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M44.6799 7.02197H53.7408C56.0076 7.02197 58.0084 7.44945 59.7488 8.29791C61.4884 9.14597 62.8315 10.3455 63.7852 11.897C64.7377 13.4466 65.2181 15.2665 65.2181 17.3654C65.2181 19.4642 64.7377 21.2841 63.7852 22.8337C62.8315 24.3852 61.4884 25.5847 59.7488 26.4328C58.0084 27.2813 56.0076 27.7087 53.7408 27.7087H44.6799C44.3382 27.7087 44.0612 27.4318 44.0612 27.0901V7.64061C44.0612 7.29895 44.3382 7.02197 44.6799 7.02197ZM53.5011 23.4083C55.3462 23.4083 56.8475 22.8794 57.9792 21.8014C59.1352 20.7194 59.7018 19.2302 59.7018 17.3654C59.7018 15.5005 59.1352 14.0113 57.9792 12.9293C56.8475 11.8513 55.3462 11.3224 53.5011 11.3224H50.1841C49.816 11.3224 49.5175 11.6209 49.5175 11.989V22.7417C49.5175 23.1098 49.816 23.4083 50.1841 23.4083H53.5011Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</template>
|