Merge pull request #172 from retejs/kit-banner

Kit banner

src/components/content/Kit.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+Banner(
+  icon="heroicons:rocket-launch"
+  :tooltip="{ icon: 'tabler:clipboard-copy' }"
+  :action="{ label: $t('kit.banner.button'), to: localePath(link) }"
+  @tooltip="copyToClipboard"
+)
+  template(v-slot:text)
+    i18n-t(keypath='kit.banner.text')
+      template(v-slot:link)
+        NuxtLink(:to="link") Rete Kit
+  template(v-slot:tooltip)
+    i18n-t(keypath='kit.banner.tooltip')
+      template(v-slot:command)
+        .command {{ command }}
+</template>
+
+<script lang="ts">
+import Banner from '../shared/Banner.vue'
+
+export default {
+  data() {
+    return {
+      link: '/docs/development/rete-kit',
+      command: 'npx rete-kit app'
+    }
+  },
+  methods: {
+    async copyToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.command)
+        this.$Notice.success({
+          title: this.$t('kit.banner.copyNotification.success')
+        })
+      } catch (error) {
+        console.error(error)
+
+        this.$Notice.error({
+          title: this.$t('kit.banner.copyNotification.error')
+        })
+      }
+    }
+  },
+  components: {
+    Banner
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+.command
+  font-family: monospace
+  border: 1px solid #e0e0e0
+  display: inline-block
+  padding: 0 0.2em
+  border-radius: 0.3em
+</style>

src/components/content/ProExample.vue

@@ -1,15 +1,12 @@
 <template lang="pug">
-IViewAlert.alert(show-icon)
-  .content
-    .text {{ $t('examplesPage.proExample.alert') }}
-    Tooltip(placement="top")
-      template(#content)
-        .tooltip {{ $t('examplesPage.proExample.info') }}
-      Button.question(type="text" shape="circle")
-        Icon.icon(name="f7:question-circle")
-    Button.button(:to="patreon.link" target="_blank") {{ $t('examplesPage.proExample.getAccess') }}
-  template(#icon)
-    Icon.icon(name="ion:finger-print")
+Banner(
+  icon="ion:finger-print"
+  :tooltip="{ icon: 'f7:question-circle' }"
+  :action="{ label: $t('examplesPage.proExample.getAccess'), to: patreon.link, target: '_blank' }"
+)
+  template(v-slot:text) {{ $t('examplesPage.proExample.alert') }}
+  template(v-slot:tooltip) {{ $t('examplesPage.proExample.info') }}
+
 BaseExample
   iframe(
     :src="src"
@@ -19,6 +16,7 @@ BaseExample
 
 <script lang="ts">
 import sponsor from '../../consts/sponsor.json'
+import Banner from '../shared/Banner.vue'
 import BaseExample from '../shared/BaseExample.vue'
 
 export default {
@@ -31,33 +29,13 @@ export default {
     }
   },
   components: {
+    Banner,
     BaseExample
   }
 }
 </script>
 
 <style lang="sass" scoped>
-@import '@/assets/styles/media.sass'
-
-.alert
-  padding-right: 8px
-  .content
-    display: flex
-    align-items: center
-    gap: 0.5em
-    .text
-      flex: 1
-    .tooltip
-      text-align: center
-      max-width: 14em
-      text-wrap: wrap
-  .icon
-    font-size: 1.25em
-  .question
-    padding: 0.2em 0.5em
-    .icon
-      vertical-align: text-top
-
 iframe
   width: 100%
   height: 100%

src/components/shared/Banner.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+IViewAlert.banner(show-icon)
+  .content
+    .text
+      slot(name="text")
+    Tooltip(v-if="tooltip", placement="top")
+      template(#content)
+        .tooltip
+          slot(name="tooltip")
+      Button.question(
+        type="text"
+        shape="circle"
+        @click="$emit('tooltip')"
+      )
+        Icon.icon(:name="tooltip.icon")
+    Button.button(
+      v-if="action"
+      :target="action.target"
+      :to="action.to"
+      @click="$emit('action')"
+    ) {{ action.label }}
+  template(#icon)
+    Icon.icon(:name="icon")
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    icon: String,
+    tooltip: {
+      type: Object,
+      default: null
+    },
+    action: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import '@/assets/styles/media.sass'
+
+.banner
+  padding-right: 8px
+  .content
+    display: flex
+    align-items: center
+    gap: 0.5em
+    .text
+      flex: 1
+    .tooltip
+      text-align: center
+      max-width: 14em
+      text-wrap: wrap
+  .icon
+    font-size: 1.25em
+  .question
+    padding: 0.2em 0.5em
+    .icon
+      vertical-align: text-top
+
+</style>

src/content/en/docs/4.guides/1.basic.md

@@ -19,10 +19,12 @@ Follow this guide to use the corresponding render plugin in your **Angular**, **
 :ref-github{title="Connection plugin" link="https://github.com/retejs/connection-plugin"}
 ::
 
-In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally. It's highly recommended starting with [Rete Kit](/docs/development/rete-kit) and using it to build applications if you haven't done so already.
+In order to complete this guide, you can create an application on **[Codesandbox](https://codesandbox.io)** by choosing any client application template or set up the application locally.
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
 ```

src/content/en/docs/4.guides/10.minimap.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-minimap-plugin
 ```

src/content/en/docs/4.guides/11.dock-menu.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-dock-plugin
 ```

src/content/en/docs/4.guides/12.connection-path.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-path-plugin d3-shape
 ```

src/content/en/docs/4.guides/13.reroute.md

@@ -17,6 +17,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-connection-reroute-plugin
 ```

src/content/en/docs/4.guides/14.undo-redo.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-history-plugin
 ```

src/content/en/docs/4.guides/15.comments.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-comment-plugin
 ```

src/content/en/docs/4.guides/2.renderers/1.react.md

@@ -25,6 +25,8 @@ This plugin can be used in any application, regardless of your stack (**React.js
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-react-plugin rete-render-utils styled-components
 ```

src/content/en/docs/4.guides/2.renderers/2.vue.md

@@ -28,6 +28,8 @@ You can use this plugin in any application, irrespective of the application stac
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-vue-plugin rete-render-utils
 ```

src/content/en/docs/4.guides/2.renderers/3.angular.md

@@ -28,6 +28,8 @@ This plugin is **exclusively** designed for Angular applications as it requires
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-angular-plugin rete-render-utils @angular/elements@18
 ```

src/content/en/docs/4.guides/2.renderers/4.svelte.md

@@ -26,6 +26,8 @@ Supports latest versions of Svelte: 5, 4 and 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-svelte-plugin rete-render-utils sass
 ```

src/content/en/docs/4.guides/2.renderers/5.lit.md

@@ -26,6 +26,8 @@ Supports Lit version 3
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i @retejs/lit-plugin rete-render-utils lit
 ```

src/content/en/docs/4.guides/3.processing/1.dataflow.md

@@ -18,6 +18,8 @@ Not familiar with Dataflow concept? Check out the [Dataflow](/docs/concepts/engi
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```

src/content/en/docs/4.guides/3.processing/2.control-flow.md

@@ -16,6 +16,8 @@ Not familiar with Control flow concept? Check out the [Control flow](/docs/conce
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```

src/content/en/docs/4.guides/3.processing/3.hybrid.md

@@ -20,6 +20,8 @@ For a brief overview of the concept of combining Dataflow and Control flow, we r
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete rete-engine
 ```

src/content/en/docs/4.guides/4.3d/1.index.md

@@ -24,6 +24,8 @@ Powered by Three.js, this plugin creates a scene that contains a camera and two
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `three` peer dependency must be installed separately.
 
 ```bash

src/content/en/docs/4.guides/5.arrange.md

@@ -20,6 +20,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 Prior to using this plugin, `elkjs` peer dependency must be installed separately.
 
 ```bash

src/content/en/docs/4.guides/6.context-menu.md

@@ -16,6 +16,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-context-menu-plugin
 ```

src/content/en/docs/4.guides/7.readonly.md

@@ -18,6 +18,8 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-readonly-plugin
 ```

src/content/en/docs/4.guides/8.scopes.md

@@ -21,6 +21,8 @@ This approach involves using nodes as parent elements for other nodes. This enab
 
 ## Install dependencies {#install-dependencies}
 
+:kit
+
 ```bash
 npm i rete-scopes-plugin
 ```

src/content/en/examples/1.basic/1.react.md

@@ -22,4 +22,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-react-plugin` for seamless integration with **React.js**. Users have the option to select these nodes. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"}

src/content/en/examples/1.basic/2.vue.md

@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-vue-plugin` for seamless integration with **Vue.js**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"}

src/content/en/examples/1.basic/3.angular.md

@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-angular-plugin` for seamless integration with **Angular**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"}

src/content/en/examples/1.basic/4.svelte.md

@@ -20,4 +20,5 @@ navigation:
 
 A basic editor example featuring two connected nodes, each equipped with an input field. The rendering of nodes and connections is accomplished using `rete-svelte-plugin` for seamless integration with **Svelte**. Users have the option to choose these nodes, causing them to move to the front. Node positions are manually defined according to predefined coordinates.
 
+:kit
 :example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"}