Skip to content

Commit 50edae1

Browse files
gregagrega
committed
chore(docs): replace CodelabImage with standard Image component
1 parent 30fecbf commit 50edae1

22 files changed

Lines changed: 180 additions & 168 deletions

‎packages/docs/docs/codelabs/context-menu-option/add-a-context-menu-item.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/add-a-context-menu-item/index.html
33
description: How to add a context menu item to the registry.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing context menus
99

@@ -78,10 +78,10 @@ you will never need to make a new `ContextMenuRegistry`. Always use the singleto
7878

7979
Reload your web page and open a context menu on the workspace (right-click with a mouse, or press `Ctrl+Enter` (Windows) or `Command+Enter` (Mac) if you are navigating Blockly with the keyboard). You should see a new option labeled "Hello World" at the bottom of the context menu.
8080

81-
<CodelabImage>
82-
{' '}
83-
![A context menu. The last option says "Hello
84-
World".](../../../static/images/codelabs/context-menu-option/hello_world.png){' '}
85-
</CodelabImage>
81+
<Image
82+
src="/images/codelabs/context-menu-option/hello_world.png"
83+
alt='A context menu. The last option says "Hello World".'
84+
className="codelabImage"
85+
/>
8686

8787
Next, drag a block onto the workspace and open a context menu on the block. You'll see "Hello World" at the bottom of the block's context menu. Finally, open a context menu on the workspace and create a comment, then open a context menu on the comment's header. "Hello World" should be at the bottom of the context menu.

‎packages/docs/docs/codelabs/context-menu-option/setup.mdx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/context-menu-option/setup/index.html
33
description: Setting up the "Customizing context menus" codelab.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing context menus
99

@@ -35,7 +35,8 @@ Each folder contains:
3535

3636
To run the code, simple open `starter-code/index.html` in a browser. You should see a Blockly workspace with an always-open flyout.
3737

38-
<CodelabImage>
39-
![A web page with the text "Context Menu Codelab" and a simple Blockly
40-
workspace.](../../../static/images/codelabs/context-menu-option/starter_workspace.png)
41-
</CodelabImage>
38+
<Image
39+
src="/images/codelabs/context-menu-option/starter_workspace.png"
40+
alt='A web page with the text "Context Menu Codelab" and a simple Blockly workspace.'
41+
className="codelabImage"
42+
/>

‎packages/docs/docs/codelabs/custom-generator/codelab-overview.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ slug: /codelabs/custom-generator/codelab-overview/index.html
44
description: Overview of the "Build a custom generator" codelab.
55
---
66

7-
import CodelabImage from '@site/src/components/CodelabImage';
7+
import Image from '@site/src/components/Image';
88

99
# Build a custom generator
1010

@@ -21,11 +21,11 @@ import CodelabImage from '@site/src/components/CodelabImage';
2121

2222
You will build a JSON generator that implements the [JSON language spec](https://www.json.org/json-en.html).
2323

24-
<CodelabImage>
25-
![Screenshot of the toolbox and workspace built in this codelab. It contains
26-
blocks that implement the JSON spec, like member, object, lists, strings, and
27-
numbers.](../../../static/images/codelabs/custom-generator/json_workspace.png)
28-
</CodelabImage>
24+
<Image
25+
src="/images/codelabs/custom-generator/json_workspace.png"
26+
alt="Screenshot of the toolbox and workspace built in this codelab. It contains blocks that implement the JSON spec, like member, object, lists, strings, and numbers."
27+
className="codelabImage"
28+
/>
2929

3030
### What you'll need
3131

‎packages/docs/docs/codelabs/custom-generator/setup.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/setup/index.html
33
description: Setting up the "Build a custom generator" codelab.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Build a custom generator
99

@@ -162,10 +162,10 @@ Our `index.js` file already handles importing the toolbox and using it in Blockl
162162

163163
If the server is already running, refresh the page to see changes. Otherwise, run `npm start` to start the server. New blocks should now exist in the toolbox, like this:
164164

165-
<CodelabImage>
166-
![Screenshot of toolbox showing the added blocks, including the new member and
167-
object blocks, plus the built-in number, text, boolean, null, and list
168-
blocks.](../../../static/images/codelabs/custom-generator/toolbox_blocks.png)
169-
</CodelabImage>
165+
<Image
166+
src="/images/codelabs/custom-generator/toolbox_blocks.png"
167+
alt="Screenshot of toolbox showing the added blocks, including the new member and object blocks, plus the built-in number, text, boolean, null, and list blocks."
168+
className="codelabImage"
169+
/>
170170

171171
The app is still trying to generate and run JavaScript for the workspace, instead of JSON. We will change that soon.

‎packages/docs/docs/codelabs/custom-generator/value-block-generators.mdx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-generator/value-block-generators/index.html
33
description: How to write a block code generator for a simple value block.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Build a custom generator
99

@@ -17,10 +17,11 @@ It will use `getFieldValue` on several types of fields.
1717

1818
The simplest block in this example is the `logic_null` block.
1919

20-
<CodelabImage>
21-
![The null block simply returns
22-
"null".](../../../static/images/codelabs/custom-generator/null_block.png)
23-
</CodelabImage>
20+
<Image
21+
src="/images/codelabs/custom-generator/null_block.png"
22+
alt='The null block simply returns "null".'
23+
className="codelabImage"
24+
/>
2425

2526
No matter what, it generates the code `'null'`. Notice that this is a string, because all generated code is a string.
2627
Add the following code to `src/generators/json.js`:
@@ -35,10 +36,11 @@ jsonGenerator.forBlock['logic_null'] = function (block) {
3536

3637
Next is the `text` block.
3738

38-
<CodelabImage>
39-
![The text block has an input for the user to type text
40-
into.](../../../static/images/codelabs/custom-generator/text_block.png)
41-
</CodelabImage>
39+
<Image
40+
src="/images/codelabs/custom-generator/text_block.png"
41+
alt="The text block has an input for the user to type text into."
42+
className="codelabImage"
43+
/>
4244

4345
Unlike `logic_null`, there is a single text input field on this block. Use `getFieldValue`:
4446

@@ -60,10 +62,11 @@ jsonGenerator.forBlock['text'] = function (block) {
6062

6163
The `math_number` block has a number field.
6264

63-
<CodelabImage>
64-
![The number block has an input for a user to type a
65-
number](../../../static/images/codelabs/custom-generator/number_block.png)
66-
</CodelabImage>
65+
<Image
66+
src="/images/codelabs/custom-generator/number_block.png"
67+
alt="The number block has an input for a user to type a number"
68+
className="codelabImage"
69+
/>
6770

6871
Like the `text` block, the `math_number` block can use `getFieldValue`. Unlike the text block, the function doesn't need to wrap it in additional quotation marks, because in the JSON code, it won't be a string.
6972

@@ -80,10 +83,11 @@ jsonGenerator.forBlock['math_number'] = function (block) {
8083

8184
The `logic_boolean` block has a dropdown field named `BOOL`.
8285

83-
<CodelabImage>
84-
![The boolean block lets the user select 'true' or 'false' from a dropdown
85-
menu.](../../../static/images/codelabs/custom-generator/boolean_block.png)
86-
</CodelabImage>
86+
<Image
87+
src="/images/codelabs/custom-generator/boolean_block.png"
88+
alt="The boolean block lets the user select 'true' or 'false' from a dropdown menu."
89+
className="codelabImage"
90+
/>
8791

8892
Calling `getFieldValue` on a dropdown field returns the value of the selected option, which may not be the same as the display text. In this case the dropdown has two possible values: `TRUE` and `FALSE`.
8993

‎packages/docs/docs/codelabs/custom-toolbox/add-an-icon-to-your-category.mdx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/add-an-icon-to-your-category/index.html
33
description: How to add an icon to your category.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing a Blockly toolbox
99

@@ -113,14 +113,14 @@ Your `setSelected` method should look similar to below:
113113
If you open your `index.html` file, you should see a white gear above your "Logic"
114114
label, and it should change to blue when the category has been selected.
115115

116-
<CodelabImage>
117-
{' '}
118-
![A white gear above the word "Logic" on a blue
119-
background.](../../../static/images/codelabs/custom-toolbox/category_gear.png){' '}
120-
</CodelabImage>
121-
122-
<CodelabImage>
123-
{' '}
124-
![A blue gear above the word "Logic" on a white
125-
background.](../../../static/images/codelabs/custom-toolbox/category_gear_selected.png){' '}
126-
</CodelabImage>
116+
<Image
117+
src="/images/codelabs/custom-toolbox/category_gear.png"
118+
alt='A white gear above the word "Logic" on a blue background.'
119+
className="codelabImage"
120+
/>
121+
122+
<Image
123+
src="/images/codelabs/custom-toolbox/category_gear_selected.png"
124+
alt='A blue gear above the word "Logic" on a white background.'
125+
className="codelabImage"
126+
/>

‎packages/docs/docs/codelabs/custom-toolbox/adding-a-custom-toolbox-item.mdx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/adding-a-custom-toolbox-item/index.html
33
description: How to add a custom item to a toolbox.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing a Blockly toolbox
99

@@ -94,11 +94,11 @@ Next, we are going to return this element:
9494

9595
If you open the `index.html` file you should see a label above your first category.
9696

97-
<CodelabImage>
98-
{' '}
99-
![The toolbox with a label at the
100-
top.](../../../static/images/codelabs/custom-toolbox/toolbox_label.png){' '}
101-
</CodelabImage>
97+
<Image
98+
src="/images/codelabs/custom-toolbox/toolbox_label.png"
99+
alt="The toolbox with a label at the top."
100+
className="codelabImage"
101+
/>
102102

103103
### Add attributes to the toolbox definition
104104

@@ -135,11 +135,11 @@ All attributes on our toolbox definition get added to the `toolboxItemDef_`.
135135

136136
Open your `index.html` in a browser to see the updated label.
137137

138-
<CodelabImage>
139-
{' '}
140-
![The toolbox with a label that now says "Custom
141-
Toolbox".](../../../static/images/codelabs/custom-toolbox/custom_label.png){' '}
142-
</CodelabImage>
138+
<Image
139+
src="/images/codelabs/custom-toolbox/custom_label.png"
140+
alt='The toolbox with a label that now says "Custom Toolbox".'
141+
className="codelabImage"
142+
/>
143143

144144
### Add some CSS
145145

@@ -182,8 +182,8 @@ the below CSS to make the label bold.
182182
If you open `index.html` you should now see a bold dark gray label at the
183183
top of your toolbox.
184184

185-
<CodelabImage>
186-
{' '}
187-
![A toolbox with colored background and the blockly label above the category
188-
text.](../../../static/images/codelabs/custom-toolbox/final_toolbox.png){' '}
189-
</CodelabImage>
185+
<Image
186+
src="/images/codelabs/custom-toolbox/final_toolbox.png"
187+
alt="A toolbox with colored background and the blockly label above the category text."
188+
className="codelabImage"
189+
/>

‎packages/docs/docs/codelabs/custom-toolbox/change-the-category-HTML.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-category-HTML/index.html
33
description: How to change the HTML used by a category.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing a Blockly toolbox
99

@@ -38,8 +38,8 @@ createIconDom_() {
3838
If you open `index.html` you should now see the blockly logo on top of all your
3939
categories
4040

41-
<CodelabImage>
42-
{' '}
43-
![A toolbox with the blockly logo on top of the category
44-
label.](../../../static/images/codelabs/custom-toolbox/image_toolbox.png){' '}
45-
</CodelabImage>
41+
<Image
42+
src="/images/codelabs/custom-toolbox/image_toolbox.png"
43+
alt="A toolbox with the blockly logo on top of the category label."
44+
className="codelabImage"
45+
/>

‎packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-category.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-category/index.html
33
description: How to change the look of a category.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing a Blockly toolbox
99

@@ -49,11 +49,11 @@ For more information on Blockly styles please visit the [themes documentation](/
4949
Open `index.html` to see your updated toolbox. Your toolbox should look
5050
similar to the below toolbox.
5151

52-
<CodelabImage>
53-
{' '}
54-
![A toolbox with colors that expand the across the entire
55-
category.](../../../static/images/codelabs/custom-toolbox/colored_toolbox.png){' '}
56-
</CodelabImage>
52+
<Image
53+
src="/images/codelabs/custom-toolbox/colored_toolbox.png"
54+
alt="A toolbox with colors that expand the across the entire category."
55+
className="codelabImage"
56+
/>
5757

5858
We are going to add some CSS to make it easier to read, and to space out our categories.
5959

@@ -87,8 +87,8 @@ Copy and paste the following CSS into your `toolbox_style.css` file.
8787

8888
Open `index.html` to see your toolbox.
8989

90-
<CodelabImage>
91-
{' '}
92-
![Toolbox with category corners that are rounded and white
93-
text.](../../../static/images/codelabs/custom-toolbox/styled_toolbox.png){' '}
94-
</CodelabImage>
90+
<Image
91+
src="/images/codelabs/custom-toolbox/styled_toolbox.png"
92+
alt="Toolbox with category corners that are rounded and white text."
93+
className="codelabImage"
94+
/>

‎packages/docs/docs/codelabs/custom-toolbox/change-the-look-of-a-selected-category.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ slug: /codelabs/custom-toolbox/change-the-look-of-a-selected-category/index.html
33
description: How to change the look of a selected category.
44
---
55

6-
import CodelabImage from '@site/src/components/CodelabImage';
6+
import Image from '@site/src/components/Image';
77

88
# Customizing a Blockly toolbox
99

@@ -49,9 +49,8 @@ setSelected(isSelected){
4949
Open `index.html` and click on the "Logic" category. You should now see a white
5050
category with a colored label.
5151

52-
<CodelabImage>
53-
{' '}
54-
![A toolbox with all categories colored except for the first category that has
55-
a white
56-
background.](../../../static/images/codelabs/custom-toolbox/category_selected.png){' '}
57-
</CodelabImage>
52+
<Image
53+
src="/images/codelabs/custom-toolbox/category_selected.png"
54+
alt="A toolbox with all categories colored except for the first category that has a white background."
55+
className="codelabImage"
56+
/>

0 commit comments

Comments
 (0)