Skip to content

Commit ec19340

Browse files
gregagrega
committed
chore(docs): remove TableHeader component, simplify tables in Markdown
Component was superfluous, we can achieve the same with regular Markdown table syntax and a very small amount of CSS
1 parent 8839c16 commit ec19340

13 files changed

Lines changed: 27 additions & 46 deletions

File tree

‎packages/docs/docs/guides/configure/web/configuration_struct.mdx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ description: Simple configuration options that Blockly surfaces during injection
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Create a workspace
108

119
You can create a workspace and inject it into the DOM in a single call, or
@@ -42,7 +40,7 @@ The configuration object implements
4240
and has the following options. Note that several of these options change their
4341
default value based on whether the provided toolbox has categories or not.
4442

45-
| <TableHeader> Name </TableHeader> | <TableHeader> Type </TableHeader> | <TableHeader> Description </TableHeader> |
43+
| Name | Type | Description |
4644
|-----------------------|-----------|-------------------------------------------------------------|
4745
| `collapse` | boolean | Whether block context menus include an item to collapse or expand blocks. Defaults to `true` if the toolbox has categories, `false` otherwise.
4846
| `comments` | boolean | Whether block context menus include an item to add or remove comments. Defaults to `true` if the toolbox has categories,`false` otherwise.

‎packages/docs/docs/guides/configure/web/context-menus.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ image: images/blockly_banner.png
55
---
66

77
import Image from '@site/src/components/Image';
8-
import TableHeader from '@site/src/components/TableHeader';
98

109
# Context menus
1110

@@ -130,7 +129,7 @@ should be displayed.
130129
It should return one of a set of strings: `'enabled'`, `'disabled'`, or
131130
`'hidden'`.
132131

133-
| <TableHeader> Value </TableHeader>| <TableHeader> Description </TableHeader>| <TableHeader> Image </TableHeader>|
132+
| Value | Description | Image |
134133
| ------------ | ---------------------------------- | --------------------------------------------------- |
135134
| `'enabled'` | Shows that the item is active. | <Image alt="An enabled option" src="/images/context-menus/enabled-option.png" width={150} /> |
136135
| `'disabled'` | Shows that the item is not active. | <Image alt="A disabled option" src="/images/context-menus/disabled-option.png" width={150} /> |

‎packages/docs/docs/guides/configure/web/customization.mdx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: Advanced customization
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Advanced customization
108

119
Blockly lets you customize certain functionality by replacing the corresponding
@@ -15,7 +13,7 @@ Blockly classes.
1513

1614
The following Blockly classes can be replaced:
1715

18-
| <TableHeader> Blockly class </TableHeader>| <TableHeader> Interface </TableHeader>| <TableHeader> Registry type name </TableHeader>|
16+
| Blockly class | Interface | Registry type name |
1917
| ------------------------------------ | -------------------------------- | -------------------------- |
2018
| [`Blockly.dragging.Dragger`] | [`Blockly.IDragger`] | `blockDragger` |
2119
| [`Blockly.ConnectionChecker`] | [`Blockly.IConnectionChecker`] | `connectionChecker` |

‎packages/docs/docs/guides/configure/web/toolboxes/appearance.mdx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ image: images/blockly_banner.png
66

77
import Tabs from '@theme/Tabs';
88
import TabItem from '@theme/TabItem';
9-
import TableHeader from '@site/src/components/TableHeader';
109

1110
# Category appearance
1211

@@ -49,7 +48,7 @@ The following table lists the types, descriptions, and default CSS classes of
4948
each part of a category toolbox. If you're having trouble visualizing this, open
5049
the developer tools in your browser and inspect the toolbox.
5150

52-
| <TableHeader> Part type </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
51+
| Part type | Description | Default CSS class |
5352
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
5453
| contents | The `div` that contains all categories. | `blocklyToolboxCategoryGroup` |
5554
| container | The `div` that contains a single category and its subcategories. | `blocklyToolboxCategoryContainer` |
@@ -60,7 +59,7 @@ the developer tools in your browser and inspect the toolbox.
6059

6160
CSS is also used to label the state of some parts of the toolbox.
6261

63-
| <TableHeader> State </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Default CSS class </TableHeader> |
62+
| State | Description | Default CSS class |
6463
| ------------------- | ------------------------------------------------------------------------ | ---------------------------------- |
6564
| selected | Added to the "row" `div` when the category is selected. | `blocklyToolboxSelected` |
6665
| openicon | Added to the "icon" `span` when a category with subcategories is open. | `blocklyToolboxCategoryIconOpen` |

