Skip to content

Commit

Permalink
fix modules being under the wrong sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
outercloudstudio committed Dec 18, 2023
1 parent 4ffab0a commit 5877177
Show file tree
Hide file tree
Showing 27 changed files with 72 additions and 62 deletions.
2 changes: 1 addition & 1 deletion docs/extensions/scripts/com-mojang.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/com-mojang'
description: Learn about the @bridge/com-mojang that allows you to access the com.mojang file system.
sidebar: scripts
sidebar: Scripts
---

# 📂 @bridge/com-mojang
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/command-bar.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/command-bar'
description: Learn about the @bridge/command-bar... TODO
sidebar: scripts
sidebar: Scripts
---

# 📡 @bridge/command-bar
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/compare-versions.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/compare-versions'
description: Learn about the @bridge/compare-versions... TODO
sidebar: scripts
sidebar: Scripts
---

# 🧩 @bridge/compare-versions
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/env.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/env'
description: Learn more about @bridge/env, a utility module that provides access to environmental project data.
sidebar: scripts
sidebar: Scripts
---

# 🏞️ @bridge/env
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/fetch-definition.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/fetch-definition'
description: Learn more about the @bridge/fetch-definition module which grants access to the lightning cache database.
sidebar: scripts
sidebar: Scripts
---

# 🔗 @bridge/fetch-definition
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/fflate.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/fflate'
description: Learn about the @bridge/fflate which allows access to the fflate library.
sidebar: scripts
sidebar: Scripts
---

# 💽 @bridge/fflate
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/fs.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/fs'
description: Learn about the @bridge/fs module that allows extensions to interact with the user's file system.
sidebar: scripts
sidebar: Scripts
---

# 📄 @bridge/fs
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/globals.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/globals'
description: Learn about the @bridge/globals module that allows custom components, custom commands and other plugins to access shared data inside of a globals.json file in the project root.
sidebar: scripts
sidebar: Scripts
---

# 🌐 @bridge/globals
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/import.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/import'
description: Learn more about @bridge/import module that allows access to bridge.'s import system.
sidebar: scripts
sidebar: Scripts
---

# 📥 @bridge/import
Expand Down
82 changes: 46 additions & 36 deletions docs/extensions/scripts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ In this page you will learn the following:
:ballot_box_with_check: How to make your very own page and script.

## Basics

