docs: add docs section to the website 📝

.changeset/little-flowers-remember.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/code-quality.yml

@@ -72,3 +72,22 @@ jobs:
 
       - name: Run Clippy
         run: cargo clippy
+  astro-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            apps/web
+            apps/core/package.json
+            packages
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lock
+
+      - name: Run Astro check
+        run: bun astro:check

.husky/pre-commit

@@ -15,6 +15,7 @@ fi
 if ! git diff --cached --quiet HEAD --  "package.json"  "apps\/web\/**"  "packages\/**";
 then
     bun astro:check
+    bun --filter @tablex/web lint
 fi
 
 exit 0

.prettierignore

@@ -12,4 +12,5 @@ pnpm-lock.yaml
 .astro
 env.d.ts
 apps/core/src/bindings.ts
+apps/web/src/content/docs/references/settings.mdx
 crates/settings/schema.json

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="./apps/web/public/billboard.png">
+  <img src="./docs/billboard.png">
 </p>
 <div align="center">
   <img alt="Static Badge" src="https://img.shields.io/badge/bun-v1.1.26%20-white">
@@ -13,42 +13,23 @@
 
 </div>
 
-> [!NOTE]
-> 🚧
-> TableX is still under development, don't expect it to be perfect, yet.
+Download and try TableX from the [official website](https://tablex-tan.vercel.app)
 
-Checkout [Changleogs](./apps/core/CHANGELOG.md) and our [issues](https://github.com/kareemmahlees/tablex/issues) section.
-
-## Don't Waste time, try it NOW 💥
-
-Head to TableX's [official website](https://tablex-tan.vercel.app/) and download the executable of your choice.
-
-## About the Project
+## About the Project 🎯
 
 Tablex aims at delivering a fast, user friendly, productive and **free** database browsing experience.
 
-While not claiming that it is a replacement of any other tool, yet, it strives to provide a, hopefully, good user experience.
-
-## What Does it offer ✨
-
-- Delightful user experience
-- Top-Notch performance with pagination and virtualization
-- Support for SQLite, PostgreSQL, MySQL
-- Available for Windows, MacOS, and Linux
-- A CLI to boost your workflow
-- Automatically create a RESTfull and GraphQL APIs for your database
-- Keyboard shortcuts for productivity homies
-- Free and Open-Source
+While not claiming that it is a replacement of any other tool, it strives to provide a new way of dealing with databases.
 
-## Announcements 🎉
+## Features ✨
 
-### v0.3.7
-
-- You can now write Raw SQL withing TableX directly.
-
-### v0.3.6
-
-- TableX now supports Foreign key relations 🔗.
+- `Cross-Platform`: supports Windows, MacOS and Linux with a variety of architectures.
+- `Multi-DB support`: supports PostgreSQL, MySQL and SQLite.
+- `Settings & Keybindings`: configurable settings and keybindings inspired by VSCode.
+- `Automatic API docs`: Auto generate RESTfull and GraphQL endpoints for your database inspired by Supabase.
+- `Built-in updater`: TableX can self update with our built-in updater.
+- `Accessibility`: you will find utilities that improve your experience.
+- `CLI`: Use TableX from right withing your terminal.
 
 ## Tech Stack ⌨️
 
@@ -57,25 +38,16 @@ While not claiming that it is a replacement of any other tool, yet, it strives t
   - [Rust](https://www.rust-lang.org/) : Backend
 - [Tailwind](https://tailwindcss.com/) : CSS Framework
 - [Tanstack](https://tanstack.com/) : [Router](https://tanstack.com/router/latest), [Query](https://tanstack.com/query/latest), [Table](https://tanstack.com/table/v8), [Virtual](https://tanstack.com/virtual/latest)
-- [Astro](https://astro.build/) : Website
+- [Zustand](https://zustand-demo.pmnd.rs/): State management
+- [Astro](https://astro.build/) + [Starlight](https://starlight.astro.build/) : Website and Docs
 - [Golang](https://go.dev) : [MetaX](https://github.com/kareemmahlees/meta-x)
 - [shadcn/ui](https://ui.shadcn.com/) : Components
 - [Changesets](https://github.com/changesets/changesets): Versioning and Changelogs
 - [Vercel](https://vercel.com/) : Deployment
 
-<!-- ## Keyboard Shortcuts -->
-
-<!-- | Shortcut                       | Description                       |
-| ------------------------------ | --------------------------------- |
-| <kbd>Ctrl</kbd> + <kbd>k</kbd> | open command palette              |
-| <kbd>Ctrl</kbd> + <kbd>s</kbd> | focus search input                |
-| <kbd>Ctrl</kbd> + <kbd>a</kbd> | select or deselect all            |
-| <kbd>Ctrl</kbd> + <kbd>c</kbd> | copy selected rows into clipboard |
-| <kbd>Delete</kbd>              | delete selected rows              | -->
-
 ## Contributing 🫱🏻‍🫲🏻
 
-please refer to [CONTRIBUTING.md](./docs/CONTRIBUTING.md)
+please refer to [Contributing](https://tablex-tan.vercel.app/contributing).
 
 ## Contributors
 

apps/web/astro.config.mjs

@@ -1,14 +1,64 @@
+import react from "@astrojs/react"
+import starlight from "@astrojs/starlight"
 import tailwind from "@astrojs/tailwind"
 import { defineConfig } from "astro/config"
 
-import react from "@astrojs/react"
-
 // https://astro.build/config
 export default defineConfig({
   integrations: [
     tailwind({
-      applyBaseStyles: true
+      applyBaseStyles: false
     }),
-    react()
+    react(),
+    starlight({
+      title: "Docs",
+      logo: {
+        replacesTitle: true,
+        src: "./src/assets/logo-docs.svg"
+      },
+      favicon: "./src/assets/logo.svg",
+      head: [
+        // ICO favicon fallback for Safari.
+        {
+          tag: "link",
+          attrs: {
+            rel: "icon",
+            href: "./src/assets/logo.svg",
+            sizes: "32x32"
+          }
+        }
+      ],
+      customCss: ["./src/styles/docs.css"],
+      social: {
+        github: "https://github.com/kareemmahlees/tablex"
+      },
+      editLink: {
+        baseUrl: "https://github.com/kareemmahlees/tablex/edit/main/docs/"
+      },
+      sidebar: [
+        { label: "Overview", slug: "overview" },
+        {
+          label: "Features",
+          items: [
+            "features/settings",
+            "features/keybindings",
+            "features/cli",
+            "features/updater",
+            "features/api-docs"
+          ]
+        },
+        {
+          label: "References",
+          items: [
+            "references/settings",
+            "references/keybindings",
+            "references/cli"
+          ],
+          collapsed: true
+        },
+        { label: "Contributing", slug: "contributing" },
+        { label: "Changelog", slug: "changelog" }
+      ]
+    })
   ]
 })

apps/web/ec.config.mjs

@@ -0,0 +1,10 @@
+/**
+ * NOTE: this file was added to workaround the issue mentioned:
+ * here https://github.com/oven-sh/bun/issues/12366.
+ * TODO: remove this file and it's installed plugins.
+ */
+
+/** @type {import('@astrojs/starlight/expressive-code').StarlightExpressiveCodeOptions} */
+export default {
+  themes: ["everforest-dark", "everforest-light"]
+}

apps/web/eslint.config.js

@@ -0,0 +1,33 @@
+import pluginJs from "@eslint/js"
+import react from "eslint-plugin-react"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    ...react.configs.flat.recommended,
+    rules: {
+      "react/react-in-jsx-scope": "off"
+    },
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    }
+  },
+  {
+    ignores: [
+      "tailwind.config.ts",
+      "src/components",
+      "src/env.d.ts",
+      ".astro",
+      "node_modules"
+    ]
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended
+]

apps/web/package.json

@@ -8,11 +8,13 @@
     "check": "bunx --bun astro check",
     "build": "bunx --bun astro check && bunx --bun astro build",
     "preview": "bunx --bun astro preview",
-    "astro": "bunx --bun astro"
+    "astro": "bunx --bun astro",
+    "lint": "bunx eslint . "
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",
     "@astrojs/react": "^3.6.2",
+    "@astrojs/starlight": "^0.26.1",
     "@astrojs/tailwind": "^5.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
@@ -29,11 +31,11 @@
     "cobe": "^0.6.3",
     "framer-motion": "^10.18.0",
     "highlight.js": "^11.10.0",
-    "lucide-react": "^0.435.0",
+    "lucide-react": "^0.436.0",
+    "marked": "^14.1.0",
     "mini-svg-data-uri": "^1.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "recharts": "^2.12.7",
     "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.10",
@@ -42,7 +44,13 @@
     "vaul": "^0.8.9"
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.1",
     "@tablex/tailwind": "workspace:^",
-    "@types/react-highlight": "^0.12.8"
+    "@types/json-schema": "^7.0.15",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.9.0",
+    "json-schema": "^0.4.0",
+    "typescript-eslint": "^8.3.0"
   }
 }

apps/web/src/components/docs/RemoteMD.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  url: string
+}
+const { url } = Astro.props
+
+import { marked } from "marked"
+const response = await fetch(url)
+const markdown = await response.text()
+const content = marked.parse(markdown)
+---
+
+<article set:html={content} />

apps/web/src/content/config.ts

@@ -0,0 +1,6 @@
+import { docsSchema } from "@astrojs/starlight/schema"
+import { defineCollection } from "astro:content"
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() })
+}

apps/web/src/content/docs/changelog/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Changelog
+description: TableX's changelog
+---
+
+import RemoteMD from "@/components/docs/RemoteMD.astro"
+
+<RemoteMD url="https://raw.githubusercontent.com/kareemmahlees/tablex/master/apps/core/CHANGELOG.md" />