chore(docs): remove index.html path requirement for all Code Labs paths/URLs

2026-04-27 07:30:21 +02:00 · 2026-04-07 10:06:00 +01:00
parent 703991ec99
commit d44f955e27
80 changed files with 85 additions and 85 deletions
@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/add-a-context-menu-item/index.html
+slug: /codelabs/context-menu-option/add-a-context-menu-item
 description: How to add a context menu item to the registry.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/callback/index.html
+slug: /codelabs/context-menu-option/callback
 description: How to add a callback to a context menu item.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/context-menu-option/codelab-overview/index.html
+slug: /codelabs/context-menu-option/codelab-overview
 description: Overview of the "Customizing context menus" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/display-text/index.html
+slug: /codelabs/context-menu-option/display-text
 description: How to set the display text of a context menu item.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/precondition-blockly-state/index.html
+slug: /codelabs/context-menu-option/precondition-blockly-state
 description: How to include a context menu item based on Blockly's state.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/precondition-external-state/index.html
+slug: /codelabs/context-menu-option/precondition-external-state
 description: How to include a context menu item based on an external condition.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/precondition-node-type/index.html
+slug: /codelabs/context-menu-option/precondition-node-type
 description: How to include a context menu item based on the node type.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/separators/index.html
+slug: /codelabs/context-menu-option/separators
 description: How to add a separator to a context menu.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/setup/index.html
+slug: /codelabs/context-menu-option/setup
 description: Setting up the "Customizing context menus" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/context-menu-option/summary/index.html
+slug: /codelabs/context-menu-option/summary
 description: Summary of the "Customizing context menus" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/context-menu-option/weight-and-id/index.html
+slug: /codelabs/context-menu-option/weight-and-id
 description: How to set the weight and ID of a context menu item.
 ---

@@ -1,6 +1,6 @@
 ---
 title: Use CSS in Blockly - Blocks
-slug: /codelabs/css/blocks/index.html
+slug: /codelabs/css/blocks
 description: Styling blocks with CSS
 ---

@@ -8,7 +8,7 @@ description: Styling blocks with CSS

 ## 6. Blocks

-In this section, you will create CSS rules to assign the colours used by the [blocks section](/codelabs/theme-extension-identifier/customize-block-styles/index.html) of the themes codelab to the logic, loops, text, and lists blocks. This is a bit more complex than setting component or category colours and you'll do it in several steps.
+In this section, you will create CSS rules to assign the colours used by the [blocks section](/codelabs/theme-extension-identifier/customize-block-styles) of the themes codelab to the logic, loops, text, and lists blocks. This is a bit more complex than setting component or category colours and you'll do it in several steps.

 ### Block fill and stroke

@@ -1,6 +1,6 @@
 ---
 title: Use CSS in Blockly - Toolbox Categories
-slug: /codelabs/css/categories/index.html
+slug: /codelabs/css/categories
 description: Styling toolbox categories with CSS
 ---

@@ -8,7 +8,7 @@ description: Styling toolbox categories with CSS

 ## 5. Toolbox categories

-In this section, you will create CSS rules to assign the colours used by the [categories section](/codelabs/theme-extension-identifier/customize-category-styles/index.html) of the themes codelab to the toolbox's categories.
+In this section, you will create CSS rules to assign the colours used by the [categories section](/codelabs/theme-extension-identifier/customize-category-styles) of the themes codelab to the toolbox's categories.

 ### Identify the category element

@@ -1,7 +1,7 @@
 ---
 pagination_prev: null
 title: Use CSS in Blockly - Codelab Overview
-slug: /codelabs/css/codelab-overview/index.html
+slug: /codelabs/css/codelab-overview
 description: Overview of the CSS in Blockly codelab
 ---

@@ -19,12 +19,12 @@ In this codelab you will learn how to use CSS to customize the colours of:

 If you don't need the fine-grained control provided by CSS, consider using
 themes instead. For more information, see the
-[Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html)
+[Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview)
 codelab.

 ### What you'll build

-A simple Blockly workspace that uses the same Halloween colours as the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html) codelab.
+A simple Blockly workspace that uses the same Halloween colours as the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview) codelab.

 ### What you'll need

@@ -1,6 +1,6 @@
 ---
 title: Use CSS in Blockly - Components
-slug: /codelabs/css/components/index.html
+slug: /codelabs/css/components
 description: Styling Blockly components with CSS
 ---

@@ -8,7 +8,7 @@ description: Styling Blockly components with CSS

 ## 4. Components

-In this section, you will create CSS rules to assign the colours used by the [components section](/codelabs/theme-extension-identifier/customize-components/index.html) of the themes codelab to various components.
+In this section, you will create CSS rules to assign the colours used by the [components section](/codelabs/theme-extension-identifier/customize-components) of the themes codelab to various components.

 To start, create a file named `halloween.css` and add it to your `index.html` file:

