Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: run prettier on examples #2068

Closed
wants to merge 10 commits into from
Closed
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
# All examples, codelabs, etc.
examples/*
# Examples, codelabs, etc.
**/acorn_interpreter.js
examples/interpreter-demo/acorn.js
examples/interpreter-demo/diff_match_patch.js
examples/interpreter-demo/interpreter.js
node_modules/*
codelabs/*
gh-pages/*

# All build artifacts, etc.
**/dist/*
**/build/*
examples/blockly-svelte/public/bundle.js
examples/blockly-angular/.angular
**/node_modules/*
**/CHANGELOG.md
CHANGELOG.md
Expand Down
21 changes: 18 additions & 3 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,26 @@ const compat = new FlatCompat();
module.exports = [
{
ignores: [
'examples/',
'codelabs/',
'gh-pages/',
'examples/backpack-demo',
'examples/blockly-angular',
'examples/blockly-react',
'examples/blockly-rtc',
'examples/blockly-vue3',
'examples/context-menu-codelab',
'examples/custom-dialogs-demo',
'examples/custom-toolbox-codelab',
'examples/devsite-demo',
'examples/devsite-landing-demo',
'examples/getting-started-codelab',
'examples/interpreter-demo',
'examples/pitch-field-demo',
'examples/sample-app-ts',
'examples/theme-extension-codelab',
'examples/turtle-field-demo',
'examples/validation-and-warnings-codelab',
'**/dist/',
'**/build/',
'examples/blockly-svelte/public/bundle.js',
// specific examples that are sometimes copied into plugins
'plugins/dev-create/templates/sample-app',
'plugins/dev-create/templates/sample-app-ts',
Expand Down
63 changes: 33 additions & 30 deletions examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,44 @@ to include and extend the [Blockly](http://github.com/google/blockly) library.

### Usage Demos

- [``backpack-demo``](backpack-demo/): A demo of two Blockly instances with a shared backpack.
- [``custom-dialogs-demo``](custom-dialogs-demo/): A demo overriding Blockly browser dialogs with custom implementations.
- [``custom-tooltips-demo``](custom-tooltips-demo/): An example of using a custom tooltip renderer.
- [``fixed-demo``](fixed-demo/): A demo injecting Blockly into a page as a fixed element.
- [``generator-demo``](generator-demo/): A demo of generating code from blocks and running it in a sandboxed JavaScript interpreter
- [``graph-demo``](graph-demo/): A demo of giving instant feedback as blocks are changed.
- [``headless-demo``](headless-demo/): A demo of generating Python code from XML with no graphics.
- [``interpreter-demo``](interpreter-demo/): A demo of executing code step-by-step with a sandboxed JavaScript interpreter.
- [``max-blocks-demo``](max-blocks-demo/): A demo limiting the total number of blocks allowed for academic exercises.
- [``mirror-demo``](mirror-demo/): A demo using two Blockly instances connected as leader-follower.
- [``pitch-field-demo``](pitch-field-demo/): A demo of creating custom block fields.
- [``resizable-demo``](resizable-demo/): A demo of injecting Blockly into a page as a resizable element.
- [``rtl-demo``](rtl-demo/): A demo of what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
- [``single-direction-scroll-demo``](single-direction-scroll-demo/): A demo of configuring single-direction scrollbars.
- [``toolbox-demo``](toolbox-demo/): A demo of a complex category structure for the toolbox.
- [``turtle-field-demo``](turtle-field-demo/): A demo of creating custom block fields.
- [`backpack-demo`](backpack-demo/): A demo of two Blockly instances with a shared backpack.
- [`custom-dialogs-demo`](custom-dialogs-demo/): A demo overriding Blockly browser dialogs with custom implementations.
- [`custom-tooltips-demo`](custom-tooltips-demo/): An example of using a custom tooltip renderer.
- [`fixed-demo`](fixed-demo/): A demo injecting Blockly into a page as a fixed element.
- [`generator-demo`](generator-demo/): A demo of generating code from blocks and running it in a sandboxed JavaScript interpreter
- [`graph-demo`](graph-demo/): A demo of giving instant feedback as blocks are changed.
- [`headless-demo`](headless-demo/): A demo of generating Python code from XML with no graphics.
- [`interpreter-demo`](interpreter-demo/): A demo of executing code step-by-step with a sandboxed JavaScript interpreter.
- [`max-blocks-demo`](max-blocks-demo/): A demo limiting the total number of blocks allowed for academic exercises.
- [`mirror-demo`](mirror-demo/): A demo using two Blockly instances connected as leader-follower.
- [`pitch-field-demo`](pitch-field-demo/): A demo of creating custom block fields.
- [`resizable-demo`](resizable-demo/): A demo of injecting Blockly into a page as a resizable element.
- [`rtl-demo`](rtl-demo/): A demo of what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
- [`single-direction-scroll-demo`](single-direction-scroll-demo/): A demo of configuring single-direction scrollbars.
- [`toolbox-demo`](toolbox-demo/): A demo of a complex category structure for the toolbox.
- [`turtle-field-demo`](turtle-field-demo/): A demo of creating custom block fields.

### Codelabs

The [Blockly Codelabs](https://blocklycodelabs.dev/) refer to this example code.

- [``context-menu-codelab``](context-menu-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/context-menu-option/index.html) on context menu options.
- [``custom-toolbox-codelab``](custom-toolbox-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/custom_toolbox/index.html) on how to customize your toolbox.
- [``getting-started-codelab``](getting-started-codelab/): Code for the [Blockly getting started codelab](https://blocklycodelabs.dev/codelabs/getting-started/index.html).
- [``theme-extension-codelab``](theme-extension-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/theme-extension-identifier/index.html) on applying themes.
- [``validation-and-warnings-codelab``](validation-and-warnings-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/validation-and-warnings/index.html) on validating blocks and displaying warnings.
- [`context-menu-codelab`](context-menu-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/context-menu-option/index.html) on context menu options.
- [`custom-toolbox-codelab`](custom-toolbox-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/custom_toolbox/index.html) on how to customize your toolbox.
- [`getting-started-codelab`](getting-started-codelab/): Code for the [Blockly getting started codelab](https://blocklycodelabs.dev/codelabs/getting-started/index.html).
- [`theme-extension-codelab`](theme-extension-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/theme-extension-identifier/index.html) on applying themes.
- [`validation-and-warnings-codelab`](validation-and-warnings-codelab/): Starter code and completed code for the [codelab](https://blocklycodelabs.dev/codelabs/validation-and-warnings/index.html) on validating blocks and displaying warnings.

### Integrating Blockly

- [``blockly-angular-sample``](blockly-angular/): Blockly in an Angular project, defines an Angular Blockly Component.
- [``blockly-react-sample``](blockly-react/): Blockly in a React project, defines a React Blockly Component.
- [``blockly-svelte-sample``](blockly-svelte/): Blockly in a Svelte project, defines a Svelte Blockly Component.
- [``blockly-vue3-sample``](blockly-vue3/): Blockly in a Vue3 project, defines a Vue Blockly Component.
- [``blockly-parcel``](blockly-parcel/): Using Blockly with Parcel.
- [`blockly-angular-sample`](blockly-angular/): Blockly in an Angular project, defines an Angular Blockly Component.
- [`blockly-react-sample`](blockly-react/): Blockly in a React project, defines a React Blockly Component.
- [`blockly-svelte-sample`](blockly-svelte/): Blockly in a Svelte project, defines a Svelte Blockly Component.
- [`blockly-vue3-sample`](blockly-vue3/): Blockly in a Vue3 project, defines a Vue Blockly Component.
- [`blockly-parcel`](blockly-parcel/): Using Blockly with Parcel.

### Real-time Collaboration

- [``blockly-rtc``](blockly-rtc/): Real-time collaboration environment on top of the Blockly framework.
- [`blockly-rtc`](blockly-rtc/): Real-time collaboration environment on top of the Blockly framework.

## Prerequisites

Expand All @@ -57,6 +57,7 @@ cd <any sample folder>
npm install
npm run start
```

Browse to http://localhost:3000

You may need to refer to a sample's README for further setup and running instructions.
Expand All @@ -68,17 +69,19 @@ You may need to refer to a sample's README for further setup and running instruc
```
npm run boot
```
This will run ``npm install`` on every example.

This will run `npm install` on every example.

### Maintenance

```
npm run update
```
This will run ``npm update`` on every example.

This will run `npm update` on every example.

```
npm run audit
```
This will run ``npm audit fix`` on every example.

This will run `npm audit fix` on every example.
72 changes: 37 additions & 35 deletions examples/backpack-demo/index.html
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Backpack</title>
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/blocks_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
<script src="./node_modules/@blockly/workspace-backpack/dist/index.js"></script>
<script src="./notification_backpack.js"></script>
<script src="./index.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
</style>
</head>
<body onload="init()">
<p>This is a demo of two Blockly instances with a custom Backpack "sharing" Backpack contents.</p>
<head>
<meta charset="utf-8" />
<title>Blockly Demo: Backpack</title>
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/blocks_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
<script src="./node_modules/@blockly/workspace-backpack/dist/index.js"></script>
<script src="./notification_backpack.js"></script>
<script src="./index.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
</style>
</head>
<body onload="init()">
<p>
This is a demo of two Blockly instances with a custom Backpack "sharing"
Backpack contents.
</p>

<table width="100%">
<tr>
<td>
<div id="primaryDiv" style="height: 480px; width: 600px;"></div>
</td>
<td>
<div id="secondaryDiv" style="height: 480px; width: 600px;"></div>
</td>
</tr>
</table>

</body>
<table width="100%">
<tr>
<td>
<div id="primaryDiv" style="height: 480px; width: 600px"></div>
</td>
<td>
<div id="secondaryDiv" style="height: 480px; width: 600px"></div>
</td>
</tr>
</table>
</body>
</html>
Loading