mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-09 23:48:36 +01:00
213 lines
9.2 KiB
Vue
213 lines
9.2 KiB
Vue
<script lang="ts" setup>
|
|
|
|
const { project } = useProject();
|
|
const { createAlert } = useAlert();
|
|
|
|
import 'highlight.js/styles/stackoverflow-dark.css';
|
|
import hljs from 'highlight.js';
|
|
import CardTitled from './CardTitled.vue';
|
|
|
|
import { Lit } from 'litlyx-js';
|
|
|
|
const props = defineProps<{
|
|
firstInteraction: boolean,
|
|
refreshInteraction: () => any
|
|
}>()
|
|
|
|
onMounted(() => {
|
|
hljs.highlightAll();
|
|
})
|
|
|
|
function copyProjectId() {
|
|
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
|
|
navigator.clipboard.writeText(project.value?._id?.toString() || '');
|
|
Lit.event('no_visit_copy_id');
|
|
createAlert('Success', 'Project id copied successfully.', 'far fa-circle-check', 5000);
|
|
}
|
|
|
|
|
|
function copyScript() {
|
|
if (!navigator.clipboard) alert('You can\'t copy in HTTP');
|
|
|
|
|
|
const createScriptText = () => {
|
|
return [
|
|
'<script defer ',
|
|
`data-project="${project.value?._id}" `,
|
|
'src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></',
|
|
'script>'
|
|
].join('')
|
|
}
|
|
|
|
Lit.event('no_visit_copy_script');
|
|
navigator.clipboard.writeText(createScriptText());
|
|
createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
|
|
}
|
|
|
|
|
|
const scriptText = computed(() => {
|
|
return [
|
|
`<script defer data-project="${project.value?._id.toString()}"`,
|
|
`\nsrc="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js">\n<`,
|
|
`/script>`
|
|
].join('');
|
|
})
|
|
|
|
|
|
function reloadPage() {
|
|
location.reload();
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div v-if="!firstInteraction && project" class="mt-[5vh] flex flex-col">
|
|
|
|
<div class="flex items-center justify-center">
|
|
|
|
<div class="mr-4 animate-pulse w-[1rem] h-[1rem] bg-accent rounded-full"> </div>
|
|
<div class="text-lyx-lightmode-text dark:text-text/90 poppins text-[1.1rem] font-medium">
|
|
Waiting for your first visit
|
|
</div>
|
|
<LyxUiButton class="ml-6" type="secondary" @click="reloadPage()">
|
|
<div class="flex items-center gap-2">
|
|
<i class="far fa-refresh"></i>
|
|
<div> Refresh </div>
|
|
</div>
|
|
</LyxUiButton>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-center mt-10">
|
|
<div class="flex flex-col-reverse gap-6">
|
|
|
|
<div class="flex gap-6 xl:flex-row flex-col">
|
|
|
|
<div class="h-full w-full">
|
|
<CardTitled class="h-full w-full xl:min-w-[500px] xl:h-[35rem]" title="Quick setup tutorial"
|
|
sub="Quickly Set Up Litlyx in 30 Seconds!">
|
|
|
|
<div class="flex items-center justify-center h-full w-full">
|
|
|
|
<iframe class="w-full h-full min-h-[400px]"
|
|
src="https://www.youtube.com/embed/LInFoNLJ-CI?si=a97HVXpXFDgFg2Yp" title="Litlyx"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
</CardTitled>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6">
|
|
|
|
<div class="w-full">
|
|
<CardTitled title="Quick Integration"
|
|
sub="Start tracking web analytics in one line. (works everywhere js is supported)">
|
|
<div class="flex flex-col items-end gap-4">
|
|
<div class="w-full xl:text-[1rem] text-[.8rem]">
|
|
<pre>
|
|
<code class="language-html rounded-md">{{ scriptText }}</code>
|
|
</pre>
|
|
</div>
|
|
<LyxUiButton type="secondary" @click="copyScript()">
|
|
Copy
|
|
</LyxUiButton>
|
|
</div>
|
|
</CardTitled>
|
|
</div>
|
|
|
|
<div class="h-full w-full">
|
|
<CardTitled class="h-full w-full" title="Project id"
|
|
sub="This is the identifier for this project, used to forward data">
|
|
<div class="flex items-center justify-between gap-4 mt-6">
|
|
<div class="p-2 bg-lyx-lightmode-widget dark:bg-[#1c1b1b] rounded-md w-full">
|
|
<div class="w-full text-[.9rem] dark:text-[#acacac]"> {{ project?._id }} </div>
|
|
</div>
|
|
<LyxUiButton type="secondary" @click="copyProjectId()"> Copy </LyxUiButton>
|
|
</div>
|
|
|
|
</CardTitled>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<CardTitled class="w-full h-full" title="Documentation"
|
|
sub="Learn how to use Litlyx in every tech stack">
|
|
<template #header>
|
|
<LyxUiButton @click="Lit.event('no_visit_goto_docs')" type="secondary"
|
|
to="https://docs.litlyx.com">
|
|
Visit documentation
|
|
</LyxUiButton>
|
|
</template>
|
|
|
|
<div class="flex flex-col items-end">
|
|
<div class="justify-center w-full hidden xl:flex gap-3">
|
|
<a href="https://docs.litlyx.com/techs/js" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/js.png'" alt="Litlyx-Javascript-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/nuxt" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/nuxt.png'" alt="Litlyx-Nuxt-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/next" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/next.png'" alt="Litlyx-Next-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/react" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/react.png'" alt="Litlyx-React-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/vue" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/vue.png'" alt="Litlyx-Vue-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/angular" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/angular.png'" alt="Litlyx-Angular-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/python" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/py.png'" alt="Litlyx-Python-Analytics">
|
|
</a>
|
|
<a href="https://docs.litlyx.com/techs/serverless" target="_blank">
|
|
<img class="cursor-pointer" :src="'tech-icons/serverless.png'" alt="Litlyx-Serverless-Analytics">
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</CardTitled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="flex justify-center gap-10 flex-col xl:flex-row items-center xl:items-stretch px-10">
|
|
|
|
<div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full">
|
|
<div class="poppins font-semibold"> Copy your project_id: </div>
|
|
<div class="flex items-center gap-2">
|
|
<div> <i @click="copyProjectId()" class="cursor-pointer hover:text-text far fa-copy"></i> </div>
|
|
<div class="text-[.9rem] text-[#acacac]"> {{ activeProject?._id }} </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-menu p-6 rounded-xl flex flex-col gap-2 w-full xl:max-w-[40vw]">
|
|
<div class="poppins font-semibold">
|
|
Start logging visits in 1 click | Plug anywhere !
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div> <i @click="copyScript()" class="cursor-pointer hover:text-text far fa-copy"></i> </div>
|
|
|
|
<pre><code class="language-html">{{ scriptText }}</code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
</template>
|