@@ -1,6 +1,6 @@
 ---
 title: Use CSS in Blockly - Setup
-slug: /codelabs/css/setup/index.html
+slug: /codelabs/css/setup
 description: Setup for the CSS in Blockly codelab
 ---

@@ -1,7 +1,7 @@
 ---
 pagination_next: null
 title: Use CSS in Blockly - Summary
-slug: /codelabs/css/summary/index.html
+slug: /codelabs/css/summary
 description: Summary of the CSS in Blockly codelab
 ---

@@ -1,6 +1,6 @@
 ---
 title: Use CSS in Blockly - A tour of Blockly's elements
-slug: /codelabs/css/tour/index.html
+slug: /codelabs/css/tour
 description: Explore Blockly's HTML and SVG elements in the CSS codelab
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/array-block-generator/index.html
+slug: /codelabs/custom-generator/array-block-generator
 description: How to write a block code generator that creates an array.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/block-generator-overview/index.html
+slug: /codelabs/custom-generator/block-generator-overview
 description: Introduction to block generators.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/custom-generator/codelab-overview/index.html
+slug: /codelabs/custom-generator/codelab-overview
 description: Overview of the "Build a custom generator" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/generating-a-stack/index.html
+slug: /codelabs/custom-generator/generating-a-stack
 description: How to generate code for the blocks in a stack.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/member-block-generator/index.html
+slug: /codelabs/custom-generator/member-block-generator
 description: How to write a block code generator using field and input values.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/object-block-generator/index.html
+slug: /codelabs/custom-generator/object-block-generator
 description: How to write a block code generator that creates an object.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/setup/index.html
+slug: /codelabs/custom-generator/setup
 description: Setting up the "Build a custom generator" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/custom-generator/summary/index.html
+slug: /codelabs/custom-generator/summary
 description: Summary of the "Build a custom generator" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/the-basics/index.html
+slug: /codelabs/custom-generator/the-basics
 description: How to define and call a language generator.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-generator/value-block-generators/index.html
+slug: /codelabs/custom-generator/value-block-generators
 description: How to write a block code generator for a simple value block.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/change-connection-shapes/index.html
+slug: /codelabs/custom-renderer/change-connection-shapes
 description: How to change connection shapes.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/custom-renderer/codelab-overview/index.html
+slug: /codelabs/custom-renderer/codelab-overview
 description: Overview of the "Build custom renderers" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/define-and-register-a-custom-renderer/index.html
+slug: /codelabs/custom-renderer/define-and-register-a-custom-renderer
 description: How to register a custom renderer.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/observe-the-built-in-renderers/index.html
+slug: /codelabs/custom-renderer/observe-the-built-in-renderers
 description: Introduction to the built-in renderers.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/override-constants/index.html
+slug: /codelabs/custom-renderer/override-constants
 description: How to override the constants in a renderer.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/setup/index.html
+slug: /codelabs/custom-renderer/setup
 description: Setting up the "Build custom renderers" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/custom-renderer/summary/index.html
+slug: /codelabs/custom-renderer/summary
 description: Summary of the "Build custom renderers" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/typed-connection-shapes/index.html
+slug: /codelabs/custom-renderer/typed-connection-shapes
 description: How to set connection shapes based on connection types.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-renderer/understand-connection-shapes/index.html
+slug: /codelabs/custom-renderer/understand-connection-shapes
 description: Introduction to connection shapes.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/add-an-icon-to-your-category/index.html
+slug: /codelabs/custom-toolbox/add-an-icon-to-your-category
 description: How to add an icon to your category.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/adding-a-custom-toolbox-item/index.html
+slug: /codelabs/custom-toolbox/adding-a-custom-toolbox-item
 description: How to add a custom item to a toolbox.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/change-the-category-HTML/index.html
+slug: /codelabs/custom-toolbox/change-the-category-HTML
 description: How to change the HTML used by a category.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/change-the-look-of-a-category/index.html
+slug: /codelabs/custom-toolbox/change-the-look-of-a-category
 description: How to change the look of a category.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/change-the-look-of-a-selected-category/index.html
+slug: /codelabs/custom-toolbox/change-the-look-of-a-selected-category
 description: How to change the look of a selected category.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/custom-toolbox/codelab-overview/index.html
+slug: /codelabs/custom-toolbox/codelab-overview
 description: Overview of the "Customizing a Blockly toolbox" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/custom-toolbox/setup/index.html
+slug: /codelabs/custom-toolbox/setup
 description: Setting up the "Customizing a Blockly toolbox" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/custom-toolbox/summary/index.html
+slug: /codelabs/custom-toolbox/summary
 description: Summary of the "Customizing a Blockly toolbox" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/add-blockly-libraries/index.html
