add blog-post + links

This commit is contained in:
Emily
2024-08-30 14:59:17 +02:00
parent 71bd4d0e58
commit 518b4ce6c1
6 changed files with 493 additions and 21 deletions

View File

@@ -12,6 +12,7 @@ const sections: Section[] = [
{ label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
{ label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
{ label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
{ label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
{
label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
action() { Lit.event('docs_clicked') },

View File

@@ -124,7 +124,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
</div>
</CardTitled>
<CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
<!-- <CardTitled :key="refreshKey" class="p-4 flex-1 w-full" title="Sessions"
sub="Shows trends in sessions.">
<template #header>
<SelectButton @changeIndex="sessionsChartSelectIndex = $event"
@@ -135,7 +135,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
<DashboardSessionsLineChart :slice="(selectLabels[sessionsChartSelectIndex].value as any)">
</DashboardSessionsLineChart>
</div>
</CardTitled>
</CardTitled> -->
</div>

View File

@@ -9,7 +9,7 @@ export type BlogPost = {
}
export const homePostsIndexes = ref<number[]>([
0
1, 0
])
export const blogPosts = ref<BlogPost[]>([
@@ -21,9 +21,19 @@ export const blogPosts = ref<BlogPost[]>([
title: 'Presenting Litlyx',
subtitle: 'Our Why. Our Vision. Our Manifestation of Intent',
id: 'presenting-litlyx'
},
{
author: 'Antonio, CEO at Litlyx',
authorImage: 'AntonioVerdiglione.jpg',
image: 'posts/why-choose-litlyx.jpg',
created_at: "Sep 1, 2024",
title: 'Why choose Litlyx',
subtitle: 'Litlyx vs Plausible vs Google Analitycs',
id: 'why-choose-litlyx'
}
]);
export const homePosts = computed(() => {
return blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
return homePostsIndexes.value.map(e => blogPosts.value[e]);
// return blogPosts.value.filter((e, i) => homePostsIndexes.value.includes(i));
})

View File

@@ -0,0 +1,455 @@
<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'
})
const featureStyle = 'font-bold poppins text-lyx-text';
const cellStyle = 'poppins text-lyx-text'
const activeStyle = 'poppins !text-lyx-text border-solid border-[1px] border-green-400 bg-green-400/5'
const columns = [{
key: 'feature',
label: 'Feature'
}, {
key: 'litlyx',
label: 'Litlyx'
}, {
key: 'plausible',
label: 'Plausible'
}, {
key: 'google',
label: 'Google Analytics'
}]
const comparisons = ref<any[]>([
{
feature: { text: 'Setup Time', class: featureStyle },
litlyx: { text: '30 seconds', class: activeStyle },
plausible: { text: 'A few Minutes', class: cellStyle },
google: { text: 'Hours', class: cellStyle }
},
{
feature: { text: 'Real-Time Collection', class: featureStyle },
litlyx: { text: 'Instant', class: activeStyle },
plausible: { text: 'each 5 minutes', class: cellStyle },
google: { text: 'from few minutes, to hours', class: cellStyle }
},
{
feature: { text: 'Documentation', class: featureStyle },
litlyx: { text: 'Small, Easy & Modern', class: activeStyle },
plausible: { text: 'Longer than necessary', class: cellStyle },
google: { text: 'Mstodon & Complex', class: cellStyle }
},
{
feature: { text: 'Modern UI', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'Yes', class: activeStyle }
},
{
feature: { text: 'Developers Centric Approach', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Partially', class: cellStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Website Loading Time', class: featureStyle },
litlyx: { text: '3 ms', class: activeStyle },
plausible: { text: '3 ms', class: activeStyle },
google: { text: '5-15 ms', class: cellStyle }
},
{
feature: { text: 'Library Size', class: featureStyle },
litlyx: { text: '3 kb', class: '' },
plausible: { text: '2 kb', class: activeStyle },
google: { text: 'avg. 50 kb', class: cellStyle }
},
{
feature: { text: 'Custom Events Support', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'Yes', class: activeStyle }
},
{
feature: { text: 'Native Js Runtimes', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'No', class: cellStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Custom Events metadata Support', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'No', class: cellStyle },
google: { text: 'Limited', class: cellStyle }
},
{
feature: { text: 'Raw Data Export', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'No', class: cellStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Data Ownership', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Open-Source', class: featureStyle },
litlyx: { text: 'Self-Hostable', class: activeStyle },
plausible: { text: 'Self-Hostable', class: activeStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Privacy-focused', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Cookies Stored', class: featureStyle },
litlyx: { text: '0 Cookies', class: activeStyle },
plausible: { text: '0 Cookies', class: activeStyle },
google: { text: 'Yes, many', class: cellStyle }
},
{
feature: { text: 'EU standard', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'Limited', class: cellStyle }
},
{
feature: { text: 'Ad Blockers', class: featureStyle },
litlyx: { text: 'Impossible to block', class: activeStyle },
plausible: { text: 'Possible, but hard!', class: cellStyle },
google: { text: 'Possible', class: cellStyle }
},
{
feature: { text: 'AI Data Analyst Assistant', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'No', class: cellStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Report Generation', class: featureStyle },
litlyx: { text: 'Detailed reports in seconds', class: activeStyle },
plausible: { text: 'Basic Reports', class: cellStyle },
google: { text: 'Extensive, but complex to do', class: cellStyle }
},
{
feature: { text: 'User-Friendly interface', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'Yes', class: activeStyle },
google: { text: 'Moderate Complexity', class: cellStyle }
},
{
feature: { text: 'Agglomeration from third parties DBs', class: featureStyle },
litlyx: { text: 'Yes', class: activeStyle },
plausible: { text: 'No', class: cellStyle },
google: { text: 'No', class: cellStyle }
},
{
feature: { text: 'Free Options (Cloud)', class: featureStyle },
litlyx: { text: 'Free-Forever plan to start.', class: activeStyle },
plausible: { text: '30 days free trial.', class: cellStyle },
google: { text: 'Free forever. No Ownership.', class: activeStyle }
},
{
feature: { text: 'Cost Effective (Cloud)', class: featureStyle },
litlyx: { text: 'Basic plan: €4,99/mo for 50k visits/events', class: activeStyle },
plausible: { text: 'Basic plan: €9,00/mo for 10k page visits', class: cellStyle },
google: { text: 'Offers Enterprise only Premium prices (really expansive)', class: cellStyle }
}
]);
</script>
<template>
<BlogArticleWrapper>
<div class="px-0">
<div class="section">
<div class="title">
Why Choose Litlyx
</div>
<div class="paragraph">
Our product is simple and focuses on the developer's experience. Developers love free stuff, so
Litlyx
offers a generous Free-Forever plan to get started. Developers don't want to waste time setting up
complex analytics to track key metrics for their websites. So, we asked ourselves, 'What would
developers find easy and cool?' As a team of developers, we created the simplest, most optimized,
and
developer-friendly way to do analytics.
</div>
</div>
<div class="section">
<div class="title">
Litlyx vs Plausible vs Google Analytics Comparison Table
</div>
<div class="paragraph">
Comparisons between the most common softwares used for web analytics collection and Litlyx.
</div>
</div>
<div class="section">
<div class="hidden lg:flex lg:justify-center w-full lg:flex-nowrap">
<UTable :rows="comparisons" :columns="columns" :ui="{
td: {
base: 'border-x-[1px] border-solid border-lyx-widget-lighter'
},
th: {
base: 'border-[1px] border-solid border-lyx-widget-lighter bg-lyx-widget'
}
}">
<template #litlyx-data="{ row }">
{{ row.litlyx.text }}
</template>
<template #feature-data="{ row }">
{{ row.feature.text }}
</template>
<template #plausible-data="{ row }">
{{ row.plausible.text }}
</template>
<template #google-data="{ row }">
{{ row.google.text }}
</template>
</UTable>
</div>
<div class="lg:hidden text-lyx-text-dark">
[Table available only on desktop]
</div>
</div>
<div class="section">
<div class="title">
Google Analytics vs. Litlyx
</div>
<ul class="list-disc text-lyx-text-dark mt-4">
<li>
Ease of Use: Google Analytics can be complex, with many features that may be overwhelming when
reading its documentation. Litlyx is simple and easy to use.
</li>
<li>
Setup: Google Analytics requires more time to set up, whereas Litlyx is quick and easy to set up
(just 30 seconds).
</li>
<li>
Free Plan: Google Analytics offers a free plan, but you do not own your data. Litlyx offers a
Free-Forever plan with generous limits, and you can handle raw data.
</li>
<li>
Developer Focus: Google Analytics is for general users, with libraries written by third parties.
Litlyx is built with developers in mind, supporting all tech stacks natively.
</li>
</ul>
</div>
<div class="section">
<div class="title">
Plausible vs. Litlyx <span class="text-[.9rem]">(we Plausible)</span>
</div>
<ul class="list-disc text-lyx-text-dark mt-4">
<li>
Ease of Use: Plausible is simple and user-friendly. Litlyx is also simple and easy to use. Both
Plausible and Litlyx are awesome!
</li>
<li>
Setup: Plausible setup is quick and easy. Litlyx setup is equally quick and straightforward.
</li>
<li>
Free Plan: Plausible does not offer a free plan, giving you a 30-day free trial before you need
to
pay. Litlyx offers a generous Free-Forever plan.
</li>
<li>
Developer Focus: Plausible is designed for general users with a focus on privacy, whereas Litlyx
is
specifically designed for developers.
</li>
</ul>
</div>
<div class="section">
<div class="title">
Who can use Litlyx?
</div>
<div class="paragraph">
We built Litlyx with developers in mind. If you want really good metrics, you should go through your
development team. We created the simplest setup a developer can ask for, supporting all JavaScript
and
TypeScript runtimes. Litlyx can be used even by startup founders or business owners who have access
to
their landing page. We offer extensive support to guide you through the implementation. You can
contact
us anytime for information at help@litlyx.com. With Litlyx, you will not be alone.
</div>
</div>
<div class="section">
<div class="title">
We are far from perfection...
</div>
<div class="paragraph">
We are far from perfect. We are human, and we embrace that. Our imperfections drive us to always
improve
and innovate. We learn from our mistakes and use those lessons to create better solutions. By
acknowledging our humanity, we connect more deeply with our users, understanding their needs and
challenges. Our commitment to growth and improvement ensures that we constantly strive to deliver
the
best possible experience for developers.
</div>
</div>
<div class="section">
<div class="title">
Is Impossible to Beat a giant, but...
</div>
<div class="paragraph">
We know we cant compete with Google directlyits like trying to challenge a giant. But even giants
have weaknesses. Startups with bold ideas can find ways to disrupt the status quo and we see this
many
times in history. Were here to support all innovators by providing a first-class developer
experience
with our product. Our goal is to empower every size companies to make a significant impact in the
industry taking matrics driven decisions with semplicity.
</div>
</div>
<div class="section">
<div class="title">
Help us improve!
</div>
<div class="paragraph">
If you choose us today, you can help us improve and become first-class in analytics. We cant do
this
alone; we need you! Your feedback and suggestions are very valuable to us. By working together, we
can
refine our product and create an exceptional experience for developers. Join us on this journey, and
let's build something amazing together. Your input will help us reach new heights and set the
standard
of excellence next-generation developers deserve.
</div>
</div>
<div class="section">
<div class="title text-center">
Ready to start with Litlyx?
</div>
<div class="button-container flex-col items-center gap-6">
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
type="outline">
Go to Live Demo
</LyxUiButton>
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
Start for free now
</LyxUiButton>
</div>
</div>
</div>
</BlogArticleWrapper>
</template>
<style scoped lang="scss">
.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;
}
.title {
font-family: 'Poppins' !important;
@apply font-semibold text-[1.8rem]
}
.subtitle {
font-family: 'Poppins' !important;
@apply font-medium text-[1.4rem]
}
.paragraph {
font-family: 'Poppins' !important;
@apply text-lyx-text-dark mt-4 text-[1.1rem]
}
.section {
@apply mt-20
}
.button {
@apply font-medium text-[1rem] px-6 py-2
}
.button-container {
@apply flex justify-center mt-8
}
</style>

View File

@@ -83,10 +83,14 @@ async function saveEmail() {
All Your Analytics in a Single AI Powered Dashboard.
</div>
<div class="button-container">
<div class="button-container gap-3 flex-col lg:flex-row items-center">
<LyxUiButton link="https://dashboard.litlyx.com" target="_blank" class="button" type="primary">
Start for free
</LyxUiButton>
<LyxUiButton link="https://dashboard.litlyx.com/live_demo" target="_blank" class="button"
type="outline">
Go to live demo
</LyxUiButton>
</div>
</div>
@@ -201,6 +205,24 @@ async function saveEmail() {
</div>
</div>
<LyxUiCard class="section w-full p-8">
<div class="subtitle">
Why choose Litlyx
</div>
<div class="paragraph">
Litlyx vs Plausible vs Google Analytics
</div>
<div class="button-container">
<LyxUiButton link="/why-choose-litlyx" target="_blank" class="button" type="outline">
Read more
</LyxUiButton>
</div>
</LyxUiCard>
<div class="section">
@@ -309,22 +331,6 @@ async function saveEmail() {
</div>
<div class="section">
<div class="subtitle">
Why choose Litlyx
</div>
<div class="paragraph">
Litlyx vs Plausible vs Google Analytics
</div>
<div class="button-container">
<LyxUiButton link="/why-choose-litlyx" target="_blank" class="button" type="outline">
Read more
</LyxUiButton>
</div>
</div>
<div class="section">
<div class="subtitle">
Update me!

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB