Create component for numbered lists referring to annotated screenshots

docusaurus/docs/dev-docs/api/rest/guides/understanding-populate.md

@@ -8,6 +8,7 @@ toc_max_heading_level: 6
 import QsIntroFull from '/docs/snippets/qs-intro-full.md'
 import QsForQueryTitle from '/docs/snippets/qs-for-query-title.md'
 import QsForQueryBody from '/docs/snippets/qs-for-query-body.md'
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # 🧠 Understanding the `populate` parameter for the REST API
 
@@ -883,9 +884,9 @@ The syntax for advanced query parameters can be quite complex to build manually.
 
 The [FoodAdvisor](https://github.com/strapi/foodadvisor) example application includes various components and even components nested inside other components. For instance:
 
-- an `article` content-type includes a `seo` component (1),
-- the `seo` component includes a nested, repeatable `metaSocial` component (2),
-- and the `metaSocial` component itself has several fields, including an `image` media field (3).
+- an `article` content-type includes a `seo` component <ScreenshotNumberReference number="1" />,
+- the `seo` component includes a nested, repeatable `metaSocial` component <ScreenshotNumberReference number="2" />,
+- and the `metaSocial` component itself has several fields, including an `image` media field <ScreenshotNumberReference number="3" />.
 
 ![FoodAdvisor's SEO component structure in the Content-Type Builder](/img/assets/rest-api/ctb-article-components-structure.png)
 
@@ -1051,8 +1052,8 @@ With the shared population strategy, you apply the same population to all the co
 
 For instance, in the [FoodAdvisor](https://github.com/strapi/foodadvisor) example application:
 
-- A `blocks` dynamic zone exists the `article` content-type (1).
-- The dynamic zone includes 3 different components: `relatedArticles` (2), `faq` (3), and `CtaCommandLine` (4). All components have a different data structure containing various fields.
+- A `blocks` dynamic zone exists the `article` content-type <ScreenshotNumberReference number="1" />.
+- The dynamic zone includes 3 different components: `relatedArticles` <ScreenshotNumberReference number="2" />, `faq` <ScreenshotNumberReference number="3" />, and `CtaCommandLine` <ScreenshotNumberReference number="4" />. All components have a different data structure containing various fields.
 
 ![FoodAdvisor's 'blocks' dynamic zone structure in the Content-Type Builder](/img/assets/rest-api/ctb-blocks-dynamic-zone-structure.png)
 
@@ -1265,9 +1266,9 @@ With the detailed population strategy, you can define per-component populate que
 
 For instance, in the [FoodAdvisor](https://github.com/strapi/foodadvisor) example application:
 
-- A `blocks` dynamic zone exists the `article` content-type (1).
-- The dynamic zone includes 3 different components: `relatedArticles` (2), `faq` (3), and `CtaCommandLine` (4). All components have a different data structure containing various fields.
-- The `relatedArticles` component has an `articles` relation (5) with the article content-type.
+- A `blocks` dynamic zone exists the `article` content-type <ScreenshotNumberReference number="1" />.
+- The dynamic zone includes 3 different components: `relatedArticles` <ScreenshotNumberReference number="2" />, `faq` <ScreenshotNumberReference number="3" />, and `CtaCommandLine` <ScreenshotNumberReference number="4" />. All components have a different data structure containing various fields.
+- The `relatedArticles` component has an `articles` relation <ScreenshotNumberReference number="5" /> with the article content-type.
 
 ![FoodAdvisor's 'blocks' dynamic zone structure in the Content-Type Builder](/img/assets/rest-api/ctb-blocks-dynamic-zone-structure-2.png)
 

docusaurus/docs/user-docs/content-manager/introduction-to-content-manager.md

@@ -6,6 +6,7 @@ slug: /user-docs/content-manager
 description: Introduction to the Content Manager which allows to write content for collection types and single types.
 
 ---
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Introduction to the Content Manager
 
@@ -35,10 +36,10 @@ The list view of a collection type displays all entries created for that collect
 
 From the list view, it is possible to:
 
-- create a new entry (1),
-- make a textual search (2) or set filters (3) to find specific entries,
-- if the [Internationalization plugin](/user-docs/plugins/strapi-plugins#-internationalization-plugin) is installed, filter by locale to display only the entries translated in a chosen locale (4),
-- configure the fields displayed in the table of the list view (5),
+- create a new entry <ScreenshotNumberReference number="1" />,
+- make a textual search <ScreenshotNumberReference number="2" /> or set filters <ScreenshotNumberReference number="3" /> to find specific entries,
+- if the [Internationalization plugin](/user-docs/plugins/strapi-plugins#-internationalization-plugin) is installed, filter by locale to display only the entries translated in a chosen locale <ScreenshotNumberReference number="4" />,
+- configure the fields displayed in the table of the list view <ScreenshotNumberReference number="5" />,
 - edit ![Edit icon](/img/assets/icons/edit.svg) (see [Writing content](/user-docs/content-manager/writing-content.md)), duplicate ![Duplicate icon](/img/assets/icons/duplicate.svg), or delete ![Delete icon](/img/assets/icons/delete.svg) (see [Deleting content](/user-docs/content-manager/saving-and-publishing-content.md#deleting-content)) an entry,
 - select multiple entries to simultaneously [publish, unpublish](/user-docs/content-manager/saving-and-publishing-content#bulk-publish-and-unpublish-), or [delete](/user-docs/content-manager/saving-and-publishing-content.md#deleting-content).
 

docusaurus/docs/user-docs/content-type-builder/managing-content-types.md

@@ -1,3 +1,5 @@
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
+
 # Managing content-types
 
 :::note development-only
@@ -20,11 +22,11 @@ Managing a content-type or component can include editing the general settings an
   }}
 />
 
-- Next to the name and optional description of the content-type or component, an ![Edit icon](/img/assets/icons/edit.svg) **Edit** button (1) allows to access the [general settings](#editing-content-type-or-component-settings) of the content-type or component.
+- Next to the name and optional description of the content-type or component, an ![Edit icon](/img/assets/icons/edit.svg) **Edit** button <ScreenshotNumberReference number="1" /> allows to access the [general settings](#editing-content-type-or-component-settings) of the content-type or component.
 - In the top right corner:
-  - the **Add new field** and **Save** buttons (2) allow to respectively add another field to the content-type or component (see [Configuring fields for content-types](/user-docs/content-type-builder/configuring-fields-content-type)), or save any ongoing modification.
+  - the **Add new field** and **Save** buttons <ScreenshotNumberReference number="2" /> allow to respectively add another field to the content-type or component (see [Configuring fields for content-types](/user-docs/content-type-builder/configuring-fields-content-type)), or save any ongoing modification.
   - the **Configure the view** button allows to access the view configuration interface (see [Configuring the edit view](/user-docs/content-manager/configuring-view-of-content-type#configuring-the-edit-view))
-- Below the previous editing options, a table (3) lists all the fields created and configured for the content-type or component. From the fields table, it is possible to:
+- Below the previous editing options, a table <ScreenshotNumberReference number="3" />  lists all the fields created and configured for the content-type or component. From the fields table, it is possible to:
   - Click on the edit button ![Edit icon](/img/assets/icons/edit.svg) to edit a field
   - Click on the delete button ![Delete icon](/img/assets/icons/delete.svg) to delete a field
 

docusaurus/docs/user-docs/media-library/introduction-to-the-media-library.md

@@ -5,6 +5,7 @@ sidebar_position: 1
 description: Introduction to the Media Library which allows to display and manage all assets uploaded in the application.
 
 ---
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Introduction to the Media Library
 
@@ -24,10 +25,10 @@ The Media Library displays all assets uploaded in the application, either via th
 
 From the Media Library, it is possible to:
 
-- upload a new asset (see [adding assets](/user-docs/media-library/adding-assets)) or create a new folder (see [organizing assets with folders](/user-docs/media-library/organizing-assets-with-folders)) (1),
-- sort the assets and folders or set filters (2) to find assets and folders more easily,
-- toggle between the list view ![List icon](/img/assets/icons/list_view.svg) and the grid view ![Grid icon](/img/assets/icons/grid_view.svg) to display assets, access settings ![Settings icon](/img/assets/icons/settings.svg) to [configure the view](#configuring-the-view), and make a textual search ![Search icon](/img/assets/icons/search.svg) (3) to find a specific asset or folder,
-- and view, navigate through, and manage folders (4).
+- upload a new asset (see [adding assets](/user-docs/media-library/adding-assets)) or create a new folder (see [organizing assets with folders](/user-docs/media-library/organizing-assets-with-folders)) <ScreenshotNumberReference number="1" />,
+- sort the assets and folders or set filters <ScreenshotNumberReference number="2" /> to find assets and folders more easily,
+- toggle between the list view ![List icon](/img/assets/icons/list_view.svg) and the grid view ![Grid icon](/img/assets/icons/grid_view.svg) to display assets, access settings ![Settings icon](/img/assets/icons/settings.svg) to [configure the view](#configuring-the-view), and make a textual search ![Search icon](/img/assets/icons/search.svg) <ScreenshotNumberReference number="3" /> to find a specific asset or folder,
+- and view, navigate through, and manage folders <ScreenshotNumberReference number="4" />.
 
 :::tip
 Click the search icon ![Search icon](/img/assets/icons/search.svg) on the right side of the user interface to use a text search and find one of your assets or folders more quickly!

docusaurus/docs/user-docs/media-library/managing-assets.md

@@ -3,6 +3,7 @@ title: Managing individual assets
 description: Instructions on how to manage assets uploaded to the Media Library, including editing, moving, and deleting assets, and cropping images.
 
 ---
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Managing individual assets
 
@@ -20,13 +21,13 @@ Clicking on the edit ![Edit icon](/img/assets/icons/edit.svg) button of an asset
   }}
 />
 
-- On the left, above the preview of the asset, control buttons (1) allow performing various actions:
+- On the left, above the preview of the asset, control buttons <ScreenshotNumberReference number="1" /> allow performing various actions:
   - click on the delete button ![Delete icon](/img/assets/icons/delete.svg) to delete the asset,
   - click on the download button ![Download icon](/img/assets/icons/download.svg) to download the asset,
   - click on the copy link button ![Copy link icon](/img/assets/icons/link.svg) to copy the asset's link to the clipboard,
   - optionally, click on the crop button ![Copy link icon](/img/assets/icons/crop.svg) to enter cropping mode for the image (see [cropping images](#cropping-images)).
-- On the right, meta data for the asset is displayed at the top of the window (2) and the fields below can be used to update the _File name_, _Alternative text_, _Caption_ and _Asset location_ (see [organizing assets with folders](/user-docs/media-library/organizing-assets-with-folders.md)) for the asset (3).
-- At the bottom, the **Replace Media** button (4) can be used to replace the asset file but keep the existing content of the other editable fields, and the **Finish** button is used to confirm any updates to the fields.
+- On the right, meta data for the asset is displayed at the top of the window <ScreenshotNumberReference number="2" /> and the fields below can be used to update the _File name_, _Alternative text_, _Caption_ and _Asset location_ (see [organizing assets with folders](/user-docs/media-library/organizing-assets-with-folders.md)) for the asset <ScreenshotNumberReference number="3" />.
+- At the bottom, the **Replace Media** button <ScreenshotNumberReference number="4" /> can be used to replace the asset file but keep the existing content of the other editable fields, and the **Finish** button is used to confirm any updates to the fields.
 
 ## Moving assets
 

docusaurus/docs/user-docs/media-library/organizing-assets-with-folders.md

@@ -4,6 +4,7 @@ displayed_sidebar: userDocsSidebar
 description: Instructions on how to use folders in the Media Library, including adding, editing, and deleting folders, and browsing their content.
 
 ---
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Organizing assets with folders
 
@@ -19,9 +20,9 @@ Folders follow the permission system of assets (see [Users, Roles & Permissions]
 
 By default, the Media Library displays folders and assets created at the root level. Clicking a folder navigates to this folder, and displays the following elements:
 
-- the folder title and breadcrumbs to navigate to a parent folder (1)
-- the subfolders (2) the current folder contains
-- all assets (3) from this folder
+- the folder title and breadcrumbs to navigate to a parent folder <ScreenshotNumberReference number="1" />
+- the subfolders <ScreenshotNumberReference number="2" /> the current folder contains
+- all assets <ScreenshotNumberReference number="3" /> from this folder
 
 <ThemedImage
   alt="Media library one folder deep, with back button and updated folder title"

docusaurus/docs/user-docs/releases/managing-a-release.md

@@ -3,6 +3,7 @@ title: Managing a release
 description: Instructions on how to manage a Release from the admin panel
 ---
 
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Managing a release <EnterpriseBadge /> <CloudTeamBadge />
 
@@ -20,11 +21,11 @@ Adding entries to a [release](/user-docs/releases/introduction) allow viewing th
 
 From a release page, you can:
 
-- edit the name of the release or delete the release (1)
-- manually publish the release (2),
-- adjust the view to display entries grouped either by locale, content-type, or action (publish/unpublish) (3),
-- decide whether individual items included to the releases will be published or unpublished with the release (4).
-- edit a specific entry or remove it from the release (5).
+- edit the name of the release or delete the release <ScreenshotNumberReference number="1" />
+- manually publish the release <ScreenshotNumberReference number="2" />,
+- adjust the view to display entries grouped either by locale, content-type, or action (publish/unpublish) <ScreenshotNumberReference number="3" />,
+- decide whether individual items included to the releases will be published or unpublished with the release <ScreenshotNumberReference number="4" />.
+- edit a specific entry or remove it from the release <ScreenshotNumberReference number="5" />.
 
 ## Editing a release
 

docusaurus/docs/user-docs/users-roles-permissions/managing-administrators.md

@@ -3,6 +3,7 @@ title: Managing administrator accounts
 displayed_sidebar: userDocsSidebar
 sidebar_position: 3
 ---
+import ScreenshotNumberReference from '/src/components/ScreenshotNumberReference.jsx';
 
 # Managing administrator accounts
 
@@ -22,9 +23,9 @@ The *Users* sub-section of *Administration panel* displays a table listing all t
 
 From this interface, it is possible to:
 
-- make a textual search (1) to find specific administrators,
-- set filters (2) to find specific administrators,
-- create a new administrator account (see [Creating a new account](#creating-a-new-account)) (3),
+- make a textual search <ScreenshotNumberReference number="1" /> to find specific administrators,
+- set filters <ScreenshotNumberReference number="2" /> to find specific administrators,
+- create a new administrator account (see [Creating a new account](#creating-a-new-account)) <ScreenshotNumberReference number="3" />,
 - delete an administrator account (see [Deleting an account](#deleting-an-account)),
 - or access information regarding an administrator account, and edit it (see [Editing an account](#editing-an-account)).
 

docusaurus/src/components/ScreenshotNumberReference.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const ScreenshotNumberReference = ({ number }) => {
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        width: '1.5rem',
+        height: '1.5rem',
+        borderRadius: '50%',
+        backgroundColor: '#4743FF',
+        color: '#fff', 
+        textAlign: 'center',
+        fontSize: '.8rem',
+        fontWeight: 'bold',
+        padding: '0.1rem',
+      }}
+    >
+      {number}
+    </span>
+  );
+};
+
+export default ScreenshotNumberReference;

docusaurus/src/theme/MDXComponents.js

@@ -21,6 +21,7 @@ import { InteractiveQueryBuilder } from '../components/InteractiveQueryBuilder/I
 import { AlphaBadge, BetaBadge, EnterpriseBadge, FutureBadge, CloudProBadge, CloudTeamBadge, CloudDevBadge } from '../components/Badge';
 import { SideBySideColumn, SideBySideContainer } from '../components';
 import ThemedImage from '@theme/ThemedImage';
+import ScreenshotNumberReference from '../components/ScreenshotNumberReference';
 import {
   MultiLanguageSwitcher,
   MultiLanguageSwitcherRequest,
@@ -62,6 +63,7 @@ export default {
   InteractiveQueryBuilder,
   SubtleCallout,
   ThemedImage,
+  ScreenshotNumberReference,
   SideBySideColumn,
   SideBySideContainer,
   MultiLanguageSwitcher,