diff --git a/packages/docs/docs/guides/app-integration/attribution.md b/packages/docs/docs/guides/app-integration/attribution.md
deleted file mode 100644
index 242bd28aa..000000000
--- a/packages/docs/docs/guides/app-integration/attribution.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-description: How to properly attribute Blockly.
-title: Attribute Blockly
-image: images/blockly_banner.png
----
-
-
-
-
-
-# Attribute Blockly
-
-Blockly's code is open source and free to use without attribution.
-
-However, we do encourage developers who are using Blockly to reference the
-product in their website, app, or product. This page describes the best
-practices for referring to Blockly and attributing it as well as appropriate
-uses of the logo.
-
-Download all assets
-
-## How to refer to Blockly
-
-### Describing and attributing Blockly in text
-
-Upon first reference in a paragraph, use the primary one-line description:
-
-> Blockly is an open-source developer library from the Raspberry Pi Foundation, originally developed at Google.
-It creates a visual programming interface that uses drag-and-drop blocks.
-
-When referring to Blockly in the context of another app which uses Blockly
-you should use the phrase "Built with Blockly".
-
-When giving Blockly attribution, this phrase should be used for blog posts,
-press interviews, the app, and on your website.
-
-### Reference do's and don'ts
-
-
Do — Call Blockly "beginner friendly"
- instead of "kid friendly." Blockly is used for a variety of applications, not
- all of which are kid focused.
-
-
Don't — Refer to Blockly as a language
- (for example, as a "block-based programming language"). Blockly is not a
- language, it's a library that developers use to make a block-based visual programming interface.
-
-## How to visually represent Blockly
-
-### Attributing Blockly with a logo
-
-To give Blockly attribution in your app or website, please use one of the
-following logos, depending on background color:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
For light backgrounds with overlapping shapes or varied patterns, and for solid dark backgrounds (no shapes or patterns) with high contrast.
-
For dark backgrounds with overlapping shapes or varied patterns.
-
-Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](https://www.blockly.com)
-
-### Badge sizing and spacing
-
-
-
-
To ensure legibility, badges should not be used with a height smaller than 24px.
-
For lockups, provide at least x-height and width x1 white space around the
- logo. Never crowd or overlap the logo with other elements.
-
-
-
-
-
-
-
-### Other uses of the Blockly logo
-
-Do not use the Blockly mark or any variant of the Blockly mark in conjunction
-with the overall name of your application, product, service, or website without
-permission from the Blockly team (please email support@blockly.com to
-request permission). Do not alter or use the Blockly mark in a way that may be
-confusing or misleading, and never use Blockly branding as the most prominent
-element on your page.
-
-
-
-
-
-
-
-
Standard lockup
-
The standard lockup can be used in slide decks and blog posts.
-
- Whenever possible, the logo should be represented as a horizontal lockup
- with a full color logomark and neutral 700 (#5F6368) or solid white
- logotype.
-
When there is limited horizontal space, a vertical lockup can be used
- with the full color logomark and neutral 700 (#5F6368) or solid white
- logotype.
-
-
When there is limited vertical and horizontal space, the logomark can
- be used by itself without the logotype.
-
-
When the color of the logomark has poor contrast with the background,
- a solid white knockout version can be used.
-
To ensure legibility, the logo should not be used with a height
- smaller than 24px.
-
For lockups, provide at least x-height x2 white space around the
- logo. Never crowd or overlap the logo with other elements.
-
Common errors
- Do not...
-
-
Alter or distort the logo in any way
-
Use the white knockout in any color but white
-
Alter color, shape, or angles
-
Rotate or flip in any direction
-
Alter proportions, positioning, or placement
-
Replace the logotype with a different typeface
-
Use the old Blockly logo (existing uses should be updated when convenient)
-
Use the logo on a poorly contrasting background (e.g. the knockout logo on a light gray background)
-
Overlap or crowd the logo with other elements
-
Redraw the logo
-
-
-
-
-
-
diff --git a/packages/docs/docs/guides/app-integration/attribution.mdx b/packages/docs/docs/guides/app-integration/attribution.mdx
new file mode 100644
index 000000000..22d52504f
--- /dev/null
+++ b/packages/docs/docs/guides/app-integration/attribution.mdx
@@ -0,0 +1,216 @@
+---
+description: How to properly attribute Blockly.
+title: Attribute Blockly
+image: images/blockly_banner.png
+---
+
+import Image from '@site/src/components/Image';
+
+
+
+
+
+# Attribute Blockly
+
+Blockly's code is open source and free to use without attribution.
+
+However, we do encourage developers who are using Blockly to reference the
+product in their website, app, or product. This page describes the best
+practices for referring to Blockly and attributing it as well as appropriate
+uses of the logo.
+
+Download all assets
+
+## How to refer to Blockly
+
+### Describing and attributing Blockly in text
+
+Upon first reference in a paragraph, use the primary one-line description:
+
+> Blockly is an open-source developer library from the Raspberry Pi Foundation, originally developed at Google.
+It creates a visual programming interface that uses drag-and-drop blocks.
+
+When referring to Blockly in the context of another app which uses Blockly
+you should use the phrase "Built with Blockly".
+
+When giving Blockly attribution, this phrase should be used for blog posts,
+press interviews, the app, and on your website.
+
+### Reference do's and don'ts
+
+
Do — Call Blockly "beginner friendly"
+ instead of "kid friendly." Blockly is used for a variety of applications, not
+ all of which are kid focused.
+
+
Don't — Refer to Blockly as a language
+ (for example, as a "block-based programming language"). Blockly is not a
+ language, it's a library that developers use to make a block-based visual programming interface.
+
+## How to visually represent Blockly
+
+### Attributing Blockly with a logo
+
+To give Blockly attribution in your app or website, please use one of the
+following logos, depending on background color:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
For light backgrounds with overlapping shapes or varied patterns, and for solid dark backgrounds (no shapes or patterns) with high contrast.
+
For dark backgrounds with overlapping shapes or varied patterns.
+
+Please hyperlink the badge to Blockly's home page: [https://www.blockly.com](https://www.blockly.com)
+
+### Badge sizing and spacing
+
+
+
+
To ensure legibility, badges should not be used with a height smaller than 24px.
+
For lockups, provide at least x-height and width x1 white space around the
+ logo. Never crowd or overlap the logo with other elements.
+
+
+
+
+
+
+
+### Other uses of the Blockly logo
+
+Do not use the Blockly mark or any variant of the Blockly mark in conjunction
+with the overall name of your application, product, service, or website without
+permission from the Blockly team (please email support@blockly.com to
+request permission). Do not alter or use the Blockly mark in a way that may be
+confusing or misleading, and never use Blockly branding as the most prominent
+element on your page.
+
+
+
+
+
+
+
+
Standard lockup
+
The standard lockup can be used in slide decks and blog posts.
+
Whenever possible, the logo should be represented as a horizontal lockup with a full color logomark and neutral 700 (#5F6368) or solid white logotype.
To ensure legibility, the logo should not be used with a height
+ smaller than 24px.
+
For lockups, provide at least x-height x2 white space around the
+ logo. Never crowd or overlap the logo with other elements.
+
Common errors
+ Do not...
+
+
Alter or distort the logo in any way
+
Use the white knockout in any color but white
+
Alter color, shape, or angles
+
Rotate or flip in any direction
+
Alter proportions, positioning, or placement
+
Replace the logotype with a different typeface
+
Use the old Blockly logo (existing uses should be updated when convenient)
+
Use the logo on a poorly contrasting background (e.g. the knockout logo on a light gray background)
+
Overlap or crowd the logo with other elements
+
Redraw the logo
+
+
+
+
+
+
diff --git a/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx b/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
index cdc98ecb8..4cda3a848 100644
--- a/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
+++ b/packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx
@@ -111,10 +111,6 @@ rendering](/guides/create-custom-blocks/renderers/overview).
| Value input | Input connection | |
| Statement input | Next connection | |
-[dummy-img]: /images/connections/dummy-input.png
-[value-img]: /images/connections/input-connection.png
-[statement-img]: /images/connections/statement-input.png
-
We will introduce these inputs through a series of examples. For information
about defining the inputs, connections, and fields that make up a block, see
[Block structure in
diff --git a/packages/docs/docs/guides/get-started/workspace-anatomy.mdx b/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
index d25c73e16..d600173f0 100644
--- a/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
+++ b/packages/docs/docs/guides/get-started/workspace-anatomy.mdx
@@ -8,29 +8,9 @@ import Image from '@site/src/components/Image';
import ClassBlock from '@site/src/components/ClassBlock';
[workspace]: /guides/configure/web/configuration_struct
-[workspace-img]: /images/glossary/workspace.png
-[output-img]: /images/connections/output-connection.png
-[input-img]: /images/connections/input-connection.png
-[inputs-img]: /images/glossary/inputs.png
-[previous-img]: /images/connections/previous-connection.png
-[next-img]: /images/connections/next-connection.png
[category-toolbox]: /guides/configure/web/toolboxes/category
-[category-toolbox-img]: /images/glossary/category-toolbox.png
-[category-with-flyout-toolbox-img]: /images/glossary/category-with-flyout-toolbox.png
[flyout-toolbox]: /guides/configure/web/toolboxes/flyout
-[flyout-toolbox-img]: /images/glossary/flyout-toolbox.png
-[trashcan-img]: /images/glossary/trashcan.png
-[zoom-controls-img]: /images/glossary/zoom-controls.png
-[context-menu-img]: /images/glossary/context-menu.png
-[blocks-img]: /images/glossary/blocks.png
-[block-stack-img]: /images/glossary/block-stack.png
[shadow-block]: /guides/configure/web/toolboxes/preset#shadow-blocks
-[shadow-blocks-img]: /images/glossary/shadow-blocks.png
-[insertion-marker-img]: /images/glossary/insertion-marker.png
-[statement-img]: /images/connections/statement-input.png
-[fields-img]: /images/glossary/fields.png
-[icons-img]: /images/glossary/icons.png
-[bubbles-img]: /images/bubbles/bubbles.png
[toolbox]: /guides/configure/web/toolboxes/toolbox
[zoom-controls]: /guides/configure/web/zoom
[context-menu]: /guides/configure/web/context-menus
@@ -40,7 +20,6 @@ import ClassBlock from '@site/src/components/ClassBlock';
[field]: /guides/create-custom-blocks/define/block-anatomy#fields
[icon]: /guides/create-custom-blocks/define/block-anatomy#icons
-
# Visual glossary
Blockly has a lot of vocabulary for its different visual components. This
@@ -79,9 +58,7 @@ which is displayed at all times.
If you click a category item it opens a flyout that displays the blocks in the
category.
-![The same workspace and category toolbox as in the previous image, except that
-the Logic category is open, showing seven logic blocks (if-do, comparison,
-and-or, etc.).][category-with-flyout-toolbox-img]
+
### Trashcan
@@ -89,14 +66,14 @@ The trashcan lets you delete blocks by dragging and dropping them. You can also
click the trashcan to open a flyout containing the blocks you've deleted so you
can get them back.
-![A workspace with a trashcan in the lower right corner.][trashcan-img]
+
### Zoom controls
The [zoom controls][zoom-controls] zoom the workspace in and out when you click
them.
-![A workspace with zoom controls above the trashcan.][zoom-controls-img]
+
### Context menu
@@ -104,25 +81,21 @@ The [context menu][context-menu] appears when you right-click or long-press on
certain elements of the workspace (for example, the workspace background, or
blocks). It displays a list of actions you can perform on that element.
-![A context menu is open over an if-do block. The menu has the items,
-"Duplicate", "Add Comments", "Inline Inputs", "Collapse Block", "Disable Block",
-"Delete Block", and "Help".][context-menu-img]
+
## Blocks
[Blocks][block] are what you use to program. They represent expressions and
statements in text-based programming languages.
-![An if-do block, a number block, and a block for creating a list.][blocks-img]
+
### Block stack
A block stack is any collection of connected blocks. They could be connected
horizontally or vertically.
-![An if-do block with two blocks connected to it. A numeric comparison block is
-connected to the if input and a repeat block is connected to the do
-input.][block-stack-img]
+
### Shadow block
@@ -137,8 +110,7 @@ overwrite them.
An insertion marker is a preview of where a stack of blocks will be connected if
it is dropped. It looks like a grey version of a block.
-![An if-do block with a marker showing where another block will be
-inserted.][insertion-marker-img]
+
## Block parts
@@ -151,8 +123,7 @@ A [field][field] is a visual element that lives on a block. It could be editable
(like a text input), or only informational (like a label). A field is always
contained by an [input](#inputs).
-![A block with three fields: the label "repeat", a dropdown with the "while"
-option chosen, and the label "do".][fields-img]
+
### Connections
@@ -187,11 +158,9 @@ connection.
An [icon][icon] is a visual element that lives on a block. They always live
in the top-start corner of the block, and they often create bubbles.
-![An if-do block with a mutator icon and a comment icons.][icons-img]
+
-![The same block with the mutator and comment bubbles open. The mutator bubble
-lets you add else clauses to the block and the comment bubble lets you enter a
-comment about the block.][bubbles-img]
+
diff --git a/packages/docs/src/components/Image.js b/packages/docs/src/components/Image.js
index 57d06004d..e5a803c06 100644
--- a/packages/docs/src/components/Image.js
+++ b/packages/docs/src/components/Image.js
@@ -1,5 +1,6 @@
import React from 'react';
import {useColorMode} from '@docusaurus/theme-common';
+import useBaseUrl from '@docusaurus/useBaseUrl';
/**
* Image component for use in MDX docs
@@ -20,6 +21,9 @@ export default function Image({ src, srcDark, alt, width, height, className, sty
// Select image source based on current theme
const imageSrc = colorMode === 'dark' && srcDark ? srcDark : src;
+ // Prepend baseUrl to the image path
+ const resolvedSrc = useBaseUrl(imageSrc);
+
const imgStyle = {
maxWidth: '100%',
height: 'auto',
@@ -35,7 +39,7 @@ export default function Image({ src, srcDark, alt, width, height, className, sty
return (
- 
- 
- 
- 
- 
- 
- 
- 
-