‎packages/docs/docs/guides/contribute/samples/naming.mdx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: Plugin naming conventions
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Plugin naming conventions
108

119
## Overview
@@ -30,7 +28,7 @@ field](/guides/create-custom-blocks/fields/customizing-fields/overview).
3028
Loading a field plugin registers a new field type that can be used in all
3129
Blockly workspaces on the page.
3230

33-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
31+
| First Party | Third Party | Example | Suggested tags |
3432
| ------------------ | ----------------- | ------------------------- | ------------------------- |
3533
| `@blockly/field-*` | `blockly-field-*` | [`@blockly/field-slider`] | `blockly-plugin`, `field` |
3634

@@ -44,7 +42,7 @@ A theme plugin publishes a single Blockly
4442
Loading a theme plugin defines a new theme that can then be used in all Blockly
4543
workspaces on the page.
4644

47-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
45+
| First Party | Third Party | Example | Suggested tags |
4846
| ------------------ | ----------------- | ------------------------- | ------------------------- |
4947
| `@blockly/theme-*` | `blockly-theme-*` | [`@blockly/theme-modern`] | `blockly-plugin`, `theme` |
5048

@@ -58,7 +56,7 @@ definitions](/guides/create-custom-blocks/overview).
5856
Loading a block plugin defines those blocks for all Blockly workspaces on the
5957
page.
6058

61-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
59+
| First Party | Third Party | Example | Suggested tags |
6260
| --------------------- | -------------------- | ------------------------------ | ----------------------------------- |
6361
| `@blockly/block(s)-*` | `blockly-block(s)-*` | [`@blockly/blocks-plus-minus`] | `blockly-plugin`, `block`, `blocks` |
6462

@@ -73,7 +71,7 @@ be used to programmatically share behaviour between blocks.
7371
Loading a block extension plugin registers the extensions for use on all Blockly
7472
workspaces on the page.
7573

76-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
74+
| First Party | Third Party | Example | Suggested tags |
7775
| ---------------------- | --------------------- | -------- | ---------------------------------- |
7876
| `@blockly/extension-*` | `blockly-extension-*` | None yet | `blockly-plugin`,`block-extension` |
7977

@@ -84,7 +82,7 @@ A workspace plugin adds behaviour to a single workspace.
8482
Loading a workspace plugin does nothing until it is initialized on a Blockly
8583
workspace.
8684

87-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
85+
| First Party | Third Party | Example | Suggested tags |
8886
| ---------------------- | --------------------- | -------- | ---------------------------- |
8987
| `@blockly/workspace-*` | `blockly-workspace-*` | None yet | `blockly-plugin`,`workspace` |
9088

@@ -93,7 +91,7 @@ workspace.
9391
This is the most general plugin type. Use this naming convention if your plugin
9492
doesn't meet the requirements of any other plugin type.
9593

96-
| <TableHeader> First Party </TableHeader> | <TableHeader> Third Party </TableHeader> | <TableHeader> Example </TableHeader> | <TableHeader> Suggested tags </TableHeader> |
94+
| First Party | Third Party | Example | Suggested tags |
9795
| ------------------- | ------------------ | ------------------------- | ---------------- |
9896
| `@blockly/plugin-*` | `blockly-plugin-*` | [`@blockly/plugin-modal`] | `blockly-plugin` |
9997

‎packages/docs/docs/guides/create-custom-blocks/define/block-anatomy.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ image: images/blockly_banner.png
55
---
66

77
import Image from '@site/src/components/Image';
8-
import TableHeader from '@site/src/components/TableHeader';
98

109
# Anatomy of a block
1110

@@ -24,7 +23,7 @@ when you connect two blocks, you fit their connections together.
2423

2524
There are four types of connections:
2625

27-
| <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
26+
| Connection type | Image |
2827
|---------------------|--------------------------------------------------|
2928
| Output connection | <Image alt="an output connection" src="/images/connections/output-connection.png" width={40} /> |
3029
| Input connection | <Image alt="an input connection" src="/images/connections/input-connection.png" srcDark="/images/connections/input-connection-dark.png" width={45} /> |
@@ -104,7 +103,7 @@ inputs](/guides/create-custom-blocks/inputs/creating-custom-inputs),
104103
which support [custom
105104
rendering](/guides/create-custom-blocks/renderers/overview).
106105

