Switch from Vuepress to Vitepress

.github/workflows/deploy-beta.yml

@@ -37,22 +37,3 @@ jobs:
               run: |
                   yarn run generate-api-docs
                   yarn run docs:build
-            - name: Azure login
-              uses: azure/login@v1
-              with:
-                  client-id: ${{ secrets.AZURE_CLIENT_ID }}
-                  tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-                  subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-            - name: Publish docs
-              uses: azure/CLI@v1
-              with:
-                  inlineScript: |
-                      az storage blob sync --account-name baklavajs -c '$web' -s "./docs/.vuepress/dist/"
-            - name: Purge CDN endpoint
-              uses: azure/CLI@v1
-              with:
-                  inlineScript: |
-                      az cdn endpoint purge --content-paths "/*" --profile-name "baklavajs" --name "baklavajs" --resource-group "Private" --no-wait
-            - name: Azure Logout
-              run: az logout
-              if: always()

.github/workflows/manual-docs-publish.yml

@@ -39,7 +39,7 @@ jobs:
               uses: azure/CLI@v1
               with:
                   inlineScript: |
-                      az storage blob sync --account-name baklavajs -c '$web' -s "./docs/.vuepress/dist/"
+                      az storage blob sync --account-name baklavajs -c '$web' -s "./docs/.vitepress/dist/"
             - name: Purge CDN endpoint
               uses: azure/CLI@v1
               with:

.github/workflows/publish.yml

@@ -46,7 +46,7 @@ jobs:
               uses: azure/CLI@v1
               with:
                   inlineScript: |
-                      az storage blob sync --account-name baklavajs -c '$web' -s "./docs/.vuepress/dist/"
+                      az storage blob sync --account-name baklavajs -c '$web' -s "./docs/.vitepress/dist/"
             - name: Purge CDN endpoint
               uses: azure/CLI@v1
               with:

.gitignore

@@ -24,9 +24,8 @@ yarn-error.log*
 cypress/
 lerna-debug.log
 
-docs/.vuepress/public/api
-docs/.vuepress/.cache
-docs/.vuepress/.temp
+docs/.vitepress/cache
+docs/public/api
 
 coverage
 

README.md

