feat: Adjust docs to use vitepress

packages/docs/pages/.vitepress/config.js

@@ -0,0 +1,103 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  lang: 'en-US',
+  title: 'Automatisch Docs',
+  description: 'Vite & Vue powered static site generator.',
+  themeConfig: {
+    siteTitle: 'Automatisch',
+    nav: [
+      {
+        text: 'Guide',
+        link: '/',
+        activeMatch: '^/$|^/guide/',
+      },
+      {
+        text: 'Connections',
+        link: '/connections/github',
+        activeMatch: '/connections/',
+      },
+    ],
+    sidebar: {
+      '/connections/': [
+        {
+          text: 'Connections',
+          collapsible: true,
+          items: [
+            { text: 'Github', link: '/connections/github' },
+            { text: 'Scheduler', link: '/connections/scheduler' },
+            { text: 'Slack', link: '/connections/slack' },
+            { text: 'Twitter', link: '/connections/twitter' },
+            { text: 'Typeform', link: '/connections/typeform' },
+          ],
+        },
+      ],
+      '/': [
+        {
+          text: 'Getting Started',
+          collapsible: true,
+          items: [
+            {
+              text: 'What is Automatisch?',
+              link: '/',
+              activeMatch: '/',
+            },
+            { text: 'Installation', link: '/guide/installation' },
+            { text: 'Key concepts', link: '/guide/key-concepts' },
+            { text: 'Create flow', link: '/guide/create-flow' },
+          ],
+        },
+        {
+          text: 'Integrations',
+          collapsible: true,
+          items: [
+            { text: 'Available apps', link: '/guide/available-apps' },
+            {
+              text: 'Request integration',
+              link: '/guide/request-integration',
+            },
+          ],
+        },
+        {
+          text: 'Advanced',
+          collapsible: true,
+          items: [
+            { text: 'Configuration', link: '/introduction' },
+            { text: 'Database', link: '/introduction' },
+            { text: 'Credentials', link: '/introduction' },
+            { text: 'Deployment', link: '/introduction' },
+          ],
+        },
+        {
+          text: 'Contributing',
+          collapsible: true,
+          items: [
+            { text: 'Contribution guide', link: '/introduction' },
+            { text: 'Build integration', link: '/introduction' },
+          ],
+        },
+        {
+          text: 'Other',
+          collapsible: true,
+          items: [
+            { text: 'License', link: '/introduction' },
+            { text: 'Community', link: '/introduction' },
+            { text: 'F.A.Q', link: '/introduction' },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/automatisch/automatisch' },
+      { icon: 'twitter', link: 'https://twitter.com/automatischio' },
+      { icon: 'discord', link: 'https://discord.gg/dJSah9CVrC' },
+    ],
+    editLink: {
+      pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
+    footer: {
+      copyright: 'Copyright © 2021 Automatisch. All rights reserved.',
+    },
+  },
+});

packages/docs/pages/connections/github.md

@@ -0,0 +1,10 @@
+# Github
+
+1. Go to the [link](https://github.com/settings/applications/new) to register a **new OAuth application** on Github.
+2. Fill **Application name** and **Homepage URL**.
+3. Copy **OAuth Redirect URL** from Automatisch to **Authorization callback URL** field on Github page.
+4. Click on the **Register application** button on the Github page.
+5. Copy the **Client ID** value from the following page to the `Client ID` field on Automatisch.
+6. Click **Generate a new client secret** on the Github page and copy generated value into the `Client Secret` field on Automatisch.
+7. Click **Submit** button on Automatisch.
+8. Congrats! Start using your new Github connection within the flows.

packages/docs/pages/connections/scheduler.md

@@ -0,0 +1,3 @@
+# Scheduler
+
+Scheduler is a built-in app shipped with Automatisch, and it doesn't need to talk with any other external service to run. So there are no additional steps to use the Scheduler app.

packages/docs/pages/connections/slack.md

@@ -0,0 +1,14 @@
+# Slack
+
+1. Go to the [link](https://api.slack.com/apps?new_app=1) to **create an app** on Slack API.
+2. Select **From scratch**.
+3. Enter **App name**.
+4. Pick the workspace you would like to use with the Slack connection.
+5. Click on **Create App** button.
+6. Click the **Permissions** card on the **Add features and functionality** section.
+7. Go to **Bot Token Scopes** and add the necessary scopes. ([more info](https://api.slack.com/scopes?filter=granular_bot))
+8. Go to **OAuth Tokens for Your Workspace** and click **Install to Workspace**.
+9. In **Where should Sample post?** section, select the channel you would like to use with Automatisch, and click **Allow**.
+10. Copy **Bot User OAuth Token** and paste it to **Access Token** on the Automatisch page.
+11. Click **Submit** button on Automatisch.
+12. Now, you can start using the Slack connection with Automatisch.

packages/docs/pages/connections/twitter.md

@@ -0,0 +1,21 @@
+# Twitter
+
+1. Go to the [Twitter Developer Portal](https://developer.twitter.com/en/portal/projects-and-apps),complete the questionnaire and click the **Let's do this** button.
+2. Accept terms & conditions on the following page and click **Submit**.
+
+:::warning
+If you see an error saying `There was a problem completing your request. User must have a verified phone number on file prior to submitting application.` Go to the [phone settings page](https://twitter.com/settings/phone) and set up your phone number to be able to continue on step 2.
+:::
+
+3. You will get a verification email from Twitter. Click on **Confirm your email** button.
+4. Fill out the **App name** field and click on the **Get keys** button.
+5. Copy **API Key** and **API Key Secret** values and save them to use later.
+6. Click **Dashboard** and **Yes, I saved them** buttons, respectively.
+7. Go to the **App settings** link in the project section you have created.
+8. Go to the **User authentication settings** section and click **Set up**.
+9. Enable **OAuth 1.0a** on the following page.
+10. In the **OAuth 1.0A Settings** section, select **Read and write** option.
+11. Copy **OAuth Redirect URL** from Automatisch and paste it to the **Callback URI / Redirect URL** field.
+12. Fill **Website URL** and click **Save**.
+13. Paste **API Key** and **API Key Secret** values you have saved from the 5th step and paste them into Automatisch as **Consumer Key** and **Consumer Secret**, respectively.
+14. Congrats! You can start using the new Twitter connection!

packages/docs/pages/connections/typeform.md

@@ -0,0 +1,10 @@
+# Typeform
+
+1. Go to the [link](https://admin.typeform.com/user) and click on **Developer apps** in the sidebar.
+2. Click on the **Register a new app** button.
+3. Fill **App name** and **App website**, and **Developer email** fields.
+4. Copy **OAuth Redirect URL** from Automatisch to **Redirect URI(s)** field on the Typeform page.
+5. Click on the **Register app** button.
+6. Copy **Client ID** and **Client Secret** values from Typeform to Automatisch.
+7. Click **Submit** button on Automatisch.
+8. Congrats! Typeform connection is created.

packages/docs/pages/guide/available-apps.md

@@ -0,0 +1,9 @@
+# Available Apps
+
+Following integrations are currently supported by Automatisch.
+
+- [Github](/integrations/github)
+- [Scheduler](/integrations/scheduler)
+- [Slack](/integrations/scheduler)
+- [Twitter](/integrations/twitter)
+- [Typeform](/integrations/typeform)

packages/docs/pages/guide/installation.md

@@ -0,0 +1,44 @@
+# Installation
+
+<!-- TODO: Add instructions to install PostgreSQL and specify supported node versions -->
+
+Automatisch supports both npm and docker installation.
+
+### npm
+
+You can try Automatisch without installing by using [npx](https://docs.npmjs.com/cli/v8/commands/npx).
+
+```bash
+npx automatisch
+```
+
+Or you can install Automatisch globally via [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+
+```bash
+npm install automatisch -g
+```
+
+You need to run the start command after the installation.
+
+```bash
+automatisch start
+```
+
+### docker
+
+You can also use [docker](https://docs.docker.com/get-docker/) to install Automatisch.
+
+```bash
+docker run -it \
+	--name automatisch \
+	-p 3000:3000 \
+	automatisch start
+```
+
+<!-- TODO: Check requirements of https usage and revise the document accordingly -->
+
+## Let's discover!
+
+✌️ That's it; you have Automatisch running. Let's check it out by browsing [http://localhost:3000](http://localhost:3000)
+
+If you see any problem while installing Automatisch, let us know via [github issues](https://github.com/automatisch/automatisch/issues) or our [discord server](https://discord.gg/dJSah9CVrC).

packages/docs/pages/guide/key-concepts.md

@@ -0,0 +1,28 @@
+# Key Concepts
+
+We will cover four main terms of Automatisch before creating our first flow.
+
+## App
+
+👉 Apps are the third-party services you can use with Automatisch like Twitter, Github, Twilio. You can check the complete list of available apps [here](/integrations/available-apps). Automatisch aims to connect those apps to build workflows. So whenever you work with other concepts of Automatisch, you will use apps.
+
+:::tip
+
+You can request a new integration [here](/integrations/request-integration). We will collect all the requests and prioritize the most requested ones.
+
+:::
+
+## Connection
+
+📪 To use an app, you need to add a connection first. Connection is essentially the place where you pass the credentials of the specified service like consumer key, consumer secret, etc., to let Automatisch connect third-party apps on your behalf. Required fields for the connection will be asked when you click 'Add connection' and choose an app. You can also add multiple connections to the same app if you have more than one account to use.
+
+## Flow
+
+🛠️ Flow is the most crucial part of Automatisch. It's a place to arrange the business workflow by connecting multiple steps. So, for example, we can define a flow which does:
+
+- **Search tweets** for the "Automatisch" keyword
+- **Send those tweets as an email** to the contributors of Automatisch.
+
+## Step
+
+📄 Steps are the individual items in the flow. In our example, **searching tweets** and **sending an email** are both steps in our flow. Flows can also have more than two steps. Steps have two different types, which are trigger and action. The first step of each flow should be the trigger step, and the following steps should be action steps.

packages/docs/pages/guide/request-integration.md

@@ -0,0 +1,15 @@
+# Request Integration
+
+You can request a new integration by using [Github discussions](https://github.com/automatisch/automatisch/discussions/categories/integration-request).
+
+:::info
+
+While we are working hard to add as many integrations as possible, it might take some time to see your request is being done. It's because we prefer to collect all integration requests and prioritize the most requested ones.
+
+:::
+
+:::tip
+
+If there is already an integration request for the service you'd like, it's still crucial to upvote that discussion for us to analyze the potential audience around the integration.
+
+:::

packages/docs/pages/index.md

@@ -0,0 +1,37 @@
+# What is Automatisch?
+
+:::warning
+Automatisch is still in early phase of development. We try our best not to introduce breaking changes, but be cautious until v1 is released.
+:::
+
+🧐 Automatisch is a **business automation** tool, You can connect different services like Twitter, Github, Typeform, and **[more](/guide/available-apps)** to automate your business.
+
+💸 You don't need to invest time or money to automate your workflows. Programming knowledge is also **not needed** to use Automatisch.
+
+💥 Ready for more? Use advanced features like multi-step flows, filters, formatters, and webhook support.
+
+## How it works?
+
+Automatisch is a software that connects the services you use to automate workflows without building integration or hiring someone to do it for you.
+
+For example, you can create a workflow by specifying when I have a new follower on Twitter, add this follower to the google sheet document I have created. Using this workflow, you will get a new row on the google sheet document whenever you have a new follower. This example includes only Twitter and Google Sheets as services, but it's not limited to those. You can check the list of integrations [here](/guide/available-apps).
+
+You need to prepare the workflow once, and it will run continuously until you stop it or the connected account gets unlinked. Depending on the service and trigger you use, the workflow runs at intervals of 15 minutes or instantly.
+
+## Advantages
+
+There are existing solutions in the market like Zapier and Integromat. Having those, you might be asking, "Why should I use Automatisch?".
+
+✅ The most significant advantage of having Automatisch is **keeping your data in your own servers**.
+
+🤓 You can contribute and have an impact on how Automatisch is being developed since it's an **open-source software**.
+
+💙 **No vendor lock-in**. Suppose you don't think Automatisch is helpful to your business. In that case, you can switch to any other provider, which will be easier than switching from one cloud provider to another since you have all data and flexibility.
+
+## Let's start!
+
+Visit our [installation guide](/guide/installation) to setup Automatisch. It's recommended to read through all the getting started sections in the sidebar and [create your first flow](/guide/create-flow).
+
+## Something missing?
+
+If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/automatisch/automatisch) for us, or send a tweet mentioning the [@automatischio](https://twitter.com/automatischio) Twitter account.