Self-hosting! (#49)

* added self-hosting

apps/docs/src/pages/_meta.json

@@ -1,10 +1,10 @@
 {
   "index": {
-    "title": "Introduction",
+    "title": "Home",
     "type": "page"
   },
   "docs": {
     "title": "Documentation",
     "type": "page"
   }
-}
+}

apps/docs/src/pages/docs/_meta.json

@@ -1,25 +1,6 @@
 {
   "index": "Get Started",
-  "-- Frameworks": {
-    "type": "separator",
-    "title": "Frameworks"
-  },
-  "script": "Web (Script Tag)",
-  "web": "Web (Module)",
-  "nextjs": "Next.js",
-  "react": "React",
-  "react-native": "React-Native",
-  "remix": "Remix",
-  "vue": "Vue",
-  "astro": "Astro",
-  "node": "Node",
-  "express": "Express (backend)",
-  "-- Others": {
-    "type": "separator",
-    "title": "Others"
-  },
-  "javascript": "JavaScript",
-  "api": "API",
-  "export": "Export",
-  "migration": "Migrations"
+  "sdks": "SDKs",
+  "migration": "Migrations",
+  "self-hosting": "Self-hosting"
 }

apps/docs/src/pages/docs/astro.mdx

@@ -1,5 +0,0 @@
-import Link from 'next/link';
-
-# Astro
-
-You can use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> to track events in Astro.

apps/docs/src/pages/docs/index.mdx

@@ -68,7 +68,7 @@ Clears the current user identifier and ends the session.
       <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png" />
     }
     title="HTML / Script"
-    href="/docs/script"
+    href="/docs/sdks/script"
   >
     {' '}
   </Card>
@@ -77,7 +77,7 @@ Clears the current user identifier and ends the session.
       <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
     }
     title="React"
-    href="/docs/react"
+    href="/docs/sdks/react"
   >
     {' '}
   </Card>
@@ -86,7 +86,7 @@ Clears the current user identifier and ends the session.
       <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png" />
     }
     title="React-Native"
-    href="/docs/react-native"
+    href="/docs/sdks/react-native"
   >
     {' '}
   </Card>
@@ -94,11 +94,11 @@ Clears the current user identifier and ends the session.
     icon={
       <BrandLogo
         isDark
-        src="https://static-00.iconduck.com/assets.00/nextjs-icon-512x512-y563b8iq.png"
+        src="https://pbs.twimg.com/profile_images/1565710214019444737/if82cpbS_400x400.jpg"
       />
     }
     title="Next.js"
-    href="/docs/nextjs"
+    href="/docs/sdks/nextjs"
   >
     {' '}
   </Card>
@@ -110,7 +110,7 @@ Clears the current user identifier and ends the session.
       />
     }
     title="Remix"
-    href="/docs/remix"
+    href="/docs/sdks/remix"
   >
     {' '}
   </Card>
@@ -119,7 +119,7 @@ Clears the current user identifier and ends the session.
       <BrandLogo src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png" />
     }
     title="Vue"
-    href="/docs/vue"
+    href="/docs/sdks/vue"
   >
     {' '}
   </Card>
@@ -131,7 +131,7 @@ Clears the current user identifier and ends the session.
       />
     }
     title="Astro"
-    href="/docs/astro"
+    href="/docs/sdks/astro"
   >
     {' '}
   </Card>
@@ -140,3 +140,28 @@ Clears the current user identifier and ends the session.
 ## Unofficial SDKs
 
 While not officially supported, the following community-contributed SDKs are available.
+
+<Cards>
+  <Card
+    icon={
+      <BrandLogo
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/1200px-Laravel.svg.png"
+      />
+    }
+    title="Laravel"
+    href="https://github.com/tbleckert/openpanel-laravel"
+  >
+    {' '}
+  </Card>
+  <Card
+    icon={
+      <BrandLogo
+        src="https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png"
+      />
+    }
+    title="Flutter"
+    href="https://github.com/stevenosse/openpanel_flutter"
+  >
+    {' '}
+  </Card>
+</Cards>

apps/docs/src/pages/docs/node.mdx

@@ -1,5 +0,0 @@
-import Link from 'next/link';
-
-# Node
-
-Use <Link href="/docs/javascript">Javascript SDK</Link> to track events in Node.

apps/docs/src/pages/docs/react.mdx