@@ -7,7 +7,7 @@ Graph / node editor in the browser using VueJS
 
 **[Online Demo](https://codesandbox.io/s/baklavajs-v2-example-zpfkec?file=/src/App.vue)**
 
-![example](docs/.vuepress/public/img/example.png)
+![example](docs/example.png)
 
 | Package                    | Version                                                                                        |
 | -------------------------- | ---------------------------------------------------------------------------------------------- |

docs/.vitepress/config.mts

@@ -0,0 +1,65 @@
+import { defineConfig } from "vitepress";
+
+export default defineConfig({
+    lang: "en-US",
+    title: "BaklavaJS",
+    description: "Graph / node editor in the browser using VueJS",
+    themeConfig: {
+        editLink: {
+            pattern: "https://github.com/newcat/baklavajs/edit/master/docs/:path",
+        },
+        externalLinkIcon: true,
+        nav: [
+            {
+                text: "API Reference",
+                link: "/api-reference.md",
+            },
+            {
+                text: "v1",
+                link: "https://v1.baklava.tech",
+            },
+        ],
+        sidebar: [
+            { text: "Getting Started", link: "/getting-started.md" },
+            { text: "Core Concepts", link: "/core-concepts.md" },
+            {
+                text: "Nodes",
+                items: [
+                    { text: "Creating Nodes", link: "/nodes/nodes.md" },
+                    { text: "Node Interfaces", link: "/nodes/interfaces.md" },
+                    { text: "Pre-defined Interfaces", link: "/nodes/pre-defined-interfaces.md" },
+                    { text: "Interface Types", link: "/nodes/interface-types.md" },
+                    { text: "Node Lifecycle", link: "/nodes/lifecycle.md" },
+                    { text: "Dynamic Nodes", link: "/nodes/dynamic-nodes.md" },
+                ],
+            },
+            {
+                text: "Editor",
+                items: [
+                    { text: "Registering Nodes", link: "/editor/registering-nodes.md" },
+                    { text: "Subgraphs", link: "/editor/subgraphs.md" },
+                ],
+            },
+            {
+                text: "Visual Editor",
+                items: [
+                    { text: "Setup", link: "/visual-editor/setup.md" },
+                    { text: "Commands", link: "/visual-editor/commands.md" },
+                    { text: "Toolbar", link: "/visual-editor/toolbar.md" },
+                    { text: "Customization", link: "/visual-editor/customization.md" },
+                ],
+            },
+            {
+                text: "Graph Execution",
+                items: [
+                    { text: "Graph Execution", link: "/execution/setup.md" },
+                    { text: "Dependency Engine", link: "/execution/dependency.md" },
+                    { text: "Forward Engine", link: "/execution/forward.md" },
+                ],
+            },
+            { text: "Event System", link: "/event-system.md" },
+            { text: "Browser Build", link: "/browser-build.md" },
+            { text: "Migrating from Baklava v1", link: "/migration.md" },
+        ],
+    },
+});

docs/api-reference.md

@@ -1,3 +1,7 @@
+<script setup>
+import StaticLink from "./components/StaticLink";
+</script>
+
 # API Reference
 
 You can find the API reference <StaticLink href="/api/">here</StaticLink>

docs/components/ApiLink.vue

@@ -0,0 +1,34 @@
+<template>
+    <StaticLink :href="href" target="_blank"><slot /></StaticLink>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import StaticLink from "./StaticLink";
+
+const props = withDefaults(
+    defineProps<{
+        module: string;
+        type: "classes" | "modules" | "interfaces";
+        name?: string;
+        hash?: string;
+    }>(),
+    {
+        name: "",
+        hash: "",
+    },
+);
+
+const href = computed(() => {
+    const transformedModuleName = props.module.replace("@", "_").replace("/", "_");
+    let url = `https://v2.baklava.tech/api/${props.type}/${transformedModuleName}`;
+    if (props.type !== "modules") {
+        url += `.${props.name}`;
+    }
+    url += ".html";
+    if (props.hash) {
+        url += `#${props.hash}`;
+    }
+    return url;
+});
+</script>

docs/.vuepress/components/Mermaid.vue → docs/components/Mermaid.vue

@@ -1,17 +1,16 @@
 <template>
     <div class="mermaid">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
 <script lang="ts">
 export default {
     mounted() {
-        // @ts-ignore
-        import("mermaid/dist/mermaid").then((m) => {
+        void import("mermaid/dist/mermaid").then((m: any) => {
             m.initialize({
                 startOnLoad: true,
-                theme: "dark"
+                theme: "dark",
             });
             m.init();
         });

docs/.vuepress/components/StaticLink.vue → docs/components/StaticLink.ts

@@ -1,4 +1,3 @@
-<script lang="ts">
 import { defineComponent, h } from "vue";
 
 export default defineComponent({
@@ -7,4 +6,3 @@ export default defineComponent({
         return h("a", { domProps: this.$attrs }, this.$slots.default?.());
     },
 });
-</script>

docs/editor/subgraphs.md

@@ -1,3 +1,8 @@
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+import mermaid from "../components/Mermaid.vue";
+</script>
+
 # Subgraphs
 
 Subgraphs are a way to have graphs inside graphs.

docs/execution/dependency.md

@@ -2,7 +2,7 @@
 
 The dependency engine determines the execution order by [topologically sorting](https://en.wikipedia.org/wiki/Topological_sorting) the node graph.
 
-![Node Execution Order](/img/node_execution_order.png)
+![Node Execution Order](./node_execution_order.png)
 
 In this example, the node execution order is either
 

docs/index.md

@@ -7,7 +7,7 @@ Graph / node editor in the browser using VueJS
 
 **[Online Demo](https://codesandbox.io/s/baklavajs-v2-example-zpfkec?file=/src/App.vue)**
 
-![example](/img/example.png)
+![example](./example.png)
 
 | Package | Version |
 | --- | --- |

docs/migration.md

@@ -32,7 +32,7 @@
 
 ## Interface Types
 
-- The interface type plugin does not use strings anymore to identify node interface types. Instead, you need to create `NodeInterfaceType`s. See the [documentation](/plugins/interface-types) for more information.
+- The interface type plugin does not use strings anymore to identify node interface types. Instead, you need to create `NodeInterfaceType`s. See the [documentation](/nodes/interface-types) for more information.
 - Conversions have to be added directly to the `NodeInterfaceType`.
 - It is no longer possible to specify the color of the port using JS/TS. Instead, you need to use CSS.
 

docs/nodes/dynamic-nodes.md

@@ -3,6 +3,10 @@ lang: en-US
 title: Dynamic Nodes
 ---
 
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+</script>
+
 # Dynamic Nodes
 
 Sometimes you may want to have nodes, that have a different set interfaces based on certain parameters.

docs/nodes/interfaces.md

@@ -1,3 +1,7 @@
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+</script>
+
 # Node Interfaces
 
 Node interfaces define the inputs and outputs of a node.
@@ -90,7 +94,7 @@ The node interface class also provides the option to use _middleware_.
 This can be used to set additional meta-data of the node interface in a type-safe way.
 A middleware is essentially just a function that is called with the node interface as the first parameter and an arbitrary amount of other parameters.
 
-Let's take the `setType` middleware of the [Interface Types Plugin](/plugins/interface-types) as an example:
+Let's take the `setType` middleware of the [Interface Types Plugin](./interface-types) as an example:
 
 ```js
 function setType(intf, type) {

docs/nodes/nodes.md

@@ -3,6 +3,10 @@ lang: en-US
 title: Creating Nodes
 ---
 
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+</script>
+
 # Creating Nodes
 
 A graph is comprised of nodes as well as connections between these nodes. A node inside the graph can be seen as the instance of a class.

docs/visual-editor/commands.md

@@ -1,3 +1,7 @@
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+</script>
+
 # Commands
 
 Commands are an abstraction to allow for extension of actions in Baklava. You can do everything related to commands using the <ApiLink type="interfaces" module="@baklavajs/renderer-vue" name="ICommandHandler"><code>useBaklava</code></ApiLink>

docs/visual-editor/customization.md

@@ -1,3 +1,7 @@
+<script setup>
+import ApiLink from "../components/ApiLink.vue";
+</script>
+
 # Customization
 
 Baklava offers many levels of customization, from simple theming up to full-blown custom components.