mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 15:58:38 +01:00
Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
31c10b13b2 | ||
|
|
2e12b3ef73 | ||
|
|
10e0075044 | ||
|
|
96f4c991b1 | ||
|
|
a22aaba3fe | ||
|
|
5300da90f2 | ||
|
|
094e191900 | ||
|
|
807816d0f6 | ||
|
|
3a58b1d91c | ||
|
|
5c8f173600 | ||
|
669898986b | ||
|
|
cc1e1741fe | ||
|
|
d7b8e9f575 | ||
|
|
1842842029 |
47
CONTRIBUTING.md
Normal file
47
CONTRIBUTING.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# Contributing Guide
|
||||
|
||||
Contributions are welcome from anyone interested in improving this project, and there are multiple ways you can contribute that we will explain in detail. We know that working on Litlyx can be intimidating at first, so you can contact us and talk with the team on [Discord](https://discord.com/invite/9cQykjsmWX).
|
||||
|
||||
## Contributing - Code 🧑💻
|
||||
|
||||
Take a look at the [issues tab](https://github.com/litlyx/litlyx/issues) and look for those labeled with `help wanted`.
|
||||
|
||||
Please ensure that you are familiar with the technology we used in this project where it applies to your code. The technology stack used in this project includes:
|
||||
|
||||
- [TypeScript](https://www.typescriptlang.org)
|
||||
- [Nuxt](https://nuxt.com)
|
||||
- [Vue](https://vuejs.org/)
|
||||
- [Tailwind CSS](https://tailwindcss.com/)
|
||||
- [Mintlify](https://mintlify.com/)
|
||||
|
||||
## Contributing - Ideas 💫
|
||||
|
||||
If you have an **Idea** or just want to share a thought with us, open a [Discussion](https://github.com/orgs/Litlyx/discussions) to discuss the changes that you would like to make or implement yourself contributing to this project.
|
||||
|
||||
## Contributing - Documentation 📚
|
||||
|
||||
We are changing our documentation. We decided to use [Mintlify](https://mintlify.com/).
|
||||
In the future, we will need help in these areas:
|
||||
|
||||
- Use Cases
|
||||
- Community Libraries
|
||||
- General Documentation
|
||||
- Improvements in Design
|
||||
|
||||
## Code of Conduct 👮♀️
|
||||
|
||||
Please read our [Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project, you agree to follow and accept these terms.
|
||||
|
||||
## License 👩⚖️
|
||||
|
||||
By contributing to this project, you agree that your contributions will be licensed under the [Apache License 2.0](LICENSE).
|
||||
|
||||
## Discord
|
||||
|
||||
If you want to interact with the team behind Litlyx (Founding Team) join our [Discord](https://discord.com/invite/9cQykjsmWX).
|
||||
|
||||
## Note
|
||||
|
||||
Note that this file can change multiple times based on the needs of the project in future phases. If you decide to contribute, always keep an eye on this file.
|
||||
|
||||
Thank you for your interest in contributing to this project!
|
||||
140
README.md
Normal file
140
README.md
Normal file
@@ -0,0 +1,140 @@
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/claim-t.png"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
🌐 <a href="https://litlyx.com">Website</a> 📚 <a href="https://docs.litlyx.com">Docs</a> 🔥 <a href="https://dashboard.litlyx.com">Start for Free!</a>
|
||||
</h4>
|
||||
|
||||
<br />
|
||||
|
||||
#
|
||||
|
||||
<p align="center">
|
||||
The easiest Dev-Centric Analytics tool.<br>Litlyx is , Open-Source, Plug-In everywhere Javascript is Supported. Setup in less then 30 seconds, with just One-Line of code.
|
||||
</p>
|
||||
|
||||
#
|
||||
|
||||
<br />
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/screen.png"/>
|
||||
</p>
|
||||
|
||||
#
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Pre-Requisites
|
||||
|
||||
Sign-up on [Litlyx cloud](https://dashboard.litlyx.com) using OAuth & name your project to get your project_id to connect Litlyx to your website OR Self-Host Litlyx with Docker.
|
||||
|
||||
## Universal Installation
|
||||
|
||||
```html
|
||||
<script defer data-project="project_id_here" src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>
|
||||
```
|
||||
|
||||
Importing Litlyx with a direct script already tracks 10 KPIs such as `Page visits`, `Browsers`, `Devices`, `OS`, `Real-Time Online Users`, `Unique Session`, `Countries`, `Avarage Session Time`.
|
||||
|
||||
# All Javascript Runtimes
|
||||
|
||||
You can install Litlyx using `npm`, `yarn`, or `pnpm`:
|
||||
|
||||
```sh
|
||||
npm i litlyx-js
|
||||
```
|
||||
|
||||
Litlyx natively supports all JS/TS frameworks. You can use Litlyx in all WordPress Websites by injecting JS code using a plug-in. Litlyx work in serverless enviroments with Cloud (or Edge) Functions.
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/techs.png" />
|
||||
</p>
|
||||
|
||||
# Import
|
||||
|
||||
Import litlyx-js library into your code:
|
||||
|
||||
```js
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
|
||||
Once imported, you need to initialize Litlyx:
|
||||
|
||||
```js
|
||||
Lit.init('your_project_id');
|
||||
```
|
||||
|
||||
After initialization, Litlyx will automatically track Analytics such as `Page visits`, `Browsers`, `Devices`, `OS`, `Real-Time Online Users`, `Unique Session`, `Countries`, `Avarage Session Time`.
|
||||
|
||||
# Custom Events
|
||||
|
||||
With Litlyx, you can create your own events to track in your project.
|
||||
|
||||
```js
|
||||
Lit.event('click_on_buy_item');
|
||||
```
|
||||
|
||||
If you want more dept tracking, you can use the `metadata` field, like this:
|
||||
|
||||
```js
|
||||
Lit.event('click_on_buy_item', {
|
||||
metadata: {
|
||||
'product-name': 'Coca-Cola',
|
||||
'price': 1.50,
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You can create your Tailor-Made Experience at ease.
|
||||
|
||||
# AI Data-Analyst
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/agent.png" width="180px"/>
|
||||
</p>
|
||||
|
||||
Lit can compare data, query specific metadata, visualize charts, and much more just by having a simple `conversation` with him.
|
||||
|
||||
|
||||
# Self-Hosting with Docker
|
||||
|
||||
First thing first **Fork** this repository.
|
||||
|
||||
Then run the following command:
|
||||
|
||||
```bash
|
||||
docker-compose build
|
||||
```
|
||||
|
||||
then, after the build finish, run:
|
||||
```bash
|
||||
docker-compose up
|
||||
```
|
||||
|
||||
on your localhost you will see your own instance of the Litlyx Dashboard.
|
||||
|
||||
# Official Docs
|
||||
|
||||
For more info read our [documentation](https://docs.litlyx.com). (will be improved in the near future using Mintlify!)
|
||||
|
||||
# Join Discord
|
||||
|
||||
If you need more information, help, or want to provide general feedback, feel free to join us on[Discord](https://discord.gg/9cQykjsmWX)
|
||||
|
||||
# Contributors
|
||||
|
||||
Every kind of contribution is accepted in this stage of the project. In the future we will onboard you better.
|
||||
|
||||
### Thank you!
|
||||
<a href="https://github.com/litlyx/litlyx/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=litlyx/litlyx" />
|
||||
</a>
|
||||
|
||||
# License
|
||||
|
||||
Litlyx is licensed under the [Apache 2.0](/LICENSE) license.
|
||||
BIN
assets/claim-t.png
Normal file
BIN
assets/claim-t.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
96
dashboard/components/pricing/PricingCardGeneric.vue
Normal file
96
dashboard/components/pricing/PricingCardGeneric.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
export type PricingCardProp = {
|
||||
title: string,
|
||||
price: string,
|
||||
subs: string[],
|
||||
features: string[],
|
||||
cta: string,
|
||||
link?: string,
|
||||
isDowngrade: boolean,
|
||||
active: boolean,
|
||||
planId: number
|
||||
}
|
||||
|
||||
const props = defineProps<{ datas: PricingCardProp[] }>();
|
||||
|
||||
const activeProject = useActiveProject();
|
||||
|
||||
const currentIndex = ref<number>(0);
|
||||
|
||||
const data = computed(() => {
|
||||
return props.datas[currentIndex.value];
|
||||
})
|
||||
|
||||
async function onUpgradeClick() {
|
||||
const res = await $fetch<string>(`/api/pay/${activeProject.value?._id.toString()}/create`, {
|
||||
...signHeaders({ 'content-type': 'application/json' }),
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ planId: data.value.planId })
|
||||
})
|
||||
if (!res) alert('Something went wrong');
|
||||
window.open(res);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="relative bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
|
||||
|
||||
<div class="flex flex-col gap-3 text-center">
|
||||
<div class="poppins text-xl font-light"> {{ data.title }} </div>
|
||||
<div v-if="data.active" class="absolute right-6 top-3 poppins text-[.75rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] px-3 py-[.1rem] rounded-xl">
|
||||
Active
|
||||
</div>
|
||||
<div class="poppins text-4xl font-medium"> {{ data.price }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col text-center h-[6rem] justify-center gap-2">
|
||||
<div v-if="datas.length > 1">
|
||||
<URange :ui="{
|
||||
thumb: {
|
||||
color: 'text-[#5680f8]'
|
||||
},
|
||||
progress: {
|
||||
background: '!bg-[#5680f8]'
|
||||
}
|
||||
}" :min="0" :max="datas.length - 1" v-model="currentIndex">
|
||||
</URange>
|
||||
</div>
|
||||
<div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2" v-for="feature of data.features">
|
||||
<div class="h-6 w-6">
|
||||
<img class="w-full h-full" :src="'check.png'" alt="Check">
|
||||
</div>
|
||||
<div>{{ feature }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex">
|
||||
<div class="w-full" v-if="data.planId > -1">
|
||||
<div @click="onUpgradeClick()" v-if="!data.active && !data.isDowngrade"
|
||||
class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
|
||||
Upgrade
|
||||
</div>
|
||||
<div @click="onUpgradeClick()" v-if="!data.active && data.isDowngrade"
|
||||
class="w-full cursor-pointer text-[1rem] font-semibold bg-[#1f1f22] text-red-400 rounded-md py-2 text-center">
|
||||
Downgrade
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink v-if="data.planId === -1" :to="data.link || 'https://dashboard.litlyx.com'"
|
||||
class="bg-[#222A42] cursor-pointer outline outline-[1px] outline-[#5680F8] w-full !rounded-md text-center text-[.9rem] !py-2 ">
|
||||
{{ data.cta }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,71 +1,188 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PricingCardProp } from './PricingCard.vue';
|
||||
import type { PricingCardProp } from './PricingCardGeneric.vue';
|
||||
|
||||
|
||||
const activeProject = useActiveProject();
|
||||
|
||||
const props = defineProps<{ currentSub: number }>();
|
||||
|
||||
const freePricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Free',
|
||||
price: '€0 / mo',
|
||||
subs: [
|
||||
'Up to 5000 visits/events per month',
|
||||
'CPM 0€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Email support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 2',
|
||||
'Data retention: 2 Months'
|
||||
],
|
||||
cta: 'Start For Free now!',
|
||||
active: props.currentSub == 0,
|
||||
isDowngrade: props.currentSub > 0,
|
||||
planId: 0
|
||||
},
|
||||
]
|
||||
|
||||
const starterTierCardData = ref<PricingCardProp>({
|
||||
title: 'STARTER',
|
||||
cost: '0',
|
||||
features: [
|
||||
"3K visits/events per month",
|
||||
"10 AI Interaction per month",
|
||||
"1 month data retention",
|
||||
"Limited reports",
|
||||
"1 Team member",
|
||||
"Limited Automatic Email Report",
|
||||
"Shared Server & DB",
|
||||
"Low priority email support",
|
||||
],
|
||||
desc: `Free project are not reliable and sometimes
|
||||
can experience some data loss.To have a
|
||||
dedicated server we suggest to upgrade the
|
||||
plan to an higher one!`,
|
||||
active: activeProject.value?.premium === false,
|
||||
isDowngrade: props.currentSub > 0,
|
||||
planId: 0
|
||||
});
|
||||
const customPricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Enterprise',
|
||||
price: 'Custom',
|
||||
subs: [
|
||||
'Unlimited visits/events per month',
|
||||
'Service Tailor-made on needs'
|
||||
],
|
||||
features: [
|
||||
'Priority support',
|
||||
'Server type: DEDICATED',
|
||||
'DB instance: DEDICATED',
|
||||
'Dedicated operator',
|
||||
'White label',
|
||||
'Custom Charts',
|
||||
'Custom Data Aggregation'
|
||||
],
|
||||
cta: 'Let\'s Talk!',
|
||||
link: 'mailto:help@litlyx.com',
|
||||
active: false,
|
||||
isDowngrade: false,
|
||||
planId: -1
|
||||
}
|
||||
]
|
||||
|
||||
const accelerationTierCardData = ref<PricingCardProp>({
|
||||
title: 'ACCELERATION',
|
||||
cost: '9,99',
|
||||
features: [
|
||||
"150K visits/events per month",
|
||||
"100 AI Interaction per month",
|
||||
"6 months data retention",
|
||||
"Limited reports",
|
||||
"1 Team member",
|
||||
"Limited Automatic Email Report",
|
||||
"Shared Server & DB",
|
||||
"Low priority email support"
|
||||
],
|
||||
desc: `Your project is entering a growth phase. We simplify data analysis for you. For more support, try our Expansion plan—it's worth it!`,
|
||||
active: activeProject.value?.premium_type === 1,
|
||||
isDowngrade: props.currentSub > 1,
|
||||
planId: 1
|
||||
});
|
||||
|
||||
const expansionTierCardData = ref<PricingCardProp>({
|
||||
title: 'EXPANSION',
|
||||
cost: '39,99',
|
||||
features: [
|
||||
"500K visits/events per month",
|
||||
"5000 AI Interaction per month",
|
||||
"2 years data retention",
|
||||
"Unlimited reports",
|
||||
"10 Team member",
|
||||
"Unlimited Automatic Email Report",
|
||||
"Dedicated Server & DB",
|
||||
"high priority email support"
|
||||
],
|
||||
desc: `We will support you with everything we can offer and give you the full power of our service. If you need more space and are growing, contact us for a custom offer!`,
|
||||
active: activeProject.value?.premium_type === 2,
|
||||
isDowngrade: props.currentSub > 2,
|
||||
planId: 2
|
||||
});
|
||||
const slidePricings: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Incubation',
|
||||
price: '€4,99 / mo',
|
||||
subs: [
|
||||
'Up to 50.000 visits/events per month',
|
||||
'CPM 0,10€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 30',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 6 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 101,
|
||||
isDowngrade: props.currentSub > 101,
|
||||
planId: 101
|
||||
},
|
||||
{
|
||||
title: 'Acceleration',
|
||||
price: '€9,99 / mo',
|
||||
subs: [
|
||||
'Up to 150.000 visits/events per month',
|
||||
'CPM 0,06€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 100',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 9 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 102,
|
||||
isDowngrade: props.currentSub > 102,
|
||||
planId: 102
|
||||
},
|
||||
{
|
||||
title: 'Growth',
|
||||
price: '€29,99 / mo',
|
||||
subs: [
|
||||
'Up to 500.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 3.000',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 103,
|
||||
isDowngrade: props.currentSub > 103,
|
||||
planId: 103
|
||||
},
|
||||
{
|
||||
title: 'Expansion',
|
||||
price: '€59,99 / mo',
|
||||
subs: [
|
||||
'Up to 1.000.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 5.000',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 104,
|
||||
isDowngrade: props.currentSub > 104,
|
||||
planId: 104
|
||||
},
|
||||
{
|
||||
title: 'Scaling',
|
||||
price: '€99,99 / mo',
|
||||
subs: [
|
||||
'Up to 2.500.000 visits/events per month',
|
||||
'CPM 0,039€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10.000',
|
||||
'Server type: DEDICATED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 2 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 105,
|
||||
isDowngrade: props.currentSub > 105,
|
||||
planId: 105
|
||||
},
|
||||
{
|
||||
title: 'Unicorn',
|
||||
price: '€149,99 / mo',
|
||||
subs: [
|
||||
'Up to 5.000.000 visits/events per month',
|
||||
'CPM 0,029€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 20.000',
|
||||
'Server type: DEDICATED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 3 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard',
|
||||
active: props.currentSub == 106,
|
||||
isDowngrade: props.currentSub > 106,
|
||||
planId: 106
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const emits = defineEmits<{
|
||||
@@ -83,9 +200,9 @@ const emits = defineEmits<{
|
||||
</div>
|
||||
|
||||
<div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
|
||||
<PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
|
||||
<PricingCardGeneric class="flex-1" :datas="freePricing"></PricingCardGeneric>
|
||||
<PricingCardGeneric class="flex-1" :datas="slidePricings"></PricingCardGeneric>
|
||||
<PricingCardGeneric class="flex-1" :datas="customPricing"></PricingCardGeneric>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
|
||||
|
||||
BIN
dashboard/public/check.png
Normal file
BIN
dashboard/public/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
20
docs/.gitignore
vendored
20
docs/.gitignore
vendored
@@ -1,20 +0,0 @@
|
||||
# Dependencies
|
||||
/node_modules
|
||||
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Generated files
|
||||
.docusaurus
|
||||
.cache-loader
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"label": "Get Started",
|
||||
"position": 9,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Congratulations!
|
||||
|
||||
You've successfully completed your LitLyx setup! 🔥 **Now, explore page visits, custom events, and KPIs directly on your dashboard.**.
|
||||
|
||||
**Visit the Dashboard:** Access it [here](http://dashboard.litlyx.com)
|
||||
|
||||
|
||||
<img src="/img/dchart.jpg" alt="Dashboard Chart" width="600"/>
|
||||
|
||||
### We're Eager to Hear from You!
|
||||
|
||||
Enjoy LitLyx! 🔥
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Create your first project
|
||||
|
||||
You just sign in! Now it's time to create your first project 🔥
|
||||
**just inserting a name for it**
|
||||
|
||||
|
||||
|
||||
**Choose a name for your first project!** is just that easy!
|
||||
|
||||
<img src="/img/first.jpg" alt="Login on Dashboard" width="600"/>
|
||||
|
||||
##
|
||||
|
||||
:::info
|
||||
|
||||
You can change your name, delete, or upgrade `an individual project` always.
|
||||
|
||||
:::
|
||||
@@ -1,140 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Custom Events
|
||||
Your are not satisfied with the incredible insights you can gain from just one line of code? Looking for more control over your user interactions? LitLyx has you covered there too. 🔥 **Setup a custom event!**
|
||||
## Choose your Framework
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="js" label="JavaScript" default>
|
||||
|
||||
**(reading JavaScript)**
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="vue" label="Vue" default>
|
||||
|
||||
**(reading Vue)**
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="react" label="React" default>
|
||||
|
||||
**(reading React)**
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="next" label="Next" default>
|
||||
|
||||
**(reading Next)**
|
||||
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="nuxt" label="Nuxt" default>
|
||||
|
||||
**(reading Nuxt)**
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="angular" label="Angular" default>
|
||||
|
||||
**(reading Angular)**
|
||||
|
||||
```ts
|
||||
//trigger the event, record it real-time on dashboard
|
||||
Lit.event('pretty_cool_event');
|
||||
```
|
||||
Still craving more control? Wow, you really are a dedicated developer! 🌟
|
||||
|
||||
```ts
|
||||
Lit.event('pretty_cool_event',
|
||||
metadata: {
|
||||
'tag': 'litlyx so lit, dude1',
|
||||
'age': 28,
|
||||
'score': 99.99,
|
||||
'litlist': ['Hello', 'Lit']
|
||||
}
|
||||
);
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Install & Import LitLyx
|
||||
Installing and integrating LitLyx into your code is simpler than anything else you've tried so far.
|
||||
|
||||
**To install LitLyx, run the following command:**
|
||||
|
||||
You can use `yarn`, `npm`, `pnpm`, `bun`. We use npm because is the more simple.
|
||||
|
||||
```bash
|
||||
npm i litlyx-js
|
||||
```
|
||||
|
||||
## Choose your Framework
|
||||
We designed LitLyx with simplicity in mind, so you can accomplish any task with just a single line of code. Now, it's time to start coding! 👇
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="js" label="JavaScript" default>
|
||||
(reading javascript)
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
|
||||
If your are using vanilla js you can find pretty intresting this approach too
|
||||
|
||||
```html
|
||||
<script defer data-project="project_id_here" src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="vue" label="Vue" default>
|
||||
(reading Vue)
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="react" label="React" default>
|
||||
(reading React)
|
||||
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="next" label="Next" default>
|
||||
(reading Next)
|
||||
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="nuxt" label="Nuxt" default>
|
||||
(reading Nuxt)
|
||||
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="angular" label="Angular" default>
|
||||
(reading Angular)
|
||||
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Initialize LitLyx
|
||||
|
||||
We Installed & Imported LitLyx, now it is time to initialize everything
|
||||
|
||||
## Choose your Framework
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="js" label="JavaScript" default>
|
||||
**(reading JavaScript)**
|
||||
|
||||
```ts
|
||||
no code needed
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="vue" label="Vue" default>
|
||||
**(reading Vue)**
|
||||
|
||||
```ts
|
||||
Lit.init('project_id');
|
||||
```
|
||||
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="react" label="React" default>
|
||||
**(reading React)**
|
||||
|
||||
```ts
|
||||
Lit.init('project_id');
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="next" label="Next" default>
|
||||
**(reading Next)**
|
||||
|
||||
```ts
|
||||
Lit.init('project_id');
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
<TabItem value="nuxt" label="Nuxt" default>
|
||||
**(reading Nuxt)**
|
||||
|
||||
```ts
|
||||
Lit.init('project_id');
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="angular" label="Angular" default>
|
||||
**(reading Angular)**
|
||||
|
||||
```ts
|
||||
Lit.init('project_id');
|
||||
```
|
||||
#
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Signup
|
||||
|
||||
To start using LitLyx to the maximum potential you need an account on our dashboard 🔥
|
||||
**Less than 1-min Setup⏱️**
|
||||
|
||||
|
||||
**LitLyx dashboard is super user friendly**. **[sign in here](https://dashboard.litlyx.com)**.
|
||||
|
||||
You will find this page below 👇 just click on "Continue with google". Simple.
|
||||
|
||||
<img src="/img/l.jpg" alt="Login on Dashboard" width="600"/>
|
||||
|
||||
##
|
||||
|
||||
:::info
|
||||
|
||||
If the account does not exist, it will `automatically create one` for you.
|
||||
|
||||
:::
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Ehy 👋 Welcome to LitLyx
|
||||
|
||||
This docs aim to be concise and simple to follow in order to setup quickly and easy Litlyx in your project. **Is just 1 minute read-time. ⏱️** Let's dive in!
|
||||
|
||||
## What is LitLyx?
|
||||
|
||||
LitLyx brings real-time analytics and custom events to any JS/TS project with just a single line of code. Enhance your projects with +10 KPIs effortlessly. Enjoy AI-powered dashboards for intuitive data insights, automatic reports sent straight to your email, and seamless CSV file downloads to work on your data.
|
||||
|
||||
|
||||
## Integrating LitLyx
|
||||
|
||||
Integrating LitLyx is simple. Follow this simple code to add Litlyx to your project quickly:
|
||||
|
||||
## Quick Integration Guide
|
||||
|
||||
---
|
||||
|
||||
### Universal Insertion
|
||||
Place this line in your project (recommended below the body tag in index.html):
|
||||
|
||||
|
||||
```html
|
||||
<script defer data-project="project_id_here" src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>
|
||||
```
|
||||
|
||||
This script collects various data from your websites, including `page visits`, `referrers`, `page routes`, `operating systems (OS)`, `browsers`, `countries`, `unique users`, `average session times`, and `real-time user access`. All data is gathered and displayed in real-time in your Litlyx dashboard.
|
||||
|
||||
---
|
||||
|
||||
### Framework-Specific Steps (e.g., Nuxt.js, Next.js, Vue, Angular, React)
|
||||
|
||||
1. **Sign in**: Visit 👉 [sign in page](https://dashboard.litlyx.com).
|
||||
2. **Create Your First Project**: Simply enter a name for your project to get started.
|
||||
3. **Copy your project_id**: Copy the project id from the dashboard.
|
||||
4. **Setup LitLyx**: Use the following commands to install and initialize LitLyx 👇
|
||||
|
||||
```bash
|
||||
npm i litlyx-js
|
||||
```
|
||||
|
||||
```ts
|
||||
//import
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
|
||||
```ts
|
||||
//initialize & auto-collect page visits and many more insights
|
||||
Lit.init('project_id');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Why Choose LitLyx?
|
||||
|
||||
Litlyx have transparency at his core. We are `Open-Source`, so you can inspect our code, in his entirety and see what happen behind the scene.
|
||||
|
||||
### Our clients love it for this stuffs👇
|
||||
|
||||
- **Fast**: Setup in less than a minute.
|
||||
- **Real-Time**: Real-time feedback on user interactions & website performance.
|
||||
- **Lightweight**: less than 4 KB lib size.
|
||||
- **User-Friendly**: Designed with simplicity in mind.
|
||||
|
||||
### Enhance your website or app with LitLyx today! 🔥
|
||||
@@ -1,70 +0,0 @@
|
||||
import { themes as prismThemes } from 'prism-react-renderer';
|
||||
import type { Config } from '@docusaurus/types';
|
||||
import type * as Preset from '@docusaurus/preset-classic';
|
||||
|
||||
const config: Config = {
|
||||
title: 'Litlyx',
|
||||
tagline: '',
|
||||
favicon: 'img/logo.png',
|
||||
url: 'https://litlyx.com',
|
||||
baseUrl: '/',
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en'],
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'classic',
|
||||
{
|
||||
docs: {
|
||||
routeBasePath: '/', // Set this to '/' to make the docs page the main page
|
||||
sidebarPath: './sidebars.ts',
|
||||
},
|
||||
blog: false, // Disable the blog
|
||||
theme: {
|
||||
customCss: './src/css/custom.css',
|
||||
},
|
||||
} satisfies Preset.Options,
|
||||
],
|
||||
],
|
||||
|
||||
themeConfig: {
|
||||
colorMode: {
|
||||
defaultMode: 'dark', // Set default mode to dark
|
||||
disableSwitch: true, // Disable the switch so users cannot change the mode
|
||||
respectPrefersColorScheme: false, // Ensure it does not respect the user's system preference
|
||||
},
|
||||
navbar: {
|
||||
logo: {
|
||||
alt: 'Logo',
|
||||
src: 'img/logo.png',
|
||||
href: '/', // Ensure it points to the main docs page
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'docSidebar',
|
||||
sidebarId: 'DocsSideBar',
|
||||
position: 'left',
|
||||
label: 'Docs',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/Litlyx/litlyx',
|
||||
label: 'Github Repo',
|
||||
position: 'right',
|
||||
className: 'navbar__link navbar__link--github',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'light',
|
||||
links: [],
|
||||
copyright: `© ${new Date().getFullYear()} Litlyx | All rights reserved.`,
|
||||
},
|
||||
prism: {
|
||||
theme: prismThemes.github,
|
||||
darkTheme: prismThemes.dracula,
|
||||
},
|
||||
} satisfies Preset.ThemeConfig,
|
||||
};
|
||||
|
||||
export default config;
|
||||
22769
docs/package-lock.json
generated
22769
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"name": "litlyx-docs",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids",
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "3.3.2",
|
||||
"@docusaurus/preset-classic": "3.3.2",
|
||||
"@mdx-js/react": "^3.0.0",
|
||||
"clsx": "^2.0.0",
|
||||
"docusaurus": "^1.14.7",
|
||||
"prism-react-renderer": "^2.3.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "3.3.2",
|
||||
"@docusaurus/tsconfig": "3.3.2",
|
||||
"@docusaurus/types": "3.3.2",
|
||||
"typescript": "~5.2.2"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 3 chrome version",
|
||||
"last 3 firefox version",
|
||||
"last 5 safari version"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0"
|
||||
}
|
||||
}
|
||||
15518
docs/pnpm-lock.yaml
generated
15518
docs/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,18 +0,0 @@
|
||||
import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
|
||||
|
||||
/**
|
||||
* Creating a sidebar enables you to:
|
||||
- create an ordered group of docs
|
||||
- render a sidebar for each doc of that group
|
||||
- provide next/previous navigation
|
||||
|
||||
The sidebars can be generated from the filesystem, or explicitly defined here.
|
||||
|
||||
Create as many sidebars as you want.
|
||||
*/
|
||||
const sidebars: SidebarsConfig = {
|
||||
// By default, Docusaurus generates a sidebar from the docs folder structure
|
||||
DocsSideBar: [{type: 'autogenerated', dirName: '.'}],
|
||||
};
|
||||
|
||||
export default sidebars;
|
||||
@@ -1,67 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
|
||||
description: JSX.Element;
|
||||
};
|
||||
|
||||
const FeatureList: FeatureItem[] = [
|
||||
{
|
||||
title: 'One-Line code Configuration',
|
||||
Svg: require('@site/static/img/one.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Quickly integrate LitLyx using just a single line of code, and start gathering critical insights instantly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Easy Documentation',
|
||||
Svg: require('@site/static/img/doc.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Access simple, easy-to-follow documentation helping you get started and make the most out of the tool, quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Plug Anywhere',
|
||||
Svg: require('@site/static/img/plug.svg').default,
|
||||
description: (
|
||||
<>
|
||||
More than 15+ JS/TS Framework supported. The vanilla JS Script can plug in any solution even WordPress or PHP.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({title, Svg, description}: FeatureItem) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures(): JSX.Element {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #2a66c8;
|
||||
--ifm-color-primary-dark: #2458a7;
|
||||
--ifm-color-primary-darker: #204a93;
|
||||
--ifm-color-primary-darkest: #1a3c70;
|
||||
--ifm-color-primary-light: #4a7cd0;
|
||||
--ifm-color-primary-lighter: #6290d4;
|
||||
--ifm-color-primary-lightest: #7ca3db;
|
||||
--ifm-code-font-size: 95%;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #409cff;
|
||||
--ifm-color-primary-dark: #368bdf;
|
||||
--ifm-color-primary-darker: #3179c8;
|
||||
--ifm-color-primary-darkest: #2862a2;
|
||||
--ifm-color-primary-light: #53a9ff;
|
||||
--ifm-color-primary-lighter: #6cb4ff;
|
||||
--ifm-color-primary-lightest: #84c0ff;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/* Targeting the GitHub link button */
|
||||
.navbar__link--github {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar__link--github:hover {
|
||||
background-color: #555;
|
||||
color: #ddd;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40rem;
|
||||
text-align: center;
|
||||
background: radial-gradient(rgb(1, 1, 77), black);
|
||||
}
|
||||
|
||||
.hero img {
|
||||
max-width: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Heading from '@theme/Heading';
|
||||
|
||||
import styles from './index.module.css';
|
||||
|
||||
|
||||
function MainHeader() {
|
||||
return (
|
||||
<header className={clsx('hero', styles.hero)}>
|
||||
<img src="/img/logo.png" alt="Logo" />
|
||||
<h1 className="hero-title">Welcome to LitLyx Docs</h1>
|
||||
<h3 className="hero-title">One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard</h3>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
to="/intro">
|
||||
Go To Docs | 1 Min Read
|
||||
</Link>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
return (
|
||||
<Layout
|
||||
title={`LitLyx`}
|
||||
description="LitLyx offers ultra-fast, real-time analytics and custom events with just one line of code. It seamlessly integrates with over 15 JavaScript/TypeScript frameworks. Designed for developers, it's also accessible to everyone from designers to investors, enhancing your projects with valuable insights.
|
||||
">
|
||||
<MainHeader />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
0
docs/static/.nojekyll
vendored
0
docs/static/.nojekyll
vendored
BIN
docs/static/img/dchart.jpg
vendored
BIN
docs/static/img/dchart.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
1
docs/static/img/doc.svg
vendored
1
docs/static/img/doc.svg
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.0 KiB |
19
docs/static/img/favicon.svg
vendored
19
docs/static/img/favicon.svg
vendored
@@ -1,19 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M278.66,769.23l-31.37-7.3c-50.32-11.72-95.96-40.47-128.51-80.96c-33.05-41.12-51.25-92.87-51.25-145.73
|
||||
v-13.89h13.89c28.46,0,53.53-8.94,76.63-27.31c33.12-26.29,60.92-71.54,82.65-134.52c4.74-13.7,9.28-28.6,13.49-44.3
|
||||
c28.71-107.29,32.16-217,32.2-218.09l0.71-24.47l20.64,13.15c1.78,1.14,44.22,28.47,92.17,84.44
|
||||
c44.13,51.52,101.4,138.15,123.55,258.27l4.29,23.26l-22.4-7.58c-21.06-7.13-43.15-10.74-65.66-10.74
|
||||
c-113.02,0-204.97,91.95-204.97,204.97c0,36.26,9.59,71.87,27.72,102.97L278.66,769.23z M95.72,548.47
|
||||
c2.64,42.27,17.97,81.82,44.71,115.09c22.08,27.47,50.99,48.8,83.35,61.87c-11.07-27.5-16.84-57.06-16.84-87
|
||||
c0-128.34,104.41-232.75,232.75-232.75c17.59,0,34.96,1.95,51.89,5.81c-36.34-158.52-135.99-253.05-178.8-287.43
|
||||
c-2.71,39.67-10.44,118.7-31.75,198.36c-4.39,16.34-9.12,31.87-14.07,46.17c-23.48,68.05-54.31,117.58-91.63,147.2
|
||||
C151.41,534.81,124.68,545.78,95.72,548.47z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
BIN
docs/static/img/first.jpg
vendored
BIN
docs/static/img/first.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 248 KiB |
BIN
docs/static/img/l.jpg
vendored
BIN
docs/static/img/l.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
docs/static/img/logo.png
vendored
BIN
docs/static/img/logo.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
1
docs/static/img/one.svg
vendored
1
docs/static/img/one.svg
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.9 KiB |
1
docs/static/img/plug.svg
vendored
1
docs/static/img/plug.svg
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,7 +0,0 @@
|
||||
{
|
||||
// This file is not used in compilation. It is here just for a nice editor experience.
|
||||
"extends": "@docusaurus/tsconfig",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ useSeoMeta({
|
||||
ogTitle: 'Litlyx - One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard',
|
||||
description: 'Track over 10 KPIs effortlessly with Litlyx. One line of code, open-source, lightweight, custom events, AI Data-Analyst at your service and affordable. Start for free!',
|
||||
ogDescription: 'Track over 10 KPIs effortlessly with Litlyx. One line of code, open-source, lightweight, custom events, AI Data-Analyst at your service and affordable. Start for free!',
|
||||
keywords: 'Litlyx, analytics tracking, real-time analytics, open-source analytics, minimal setup, KPI tracking, one line of code, high customization, AI data analyst assistant, report generation, user-friendly analytics, business intelligence, data visualization, performance metrics, customizable dashboards, data insights, seamless integration, powerful analytics',
|
||||
author: 'Litlyx',
|
||||
ogImage: 'https://litlyx.com/ogimage.jpg',
|
||||
ogType: 'website',
|
||||
|
||||
29
landing/blog/Blog.ts
Normal file
29
landing/blog/Blog.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export type BlogPost = {
|
||||
author: string,
|
||||
authorImage: string,
|
||||
created_at: string,
|
||||
image: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
id: string
|
||||
}
|
||||
|
||||
export const homePostsIndexes = ref<number[]>([
|
||||
0
|
||||
])
|
||||
|
||||
export const blogPosts = ref<BlogPost[]>([
|
||||
{
|
||||
author: 'Antonio, CEO at Litlyx',
|
||||
authorImage: 'AntonioVerdiglione.jpg',
|
||||
image: 'posts/presenting-litlyx.jpg',
|
||||
created_at: "Jul 16, 2024",
|
||||
title: 'Presenting Litlyx',
|
||||
subtitle: 'Our Why. Our Vision. Our Manifestation of Intent',
|
||||
id: 'presenting-litlyx'
|
||||
}
|
||||
]);
|
||||
|
||||
export const homePosts = computed(() => {
|
||||
return blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
|
||||
})
|
||||
16
landing/components/MainButton.vue
Normal file
16
landing/components/MainButton.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{
|
||||
action?: () => {},
|
||||
link?: string,
|
||||
target?: string
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink @click="action?.()" :to="link" :target="target || ''"
|
||||
class="poppins cursor-pointer font-[500] px-10 py-[.3rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] rounded-xl">
|
||||
<slot></slot>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
58
landing/components/blog/ArticleWrapper.vue
Normal file
58
landing/components/blog/ArticleWrapper.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup>
|
||||
import { blogPosts } from '~/blog/Blog';
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
const route = useRoute();
|
||||
const id = route.path.replace('/blog/', '');
|
||||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="article flex justify-center">
|
||||
<article class="max-w-[1000px]">
|
||||
<header>
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="text-6xl font-normal">
|
||||
{{ blogPost?.title }}
|
||||
</h1>
|
||||
<p class="mt-6 text-2xl">
|
||||
{{ blogPost?.subtitle }}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="w-9 h-9 rounded-full" :src="'/blog/' + blogPost?.authorImage" :alt="blogPost?.author">
|
||||
<p class="align-middle mt-4">
|
||||
{{ blogPost?.author }}
|
||||
</p>
|
||||
<span class="text-gray-400"> • {{ blogPost?.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="w-full h-full rounded-xl outline outline-[1px] outline-gray-100/20 mt-10 mb-10"
|
||||
:src="'/blog/' + blogPost?.image" :alt="blogPost?.title">
|
||||
</header>
|
||||
<slot></slot>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article * {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header,
|
||||
section,
|
||||
footer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,68 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
export type PricingCardProp = {
|
||||
title: string,
|
||||
cost: string,
|
||||
features: string[],
|
||||
desc: string,
|
||||
active: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{ data: PricingCardProp }>();
|
||||
|
||||
|
||||
function onUpgradeClick() {
|
||||
window.open('https://dashboard.litlyx.com')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 bg-[#303030] rounded-xl pricing-card flex flex-col">
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-[1.1rem] font-semibold mb-4">
|
||||
{{ data.title }}
|
||||
</div>
|
||||
<div class="flex gap-1 items-end mb-2">
|
||||
<div class="text-[1.1rem] font-semibold">
|
||||
€{{ data.cost }}
|
||||
</div>
|
||||
<div class="text-text-sub text-[.9rem] mb-[.15rem]">
|
||||
per month
|
||||
</div>
|
||||
</div>
|
||||
<div @click="onUpgradeClick()" v-if="data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#3a3af5] rounded-md py-2 text-center">
|
||||
Start now for FREE
|
||||
</div>
|
||||
<div @click="onUpgradeClick()" v-if="!data.active" class="cursor-pointer text-[1rem] font-semibold bg-[#141414] rounded-md py-2 text-center">
|
||||
Go to Dashboard
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
|
||||
|
||||
<div class="flex flex-col gap-1 grow">
|
||||
<div class="flex gap-2 items-center" v-for="feature of data.features">
|
||||
<i class="fas fa-check"></i>
|
||||
<div>
|
||||
{{ feature }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-400 h-[1px] w-full my-4"></div>
|
||||
|
||||
<div class="text-text-sub text-[.9rem] h-[20%]">
|
||||
{{ data.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pricing-card * {
|
||||
font-family: "Poppins";
|
||||
}
|
||||
</style>
|
||||
69
landing/components/pricing/PricingCardGeneric.vue
Normal file
69
landing/components/pricing/PricingCardGeneric.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
|
||||
export type PricingCardProp = {
|
||||
title: string,
|
||||
price: string,
|
||||
subs: string[],
|
||||
features: string[],
|
||||
cta: string,
|
||||
link?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{ datas: PricingCardProp[] }>();
|
||||
|
||||
const currentIndex = ref<number>(0);
|
||||
|
||||
const data = computed(() => {
|
||||
return props.datas[currentIndex.value];
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="bg-[#151515] outline outline-[1px] outline-[#262626] py-8 px-10 rounded-lg w-full max-w-[30rem]">
|
||||
|
||||
<div class="flex flex-col gap-3 text-center">
|
||||
<div class="poppins text-xl font-light"> {{ data.title }} </div>
|
||||
<div class="poppins text-4xl font-medium"> {{ data.price }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col text-center h-[6rem] justify-center gap-2">
|
||||
<div v-if="datas.length > 1">
|
||||
<URange :ui="{
|
||||
thumb: {
|
||||
color: 'text-[#5680f8]'
|
||||
},
|
||||
progress: {
|
||||
background: '!bg-[#5680f8]'
|
||||
}
|
||||
}" :min="0" :max="datas.length - 1" v-model="currentIndex">
|
||||
</URange>
|
||||
</div>
|
||||
<div class="poppins" v-for="sub of data.subs"> {{ sub }} </div>
|
||||
</div>
|
||||
|
||||
<div class="sep bg-[#262626] h-[1px] my-8"></div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2" v-for="feature of data.features">
|
||||
<div class="h-6 w-6">
|
||||
<img class="w-full h-full" :src="'check.png'" alt="Check">
|
||||
</div>
|
||||
<div>{{ feature }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex">
|
||||
<MainButton :link="data.link || 'https://dashboard.litlyx.com'"
|
||||
class="w-full !rounded-md text-center text-[.9rem] !py-2">
|
||||
{{ data.cta }}
|
||||
</MainButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,7 +32,10 @@ nuxtApp.hook("page:finish", () => {
|
||||
</NuxtLink>
|
||||
|
||||
<div class="grow"></div>
|
||||
<div class="flex gap-8 text-[1.1rem] text-white font-[500]">
|
||||
<div class="flex gap-8 text-[1.1rem] text-white font-[500] items-center">
|
||||
<NuxtLink to="https://litlyx.com/blog" class="poppins hover:text-text-sub/90">
|
||||
Blog
|
||||
</NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://dashboard.litlyx.com/live_demo"
|
||||
class="poppins hover:text-text-sub/90">
|
||||
Live demo
|
||||
@@ -40,18 +43,39 @@ nuxtApp.hook("page:finish", () => {
|
||||
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="poppins hover:text-text-sub/90">
|
||||
Docs
|
||||
</NuxtLink>
|
||||
<!-- <NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="poppins hover:text-text-sub/90">
|
||||
GitHub
|
||||
</NuxtLink> -->
|
||||
<NuxtLink to="/pricing" class="poppins hover:text-text-sub/90">
|
||||
Pricing
|
||||
</NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx" class="poppins hover:text-text-sub/90">
|
||||
GitHub
|
||||
|
||||
<NuxtLink to="https://github.com/Litlyx/litlyx"
|
||||
class="cursor-pointer hover:bg-white/10 flex items-center gap-2 rounded-lg outline outline-[1px] outline-white px-6 py-[.3rem]">
|
||||
<div class="w-6 h-6">
|
||||
<svg viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M50.0002 0.000488281C22.3894 0.000488281 0 22.386 0 50.0007C0 72.0924 14.3266 90.8345 34.1933 97.4461C36.692 97.9088 37.6096 96.3614 37.6096 95.0406C37.6096 93.8485 37.563 89.9095 37.5418 85.7316C23.6313 88.7562 20.6961 79.8322 20.6961 79.8322C18.4217 74.0528 15.1446 72.5163 15.1446 72.5163C10.6083 69.4129 15.4865 69.4765 15.4865 69.4765C20.5075 69.8294 23.1513 74.6292 23.1513 74.6292C27.6108 82.2733 34.8482 80.0631 37.7014 78.7859C38.15 75.5539 39.4461 73.3485 40.8758 72.0999C29.7703 70.8352 18.0954 66.5479 18.0954 47.3894C18.0954 41.9308 20.0487 37.4701 23.2474 33.9687C22.7282 32.7091 21.0169 27.6238 23.7317 20.7366C23.7317 20.7366 27.9304 19.3927 37.4853 25.8619C41.4734 24.7537 45.7509 24.1985 50.0002 24.1796C54.2495 24.1985 58.5301 24.7537 62.526 25.8619C72.0696 19.3927 76.2624 20.7366 76.2624 20.7366C78.9839 27.6238 77.2718 32.7091 76.7526 33.9687C79.9584 37.4701 81.8983 41.9304 81.8983 47.3894C81.8983 66.5934 70.2014 70.8223 59.0677 72.0599C60.861 73.6116 62.459 76.6546 62.459 81.3192C62.459 88.0091 62.4009 93.3936 62.4009 95.0406C62.4009 96.3712 63.3009 97.9304 65.8357 97.4394C85.6915 90.8204 100 72.085 100 50.0007C100 22.386 77.6137 0.000488281 50.0002 0.000488281Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M18.7269 71.2268C18.6171 71.475 18.2257 71.5495 17.8701 71.3793C17.5073 71.2162 17.3034 70.8774 17.421 70.628C17.5289 70.3723 17.9202 70.3009 18.2822 70.4727C18.6457 70.6354 18.8528 70.9774 18.7269 71.2268ZM21.1864 73.4212C20.948 73.6424 20.4817 73.5396 20.1653 73.1902C19.8382 72.8416 19.777 72.3758 20.019 72.1511C20.2649 71.9303 20.717 72.0334 21.0448 72.3824C21.3719 72.735 21.4354 73.1981 21.186 73.4216L21.1864 73.4212ZM22.8738 76.229C22.5672 76.4419 22.066 76.2423 21.7566 75.7976C21.4503 75.3533 21.4503 74.82 21.7633 74.6063C22.0738 74.3925 22.5672 74.5847 22.8809 75.0259C23.1867 75.478 23.1867 76.0113 22.8734 76.2293L22.8738 76.229ZM25.727 79.481C25.4529 79.7829 24.8694 79.7022 24.442 79.2896C24.0051 78.8865 23.8832 78.3144 24.1581 78.012C24.4353 77.7093 25.0224 77.7944 25.4529 78.2034C25.887 78.6057 26.0196 79.1822 25.7274 79.481H25.727ZM29.4148 80.579C29.2944 80.9704 28.732 81.1484 28.1658 80.9821C27.6003 80.8108 27.2301 80.3519 27.3442 79.9563C27.4619 79.5622 28.0266 79.3767 28.5971 79.5547C29.1618 79.7253 29.5328 80.1806 29.4152 80.579H29.4148ZM33.6123 81.0445C33.6264 81.457 33.146 81.799 32.5515 81.8064C31.9535 81.8194 31.47 81.4856 31.4637 81.0802C31.4637 80.6637 31.9331 80.3249 32.5307 80.3151C33.1252 80.3033 33.6123 80.6347 33.6123 81.0445ZM37.7353 80.8864C37.8066 81.2888 37.3933 81.7021 36.8031 81.8119C36.2228 81.9178 35.6855 81.6695 35.6114 81.2707C35.5393 80.8582 35.9604 80.4453 36.5396 80.3382C37.131 80.2355 37.66 80.4774 37.7353 80.8864Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
210+
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
</div>
|
||||
<div class="px-10 pt-6 lg:pt-0">
|
||||
<NuxtLink to="https://dashboard.litlyx.com" target="_blank"
|
||||
class="poppins font-[500] px-10 py-[.3rem] bg-accent rounded-xl animated-button">
|
||||
|
||||
|
||||
<MainButton link="https://dashboard.litlyx.com">
|
||||
Get started
|
||||
</NuxtLink>
|
||||
</MainButton>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -90,6 +114,15 @@ nuxtApp.hook("page:finish", () => {
|
||||
</div>
|
||||
|
||||
|
||||
<NuxtLink to="https://litlyx.com/blog" class="flex justify-between items-center mr-2">
|
||||
<div class="hover:text-text-sub/90 py-3">
|
||||
Blog
|
||||
</div>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="divider border-b border-gray-500/40"></div>
|
||||
|
||||
<NuxtLink target="_blank" to="https://docs.litlyx.com"
|
||||
class="flex justify-between items-center mr-2">
|
||||
<div class="hover:text-text-sub/90 py-3">
|
||||
@@ -107,16 +140,30 @@ nuxtApp.hook("page:finish", () => {
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
</NuxtLink>
|
||||
|
||||
|
||||
<div class="divider border-b border-gray-500/40"></div>
|
||||
|
||||
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
|
||||
class="flex justify-between items-center mr-2">
|
||||
<div class="hover:text-text-sub/90 py-3"> GitHub </div>
|
||||
<div> <i class="fas fa-chevron-right"></i> </div>
|
||||
|
||||
<NuxtLink to="https://github.com/Litlyx/litlyx"
|
||||
class="cursor-pointer hover:bg-white/10 mt-10 flex justify-center items-center gap-2 rounded-lg outline outline-[1px] outline-white px-6 py-3">
|
||||
<div class="w-6 h-6">
|
||||
<svg viewBox="0 0 100 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M50.0002 0.000488281C22.3894 0.000488281 0 22.386 0 50.0007C0 72.0924 14.3266 90.8345 34.1933 97.4461C36.692 97.9088 37.6096 96.3614 37.6096 95.0406C37.6096 93.8485 37.563 89.9095 37.5418 85.7316C23.6313 88.7562 20.6961 79.8322 20.6961 79.8322C18.4217 74.0528 15.1446 72.5163 15.1446 72.5163C10.6083 69.4129 15.4865 69.4765 15.4865 69.4765C20.5075 69.8294 23.1513 74.6292 23.1513 74.6292C27.6108 82.2733 34.8482 80.0631 37.7014 78.7859C38.15 75.5539 39.4461 73.3485 40.8758 72.0999C29.7703 70.8352 18.0954 66.5479 18.0954 47.3894C18.0954 41.9308 20.0487 37.4701 23.2474 33.9687C22.7282 32.7091 21.0169 27.6238 23.7317 20.7366C23.7317 20.7366 27.9304 19.3927 37.4853 25.8619C41.4734 24.7537 45.7509 24.1985 50.0002 24.1796C54.2495 24.1985 58.5301 24.7537 62.526 25.8619C72.0696 19.3927 76.2624 20.7366 76.2624 20.7366C78.9839 27.6238 77.2718 32.7091 76.7526 33.9687C79.9584 37.4701 81.8983 41.9304 81.8983 47.3894C81.8983 66.5934 70.2014 70.8223 59.0677 72.0599C60.861 73.6116 62.459 76.6546 62.459 81.3192C62.459 88.0091 62.4009 93.3936 62.4009 95.0406C62.4009 96.3712 63.3009 97.9304 65.8357 97.4394C85.6915 90.8204 100 72.085 100 50.0007C100 22.386 77.6137 0.000488281 50.0002 0.000488281Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M18.7269 71.2268C18.6171 71.475 18.2257 71.5495 17.8701 71.3793C17.5073 71.2162 17.3034 70.8774 17.421 70.628C17.5289 70.3723 17.9202 70.3009 18.2822 70.4727C18.6457 70.6354 18.8528 70.9774 18.7269 71.2268ZM21.1864 73.4212C20.948 73.6424 20.4817 73.5396 20.1653 73.1902C19.8382 72.8416 19.777 72.3758 20.019 72.1511C20.2649 71.9303 20.717 72.0334 21.0448 72.3824C21.3719 72.735 21.4354 73.1981 21.186 73.4216L21.1864 73.4212ZM22.8738 76.229C22.5672 76.4419 22.066 76.2423 21.7566 75.7976C21.4503 75.3533 21.4503 74.82 21.7633 74.6063C22.0738 74.3925 22.5672 74.5847 22.8809 75.0259C23.1867 75.478 23.1867 76.0113 22.8734 76.2293L22.8738 76.229ZM25.727 79.481C25.4529 79.7829 24.8694 79.7022 24.442 79.2896C24.0051 78.8865 23.8832 78.3144 24.1581 78.012C24.4353 77.7093 25.0224 77.7944 25.4529 78.2034C25.887 78.6057 26.0196 79.1822 25.7274 79.481H25.727ZM29.4148 80.579C29.2944 80.9704 28.732 81.1484 28.1658 80.9821C27.6003 80.8108 27.2301 80.3519 27.3442 79.9563C27.4619 79.5622 28.0266 79.3767 28.5971 79.5547C29.1618 79.7253 29.5328 80.1806 29.4152 80.579H29.4148ZM33.6123 81.0445C33.6264 81.457 33.146 81.799 32.5515 81.8064C31.9535 81.8194 31.47 81.4856 31.4637 81.0802C31.4637 80.6637 31.9331 80.3249 32.5307 80.3151C33.1252 80.3033 33.6123 80.6347 33.6123 81.0445ZM37.7353 80.8864C37.8066 81.2888 37.3933 81.7021 36.8031 81.8119C36.2228 81.9178 35.6855 81.6695 35.6114 81.2707C35.5393 80.8582 35.9604 80.4453 36.5396 80.3382C37.131 80.2355 37.66 80.4774 37.7353 80.8864Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-[1rem]">
|
||||
210+
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
Star us on GitHub
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<div class="divider border-b border-gray-500/40"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -146,6 +193,12 @@ nuxtApp.hook("page:finish", () => {
|
||||
<a class="hover:text-gray-400" href="https://www.github.com/Litlyx/litlyx" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a class="hover:text-gray-400" href="https://x.com/litlyx" target="_blank">
|
||||
<i class="fab fa-x-twitter"></i>
|
||||
</a>
|
||||
<a class="hover:text-gray-400" href="https://dev.to/litlyx-org" target="_blank">
|
||||
<i class="fab fa-dev"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -164,11 +217,12 @@ nuxtApp.hook("page:finish", () => {
|
||||
|
||||
<div class="text-text-sub/60 font-semibold text-[1.3rem]"> Product </div>
|
||||
|
||||
<NuxtLink to="/pricing" class="hover:text-accent cursor-pointer"> Pricing </NuxtLink>
|
||||
<NuxtLink to="/blog" class="hover:text-accent cursor-pointer"> Blog </NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://docs.litlyx.com" class="hover:text-accent cursor-pointer">
|
||||
Docs </NuxtLink>
|
||||
<NuxtLink target="_blank" to="https://github.com/Litlyx/litlyx"
|
||||
class="hover:text-accent cursor-pointer"> Github </NuxtLink>
|
||||
<NuxtLink to="/pricing" class="hover:text-accent cursor-pointer"> Pricing </NuxtLink>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="text-text-sub/60 font-semibold text-[1.3rem]"> Company </div>
|
||||
|
||||
81
landing/pages/blog/index.vue
Normal file
81
landing/pages/blog/index.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
|
||||
import { blogPosts, homePosts } from '~/blog/Blog';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="blog-home h-full flex justify-center overflow-y-auto">
|
||||
|
||||
<div class="flex flex-col gap-6 px-6 py-6 max-w-[1200px]">
|
||||
|
||||
<div class="text-center mt-8">
|
||||
<h1 class="poppins text-4xl mb-4 font-medium">
|
||||
Blog
|
||||
</h1>
|
||||
<div class="poppins text-2xl mb-4 font-normal text-white/80">
|
||||
Stay updated with latest news about Litlyx. We "Build in Public".
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-posts flex gap-10 justify-center">
|
||||
<NuxtLink tag="article" :to="'/blog/' + post.id" v-for="post of homePosts" class="flex flex-col gap-2">
|
||||
<img class="w-full h-full rounded-xl outline outline-[1px] outline-gray-100/20"
|
||||
:src="'/blog/' + post.image" :alt="post.title">
|
||||
<h4 class="font-normal mt-2"> {{ post.title }} </h4>
|
||||
<div class="flex gap-3 items-center text-[1rem]">
|
||||
<img class="w-9 h-9 rounded-full" :src="'/blog/' + post.authorImage" :alt="post.author">
|
||||
<div class="font-normal"> {{ post.author }} </div>
|
||||
<div class="text-gray-400"> • {{ post.created_at }} </div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<h5 class="mt-12 hidden"> Latest posts </h5>
|
||||
|
||||
<div class="grid-cols-3 gap-2 hidden">
|
||||
<NuxtLink tag="article" :to="'/blog/' + post.id" v-for="post of blogPosts" class="flex flex-col gap-2">
|
||||
<img class="rounded-xl outline outline-[1px] outline-gray-100/20" :src="'/blog/' + post.image"
|
||||
:alt="post.title">
|
||||
<h5 class="font-normal mt-2"> {{ post.title }} </h5>
|
||||
<div class="flex gap-3 items-center text-[.9rem]">
|
||||
<img class="w-8 h-8 rounded-full" :src="'/blog/' + post.authorImage" :alt="post.author">
|
||||
<div class="font-normal"> {{ post.author }} </div>
|
||||
<div class="text-gray-400"> • {{ post.created_at }} </div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="pb-20"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.blog-home * {
|
||||
font-family: "Poppins"
|
||||
}
|
||||
</style>
|
||||
143
landing/pages/blog/presenting-litlyx.vue
Normal file
143
landing/pages/blog/presenting-litlyx.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
import { blogPosts } from '~/blog/Blog';
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
const route = useRoute();
|
||||
const id = route.path.replace('/blog/', '');
|
||||
const blogPost = blogPosts.value.find(e => e.id == id);
|
||||
|
||||
useSeoMeta({
|
||||
title: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
ogTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
description: () => blogPost?.subtitle,
|
||||
ogDescription: () => blogPost?.subtitle,
|
||||
keywords: 'Litlyx blog, analytics insights, real-time analytics, AI-powered analytics, data visualization, performance metrics, KPI tracking, custom events, open-source analytics, business intelligence, data trends, developer insights, analytics updates, data-driven decisions, blog updates, tech news, Litlyx updates, analytics best practices',
|
||||
author: () => blogPost?.author,
|
||||
ogImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogType: 'website',
|
||||
ogUrl: 'https://litlyx.com/blog',
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: () => `Litlyx Blog - ${blogPost?.title}`,
|
||||
twitterDescription: () => blogPost?.subtitle,
|
||||
twitterImage: () => 'https://litlyx.com/blog/' + blogPost?.image,
|
||||
ogSiteName: 'Litlyx',
|
||||
ogLocale: 'en_US',
|
||||
ogImageWidth: '1200',
|
||||
ogImageHeight: '630'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlogArticleWrapper>
|
||||
<div class="text-white/80">
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why?</h2>
|
||||
<p>When I was a CTO at one of my previous startups, I faced significant challenges in tracking and
|
||||
analyzing
|
||||
metrics effectively. Our team needed real-time analytics, yet existing solutions
|
||||
were
|
||||
often outdated, expensive, and complicated to set up.</p>
|
||||
<p>I needed speed. Speed like a Ferrari.</p>
|
||||
<p>We started working closely with a growth hacking team at that time. With pressure from the CEO and
|
||||
the
|
||||
growth team, I had to manage a team of five developers, organize feature implementations, and set up
|
||||
analytics.</p>
|
||||
<p>It was rough.</p>
|
||||
<p>I struggled to get actionable data without a complex setup, and the lack of a lightweight,
|
||||
customizable analytics tool that was fast to implement.</p>
|
||||
<p>It was a real problem.</p>
|
||||
<p>Frustrated with the limitations of current analytics solutions, I opted for MixPanel for tracking
|
||||
custom
|
||||
events, Google Analytics for tracking visits & superficial metrics, and Clarity for tracking user
|
||||
behaviors. But… MixPanel required intricate setups for detailed event tracking, Google Analytics
|
||||
provided robust data on page visits but was hard to configure, and Clarity offered insights into
|
||||
user
|
||||
behavior but lacked real-time capabilities. There wasn’t a tool that did it all in one solution nor
|
||||
was
|
||||
created for each tech-stack out there.</p>
|
||||
<p>For this level of complexity in metrics, developers MUST be involved. period.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why Dev-Centric</h2>
|
||||
<p>We're building Litlyx, an open-source, lightweight analytics
|
||||
platform
|
||||
designed for simplicity to empower each developer to track analytics within seconds.</p>
|
||||
<p>Our mission was to achieve a 30-seconds setup in all tech stacks.</p>
|
||||
<p>Spoiler Alert: we did!</p>
|
||||
<p>We needed to create a tool that not only tracks your KPIs but also offers high
|
||||
customization, an AI data-analyst assistant, and comprehensive
|
||||
analytics report generation.</p>
|
||||
<p>Everything about analytics with Litlyx should be Exceptionally Easy and Fast.</p>
|
||||
<p>Devs should be focusing on actual Feature implementations and not wasting-time on reading complex
|
||||
documentations.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Why now, in 2024?</h2>
|
||||
<p>The current landscape of analytics tools is outdated and fragmented. Most solutions
|
||||
were
|
||||
developed over a decade ago, primarily focusing on large enterprises and emphasizing sales-led
|
||||
growth or
|
||||
marketing.</p>
|
||||
<p>These tools often ignore the needs of developers and smaller teams. But they are essential.</p>
|
||||
<p>No one is prioritizing a developer-first analytics experience or innovating in the
|
||||
analytics space.</p>
|
||||
<p>The time has come to rethink analytics for 2024 and beyond. We need a tool that aligns with modern
|
||||
app
|
||||
development standards and provides a seamless, intuitive, and most importantly, dev-centric
|
||||
experience.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">How the future looks</h2>
|
||||
<p>Litlyx aims to be the No.1 tool for analytics tracking that comes to mind for
|
||||
developers, known for efficiency, simplicity, and cost-effectiveness.</p>
|
||||
<p>We want to be the go-to solution for collecting analytics, reducing fragmentation,
|
||||
enhancing aggregation, and acting as a connector for databases and analytics tools that people
|
||||
already
|
||||
use. Our goal is to be the only place people need for everything related to analytics.</p>
|
||||
<p>We are committed to being dev-centric always.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="text-3xl font-semibold">Join us</h2>
|
||||
<p>The Litlyx Team have taken the responsibility to create the simplest yet most effective way to track
|
||||
analytics.</p>
|
||||
<p>We're building something that developers can really love.</p>
|
||||
<p>We're building it <a href="https://github.com/Litlyx/litlyx">Open-Source</a>,
|
||||
because we
|
||||
trust transparency and we know how much difficult it is to gain control on where your data goes.</p>
|
||||
<p>Probably we will make some mistakes in the process, but we are humans. We are devs!</p>
|
||||
<p>Join our journey and be among the pioneer developers to experience analytics tracking with
|
||||
Litlyx.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</BlogArticleWrapper>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article * {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
header,
|
||||
section,
|
||||
footer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import { Vue3Lottie } from 'vue3-lottie';
|
||||
|
||||
import type { PricingCardProp } from '~/components/pricing/PricingCardGeneric.vue';
|
||||
|
||||
const starterTierCardData = ref<any>({
|
||||
title: 'STARTER',
|
||||
cost: '0',
|
||||
features: [
|
||||
"3K visits/events per month",
|
||||
"10 AI Interaction per month",
|
||||
"1 month data retention",
|
||||
"Limited reports",
|
||||
"1 Team member",
|
||||
"Limited Automatic Email Report",
|
||||
"Shared Server & DB",
|
||||
"Low priority email support",
|
||||
],
|
||||
desc: `Free project are not reliable and sometimes
|
||||
can experience some data loss.To have a
|
||||
dedicated server we suggest to upgrade the
|
||||
plan to an higher one!`,
|
||||
active: true
|
||||
});
|
||||
|
||||
const accelerationTierCardData = ref<any>({
|
||||
title: 'ACCELERATION',
|
||||
cost: '9,99',
|
||||
features: [
|
||||
"150K visits/events per month",
|
||||
"100 AI Interaction per month",
|
||||
"6 months data retention",
|
||||
"Limited reports",
|
||||
"1 Team member",
|
||||
"Limited Automatic Email Report",
|
||||
"Shared Server & DB",
|
||||
"Low priority email support"
|
||||
],
|
||||
desc: `Your project is entering a growth phase. We simplify data analysis for you. For more support, try our Expansion plan—it's worth it!`,
|
||||
active: false
|
||||
});
|
||||
|
||||
const expansionTierCardData = ref<any>({
|
||||
title: 'EXPANSION',
|
||||
cost: '39,99',
|
||||
features: [
|
||||
"500K visits/events per month",
|
||||
"5000 AI Interaction per month",
|
||||
"2 years data retention",
|
||||
"Unlimited reports",
|
||||
"10 Team member",
|
||||
"Unlimited Automatic Email Report",
|
||||
"Dedicated Server & DB",
|
||||
"high priority email support"
|
||||
],
|
||||
desc: `We will support you with everything we can offer and give you the full power of our service. If you need more space and are growing, contact us for a custom offer!`,
|
||||
active: false
|
||||
});
|
||||
|
||||
definePageMeta({ layout: 'header' });
|
||||
|
||||
|
||||
const freePricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Free',
|
||||
price: '€0 / mo',
|
||||
subs: [
|
||||
'Up to 5000 visits/events per month',
|
||||
'CPM 0€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Email support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 2',
|
||||
'Data retention: 2 Months'
|
||||
],
|
||||
cta: 'Start For Free now!'
|
||||
},
|
||||
]
|
||||
|
||||
const customPricing: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Enterprise',
|
||||
price: 'Custom',
|
||||
subs: [
|
||||
'Unlimited visits/events per month',
|
||||
'Service Tailor-made on needs'
|
||||
],
|
||||
features: [
|
||||
'Priority support',
|
||||
'Server type: DEDICATED',
|
||||
'DB instance: DEDICATED',
|
||||
'Dedicated operator',
|
||||
'White label',
|
||||
'Custom Charts',
|
||||
'Custom Data Aggregation'
|
||||
],
|
||||
cta: 'Let\'s Talk!',
|
||||
link: 'mailto:help@litlyx.com'
|
||||
}
|
||||
]
|
||||
|
||||
const slidePricings: PricingCardProp[] = [
|
||||
{
|
||||
title: 'Incubation',
|
||||
price: '€4,99 / mo',
|
||||
subs: [
|
||||
'Up to 50.000 visits/events per month',
|
||||
'CPM 0,10€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 30',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 6 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Acceleration',
|
||||
price: '€9,99 / mo',
|
||||
subs: [
|
||||
'Up to 150.000 visits/events per month',
|
||||
'CPM 0,06€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 100',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 9 Months'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Growth',
|
||||
price: '€29,99 / mo',
|
||||
subs: [
|
||||
'Up to 500.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 3.000',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Expansion',
|
||||
price: '€59,99 / mo',
|
||||
subs: [
|
||||
'Up to 1.000.000 visits/events per month',
|
||||
'CPM 0,059€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 5.000',
|
||||
'Server type: SHARED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 1 Year'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Scaling',
|
||||
price: '€99,99 / mo',
|
||||
subs: [
|
||||
'Up to 2.500.000 visits/events per month',
|
||||
'CPM 0,039€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 10.000',
|
||||
'Server type: DEDICATED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 2 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
},
|
||||
{
|
||||
title: 'Unicorn',
|
||||
price: '€149,99 / mo',
|
||||
subs: [
|
||||
'Up to 5.000.000 visits/events per month',
|
||||
'CPM 0,029€ per visit/event'
|
||||
],
|
||||
features: [
|
||||
'Discord support',
|
||||
'Unlimited domains',
|
||||
'Unlimited reports',
|
||||
'AI Tokens: 20.000',
|
||||
'Server type: DEDICATED',
|
||||
'Projects: max 3',
|
||||
'Data retention: 3 Years'
|
||||
],
|
||||
cta: 'Go to Cloud Dashboard'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -65,9 +169,27 @@ definePageMeta({ layout: 'header' });
|
||||
|
||||
<div class="home h-full w-full min-h-[40dvh]">
|
||||
|
||||
<div class="p-8">
|
||||
<div class="text-center mt-8">
|
||||
<div class="poppins text-4xl mb-4 font-medium">
|
||||
Pricing
|
||||
</div>
|
||||
<div class="poppins text-2xl mb-4 font-normal text-white/80 px-8">
|
||||
Start for Free and scale as you go
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-8 h-max flex-col lg:flex-row">
|
||||
<div class="p-4">
|
||||
|
||||
<div class="flex gap-12 h-max flex-col lg:flex-row justify-center">
|
||||
<PricingCardGeneric :datas="freePricing">
|
||||
</PricingCardGeneric>
|
||||
<PricingCardGeneric :datas="slidePricings">
|
||||
</PricingCardGeneric>
|
||||
<PricingCardGeneric :datas="customPricing">
|
||||
</PricingCardGeneric>
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex gap-8 h-max flex-col lg:flex-row">
|
||||
<PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
|
||||
<PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
|
||||
@@ -90,7 +212,7 @@ definePageMeta({ layout: 'header' });
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="flex justify-between items-center mt-10">
|
||||
<div class="flex flex-col gap-2">
|
||||
@@ -109,10 +231,47 @@ definePageMeta({ layout: 'header' });
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <Vue3Lottie height="16rem" animation-link="pricing_lottie.json"></Vue3Lottie>
|
||||
<div class="poppins text-[2rem] font-semibold text-center mt-6">
|
||||
Pricing coming soon
|
||||
</div> -->
|
||||
|
||||
<div class="px-8 mt-8 flex flex-col items-center">
|
||||
<div class="poppins text-4xl mb-4 font-medium">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<UAccordion :ui="{
|
||||
wrapper: 'w-full',
|
||||
item: {
|
||||
padding: 'pl-8'
|
||||
}
|
||||
}" color="white" variant="ghost" size="xl" :items="[
|
||||
{
|
||||
label: 'Is Litlyx free?',
|
||||
content: 'We offer a free-forever plan with a 5k/mo limit and 2 months of data retention. We offer plans that grow with you.'
|
||||
},
|
||||
{
|
||||
label: 'What does \'Data Retention\' mean?',
|
||||
content: 'It is the duration your data is available in our database. After the data retention period expires, you will be notified via e-mail. You have 14 days to upgrade to a new plan. If not upgraded, we will start deleting data one day at a time to make space for new data.'
|
||||
},
|
||||
{
|
||||
label: 'Can I export my data?',
|
||||
content: 'Yes! We provide access to raw data, allowing you to download a CSV file and use your data as you wish. It’s always yours!'
|
||||
},
|
||||
{
|
||||
label: 'Is the data collected privacy-focused?',
|
||||
content: 'Yes! All data we collect is anonymous. We have our own tracking system. You can find more details in our Data Policy.'
|
||||
},
|
||||
{
|
||||
label: 'Can I self-host Litlyx?',
|
||||
content: 'Yes! You can self-host your own instance of Litlyx. More information is available on docs.'
|
||||
},
|
||||
{
|
||||
label: 'Did this FAQ help you?',
|
||||
content: 'If you have any more questions or need further clarification, please contact us at help@litlyx.com.'
|
||||
}
|
||||
|
||||
]">
|
||||
</UAccordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
BIN
landing/public/blog/AntonioVerdiglione.jpg
Normal file
BIN
landing/public/blog/AntonioVerdiglione.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
landing/public/blog/posts/presenting-litlyx.jpg
Normal file
BIN
landing/public/blog/posts/presenting-litlyx.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
landing/public/check.png
Normal file
BIN
landing/public/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
50
landing/public/sitemap.xml
Normal file
50
landing/public/sitemap.xml
Normal file
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset
|
||||
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||
<url>
|
||||
<loc>https://litlyx.com/</loc>
|
||||
<lastmod>2024-07-03T14:44:19+00:00</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.00</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/blog</loc>
|
||||
<lastmod>2024-07-16T10:45:11+00:00</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.00</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/pricing</loc>
|
||||
<lastmod>2024-07-04T10:45:11+00:00</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/contacts</loc>
|
||||
<lastmod>2024-07-04T10:45:11+00:00</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/privacy</loc>
|
||||
<lastmod>2024-07-04T10:45:11+00:00</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/terms</loc>
|
||||
<lastmod>2024-07-04T10:45:11+00:00</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://litlyx.com/data_policy</loc>
|
||||
<lastmod>2024-07-04T10:45:11+00:00</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.80</priority>
|
||||
</url>
|
||||
|
||||
|
||||
</urlset>
|
||||
147
readme.md
147
readme.md
@@ -1,147 +0,0 @@
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/devto1.png"/>
|
||||
</p>
|
||||
|
||||
<h4 align="center">
|
||||
🌐 <a href="https://litlyx.com">Website</a> 📚 <a href="https://docs.litlyx.com">Docs</a> 🔥 <a href="https://dashboard.litlyx.com">Start for Free!</a>
|
||||
</h4>
|
||||
|
||||
<br />
|
||||
|
||||
#
|
||||
|
||||
<p align="center">
|
||||
A single-line code analytics solution that integrates with every JavaScript/TypeScript framework. <br />
|
||||
Track 10+ KPIs and as many custom events as you want for your website or web app.<br />
|
||||
An AI Data Analyst Assistant ready to help you!
|
||||
</p>
|
||||
|
||||
#
|
||||
|
||||
<br />
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/screen.png"/>
|
||||
</p>
|
||||
|
||||
#
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#
|
||||
|
||||
# Join Litlyx's Community Channel on Discord
|
||||
|
||||
If you need more information, help, or want to provide general feedback, feel free to join us here: [Litlyx on Discord](https://discord.gg/9cQykjsmWX)
|
||||
|
||||
# Installation
|
||||
|
||||
You can install Litlyx using `npm`, `yarn`, or `pnpm`:
|
||||
|
||||
```sh
|
||||
npm i litlyx-js
|
||||
```
|
||||
|
||||
Or import it directly into your JavaScript code:
|
||||
|
||||
```html
|
||||
<script defer data-project="project_id_here" src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>
|
||||
```
|
||||
|
||||
Importing Litlyx with a direct script already tracks 10 KPIs such as page visits, browsers, devices, OS, real-time online users, and many more.
|
||||
|
||||
> [!NOTE]
|
||||
> - If you want to track custom events, you need to import the library with `npm`, `yarn`, or `pnpm`. Continue reading to find out more!
|
||||
|
||||
#### You can find the official documentation: [here](https://docs.litlyx.com).
|
||||
|
||||
# Supported Frameworks
|
||||
|
||||
Litlyx natively supports all these JavaScript/TypeScript frameworks. You can use Litlyx in all WordPress projects by injecting JS code using plugins. You can even use Litlyx in cloud (or edge) functions in BaaS!
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/techs.png" />
|
||||
</p>
|
||||
|
||||
# Usage
|
||||
|
||||
Litlyx is very simple to use. The first thing is to import Litlyx into your code:
|
||||
|
||||
```js
|
||||
import { Lit } from 'litlyx-js';
|
||||
```
|
||||
|
||||
Once imported, you need to initialize Litlyx:
|
||||
|
||||
```js
|
||||
Lit.init('your_project_id');
|
||||
```
|
||||
|
||||
After this line, Litlyx will automatically track more than 10 KPIs for you.
|
||||
|
||||
> [!NOTE]
|
||||
> - Create your first project for free! 👉 <a href="https://dashboard.litlyx.com">Create now!</a>
|
||||
|
||||
# Customize Your Experience by Tracking Custom Events
|
||||
|
||||
With Litlyx, you can create your own events to track in your project on the main CTA. Your creativity is the limit! Customize your experience like this:
|
||||
|
||||
```js
|
||||
Lit.event('main_cta');
|
||||
```
|
||||
|
||||
This is the minimal setup for an event. If you want more control over them, you can use the `metadata` field:
|
||||
|
||||
```js
|
||||
Lit.event('pretty_cool_event', {
|
||||
metadata: {
|
||||
'tag': 'litlyx is awesome!',
|
||||
'age': 27,
|
||||
'score': 100.01,
|
||||
'list': ['Hello', 'World!']
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
And that's it! You have set up your first custom event. From now on, you know how to set them up. With events you can track even the user flow, from where they come to the final Click!
|
||||
|
||||
# Lit, the AI Data Analyst at Your Service
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/agent.png" width="180px"/>
|
||||
</p>
|
||||
|
||||
Litlyx comes with an integrated AI that can analyze your collected data and your entire history. It can compare data, query specific metadata, visualize charts, and much more.
|
||||
|
||||
You can have a `conversation` with Lit in the dashboard 👉 [here](https://dashboard.litlyx.com).
|
||||
|
||||
# You Are Free to Self-Host Litlyx
|
||||
|
||||
Litlyx is completely open-source, and you are free to self-host it and create your own version of the dashboard. We are always open to conversations with all contributors to the project, so contact us at `help@litlyx.com` to schedule a call with us!
|
||||
|
||||
We hope to hear from you!
|
||||
|
||||
# Official Docs
|
||||
|
||||
Read the complete documentation at [https://docs.litlyx.com](https://docs.litlyx.com).
|
||||
|
||||
# Contact
|
||||
|
||||
Write to us at `help@litlyx.com` if you need to contact us.
|
||||
|
||||
# License
|
||||
|
||||
Litlyx is licensed under the [Apache 2.0](/LICENSE) license.
|
||||
|
||||
# Share some ❤️ for the repo
|
||||
|
||||
If you like what you see, join us and start collaborating! Leave a star (⭐) to stay updated on our progress and show your support.
|
||||
|
||||
### Let's change analytics landscape togheter!
|
||||
|
||||
<a href="https://github.com/Litlyx/litlyx" style="display:inline-block;background-color:#5680F8;color:white;padding:10px 20px;text-align:center;text-decoration:none;font-size:16px;border-radius:5px;" target="_blank" rel="noopener noreferrer">⭐ Leave a Star</a>
|
||||
|
||||
We are on track! `Thanks for your support!`
|
||||
@@ -2,7 +2,18 @@ import { CustomPremiumPriceModel } from "../schema/CustomPremiumPriceSchema";
|
||||
|
||||
export type PREMIUM_TAG = typeof PREMIUM_TAGS[number];
|
||||
|
||||
export const PREMIUM_TAGS = ['FREE', 'PLAN_1', 'PLAN_2', 'CUSTOM_1'] as const;
|
||||
export const PREMIUM_TAGS = [
|
||||
'FREE',
|
||||
'PLAN_1',
|
||||
'PLAN_2',
|
||||
'CUSTOM_1',
|
||||
'INCUBATION',
|
||||
'ACCELERATION',
|
||||
'GROWTH',
|
||||
'EXPANSION',
|
||||
'SCALING',
|
||||
'UNICORN'
|
||||
] as const;
|
||||
|
||||
|
||||
export type PREMIUM_DATA = {
|
||||
@@ -16,7 +27,7 @@ export type PREMIUM_DATA = {
|
||||
export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
|
||||
FREE: {
|
||||
ID: 0,
|
||||
COUNT_LIMIT: 3_000,
|
||||
COUNT_LIMIT: 5_000,
|
||||
AI_MESSAGE_LIMIT: 10,
|
||||
PRICE: 'price_1POKCMB2lPUiVs9VLe3QjIHl',
|
||||
PRICE_TEST: 'price_1PNbHYB2lPUiVs9VZP32xglF'
|
||||
@@ -41,7 +52,49 @@ export const PREMIUM_PLAN: Record<PREMIUM_TAG, PREMIUM_DATA> = {
|
||||
AI_MESSAGE_LIMIT: 100_000,
|
||||
PRICE: 'price_1POKZyB2lPUiVs9VMAY6jXTV',
|
||||
PRICE_TEST: ''
|
||||
}
|
||||
},
|
||||
INCUBATION: {
|
||||
ID: 101,
|
||||
COUNT_LIMIT: 50_000,
|
||||
AI_MESSAGE_LIMIT: 30,
|
||||
PRICE: 'price_1PdsyzB2lPUiVs9V4J246Jw0',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
ACCELERATION: {
|
||||
ID: 102,
|
||||
COUNT_LIMIT: 150_000,
|
||||
AI_MESSAGE_LIMIT: 100,
|
||||
PRICE: 'price_1Pdt5bB2lPUiVs9VhkuCouEt',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
GROWTH: {
|
||||
ID: 103,
|
||||
COUNT_LIMIT: 500_000,
|
||||
AI_MESSAGE_LIMIT: 3_000,
|
||||
PRICE: 'price_1PdszrB2lPUiVs9VIdkT3thv',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
EXPANSION: {
|
||||
ID: 104,
|
||||
COUNT_LIMIT: 1_000_000,
|
||||
AI_MESSAGE_LIMIT: 5_000,
|
||||
PRICE: 'price_1Pdt0xB2lPUiVs9V0Rdt80Fe',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
SCALING: {
|
||||
ID: 105,
|
||||
COUNT_LIMIT: 2_500_000,
|
||||
AI_MESSAGE_LIMIT: 10_000,
|
||||
PRICE: 'price_1Pdt1UB2lPUiVs9VUmxntSwZ',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
UNICORN: {
|
||||
ID: 106,
|
||||
COUNT_LIMIT: 5_000_000,
|
||||
AI_MESSAGE_LIMIT: 20_000,
|
||||
PRICE: 'price_1Pdt2LB2lPUiVs9VGBFAIG9G',
|
||||
PRICE_TEST: ''
|
||||
},
|
||||
}
|
||||
|
||||
CustomPremiumPriceModel.find({}).then(custom_prices => {
|
||||
|
||||
Reference in New Issue
Block a user