@@ -1,5 +0,0 @@
-import Link from 'next/link';
-
-# React
-
-Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated react sdk soon.

apps/docs/src/pages/docs/remix.mdx

@@ -1,5 +0,0 @@
-import Link from 'next/link';
-
-# Remix
-
-Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated remix sdk soon.

apps/docs/src/pages/docs/sdks/_meta.json

@@ -0,0 +1,19 @@
+{
+  "script": "Web (Script Tag)",
+  "web": "Web (Module)",
+  "nextjs": "Next.js",
+  "react": "React",
+  "react-native": "React-Native",
+  "remix": "Remix",
+  "vue": "Vue",
+  "astro": "Astro",
+  "node": "Node",
+  "express": "Express (backend)",
+  "-- Others": {
+    "type": "separator",
+    "title": "Others"
+  },
+  "javascript": "JavaScript",
+  "api": "API",
+  "export": "Export"
+}

apps/docs/src/pages/docs/sdks/astro.mdx

@@ -0,0 +1,5 @@
+import Link from 'next/link';
+
+# Astro
+
+You can use <Link href="/docs/sdks/script">script tag</Link> or <Link href="/docs/sdks/web">Web SDK</Link> to track events in Astro.

apps/docs/src/pages/docs/sdks/express.mdx

@@ -7,7 +7,7 @@ import CommonSdkConfig from 'src/components/common-sdk-config.mdx';
 
 # Express
 
-The Express middleware is a basic wrapper around [Javascript SDK](/docs/javascript). It provides a simple way to add the SDK to your Express application.
+The Express middleware is a basic wrapper around [Javascript SDK](/docs/sdks/javascript). It provides a simple way to add the SDK to your Express application.
 
 ## Installation
 

apps/docs/src/pages/docs/sdks/nextjs.mdx

