Merge pull request #134 from retejs/dev

Improve SEO: add description and keywords
retejs · Oct 9, 2023 · 1119c84 · 1119c84
2 parents a9f3ab3 + 2bc1479
commit 1119c84
Show file tree

Hide file tree

Showing 192 changed files with 856 additions and 6 deletions.
diff --git a/components/RenderContent.vue b/components/RenderContent.vue
@@ -28,7 +28,7 @@ if (props.share) useShareThis(computed(() => dataRef.value && props.share(dataRe
 const { data } = await useAsyncData(path, () => queryContent(path).findOne());
 
 if (data.value) {
-  const { image, description } = data.value;
+  const { image, description, keywords } = data.value;
   const title = computed(() => `${props.title ? props.title(data.value) || data.value.title : data.value.title} - Rete.js`);
   const imageSrc = image ? getPreview(image.src) : mainPreview;
   // eslint-disable-next-line no-nested-ternary
@@ -43,6 +43,7 @@ if (data.value) {
     title,
     ogTitle: title,
     description,
+    keywords: [keywords, 'rete.js'].filter(Boolean).join(','),
     ogDescription: description,
     ogImage: imageSrc,
     twitterCard,

diff --git a/content/en/docs/1.index.md b/content/en/docs/1.index.md
@@ -1,3 +1,8 @@
+---
+description: Rete.js is a framework for creating visual interfaces and workflows. It provides out-of-the-box solutions for visualization using various libraries and frameworks, as well as solutions for processing graphs based on dataflow and control flow approaches
+keywords: introduction,ecosystem
+---
+
 # Introduction
 
 :introduction

diff --git a/content/en/docs/14.best-practices/performance.md b/content/en/docs/14.best-practices/performance.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to optimize performance in client applications. Learn about minimizing the impact of synchronous operations and direct rendering of elements by the browser
+keywords: performance,optimization
+---
+
 # Performance
 
 ::references

diff --git a/content/en/docs/19.quality-assurance.md b/content/en/docs/19.quality-assurance.md
@@ -1,3 +1,8 @@
+---
+description: Learn about our quality assurance practices, including unit and E2E testing. We rely on Playwright for comprehensive testing from the user's perspective
+keywords: qa,quality assurance,unit testing,e2e testing,playwright
+---
+
 # Quality assurance
 
 ::references

diff --git a/content/en/docs/2.getting-started.md b/content/en/docs/2.getting-started.md
@@ -1,3 +1,8 @@
+---
+description: "Rete.js offers two easy ways to get started: forking our examples on Codesandbox or creating a local application with Rete Kit. Follow our guides to familiarize yourself with our features and capabilities"
+keywords: getting started,install,setup,prerequisites,playgrounds,fork,rete kit
+---
+
 # Getting started
 
 ::references

diff --git a/content/en/docs/20.development/1.index.md b/content/en/docs/20.development/1.index.md
@@ -1,3 +1,8 @@
+---
+description: Looking to enhance your plugin building skills? This documentation provides resources for improving existing plugins or developing new ones. Explore our Rete CLI and Rete Kit tools for streamlined development
+keywords: rete cli,rete kit,style guide
+---
+
 # Development
 
 This documentation article is for developers who are looking to develop new plugins, improve existing ones, or debug them.

diff --git a/content/en/docs/20.development/2.rete-cli.md b/content/en/docs/20.development/2.rete-cli.md
@@ -1,3 +1,8 @@
+---
+description: Learn about our Rete CLI tool for building plugins with ease. With built-in support for TypeScript, ESLint, and Jest, you can start building without having to set up your own environment for building, linting, and testing
+keywords: cli,build plugin,commandline interface
+---
+
 # Rete CLI
 
 ::references

diff --git a/content/en/docs/20.development/3.rete-kit.md b/content/en/docs/20.development/3.rete-kit.md
@@ -1,3 +1,8 @@
+---
+description: Simplify your plugin and project development with Rete Kit. Create basic plugin structures instantly and setup an application from a variety of templates to get started quickly
+keywords: development,kit,setup,bootstrap,react.js,vue.js,angular,svelte,vite.js,nuxt,next
+---
+
 # Rete Kit
 
 ::references

diff --git a/content/en/docs/21.troubleshooting.md b/content/en/docs/21.troubleshooting.md
@@ -1,3 +1,8 @@
+---
+description: Our troubleshooting guide provides helpful tips for resolving common issues with our framework. Check the documentation, explore community resources, and ensure you're using the latest package versions to troubleshoot effectively
+keywords: troubleshooting,issues,debugging,dependencies,up-to-date
+---
+
 # Troubleshooting
 
 ## Check the documentation {#check-docs}

diff --git a/content/en/docs/22.licensing.md b/content/en/docs/22.licensing.md
@@ -1,3 +1,8 @@
+---
+description: Our licensing options allow for flexibility in using our framework packages and plugins. The MIT license applies to most packages, while certain plugins require additional agreements for commercial use
+keywords: licensing,commercial use,mit license
+---
+
 # Licensing
 
 The MIT license applied to most framework packages permits you to use them without any limitations in personal and commercial projects alike.

diff --git a/content/en/docs/23.code-of-conduct.md b/content/en/docs/23.code-of-conduct.md
@@ -1,3 +1,8 @@
+---
+description: Rete.js is dedicated to creating a safe and supportive space for all contributors and maintainers. Read our code of conduct to learn more about our values and expectations
+keywords: code of conduct
+---
+
 # Code of Conduct
 
 ## Our Pledge {#our-pledge}

diff --git a/content/en/docs/23.contribution.md b/content/en/docs/23.contribution.md
@@ -1,3 +1,8 @@
+---
+description: Discover the contribution guide for Rete.js. Follow the code contribution process,testing practices, bug reporting and other valuable contribution tips
+keywords: contribution,code of conduct,pull requests,style guide
+---
+
 # Contribution
 
 Thank you for your interest in contributing to this project! Before you get started, please make sure to review our [Code of conduct](/docs/code-of-conduct) and [Licensing](/docs/licensing). By contributing to our project, you agree to comply with the code of conduct and license your contributions in line with our licensing terms.

diff --git a/content/en/docs/24.FAQ.md b/content/en/docs/24.FAQ.md
@@ -1,3 +1,8 @@
+---
+description: Discover answers to frequently asked questions about Rete.js with this FAQ document. Learn about developing plugins, server-side processing, licensing, and more
+keywords:
+---
+
 # FAQ
 
 ::questions

diff --git a/content/en/docs/24.api/0.overview.md b/content/en/docs/24.api/0.overview.md
@@ -1,4 +1,6 @@
 ---
+description: Learn more about Rete.js' packages and their API documentation. Explore the packages to learn more about their capabilities and features
+keywords: api,jsdoc,typedoc
 navigation:
   title: Overview
   overview: true

diff --git a/content/en/docs/25.migration.md b/content/en/docs/25.migration.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to migrate from Rete.js v1 to v2 with this guide. The framework contains numerous breaking changes, including a TypeScript-first approach and new plugin system
+keywords: migration,v1,v2,typescript
+---
+
 # Migration
 
 

diff --git a/content/en/docs/3.concepts/1.plugin-system.md b/content/en/docs/3.concepts/1.plugin-system.md
@@ -1,3 +1,8 @@
+---
+description: Explore our plugin system and see how it can improve your project's functionality. Our code example shows how signals are passed between parent and child plugins
+keywords: plugin,scope,parent,child,addpipe,signals
+---
+
 # Plugin system
 
 Plugins offer the ability to add new functionality mostly through a single entry point. They communicate with each other using signals that propagate from parent plugins to child plugins. Since plugins can have multiple child plugins, these signals are passed through in the order they are connected (it can be important when including plugins such as `rete-readonly-plugin`)

diff --git a/content/en/docs/3.concepts/2.presets.md b/content/en/docs/3.concepts/2.presets.md
@@ -1,3 +1,8 @@
+---
+description: Discover how presets can simplify the process of building an editor. Explore our classic editor preset, which provides pre-built functionality for nodes, connections, inputs, outputs, and sockets
+keywords: presets,reusability,features
+---
+
 # Presets
 
 A preset is a set of pre-built functionality that typically forms the foundation of an editor but can be replaced with another preset from the same category or a custom one.

diff --git a/content/en/docs/3.concepts/3.editor.md b/content/en/docs/3.concepts/3.editor.md
@@ -1,3 +1,8 @@
+---
+description: Explore the core of the node editor and learn how it can facilitate graph management, including adding and removing nodes and connections. Additionally, learn how to visualize the editor and initialize interaction with connections
+keywords: graph,add node,remove node,add connection,remove connection,visualize
+---
+
 # Editor
 
 `NodeEditor` is a class that implements an interface for interacting with a graph. Similar to other modules, it extends `Scope`: can produce signals and provides the ability to connect plugins.

diff --git a/content/en/docs/3.concepts/5.engine.md b/content/en/docs/3.concepts/5.engine.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to implement dataflow and control flow graph processing in your project with Rete.js' rete-engine package
+keywords: engine,dataflow,control flow
+---
+
 # Engine
 
 The `rete-engine` is a package that implements two approaches for processing graph: [Dataflow](#dataflow) and [Control flow](#control-flow)

diff --git a/content/en/docs/3.concepts/6.integration.md b/content/en/docs/3.concepts/6.integration.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to integrate Rete.js with your favorite UI framework, such as Angular, Svelte, Vue.js, or React.js, using the available rendering packages
+keywords: integration,ui,rendering,react.js,vue.js,angular,svelte
+---
+
 # Integration
 
 This framework is not bound to any UI rendering framework and can be integrated with the most popular frameworks/libraries such as **Angular**, **Svelte**, **Vue.js**, **React.js**. The following rendering packages are available:

diff --git a/content/en/docs/4.guides/1.basic.md b/content/en/docs/4.guides/1.basic.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to create a basic node editor in your web application. This guide provides an overview of the basic plugins and their functionalities, with instructions for integrating with your stack
+keywords: basic,area,core
+---
+
 # Basic editor
 
 ::alert

diff --git a/content/en/docs/4.guides/10.minimap.md b/content/en/docs/4.guides/10.minimap.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to add a minimap to your node editor with rete-minimap-plugin, and improve your users' experience with this step-by-step guide
+keywords: minimap,ux,user experience
+---
+
 # Minimap
 
 ::alert

diff --git a/content/en/docs/4.guides/11.dock-menu.md b/content/en/docs/4.guides/11.dock-menu.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to create a customizable dock menu for your node editor with rete-dock-plugin, and improve your users' experience with this step-by-step guide
+keywords: dock,sidebar,dock menu,ux,user experience
+---
+
 # Dock menu
 
 ::alert

diff --git a/content/en/docs/4.guides/12.connection-path.md b/content/en/docs/4.guides/12.connection-path.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to enhance your node editor's appearance with rete-connection-path-plugin and d3-shape packages, and create custom connection paths with ease using this informative guide
+keywords: path,connection path,curve,step,bezier
+---
+
 # Connection path
 
 ::alert

diff --git a/content/en/docs/4.guides/13.reroute.md b/content/en/docs/4.guides/13.reroute.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to implement connection rerouting in your project with rete-connection-reroute-plugin package, and improve your users' experience
+keywords: reroute,connection rerouting,pins,ux,user experience
+---
+
 # Reroute
 
 ::alert

diff --git a/content/en/docs/4.guides/14.undo-redo.md b/content/en/docs/4.guides/14.undo-redo.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to implement undo/redo functionality in node editor with rete-history-plugin, and improve your users' experience
+keywords: undo,redo,history,rete-history-plugin,ux,user experience
+---
+
 # Undo/Redo
 
 ::alert

diff --git a/content/en/docs/4.guides/15.comments.md b/content/en/docs/4.guides/15.comments.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to integrate the rete-comment-plugin package into your Rete.js project, and use comments to provide additional information and context to your nodes
+keywords: comments,rete-comment-plugin
+---
+
 # Comments
 
 ::alert

diff --git a/content/en/docs/4.guides/2.renderers/1.react.md b/content/en/docs/4.guides/2.renderers/1.react.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to use React.js components and create custom components with rete-react-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started
+keywords: react.js,react,rendering
+---
+
 # React.js
 ::alert
 This guide is an extension of the [Basic](/docs/guides/basic) guide and provides in-depth instructions for using the `rete-react-plugin`

diff --git a/content/en/docs/4.guides/2.renderers/2.vue.md b/content/en/docs/4.guides/2.renderers/2.vue.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to use Vue.js components and create custom components with rete-vue-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started
+keywords: vue.js,vue,rendering
+---
+
 # Vue.js
 
 ::alert

diff --git a/content/en/docs/4.guides/2.renderers/3.angular.md b/content/en/docs/4.guides/2.renderers/3.angular.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to use Angular components and create custom components with rete-angular-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started
+keywords: angular,rendering
+---
+
 # Angular
 
 ::alert

diff --git a/content/en/docs/4.guides/2.renderers/4.svelte.md b/content/en/docs/4.guides/2.renderers/4.svelte.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to use Svelte components and create custom components with rete-svelte-plugin. This guide provides step-by-step instructions for using the plugin, along with helpful references and examples to get you started
+keywords: svelte,rendering
+---
+
 # Svelte
 
 ::alert

diff --git a/content/en/docs/4.guides/3.processing/1.dataflow.md b/content/en/docs/4.guides/3.processing/1.dataflow.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to integrate Dataflow into your node editor with this guide. Follow step-by-step instructions to use the Dataflow approach, configure node classes to process incoming data, and comprehend how the engine resolves data
+keywords: dataflow,data,engine,reset,cache
+---
+
 # Dataflow
 
 ::alert

diff --git a/content/en/docs/4.guides/3.processing/2.control-flow.md b/content/en/docs/4.guides/3.processing/2.control-flow.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to use Control flow in your node editor with this guide. Follow step-by-step instructions to prepare nodes, and comprehend how the engine manages control flow
+keywords: control flow,control,engine
+---
+
 # Control flow
 
 ::alert

diff --git a/content/en/docs/4.guides/3.processing/3.hybrid.md b/content/en/docs/4.guides/3.processing/3.hybrid.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to combine Dataflow and Control flow with this guide. Follow step-by-step instructions to assign certain sockets as data sources and others for control flow approaches
+keywords: hybrid,engine,dataflow,control flow
+---
+
 # Hybrid Engine
 
 ::alert

diff --git a/content/en/docs/4.guides/3.processing/4.codegen.md b/content/en/docs/4.guides/3.processing/4.codegen.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to setup code generation for your node editor
+keywords: codegen,code generation
+---
+
 # Codegen
 
 :safety-tape{text="Under development"}
diff --git a/content/en/docs/4.guides/4.3d/1.index.md b/content/en/docs/4.guides/4.3d/1.index.md
@@ -1,3 +1,8 @@
+---
+description: Enhance your 3D scene with the node editor using this guide. Discover how to use the rete-area-3d-plugin to create a scene powered by Three.js. Render 3D objects and native HTML elements together in a single viewport for full interactivity
+keywords: 3d,three.js,embed
+---
+
 # 3D
 
 ::alert

diff --git a/content/en/docs/4.guides/4.data-structures.md b/content/en/docs/4.guides/4.data-structures.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to use the NodeEditor instance to store and manage its nodes and connections. This guide provides an overview of the data structures used by the editor, including advanced  methods provided by rete-structures package
+keywords: nodeeditor,nodes,connections,incomers,outgoers,roots,leaves,predecessors,successors
+---
+
 # Data structures
 
 Similar to a graph, this framework contains data as nodes and edges. One correction: in the editor's terminology, the graph edges are known as connections.

diff --git a/content/en/docs/4.guides/5.arrange.md b/content/en/docs/4.guides/5.arrange.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to arrange nodes using the rete-auto-arrange-plugin. This guide provides step-by-step instructions on how to install the plugin and its peer dependencies
+keywords: layout,arrange,node position
+---
+
 # Arrange nodes
 
 ::alert

diff --git a/content/en/docs/4.guides/5.selectable/0.index.md b/content/en/docs/4.guides/5.selectable/0.index.md
@@ -1,3 +1,8 @@
+---
+description: Discover how to implement selection of any kind of element in your node editor. The framework provides built-in support for selecting nodes, but you can also extend and customize the selector to support other types of elements
+keywords: select nodes,selectable nodes
+---
+
 # Selectable
 
 ::alert

diff --git a/content/en/docs/4.guides/5.selectable/1.connections.md b/content/en/docs/4.guides/5.selectable/1.connections.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to create selectable connections with this comprehensive guide. Follow step-by-step instructions and code snippets to modify your connection type to include an optional 'selected' field and programmatically select connections
+keywords: select connection,selectable,connection,custom connection
+---
+
 # Selectable connections
 
 ::alert

diff --git a/content/en/docs/4.guides/6.connections.md b/content/en/docs/4.guides/6.connections.md
@@ -1,3 +1,8 @@
+---
+description: This guide provides a detailed exploration of the functionalities offered by the rete-connection-plugin, enabling user interaction with connections in your web application
+keywords: connections,interaction
+---
+
 # Connections
 
 ::alert

diff --git a/content/en/docs/4.guides/6.context-menu.md b/content/en/docs/4.guides/6.context-menu.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to install rete-context-menu-pluin in your node editor. With this plugin, a user can add nodes to node editor through a context menu, making it easier to create and manage your application's workflow
+keywords: context menu,menu
+---
+
 # Context menu
 
 ::alert

diff --git a/content/en/docs/4.guides/7.readonly.md b/content/en/docs/4.guides/7.readonly.md
@@ -1,3 +1,8 @@
+---
+description: Learn how to connect rete-readonly-plugin in node editor in order to make its nodes and connections read-only with this comprehensive guide
+keywords: readonly
+---
+
 # Readonly
 
 ::alert