add docs

docs/.gitignore

@@ -0,0 +1,20 @@
+# 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*

docs/README.md

@@ -0,0 +1 @@
+# Website

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/getstarted/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Get Started",
+  "position": 9,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
+}

docs/docs/getstarted/congrats.md

@@ -0,0 +1,17 @@
+---
+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! 🔥
+

docs/docs/getstarted/create_project.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 2
+---
+
+# Create your first project
+
+
+After the signup, 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.
+
+:::

docs/docs/getstarted/events.md

@@ -0,0 +1,140 @@
+---
+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>

docs/docs/getstarted/import.md

@@ -0,0 +1,86 @@
+---
+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! ⏱️**
+
+**To install LitLyx, run the following command:**
+
+```bash
+npm i litlyx
+```
+
+## 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';
+```
+
+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/npm/litlyx@1.1.0/browser/litlyx.js"></script>
+```
+
+  </TabItem>
+  <TabItem value="vue" label="Vue" default>
+   **(reading Vue)**
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+#
+  </TabItem>
+ <TabItem value="react" label="React" default>
+   **(reading React)**
+
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+#
+  </TabItem>
+  <TabItem value="next" label="Next" default>
+   **(reading Next)**
+
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+#
+  </TabItem>
+<TabItem value="nuxt" label="Nuxt" default>
+   **(reading Nuxt)**
+
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+#
+  </TabItem>
+
+  <TabItem value="angular" label="Angular" default>
+   **(reading Angular)**
+
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+#
+  </TabItem>
+</Tabs>

docs/docs/getstarted/initialize.md

@@ -0,0 +1,65 @@
+---
+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>

docs/docs/getstarted/register.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 1
+---
+
+#  Signup
+
+To start using LitLyx to the maximum potential you need an account on our dashboard 🔥 
+**quick 1-min Setup⏱️** 
+
+
+ **LitLyx dashboard is super easy** you can start navigate here  **[dashboard.litlyx.com](https://dashboard.litlyx.com)**.
+
+In this page below 👇 just click on "Continue with google". Semplicity is key ✨.
+
+<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.
+
+:::

docs/docs/intro.md

@@ -0,0 +1,60 @@
+---
+sidebar_position: 1
+---
+
+# Welcome to LitLyx
+
+Discover ultra-fast, real-time analytics with LitLyx 🔥 **Read time: 1 minute ⏱️** Developers, 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.
+
+## Integrating LitLyx
+
+Integrating LitLyx is straightforward ✨. 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/npm/litlyx@1.1.0/browser/litlyx.js"></script>
+```
+
+
+#### Framework-Specific Steps (e.g., Nuxt.js, Next.js)
+
+1. **Access the Dashboard**: Visit 👉 [dashboard](https://dashboard.litlyx.com) and sign in.
+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 👇
+
+```bash
+npm i litlyx
+```
+
+```ts
+//import
+import { Lit } from 'litlyx';
+```
+
+```ts
+//initialize & auto-collect page visits and many more insights
+Lit.init('project_id');
+```
+
+## Why Choose LitLyx?
+
+With LitLyx, you gain several advantages:
+
+- **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.
+- **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! 🔥

docs/docusaurus.config.ts

@@ -0,0 +1,69 @@
+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/botkalista/litlyx-javascript-lib',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'light',
+      links: [],
+      copyright: `Copyright © ${new Date().getFullYear()} LitLyx, All rights reserved. Made with ❤️ in Italy.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;

docs/package.json

@@ -0,0 +1,48 @@
+{
+  "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"
+  }
+}

docs/sidebars.ts

@@ -0,0 +1,18 @@
+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;

docs/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}

docs/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

docs/src/css/custom.css

@@ -0,0 +1,30 @@
+/**
+ * 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);
+}

docs/src/pages/index.module.css

@@ -0,0 +1,18 @@
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 20rem;
+  text-align: center;
+}
+
+.hero img {
+  max-width: 100px; 
+  margin-bottom: 20px;
+}
+
+.hero-title {
+  font-weight: bold;
+  margin-bottom: 20px;
+}

docs/src/pages/index.tsx

@@ -0,0 +1,35 @@
+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>
+      <Link
+        className="button button--secondary button--lg"
+        to="/intro">
+        Read Docs 🔥 |  3 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 />
+      <HomepageFeatures />
+    </Layout>
+  );
+}

docs/static/img/favicon.svg

@@ -0,0 +1,19 @@
+<?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>

docs/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}