diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index f1b0571..0000000 --- a/docs/README.md +++ /dev/null @@ -1 +0,0 @@ -# Website diff --git a/docs/docs/getstarted/create_project.md b/docs/docs/getstarted/create_project.md index 3bc0249..d22c929 100644 --- a/docs/docs/getstarted/create_project.md +++ b/docs/docs/getstarted/create_project.md @@ -4,8 +4,7 @@ sidebar_position: 2 # Create your first project - -After the signup, create your first project 🔥 +You just sign in! Now it's time to create your first project 🔥 **just inserting a name for it** diff --git a/docs/docs/getstarted/import.md b/docs/docs/getstarted/import.md index dc36ad7..9108d82 100644 --- a/docs/docs/getstarted/import.md +++ b/docs/docs/getstarted/import.md @@ -3,10 +3,12 @@ sidebar_position: 3 --- # Install & Import LitLyx -Installing and integrating LitLyx into your code is simpler than anything else you've tried so far. 🔥 **with just 1 min setup! ⏱️** +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 ``` @@ -19,7 +21,7 @@ import TabItem from '@theme/TabItem'; - **(reading javascript)** + (reading javascript) ```ts //import @@ -34,7 +36,7 @@ If your are using vanilla js you can find pretty intresting this approach too - **(reading Vue)** + (reading Vue) ```ts //import @@ -43,7 +45,7 @@ import { Lit } from 'litlyx'; # - **(reading React)** + (reading React) ```ts @@ -53,7 +55,7 @@ import { Lit } from 'litlyx'; # - **(reading Next)** + (reading Next) ```ts @@ -63,7 +65,7 @@ import { Lit } from 'litlyx'; # - **(reading Nuxt)** + (reading Nuxt) ```ts @@ -74,7 +76,7 @@ import { Lit } from 'litlyx'; - **(reading Angular)** + (reading Angular) ```ts diff --git a/docs/docs/getstarted/register.md b/docs/docs/getstarted/signup.md similarity index 54% rename from docs/docs/getstarted/register.md rename to docs/docs/getstarted/signup.md index 556e47e..b6a0507 100644 --- a/docs/docs/getstarted/register.md +++ b/docs/docs/getstarted/signup.md @@ -5,12 +5,12 @@ sidebar_position: 1 # Signup To start using LitLyx to the maximum potential you need an account on our dashboard 🔥 -**quick 1-min Setup⏱️** +**Less than 1-min Setup⏱️** - **LitLyx dashboard is super easy** you can start navigate here **[dashboard.litlyx.com](https://dashboard.litlyx.com)**. +**LitLyx dashboard is super user friendly**. **[sign in here](https://dashboard.litlyx.com)**. -In this page below 👇 just click on "Continue with google". Semplicity is key ✨. +You will find this page below 👇 just click on "Continue with google". Simple. Login on Dashboard diff --git a/docs/docs/intro.md b/docs/docs/intro.md index d6093dd..3c7bd79 100644 --- a/docs/docs/intro.md +++ b/docs/docs/intro.md @@ -2,22 +2,24 @@ sidebar_position: 1 --- -# Welcome to LitLyx +# Ehy 👋 Welcome to LitLyx -Discover ultra-fast, real-time analytics with LitLyx 🔥 **Read time: 1 minute ⏱️** Developers, let's dive in! +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 integrates real-time analytics and custom events into any project using just a single line of code. Compatible with over 15 JavaScript/TypeScript frameworks, it is designed for developers but accessible to all, from designers to investors, to enrich projects with essential KPIs. +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 straightforward ✨. Follow this simple code to add LitLyx to your project quickly: +Integrating LitLyx is simple. Follow this simple code to add Litlyx to your project quickly: -### Quick Integration Guide +## Quick Integration Guide +--- -#### Universal Insertion +### Universal Insertion Place this line in your project (recommended below the body tag in index.html): @@ -25,12 +27,16 @@ Place this line in your project (recommended below the body tag in index.html): ``` +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) +--- -1. **Access the Dashboard**: Visit 👉 [dashboard](https://dashboard.litlyx.com) and sign in. +### 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. **Setup LitLyx**: Use the following commands to install and initialize LitLyx 👇 +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 @@ -46,15 +52,18 @@ import { Lit } from 'litlyx'; Lit.init('project_id'); ``` +--- + + ## Why Choose LitLyx? -With LitLyx, you gain several advantages: +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. -- **Efficiency**: Setup in less than a minute. -- **Real-Time Data**: Real-time feedback on user interactions & website performance. -- **Scalability**: Built to handle from small projects to large-scale applications. +### 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. -- **Zero-waste**: Designed to be less than 4 KB. -- **Open-source**: LitLyx is Open-Source. ### Enhance your website or app with LitLyx today! 🔥 diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index bf97de1..58c74de 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -48,16 +48,17 @@ const config: Config = { label: 'Docs', }, { - href: 'https://github.com/botkalista/litlyx-javascript-lib', - label: 'GitHub', + href: 'https://github.com/Litlyx/litlyx', + label: 'Github Repo', position: 'right', + className: 'navbar__link navbar__link--github', }, ], }, footer: { style: 'light', links: [], - copyright: `Copyright © ${new Date().getFullYear()} LitLyx, All rights reserved. Made with ❤️ in Italy.`, + copyright: `© ${new Date().getFullYear()} Litlyx | All rights reserved.`, }, prism: { theme: prismThemes.github, diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 34c17ac..d309c1f 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -28,3 +28,18 @@ --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; +} \ No newline at end of file diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index a82d24a..84af76d 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -3,8 +3,9 @@ flex-direction: column; justify-content: center; align-items: center; - height: 20rem; + height: 40rem; text-align: center; + background: radial-gradient(rgb(1, 1, 77), black); } .hero img { diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index df56ee4..37848a0 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -13,10 +13,11 @@ function MainHeader() {
Logo

Welcome to LitLyx Docs

+

One-Line Code Lightweight Analytics | AI Powered Analytics Dashboard

- Read Docs 🔥 | 3 min read ⏱️ + Go To Docs | 1 Min Read
); @@ -29,7 +30,6 @@ export default function Home(): JSX.Element { 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. "> - ); } diff --git a/docs/static/img/dchart.jpg b/docs/static/img/dchart.jpg index d97c987..2e99fe1 100644 Binary files a/docs/static/img/dchart.jpg and b/docs/static/img/dchart.jpg differ diff --git a/docs/static/img/dtop.jpg b/docs/static/img/dtop.jpg deleted file mode 100644 index f6414c4..0000000 Binary files a/docs/static/img/dtop.jpg and /dev/null differ diff --git a/docs/static/img/l.jpg b/docs/static/img/l.jpg index fe9e474..c6991a5 100644 Binary files a/docs/static/img/l.jpg and b/docs/static/img/l.jpg differ diff --git a/docs/static/img/rep.jpg b/docs/static/img/rep.jpg deleted file mode 100644 index c877fdd..0000000 Binary files a/docs/static/img/rep.jpg and /dev/null differ