+slug: /codelabs/getting-started/add-blockly-libraries
 description: How to add Blockly libraries to an app.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/getting-started/codelab-overview/index.html
+slug: /codelabs/getting-started/codelab-overview
 description: Overview of the "Getting started with Blockly" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/create-a-blockly-workspace/index.html
+slug: /codelabs/getting-started/create-a-blockly-workspace
 description: How to add a workspace to your app.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/create-a-custom-block/index.html
+slug: /codelabs/getting-started/create-a-custom-block
 description: How to create a custom block.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/explore-the-app/index.html
+slug: /codelabs/getting-started/explore-the-app
 description: Explore Blockly's getting started app.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/generate-javaScript-code/index.html
+slug: /codelabs/getting-started/generate-javaScript-code
 description: How to generate JavaScript code.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/run-generated-code/index.html
+slug: /codelabs/getting-started/run-generated-code
 description: How to run generated code.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/save-load-workspace/index.html
+slug: /codelabs/getting-started/save-load-workspace
 description: How to save and load your workspace.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/getting-started/setup/index.html
+slug: /codelabs/getting-started/setup
 description: Setting up the "Getting started with Blockly" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/getting-started/the-end/index.html
+slug: /codelabs/getting-started/the-end
 description: Summary of the "Getting started with Blockly" codelab.
 ---

@@ -2,7 +2,7 @@
 title: Welcome to the Blockly Codelabs
 pagination_next: null
 pagination_prev: null
-slug: /codelabs/index
+slug: /codelabs
 ---

 import { CodelabGrid, CodelabCard } from '@site/src/components/CodelabCards';
@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/theme-extension-identifier/codelab-overview/index.html
+slug: /codelabs/theme-extension-identifier/codelab-overview
 description: Overview of the "Customizing your themes" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/theme-extension-identifier/customize-block-styles/index.html
+slug: /codelabs/theme-extension-identifier/customize-block-styles
 description: How to use a theme to set the colours of blocks.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/theme-extension-identifier/customize-category-styles/index.html
+slug: /codelabs/theme-extension-identifier/customize-category-styles
 description: How to use a theme to set the colours of categories.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/theme-extension-identifier/customize-components/index.html
+slug: /codelabs/theme-extension-identifier/customize-components
 description: How to use a theme to set the colours of components.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/theme-extension-identifier/setup/index.html
+slug: /codelabs/theme-extension-identifier/setup
 description: Setting up the "Customizing your themes" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/theme-extension-identifier/summary/index.html
+slug: /codelabs/theme-extension-identifier/summary
 description: Summary of the "Customizing your themes" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/theme-extension-identifier/workspace-theme/index.html
+slug: /codelabs/theme-extension-identifier/workspace-theme
 description: How to create a theme.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_prev: null
-slug: /codelabs/validation-and-warnings/codelab-overview/index.html
+slug: /codelabs/validation-and-warnings/codelab-overview
 description: Overview of the "Block validation and warnings" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/validation-and-warnings/displaying-warnings/index.html
+slug: /codelabs/validation-and-warnings/displaying-warnings
 description: How to display a warning when a block fails validation.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/validation-and-warnings/setup/index.html
+slug: /codelabs/validation-and-warnings/setup
 description: Setting up the "Block validation and warnings" codelab.
 ---

@@ -1,6 +1,6 @@
 ---
 pagination_next: null
-slug: /codelabs/validation-and-warnings/summary/index.html
+slug: /codelabs/validation-and-warnings/summary
 description: Summary of the "Block validation and warnings" codelab.
 ---

@@ -1,5 +1,5 @@
 ---
-slug: /codelabs/validation-and-warnings/validating-blocks/index.html
+slug: /codelabs/validation-and-warnings/validating-blocks
 description: How to validate the fields in a block.
 ---

@@ -17,7 +17,7 @@ You can use CSS to style your application:
 - Add your own CSS classes to Blockly components for additional specificity.
 - Use CSS classes and rules to style custom components.

-For a practical introduction to using CSS in blockly, see the [Use CSS in Blockly](/codelabs/css/codelab-overview/index.html)
+For a practical introduction to using CSS in blockly, see the [Use CSS in Blockly](/codelabs/css/codelab-overview)

 :::note
 The easiest way to style Blockly is with [themes](/guides/configure/web/appearance/themes). If you need finer-grained control, use CSS.
@@ -17,7 +17,7 @@ as a class on the injection `div`. This allows users to change the look of any
 unsupported components through CSS. Our main goal in creating themes is to
 empower developers to create Blockly experiences that are more accessible.

-For a practical introduction to using themes, see the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview/index.html)
+For a practical introduction to using themes, see the [Customizing your themes](/codelabs/theme-extension-identifier/codelab-overview)

 :::note
 The easiest way to style Blockly is with themes. If you need finer-grained control, use [CSS](/guides/configure/web/appearance/css).