@@ -121,7 +121,7 @@ export const op = new Openpanel({
 op.track('my_event', { foo: 'bar' });
 ```
 
-Refer to the [Javascript SDK](/docs/javascript#usage) for usage instructions.
+Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instructions.
 
 ### Tracking Events
 

apps/docs/src/pages/docs/sdks/node.mdx

@@ -0,0 +1,5 @@
+import Link from 'next/link';
+
+# Node
+
+Use <Link href="/docs/sdks/javascript">Javascript SDK</Link> to track events in Node.

apps/docs/src/pages/docs/sdks/react-native.mdx

@@ -108,4 +108,4 @@ op.track('my_event', { foo: 'bar' });
   </Tabs.Tab>
 </Tabs>
 
-For more information on how to use the SDK, check out the [Javascript SDK](/docs/javascript#usage).
+For more information on how to use the SDK, check out the [Javascript SDK](/docs/sdks/javascript#usage).

apps/docs/src/pages/docs/sdks/react.mdx

@@ -0,0 +1,5 @@
+import Link from 'next/link';
+
+# React
+
+Use <Link href="/docs/sdks/script">script tag</Link> or <Link href="/docs/sdks/web">Web SDK</Link> for now. We'll add a dedicated react sdk soon.

apps/docs/src/pages/docs/sdks/remix.mdx

@@ -0,0 +1,5 @@
+import Link from 'next/link';
+
+# Remix
+
+Use <Link href="/docs/sdks/script">script tag</Link> or <Link href="/docs/sdks/web">Web SDK</Link> for now. We'll add a dedicated remix sdk soon.

apps/docs/src/pages/docs/sdks/vue.mdx

@@ -0,0 +1,5 @@
+import Link from 'next/link';
+
+# Vue
+
+Use <Link href="/docs/sdks/script">script tag</Link> or <Link href="/docs/sdks/web">Web SDK</Link> for now. We'll add a dedicated react sdk soon.

apps/docs/src/pages/docs/sdks/web.mdx

@@ -45,4 +45,4 @@ op.track('my_event', { foo: 'bar' });
 
 ## Usage
 
-Refer to the [Javascript SDK](/docs/javascript#usage) for usage instructions.
+Refer to the [Javascript SDK](/docs/sdks/javascript#usage) for usage instructions.

apps/docs/src/pages/docs/self-hosting/_meta.json

@@ -0,0 +1,3 @@
+{
+  "index": "Get started"
+}

apps/docs/src/pages/docs/self-hosting/index.mdx

@@ -0,0 +1,121 @@
+import { Callout, Tabs, Steps } from 'nextra/components';
+
+# Self-hosting
+
+<Callout>OpenPanel is not stable yet. If you still want to self-host you can go ahead. Bear in mind that new changes might give a little headache to keep up with.</Callout>
+
+This is a simple guide how to get started with OpenPanel on your own VPS.
+
+## Instructions
+
+### Prerequisites
+
+- VPS of any kind (only tested on Ubuntu 24.04)
+- [Clerk.com](https://clerk.com) account (they have a free tier)
+
+### Quickstart
+
+```bash
+git clone https://github.com/Openpanel-dev/openpanel && cd openpanel/self-hosting && ./start
+# After setup is complete run `./start` to start OpenPanel
+```
+
+<Steps>
+
+### Clone
+
+Clone the repository to your VPS
+
+```bash
+git clone https://github.com/Openpanel-dev/openpanel.git
+```
+
+### Run the setup script
+
+The setup script will do 3 things
+
+1. Install node (if you accept)
+2. Install docker (if you accept)
+3. Execute a node script that will ask some questions about your setup
+4. After this is done you'll need to point a webhook inside Clerk (https://your-domain.com/api/webhook/clerk)
+
+> Setup takes 5-10 minutes depending on your VPS. It'll build all the docker images.
+
+```bash
+cd openpanel/self-hosting
+./setup
+```
+
+### Start 🚀
+
+Run the `./start` script located inside the self-hosting folder
+
+```bash
+./start
+```
+</Steps>
+
+## Clerk.com
+
+<Callout>
+Some might wonder why we use Clerk.com for authentication. The main reason for this is that Clerk have great support for iOS and Android apps. We're in the process of building an iOS app and we want to have a seamless experience for our users. 
+
+**next-auth** is great, but lacks good support for mobile apps.
+</Callout>
+
+You'll need to create an account at [Clerk.com](https://clerk.com) and create a new project. You'll need the 3 keys that Clerk provides you with.
+
+- **Publishable key** `pk_live_xxx`
+- **Secret key** `sk_live_xxx`
+- **Signing secret** `"whsec_xxx"`
+
+### Webhooks
+
+You'll also need to add a webhook to your domain. We listen on some events from Clerk to keep our database in sync.
+
+#### URL
+
+- **Path**: `/api/webhook/clerk`
+- **Example**: `https://your-domain.com/api/webhook/clerk`
+
+#### Events we listen to
+
+- `organizationMembership.created`
+- `user.created`
+- `organizationMembership.deleted`
+- `user.updated`
+- `user.deleted`
+
+## Good to know
+
+### Always use correct api url
+
+When self-hosting you'll need to provide your api url when initializing the SDK.
+
+The path should be `/api` and the domain should be your domain.
+
+```html filename="index.html" {4}
+<script>
+  window.op = window.op||function(...args){(window.op.q=window.op.q||[]).push(args);};
+  window.op('init', {
+    apiUrl: 'https://your-domain.com/api',
+    clientId: 'YOUR_CLIENT_ID',
+    trackScreenViews: true,
+    trackOutgoingLinks: true,
+    trackAttributes: true,
+  });
+</script>
+<script src="https://openpanel.dev/op1.js" defer async></script>
+```
+
+```js filename="op.ts" {4}
+import { OpenPanel } from '@openpanel/sdk';
+
+const op = new OpenPanel({
+  apiUrl: 'https://your-domain.com/api',
+  clientId: 'YOUR_CLIENT_ID',
+  trackScreenViews: true,
+  trackOutgoingLinks: true,
+  trackAttributes: true,
+});
+``` 

apps/docs/src/pages/docs/vue.mdx

@@ -1,5 +0,0 @@
-import Link from 'next/link';
-
-# Vue
-
-Use <Link href="/docs/script">script tag</Link> or <Link href="/docs/web">Web SDK</Link> for now. We'll add a dedicated vue sdk soon.

apps/docs/src/pages/index.mdx

@@ -1,3 +1,5 @@
+<img src="https://openpanel.dev/ogimage.png" />
+
 # Introduction
 
 Openpanel is an open-source alternative to Mixpanel. Combining the power of Mixpanel with the ease of Plausible, Openpanel is a privacy-focused analytics tool that gives you the insights you need to make data-driven decisions.