107-
| <TableHeader> Input type </TableHeader> | <TableHeader> Connection type </TableHeader> | <TableHeader> Image </TableHeader> |
106+
| Input type | Connection type | Image |
108107
|------------------|------------------|-------------------------------------------------|
109108
| Dummy input | None | <Image alt="dummy input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
110109
| End-of-row input | None | <Image alt="end-of-row input" src="/images/connections/dummy-input.png" srcDark="/images/connections/dummy-input-dark.png" width={40} /> |
@@ -216,7 +215,7 @@ For more information, see
216215

217216
Blocks, inputs, connections, fields, and icons are all JavaScript objects.
218217

219-
| <TableHeader> Blockly component </TableHeader> | <TableHeader> Base class </TableHeader> | <TableHeader> Subclasses </TableHeader> |
218+
| Blockly component | Base class | Subclasses |
220219
| ------------------|--------------|----------------------|
221220
| Block | `Block` | `BlockSvg` |
222221
| Input | `Input` | `DummyInput` |

‎packages/docs/docs/guides/create-custom-blocks/fields/anatomy-of-a-field.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: Anatomy of a field
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Anatomy of a field
108

119
## Value
@@ -89,7 +87,7 @@ complex, depending on its needs.
8987
These are some examples of different on-block displays, in order of increasing
9088
complexity.
9189

92-
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
90+
| Field type | Description |
9391
| --------------- | ----------------------------------------------------------------------------------------------------- |
9492
| Label | Contains only a text element. |
9593
| Angle | Contains a background rect, text element, and a degree symbol. |
@@ -103,7 +101,7 @@ arbitrarily complex editor.
103101
These are some examples of different editors, in order of increasing
104102
complexity.
105103

106-
| <TableHeader> Field type </TableHeader> | <TableHeader> Description </TableHeader> |
104+
| Field type | Description |
107105
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
108106
| Checkbox | No editor when clicked. The on-block display updates. |
109107
| Number input | Text editor overlaid above the on-block display. Users can type; the editor may change color to indicate bad values. |

‎packages/docs/docs/guides/create-custom-blocks/fields/built-in-fields/image.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ image: images/blockly_banner.png
66

77
import Tabs from '@theme/Tabs';
88
import TabItem from '@theme/TabItem';
9-
import TableHeader from '@site/src/components/TableHeader';
109

1110
# Image fields
1211

@@ -63,7 +62,7 @@ collapsed.](/images/fields/image/collapsed.png)
6362
</Tabs>
6463
The image constructor takes in:
6564

66-
| <TableHeader> Parameter </TableHeader> | <TableHeader> Description </TableHeader> |
65+
| Parameter | Description |
6766
| ------------- | ------------------------------------------------------------ |
6867
| `src` | A string that points to a [raster image](https://developer.mozilla.org/en-US/docs/Glossary/raster_image) file. |
6968
| `width` | Must cast to a non-zero number. |

‎packages/docs/docs/guides/create-custom-blocks/fields/fields-vs-icons.mdx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: Fields vs icons
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Fields vs icons
108

119
Fields and icons are both visual elements that appear on a block, but they have
@@ -23,7 +21,7 @@ yourself, but does not affect how the block functions within the program.
2321

2422
## Comparison of functionality
2523

26-
| <TableHeader> Attribute </TableHeader> | <TableHeader> Fields </TableHeader> | <TableHeader> Icons </TableHeader> |
24+
| Attribute | Fields | Icons |
2725
| ------------- | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
2826
| Rendering | Fields can be made of whatever elements they want. | Icons can be made of whatever elements they want. |
2927
| Number | Fields can each appear any number of times in a block. | Icons can each appear once in a block. |

‎packages/docs/docs/guides/create-custom-blocks/renderers/overview.mdx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ title: Renderers
44
image: images/blockly_banner.png
55
---
66

7-
import TableHeader from '@site/src/components/TableHeader';
8-
97
# Renderers
108

119
The shape of a block is determined by a renderer, based on the
@@ -16,7 +14,7 @@ The shape of a block is determined by a renderer, based on the
1614
Blockly provides three built-in renderers, each of which give a slightly
1715
different feel to the program.
1816

19-
| <TableHeader> Renderer </TableHeader> | <TableHeader> Description </TableHeader> | <TableHeader> Image </TableHeader> |
17+
| Renderer | Description | Image |
2018
| -------- | ------------------------------------------------------------------------------------------------------------------- | ------------------- |
2119
| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | ![thrasos][thrasos] |
2220
| Geras | The default renderer. It is the original renderer that Blockly was built with. | ![geras][geras] |

0 commit comments

Comments
 (0)