@@ -334,7 +334,7 @@ Blockly.ContextMenuRegistry.registry.register(collapseTemplate);

 :::note
 Check out the [context menu
-codelab](/codelabs/context-menu-option/codelab-overview/index.html)
+codelab](/codelabs/context-menu-option/codelab-overview)
 for worked examples of adding context menu items.
 :::

@@ -12,7 +12,7 @@ import TabItem from '@theme/TabItem';
 Blockly provides a default categories UI, and with it some basic options for
 styling. If you want information about how to do more advanced
 styling/configuration of the UI check out the [Customizing a Blockly toolbox
-codelab](/codelabs/custom-toolbox/codelab-overview/index.html)
+codelab](/codelabs/custom-toolbox/codelab-overview)
 and the [2021 Toolbox APIs
 talk](https://www.youtube.com/watch?v=JJVX_YuKDbo&list=PLSIUOFhnxEiCjoIwJ0jAdwpTZET73CK7d&index=9&t=1s).

@@ -23,6 +23,6 @@ This section mainly focuses on how to specify the _structure_ of your toolbox
 details about how to change the _appearance_ of your toolbox, see [Category
 appearance](/guides/configure/web/toolboxes/appearance), the
 [Customizing a Blockly toolbox
-codelab](/codelabs/custom-toolbox/codelab-overview/index.html),
+codelab](/codelabs/custom-toolbox/codelab-overview),
 and the [2021 Toolbox APIs
 talk](https://www.youtube.com/watch?v=JJVX_YuKDbo&list=PLSIUOFhnxEiCjoIwJ0jAdwpTZET73CK7d&index=9&t=1s).
@@ -9,7 +9,7 @@ image: images/blockly_banner.png
 ## Introduction

 Codelabs are interactive tutorials written in Markdown syntax. They are
-published as [part of our documentation](/codelabs/index). Codelabs use
+published as [part of our documentation](/codelabs). Codelabs use
 a mix of natural language, code samples, and screenshots to create a more
 interesting tutorial experience. The target user of a codelab is following along
 and running the code as they read.
@@ -82,5 +82,5 @@ of Blockly.
 For more information, see [Generate and run
 code](/guides/app-integration/run-code).

-[custom-code-generator]: /codelabs/custom-generator/codelab-overview/index.html
+[custom-code-generator]: /codelabs/custom-generator/codelab-overview
 [js-code-generator]: https://github.com/RaspberryPiFoundation/blockly/blob/main/generators/javascript/javascript_generator.ts
@@ -101,4 +101,4 @@ const workspace = Blockly.inject(blocklyDiv, {
 [makePathObject]: /reference/blockly.blockrendering_namespace.renderer_class.makepathobject_1_method
 [makeDrawer]: /reference/blockly.blockrendering_namespace.renderer_class.makedrawer__1_method
 [inject-config]: /guides/configure/web/configuration_struct
-[custom-renderer-codelab]: /codelabs/custom-renderer/codelab-overview/index.html
+[custom-renderer-codelab]: /codelabs/custom-renderer/codelab-overview
@@ -43,7 +43,7 @@ Blockly team recommends you:

 [block-definition]: /guides/create-custom-blocks/define/block-definitions
 [concept]: /guides/create-custom-blocks/renderers/concepts/overview
-[custom-renderer-codelab]: /codelabs/custom-renderer/codelab-overview/index.html
+[custom-renderer-codelab]: /codelabs/custom-renderer/codelab-overview
 [debug-renderer]: https://www.npmjs.com/package/@blockly/dev-tools#debug-renderer
 [thrasos]: /images/rendering/renderers/thrasos.png
 [geras]: /images/rendering/renderers/geras.png
@@ -176,7 +176,7 @@ considerations](/guides/design/applications).

 If you want to see what it's like to build a simple application, try the
 [Getting started with Blockly
-codelab](/codelabs/getting-started/codelab-overview/index.html).
+codelab](/codelabs/getting-started/codelab-overview).

 And if you're ready to write your application:

@@ -121,7 +121,7 @@ Some developers like to add a 'hat' to the top of event blocks so that they look
 distinct from other blocks. This is not the default look for Blockly, but it may
 be added by either overriding the renderer constant `ADD_START_HATS` to `true`
 ([Custom renderers codelab - Override
-constants](/codelabs/custom-renderer/override-constants/index.html)).
+constants](/codelabs/custom-renderer/override-constants)).
 or by adding a theme and setting the hat option on the block style. For more
 information for setting hats on blocks as part of themes, see [Block
 style](/guides/configure/web/appearance/themes/#block-style) in the themes
@@ -192,7 +192,7 @@ const config = {
            items: [
              {
                label: 'Codelabs',
-                to: '/codelabs/index',
+                to: '/codelabs',
              },
              {
                label: 'Samples and Demos',