docs: initial docs version

.github/workflows/docs.yml

@@ -0,0 +1,32 @@
+name: Deploy docs to FTP
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21.x
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
+      - name: Build with VitePress
+        run: |
+          pnpm run docs:build
+          touch docs/.vitepress/dist/.nojekyll
+      - name: Deploy to FTP
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
+        with:
+          server: ${{ secrets.FTP_SERVER }}
+          username: ${{ secrets.FTP_USERNAME }}
+          password: ${{ secrets.FTP_PASSWORD }}
+          local-dir: docs/.vitepress/dist/
+          server-dir: ${{ secrets.FTP_SERVER_DIR }}

README.md

@@ -35,7 +35,7 @@ CHART {
 SELECT * FROM finances
 ```
 
-![Pie Chart Example](./docs/pie_chart.png)
+![Pie Chart Example](./screenshots/pie_chart.png)
 
 ### Line Chart
 ```sqlseal
@@ -56,7 +56,7 @@ GROUP BY created_date
 ORDER BY created_date
 ```
 
-![Line Chart Example](./docs/line_chart.png)
+![Line Chart Example](./screenshots/line_chart.png)
 
 
 ## Syntax

docs/.vitepress/config.mts

@@ -0,0 +1,43 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "SQLSeal Charts",
+  description: "Charts extension for SQLSeal",
+  base: '/sql-seal-charts/',
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/sql-seal/favicon-32x32.png' }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/sql-seal/favicon-16x16.png' }],
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/sql-seal/apple-touch-icon.png' }],
+  ],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Quick Start', link: '/quick-start' }
+    ],
+    search: {
+      provider: 'local'
+    },
+    logo: '/logo.svg',
+
+    sidebar: [
+      {
+        text: 'Documentation',
+        items: [
+          { text: 'Quick Start', link: '/quick-start' }
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/h-sphere/sql-seal' },
+      { icon: 'discord', link: 'https://discord.gg/ZMRnFeAWXb' },
+      { icon: 'bluesky', link: 'https://bsky.app/profile/hypersphereblog.bsky.social' }
+    ],
+    footer: {
+      message: '',
+      copyright: 'By <a href="https://hypersphere.blog">hypersphere</a>.<br/>Sponsor Me: <a href="https://ko-fi.com/hypersphere">Ko-Fi</a>'
+    }
+  }
+})

docs/.vitepress/theme/components/Stats.vue

@@ -0,0 +1,108 @@
+<script setup>
+const stats = [
+  {
+    number: '2K+',
+    label: 'Downloads',
+    icon: '📥'
+  },
+  {
+    number: '39+',
+    label: 'Releases',
+    icon: '📦'
+  },
+  {
+    number: '51+',
+    label: 'GitHub Stars',
+    icon: '⭐'
+  },
+  {
+    number: '48+',
+    label: 'Discord Members',
+    icon: '🤝'
+  }
+]
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="stats">
+      <div class="stats-grid">
+        <div v-for="stat in stats" :key="stat.label" class="stat-card">
+          <span class="stat-icon" v-text="stat.icon" />
+          <span class="stat-number" v-text="stat.number" />
+          <span class="stat-label" v-text="stat.label" />
+        </div>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.stats {
+  margin: 3rem auto;
+  padding: 0 1.5rem;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  max-width: 1152px;
+  margin: 0 auto;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.stat-number {
+  font-size: 2.25rem;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .stat-card {
+    padding: 1.5rem;
+  }
+  
+  .stat-number {
+    font-size: 1.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -0,0 +1,18 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+import Stats from './components/Stats.vue'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    app.component('Stats', Stats)
+  }
+} satisfies Theme

docs/.vitepress/theme/style.css

@@ -0,0 +1,135 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #8c55ff 30%,
+    #6979f5
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #8c55ff 50%, #6979f5 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+

docs/changelog.md

@@ -0,0 +1 @@
+../CHANGELOG.md

docs/chart-type/bar-chart.md

@@ -0,0 +1 @@
+# Bar Chart

docs/chart-type/line-chart.md

@@ -0,0 +1 @@
+# Line Chart

docs/faq/comparison-with-dataview.md

@@ -0,0 +1,18 @@
+# Comparison with Dataview
+There are few other plugins which might sound like they do similar thing. The most popular of them, Dataview is an amazing project used by majority of Obsidian users so naturally I've got questions how does this compare to Dataview. Although I don't think this plugin is a replacement for dataview, and I personally use both of them on daily basis, here's the main comparison of the features:
+
+| Feature                                            | Dataview                      | SQLSeal                              |
+|----------------------------------------------------|-------------------------------|--------------------------------------|
+| Querying Data from your vault (files, tags, tasks) | ✅                             | ✅                                    |
+| Query language used                                | Dataview query language (DQL) | SQL (full compatibility with SQLite) |
+| Mobile Support                                     | ✅                             | ✅                                    |
+| Querying data files (CSV)                          | ❌                             | ✅                                    |
+| Editing data files (CSV)                           | ❌                             | ✅                                    |
+| Ability to join tables                             | ❌                             | ✅                                    |
+| Ability to filter data                             | ✅                             | ✅                                    |
+| Ability to perform basic aggregations              |                               |                                      |
+| Support for inline queries                         | ✅ (using `=` prefix)          | ✅ (using `S>` prefix)                |
+| Support for JavaScript                             | ✅                             | ❌ (planned in the future)            |
+
+> [!NOTE]
+> The table above is not-exhaustive and will be improved upon in the future.

docs/index.md

@@ -0,0 +1,27 @@
+---
+layout: home
+
+hero:
+  name: "SQLSeal Charts"
+  # text: "Plugin enabling full SQL capabilities in Obsidian"
+  tagline: "Visualise your data"
+  image:
+    src: /logo.svg
+    alt: SQLSeal
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /quick-start
+
+# features:
+#   - title: Query data in your vault
+#     details: Use full power of SQL to select, join, filter data for your liking
+#   - title: Fully featured SQL Engine
+#     details: With SQLite under the hood, you can use all functionality of the database
+#   - title: Query your files and tags
+#     details: Use SQL to filter files in your vault
+#   - title: Add your own data
+#     details: Operate on your CSV files using SQL to process them on the go
+---
+
+CHARTS CHARTS CHARTS

docs/public/transactions.csv

@@ -0,0 +1,5 @@
+id,name,customer,value
+1,Bread,Mark,3.45
+2,Milk,Mark,2.43
+3,Press,Linda,4.55,
+4,Cheese,Mark,3.22

docs/quick-start.md

@@ -0,0 +1,69 @@
+# Quick Start
+
+You get your first chart in less than 5 minutes! To do so, you need to install `SQLSeal` and `SQLSeal Charts`, create sample data source and write a query. This tutorial will guide you through the process step by step. By the end of it, you will get the following chart up and running:
+
+SCREENSHOT HERE
+
+## Installation
+Before you start using SQLSeal Charts you need to install it.
+
+> [!NOTE] SQLSeal vs SQLSeal Charts
+> SQLSeal Charts **extends functionality of SQLSeal** so in order to use it, you need to install **both**.
+
+- Go to community plugins and click Browse.
+- Search for `SQLSeal`
+- Install `SQLSeal` first
+- Install `SQLSeal Charts` second
+
+Now you have all plugins installed.
+
+![Plugins](./images//community-plugins.png)
+
+## Create dataset
+To visualise data, you need the data to visualise. SQLSeal can visualise tables inside your markdown notes, datasets in common data formats (CSV, JSON) and your whole vault collection (your notes properties, etc). In this tutorial we will create a table inside your note which is the easiest way to get started. To learn more about data sources, check out SQLSeal documentation.
+
+Create the following table inside your vault. You can copy the markdown provided below and paste it inside your Obsidian. In the end you should end up with a table.
+
+| Category      | Amount |
+| ------------- | ------ |
+| Grocery       | 200    |
+| Rent          | 1500   |
+| Entertainment | 130    |
+| Bills         | 400    |
+
+```markdown
+| Category      | Amount |
+| ------------- | ------ |
+| Grocery       | 200    |
+| Rent          | 1500   |
+| Entertainment | 130    |
+| Bills         | 400    |
+```
+
+## Link the data
+To visualise this data we need to create SQLSeal codeblock. In Obsidian a codeblock is denoted by three backtick symbols \`. If you are not sure how to create the codeblock, you can open your command palette in Obsidian (ctrl or cmd+P) and type `Insert code block`.
+Next you need to specify the type of the block. This will tell Obsidian to render it in the Preview mode. you need to put `sqlseal` here.
+Inside the code block type the following:
+```sqlseal
+TABLE data = table(0)
+CHART 
+{
+	series: [{
+		type: 'pie'
+	}]
+}
+SELECT * FROM data
+```
+
+### Explenation of the code above
+The code above might seem quite scary at first but I promise it all makes sense. It consists of 3 main parts:
+- Table definition: here we define that we want to expose data from our markdown table as a table called `data`
+- The second one is CHART view. This tells SQLSeal we want to render chart (there are other views available in the SQLSeal itself like table, list and grid). I takes configuration which tells it what type of chart we want. In our case we only want a pie chart.
+- The last one is an SQL Select statement. Here you can define which data you want to use, combine data from different sources together or process the data. In our case we simply say: tale everything from our data table.
+
+If you did everything correctly, you should see chart like below:
+![Quick Start Chart](./images//quick-start-chart.png)
+
+
+## Extras
+The chart you've just created is interactive! You can hover on it but also you can change original data and see the data update accordingly. Try updating the data, adding or removing new rows. To speed up refresh, you can manually save the note by using CMD+S or CTRL+S.

package.json

@@ -8,6 +8,9 @@
     "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
     "version": "node version-bump.mjs && git add manifest.json versions.json",
     "typecheck": "tsc -noEmit -skipLibCheck",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -49,6 +52,8 @@
     "echarts-gl": "^2.0.9",
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
+    "vitepress": "^1.6.3",
+    "vue": "^3.5.13",
     "zod": "^3.24.1"
   }
 }