Script modules is a collection of JavaScript files and Vue files that can be created within bridge's extension folder or outside of bridge that enable you to develop your own windows, scripts and request bridge to do certain things. Bridge's Script API uses the Vue V2 Engine. It is highly recommended to read the [documentation of the Vue V2 Engine](https://v2.vuejs.org/) to understand how to write and use Vue files.

:::warning
Expand All @@ -27,7 +28,9 @@ To reload extensions go to `Tools > Reload Extensions` after importing your exte
:::

## Creating A Simple Script and Window

### Setup

Before you begin writing your script and Vue files, you must set up an [extension](/extensions/index.html#creating-extensions) to contain your files. Once you have a valid extension set up in the extension's folder, you can now create two folders named `ui` and `scripts` then create a file called `index.js` inside the `scripts` folder.

The `ui` folder will contain your Vue files while the `scripts` folder will contain your JavaScript files. See example setup below.
Expand All @@ -46,6 +49,7 @@ This is also the same for `scripts` folder where you cannot have any file other
:::

### Writing The UI

Now that we have made the files and folders required we will be adding a button to the sidebar that will open up a sidebar window. To do this we will be using the [@bridge/sidebar](/extensions/scripts/sidebar.html) and [@bridge/ui](/extensions/scripts/ui.html) module inside the `index.js` file.

However before we do this we need to setup and import the vue file in the `ui` folder.
Expand All @@ -62,22 +66,22 @@ Now we need to begin setting up the vue file with the required template and scri

```vue
<template>
<div style="padding:10px;">
<h1>You've clicked {{ Counter }} Times!</h1>
<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
</div>
<div style="padding:10px;">
<h1>You've clicked {{ Counter }} Times!</h1>
<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
</div>
</template>
<script>
export default {
data: () => ({
Counter: 0
}),
methods: {
IncrementCounter() {
this.Counter = this.Counter + 1
}
}
data: () => ({
Counter: 0,
}),
methods: {
IncrementCounter() {
this.Counter = this.Counter + 1
},
},
}
</script>
```
Expand All @@ -94,7 +98,7 @@ Now that we have setup the vue file we need to start writing the `index.js` file
import { create } from '@bridge/sidebar'
import { Home } from '@bridge/ui'
/*
See how we are importing Home from @bridge/ui. This means we are importing the vue file Home.vue.
See how we are importing Home from @bridge/ui. This means we are importing the vue file Home.vue.
If we were to name the vue file SideBar.vue then we would need to do
import { SideBar } from '@bridge/ui'
Expand All @@ -104,10 +108,10 @@ Then we need to call the function and fill in the paramaters.
```js
create({
id: 'yourId',
displayName: 'Click Me',
icon: 'mdi-apple',
component: Home
id: 'yourId',
displayName: 'Click Me',
icon: 'mdi-apple',
component: Home,
})
```
Expand All @@ -124,42 +128,47 @@ Again this may seem a little confusing so lets break it down again.
Phew. Now you have made it this far, save your files and then reload your extension by going to **Tools > Reload Extensions**. If everything went correctly you should now see an apple icon on the sidebar if you have used the mdi-apple icon.
## Full Setup Of Tutorial
### index.js
```js
import { create } from '@bridge/sidebar';
import { Home } from '@bridge/ui';
import { create } from '@bridge/sidebar'
import { Home } from '@bridge/ui'
create({
id: 'yourId',
displayName: 'Click Me',
icon: 'mdi-apple',
component: Home
id: 'yourId',
displayName: 'Click Me',
icon: 'mdi-apple',
component: Home,
})
```
### Home.vue
```vue
<template>
<div style="padding:10px;">
<h1>You've clicked {{ Counter }} Times!</h1>
<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
</div>
<div style="padding:10px;">
<h1>You've clicked {{ Counter }} Times!</h1>
<v-btn block color="primary" @click="IncrementCounter">Click Me!</v-btn>
</div>
</template>
<script>
export default {
data: () => ({
Counter: 0
}),
methods: {
IncrementCounter() {
this.Counter = this.Counter + 1
}
}
data: () => ({
Counter: 0,
}),
methods: {
IncrementCounter() {
this.Counter = this.Counter + 1
},
},
}
</script>
```
### File & Folder Setup
```txt
📁 extensions
├─ 📁 YourExtension
Expand All @@ -171,4 +180,5 @@ export default {
```
## Next Steps
This guide only scratches the surface of what is possible with script modules. It is best to look at the [extensions repository on github](https://github.com/bridge-core/plugins) for examples and references when developing your extension or when you want to figure out something. It is best to start simple and get familiar with reading the documentation and understanding how certain things work.
This guide only scratches the surface of what is possible with script modules. It is best to look at the [extensions repository on github](https://github.com/bridge-core/plugins) for examples and references when developing your extension or when you want to figure out something. It is best to start simple and get familiar with reading the documentation and understanding how certain things work.
2 changes: 1 addition & 1 deletion docs/extensions/scripts/json5.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/json5'
description: Learn about the @bridge/json5 module that gives access to json parsing with the json5 npm package.
sidebar: scripts
sidebar: Scripts
---

# 🏗️ @bridge/json5
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/model-viewer.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/model-viewer'
description: Learn about the @bridge/model-viewer... TODO
sidebar: scripts
sidebar: Scripts
---

# 🧱 @bridge/model-viewer
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/monaco.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/monaco'
description: Learn about the @bridge/monaco module that allows you to modify monaco's behaviors.
sidebar: scripts
sidebar: Scripts
---

# 🔩 @bridge/monaco
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/notifications.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/notifications'
description: Learn about the @bridge/notification module that allows extensions to create notifications.
sidebar: scripts
sidebar: Scripts
---

# @bridge/notification
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/path.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/path'
description: Learn about the @bridge/path module that gives access to the node 'path' module.
sidebar: scripts
sidebar: Scripts
---

# 📕 @bridge/path
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/persistent-storage.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/persistent-storage'
description: Learn about the @bridge/persistent-storage module that allows your extension to store data between sessions.
sidebar: scripts
sidebar: Scripts
---

# 💾 @bridge/persistent-storage
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/project.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/project'
description: Learn about the @bridge/project that allows access to specific functions related to the current project.
sidebar: scripts
sidebar: Scripts
---

# 🚧 @bridge/project
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/reactivity.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/reactivity'
description: Learn about the @bridge/reactivity... TODO
sidebar: scripts
sidebar: Scripts
---

# 🧨 @bridge/reactivity
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/sidebar.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/sidebar'
description: Learn about the @bridge/sidebar module that allows extensions to create sidebar tabs.
sidebar: scripts
sidebar: Scripts
---

# 🧭 @bridge/sidebar
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/tab-actions.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/tab-actions'
description: Learn more about @bridge/tab-actions module that allows access to bridge.'s tab action system.
sidebar: scripts
sidebar: Scripts
---

# 🏃‍♂️ @bridge/tab-actions
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/tab.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/tab'
description: Learn more about @bridge/tab module that allows access to bridge.'s tab system.
sidebar: scripts
sidebar: Scripts
---

# 📎 @bridge/tab
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/theme.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/theme'
description: Learn about the @bridge/theme module that allows you to interact with bridge.'s theme system.
sidebar: scripts
sidebar: Scripts
---

# 🎨 @bridge/theme
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/three.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/three'
description: Learn more about @bridge/three module that exposes the threeJS library.
sidebar: scripts
sidebar: Scripts
---

# 3️⃣ @bridge/three
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/toolbar.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/toolbar'
description: Learn about the @bridge/toolbar which allows access to bridge's toolbar system.
sidebar: scripts
sidebar: Scripts
---

# 🧰 @bridge/toolbar
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/ui.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/ui'
description: Learn more about the @bridge/ui module that provides programmatic access to Vue components defined inside of the plugin's ui/ folder.
sidebar: scripts
sidebar: Scripts
---

# 🎴 @bridge/ui
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/utils.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/utils'
description: Learn more about the @bridge/utils module that provides common functions to developers.
sidebar: scripts
sidebar: Scripts
---

# 🔧 @bridge/utils
Expand Down
2 changes: 1 addition & 1 deletion docs/extensions/scripts/windows.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: '@bridge/windows'
description: Learn about the @bridge/windows which allows access to bridge's windows system.
sidebar: scripts
sidebar: Scripts
---

# 🏠 @bridge/windows
Expand Down

0 comments on commit 5877177

Please sign in to comment.