Skip to content

Commit b8f44b8

Browse files
authored
Merge pull request #82 from Flow-Launcher/web-components
Implement interactive list of plugins, settings component demo, and visual SettingsTemplate.yaml editor
2 parents 24ae82e + 6685609 commit b8f44b8

33 files changed

+2981
-194
lines changed

.github/workflows/plugin-updater.yml

+32-29
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
name: Plugin Updater
22

33
on:
4-
schedule:
5-
- cron: "0 0 * * *"
64
workflow_dispatch:
5+
push:
6+
branches:
7+
- main
8+
paths:
9+
- webcomponents/**.js
10+
- webcomponents/**.ts
11+
- webcomponents/**.json
12+
- webcomponents/**.svelte
713

814
jobs:
9-
Update:
15+
build-webcomponents:
16+
name: Build web components
1017
runs-on: ubuntu-latest
1118
steps:
12-
- uses: actions/checkout@v2
19+
- uses: actions/checkout@v4
1320
with:
1421
token: ${{ secrets.UPDATER }}
15-
16-
- uses: actions/setup-python@v2
22+
- name: Setup Node
23+
uses: actions/setup-node@v4
1724
with:
18-
python-version: "3.x"
19-
20-
- name: Install Dependencies
21-
run: pip install -r ./ci/envs/requirements-plugin.txt
22-
23-
- name: Update Plugin Informations
24-
run: python ./ci/src/plugin_updater.py
25-
env:
26-
GH_TOKEN: ${{ github.token }}
27-
REPOSITORY: "Flow-Launcher/Flow.Launcher.PluginsManifest"
28-
PLUGIN_JSON: "plugins.json"
29-
PLUGIN_MARKDOWN: "plugins.md"
30-
PLUGIN_NAME: "Name"
31-
PLUGIN_AUTHOR: "Author"
32-
PLUGIN_DESCRIPTION: "Description"
33-
PLUGIN_VERSION: "Version"
34-
PLUGIN_WEBSITE: "Website"
35-
36-
- name: Commit & Push changes
37-
uses: stefanzweifel/git-auto-commit-action@v4
25+
node-version: 20
26+
- name: Get version
27+
id: version
28+
run: |
29+
version=$(jq -r .version webcomponents/package.json)
30+
echo "version=$version" >> $GITHUB_OUTPUT
31+
- name: Build
32+
run: |
33+
cd webcomponents
34+
npm install
35+
npm run build
36+
git config --local user.name "github-actions[bot]"
37+
git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
38+
git add dist
39+
git commit -m "Update web components build artifact"
40+
- name: Put new build into the repo
41+
uses: ad-m/github-push-action@master
3842
with:
39-
commit_message: "DOC: update plugin list"
40-
push_options: --force
41-
branch: main
43+
github_token: ${{ secrets.UPDATER }}
44+
branch: ${{ github.ref }}

_sidebar.md

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
- JSONRPC
2626
- [**JSON RPC Introduction**](/json-rpc.md)
2727
- [**JSON RPC Plugin Settings**](/json-rpc-settings.md)
28+
- [**Visual SettingsTemplate.yaml editor**](/json-rpc-visual-settingstemplate-editor.md)
2829
- Porting Plugins
2930
- [**Porting Plugins Guide**](/port-plugins.md)
3031
- [**How To Create A Theme**](/how-to-create-a-theme.md)

index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
coverpage: false,
2525
mergeNavbar: true,
2626
loadSidebar: true,
27+
executeScript: true,
2728
subMaxLevel: 4,
2829
search: 'auto',
2930
auto2top: true,
@@ -57,4 +58,4 @@
5758
</script>
5859
</body>
5960

60-
</html>
61+
</html>

json-rpc-settings.md

+34-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ You might need to have some settings in your plugins that are easily changeable
44

55

66
### SettingsTemplate.yaml
7-
This is a YAML files that contains the settings page layout for your plugin. It contains an object with a single property called `body`. The `body` property contains an array of objects that define the layout of the settings page. Each object in the `body` array is a section of the settings page. Each section takes up the entire width of the page, which means you can't have one input on the left and one on the right. The layout of each section is always static: input description on the left, input on the right. Every object in the `body` array has the same structure: a `type` property that defines the type of this input (text input, textarea etc.), and an `attributes` property that contains everything else the object needs to render, such as label, description, or default value. The following is a list of the different types of inputs that can be used in the `SettingsTemplate.yaml` file.
7+
This is a YAML file that contains the settings page layout for your plugin. It contains an object with a single property called `body`. The `body` property contains an array of objects that define the layout of the settings page. Each object in the `body` array is a section of the settings page. Each section takes up the entire width of the page, which means you can't have one input on the left and one on the right. The layout of each section is always static: input description on the left, input on the right. Every object in the `body` array has the same structure: a `type` property that defines the type of this input (text input, textarea etc.), and an `attributes` property that contains everything else the object needs to render, such as label, description, or default value. The following is a list of the different input types that can be used in the `SettingsTemplate.yaml` file.
88

99
---
1010

@@ -15,6 +15,8 @@ type: textBlock
1515
attributes:
1616
description: This is a block of text.
1717
```
18+
<settings-component-demo type="textBlock" description="This is a block of text."></settings-component-demo>
19+
1820
| Property name | Property description |
1921
|---------------|----------------------|
2022
| `description` | The text to display. |
@@ -29,6 +31,8 @@ attributes:
2931
description: Description of the input
3032
defaultValue: Hello there
3133
```
34+
<settings-component-demo type="input" label="This is a text input" description="Description of the input" value="Hello there"></settings-component-demo>
35+
3236
| Property name | Property description |
3337
|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
3438
| `name` | The name of the input. This is the key that you will use to access the value of the input in the settings object. |
@@ -46,6 +50,8 @@ attributes:
4650
description: Description of the input
4751
defaultValue: Hello there
4852
```
53+
<settings-component-demo type="inputWithFileBtn" label="This is a text input with a Browse button" description="Description of the input" value="Hello there"></settings-component-demo>
54+
4955
| Property name | Property description |
5056
|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
5157
| `name` | The name of the input. This is the key that you will use to access the value of the input in the settings object. |
@@ -64,6 +70,8 @@ attributes:
6470
description: Description of the input
6571
defaultValue: Hello there
6672
```
73+
<settings-component-demo type="textarea" label="This is a multiline text input" description="Description of the input" value="Hello there"></settings-component-demo>
74+
6775
| Property name | Property description |
6876
|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
6977
| `name` | The name of the input. This is the key that you will use to access the value of the input in the settings object. |
@@ -81,6 +89,8 @@ attributes:
8189
description: Description of the input
8290
defaultValue: secret password
8391
```
92+
<settings-component-demo type="passwordBox" label="This is a password input" description="Description of the input" value="secret password"></settings-component-demo>
93+
8494
| Property name | Property description |
8595
|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
8696
| `name` | The name of the input. This is the key that you will use to access the value of the input in the settings object. |
@@ -102,6 +112,8 @@ attributes:
102112
- Option 2
103113
- Option 3
104114
```
115+
<settings-component-demo type="dropdown" label="This is a dropdown input" description="Description of the input" value="Option 1" options='["Option 1", "Option 2", "Option 3"]'></settings-component-demo>
116+
105117
| Property name | Property description |
106118
|----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
107119
| `name` | The name of the input. This is the key that you will use to access the value of the input in the settings object. |
@@ -120,6 +132,8 @@ attributes:
120132
description: Description of the checkbox
121133
defaultValue: true
122134
```
135+
<settings-component-demo type="checkbox" label="This is a checkbox" description="Description of the checkbox" value="true"></settings-component-demo>
136+
123137
| Property name | Property description |
124138
|----------------|-------------------------------------------------------------------------------------------------------------------------|
125139
| `name` | The name of the checkbox. This is the key that you will use to access the value of the checkbox in the settings object. |
@@ -158,10 +172,27 @@ body:
158172
- "C#"
159173
- type: checkbox
160174
attributes:
161-
name: Prefer shorter answers
175+
name: preferShorterAnswers
176+
label: Prefer shorter answers
162177
description: If checked, the plugin will try to give answer much shorter than the usual ones.
163178
defaultValue: false
164179
```
180+
<settings-component-demo type="textBlock" description="Welcome to the settings page for my plugin. Here you can configure the plugin to your liking."></settings-component-demo>
181+
<settings-component-demo type="input" label="How should I call you?" value="the user"></settings-component-demo>
182+
<settings-component-demo type="textarea" label="Text to prepend to result output" description='This text will be added to the beginning of the result output. For example, if you set this to "The result is: ", and the result is "42", the output will be "The result is: 42".'></settings-component-demo>
183+
<settings-component-demo type="dropdown" label="Programming language to prefer for answers" value="TypeScript" options='["JavaScript", "TypeScript", "Python", "C#"]'></settings-component-demo>
184+
<settings-component-demo type="checkbox" label="Prefer shorter answers" description="If checked, the plugin will try to give answer much shorter than the usual ones."></settings-component-demo>
165185

166186
### Visual editor for `SettingsTemplate.yaml`
167-
You can use a [visual editor](https://flow-launcher-plugin-settings-generator.pages.dev/) for creating the `SettingsTemplate.yaml` file. When you're done editing, click the `Generate SettingsTemplate.yaml` file and copy-paste its contents into your `SettingsTemplate.yaml` file. Optionally, you can also copy the generated typings for your settings object in your preferred programming language.
187+
You can use a [visual editor](#/json-rpc-visual-settingstemplate-editor) for creating the `SettingsTemplate.yaml` file. When you're done editing, click the `Generate SettingsTemplate.yaml` file and copy-paste its contents into your `SettingsTemplate.yaml` file. Optionally, you can also copy the generated typings for your settings object in your preferred programming language.
188+
189+
<script>
190+
const element = document.querySelector('#__settings-script__');
191+
if (!element) {
192+
const script = document.createElement('script');
193+
script.id = '__settings-script__';
194+
script.src = 'https://www.flowlauncher.com/docs/webcomponents/dist/flow-launcher-docs-web-components.js';
195+
script.type = 'module';
196+
document.body.appendChild(script);
197+
}
198+
</script>
+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## SettingsTemplate.yaml editor
2+
3+
Note that data in the editor below is not persisted. It will be lost once you close your browser. Remember to press "Generate SettingsTemplate.yaml" and save the result if you want to keep it.
4+
5+
If you already have a SettingsTemplate.yaml file and would like to try editing it here, just copy its contents and paste it on this page.
6+
7+
<settings-generator></settings-generator>
8+
9+
<script>
10+
const element = document.querySelector('#__settings-script__');
11+
if (!element) {
12+
const script = document.createElement('script');
13+
script.id = '__settings-script__';
14+
script.src = 'https://www.flowlauncher.com/docs/webcomponents/dist/flow-launcher-docs-web-components.js';
15+
script.type = 'module';
16+
document.body.appendChild(script);
17+
}
18+
</script>

0 commit comments

Comments
 (0)