Update broken docs syntax in github (#11596)

* Add delay to the unstable test

* Add delay for unstable tests

* Update broken docs syntax in github

* Merge branch 'master' into ZheSun88-patch-1

* Update doc reference syntax

* Merge branch 'ZheSun88-patch-1' of github.com:vaadin/framework into ZheSun88-patch-1

# Conflicts:
#	documentation/components/components-overview.asciidoc

* Merge branch 'master' into ZheSun88-patch-1

* use .asciidoc

* Merge remote-tracking branch 'origin/ZheSun88-patch-1' into ZheSun88-patch-1

* use .asciidoc

* Merge branch 'master' into ZheSun88-patch-1

26 files changed, 52 insertions, 54 deletions

diff --git a/documentation/components/components-checkbox.asciidoc b/documentation/components/components-checkbox.asciidoc
index 67e3ad6108..b739ee5bf1 100644
--- a/documentation/components/components-checkbox.asciidoc
+++ b/documentation/components/components-checkbox.asciidoc
@@ -17,7 +17,7 @@ checked or unchecked. The caption of the check box will be placed right of the
 actual check box. Vaadin provides two ways to create check boxes: individual
 check boxes with the [classname]#CheckBox# component described in this section
 and check box groups with the [classname]#CheckBoxGroup# component, as described in
-<<dummy/../../../framework/components/components-optiongroups#components.optiongroups,"CheckBoxGroup and RadioButtonGroup">>.
+<<components-optiongroups#components.optiongroups,"CheckBoxGroup and RadioButtonGroup">>.
 
 Clicking on a check box will change its state. The state is a [classname]#Boolean#
 property that you can set with the [methodname]#setValue()# method and obtain with
diff --git a/documentation/components/components-combobox.asciidoc b/documentation/components/components-combobox.asciidoc
index c7a1fefba8..a8f44cb6d6 100644
--- a/documentation/components/components-combobox.asciidoc
+++ b/documentation/components/components-combobox.asciidoc
@@ -16,7 +16,7 @@ endif::web[]
 drop-down list. The component also has a text field area, which allows entering
 search text by which the items shown in the drop-down list are filtered. Common
 selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+<<components-selection#components.selection,"Selection
 Components">>.
 
 .The [classname]#ComboBox# Component
diff --git a/documentation/components/components-customcomponent.asciidoc b/documentation/components/components-customcomponent.asciidoc
index 96024d0ace..5adca246c8 100644
--- a/documentation/components/components-customcomponent.asciidoc
+++ b/documentation/components/components-customcomponent.asciidoc
@@ -13,7 +13,7 @@ composite components. In many applications, such composite components make up
 the majority of the user interface.
 
 As described earlier in
-<<dummy/../../../framework/application/application-architecture#application.architecture.composition,"Compositing
+<<../application/application-architecture#application.architecture.composition,"Compositing
 Components">>, you have two basic ways to create a composite - either by
 extending a layout component or by using a composition component (a
 [classname]#Composite# or a [classname]#CustomComponent#), which typically
@@ -87,5 +87,5 @@ composition.
 Even further, you can create entirely new low-level components, by integrating
 pure client-side components or by extending the client-side functionality of
 built-in components. Development of new components is covered in
-<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
+<<../gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
 with the Server-Side">>.
diff --git a/documentation/components/components-customfield.asciidoc b/documentation/components/components-customfield.asciidoc
index 95f949da01..aeffc442c1 100644
--- a/documentation/components/components-customfield.asciidoc
+++ b/documentation/components/components-customfield.asciidoc
@@ -7,8 +7,8 @@ layout: page
 [[components.customfield]]
 = Composite Fields with CustomField
 
-The [classname]#CustomField# is a way to create composite components as with [classname]#CustomComponent#, except that it implements the [interfacename]#Field# interface and inherits [classname]#AbstractField#, described in <<dummy/../../../framework/components/components-fields#components.fields,"Field Components">>.
-A field allows editing a property value in the data model, and can be bound to data with [classname]#Binder#, as described in <<dummy/../../../framework/datamodel/datamodel-forms#datamodel.forms, "Binding Data to Forms">>.
+The [classname]#CustomField# is a way to create composite components as with [classname]#CustomComponent#, except that it implements the [interfacename]#Field# interface and inherits [classname]#AbstractField#, described in <<components-fields#components.fields,"Field Components">>.
+A field allows editing a property value in the data model, and can be bound to data with [classname]#Binder#, as described in <<../datamodel/datamodel-forms#datamodel.forms, "Binding Data to Forms">>.
 
 A composite field class must implement [methodname]#initContent()# method.
 It should return the content composite of the field.
diff --git a/documentation/components/components-datefield.asciidoc b/documentation/components/components-datefield.asciidoc
index 6137bd0c3d..467bfd7c33 100644
--- a/documentation/components/components-datefield.asciidoc
+++ b/documentation/components/components-datefield.asciidoc
@@ -52,7 +52,7 @@ The same format definitions are used for parsing user input.
 === Date Format
 
 The date is normally displayed according to the default format for the current locale (see
-<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>).
+<<components-features#components.features.locale,"Locale">>).
 You can specify a custom format with [methodname]#setDateFormat()#. It takes a
 format string that follows the format of the [classname]#java.time.format.DateTimeFormatter# in
 Java.
@@ -265,7 +265,7 @@ be visible. Please see the API Reference for the complete list of resolution par
 The date is displayed according to the locale of the user, as reported
 by the browser. You can set a custom locale with the [methodname]#setLocale()#
 method of [classname]#AbstractComponent#, as described in
-<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>.
+<<components-features#components.features.locale,"Locale">>.
 Only Gregorian calendar is supported.
 
 
diff --git a/documentation/components/components-embedded.asciidoc b/documentation/components/components-embedded.asciidoc
index 1c1a6c90ae..8c5e75f6c4 100644
--- a/documentation/components/components-embedded.asciidoc
+++ b/documentation/components/components-embedded.asciidoc
@@ -11,7 +11,7 @@ You can embed images in Vaadin UIs with the [classname]#Image# component, Adobe
 Flash graphics with [classname]#Flash#, and other web content with
 [classname]#BrowserFrame#. There is also a generic [classname]#Embedded#
 component for embedding other object types.
-The embedded content is referenced as _resources_, as described in <<dummy/../../../framework/application/application-resources#application.resources,"Images and Other Resources">>.
+The embedded content is referenced as _resources_, as described in <<../application/application-resources#application.resources,"Images and Other Resources">>.
 
 The following example displays an image as a class resource loaded with the
 class loader:
@@ -55,7 +55,7 @@ directions, so it will automatically fit the size of the embedded image.
 bars")))
 If you want scrolling with scroll bars, you can put the image inside a
 [classname]#Panel# that has a defined size to enable scrolling, as described in
-<<dummy/../../../framework/layout/layout-panel#layout.panel.scrolling,"Scrolling
+<<../layout/layout-panel#layout.panel.scrolling,"Scrolling
 the Panel Content">>. You can also put it inside some other component container
 and set the [literal]#++overflow: auto++# CSS property for the container element
 in a theme to enable automatic scrollbars. (((overflow CSS
@@ -66,7 +66,7 @@ property)))
 
 You can also generate the image content dynamically using a
 [classname]#StreamResource#, as described in
-<<dummy/../../../framework/application/application-resources#application.resources.stream,"Stream
+<<../application/application-resources#application.resources.stream,"Stream
 Resources">>, or with a [classname]#RequestHandler#.
 
 If the image changes, the browser needs to reload it. Simply updating the stream
diff --git a/documentation/components/components-extensions.asciidoc b/documentation/components/components-extensions.asciidoc
index a84ad92f6e..916dc720eb 100644
--- a/documentation/components/components-extensions.asciidoc
+++ b/documentation/components/components-extensions.asciidoc
@@ -31,7 +31,7 @@ validator.extend(tf);
 ----
 
 Development of custom extensions is described in
-<<dummy/../../../framework/gwt/gwt-extension#gwt.extension,"Component and UI
+<<../gwt/gwt-extension#gwt.extension,"Component and UI
 Extensions">>.
 
 
diff --git a/documentation/components/components-features.asciidoc b/documentation/components/components-features.asciidoc
index e72ee2179e..37f568a9a9 100644
--- a/documentation/components/components-features.asciidoc
+++ b/documentation/components/components-features.asciidoc
@@ -114,7 +114,7 @@ A description is rendered as a tooltip in most components.
 When a component error has been set with [methodname]#setComponentError()#, the
 error is usually also displayed in the tooltip, below the description.
 Components that are in error state will also display the error indicator. See
-<<dummy/../../../framework/application/application-errors#application.errors.error-indicator, "Error Indicator and Message">>.
+<<../application/application-errors#application.errors.error-indicator, "Error Indicator and Message">>.
 
 The description is actually not plain text, but you can use HTML tags to format
 it. Such a rich text description can contain any HTML elements, including
@@ -245,7 +245,7 @@ icon themselves and display it inside the component.
 
 In addition to image resources, you can use __font icons__, which are icons
 included in special fonts, but which are handled as special resources. See
-<<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font Icons">>
+<<../themes/themes-fonticon#themes.fonticon,"Font Icons">>
 for more details.
 
 === CSS Style Rules
@@ -543,10 +543,10 @@ can set the height, width, or both as undefined with the methods [methodname]#se
 [methodname]#setHeightUndefined()#, and [methodname]#setSizeUndefined()#, respectively.
 
 Always keep in mind that _a layout with undefined size may not contain components with defined relative size_, such as "full size", except in some special cases.
-See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
+See <<../layout/layout-settings#layout.settings.size,"Layout Size">> for details.
 
 If a component inside [classname]#HorizontalLayout# or [classname]#VerticalLayout# has full size in the namesake direction of the layout, the component will expand to take all available space not needed by the other components.
-See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
+See <<../layout/layout-settings#layout.settings.size,"Layout Size">> for details.
 
 == Managing Input Focus
 
diff --git a/documentation/components/components-fields.asciidoc b/documentation/components/components-fields.asciidoc
index 77a308a3bb..8af342e5f6 100644
--- a/documentation/components/components-fields.asciidoc
+++ b/documentation/components/components-fields.asciidoc
@@ -21,7 +21,7 @@ Field components are built upon the framework defined in the [classname]#HasValu
 interface.
 [classname]#AbstractField# is the base class for all field components,
 except those components that allow the user to select a value.
-(see <<dummy/../../../framework/components/components-selection.asciidoc#components.selection,"Selection Components">>).
+(see <<components-selection.asciidoc#components.selection,"Selection Components">>).
 
 In addition to the component features inherited from
 [classname]#AbstractComponent#, it implements the features defined in the
@@ -51,7 +51,7 @@ access with the corresponding setters and getters.
 [methodname]#requiredIndicatorVisible#:: When enabled, a required indicator
 (the asterisk * character) is displayed on the left, above, or right the field,
 depending on the containing layout and whether the field has a caption.
-When the component is used in a form (see <<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms.validation,"Validation">>),
+When the component is used in a form (see <<../datamodel/datamodel-forms.asciidoc#datamodel.forms.validation,"Validation">>),
 it can be set to be required, which will automatically show the required indicator,
 and validate that the value is not empty. Without validation, the required indicator
 is merely a visual guide.
@@ -116,7 +116,7 @@ Person p = new Person();
 binder.setBean(p);
 ----
 
-For more information on data binding, see <<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms,"Binding Data to Forms">>
+For more information on data binding, see <<../datamodel/datamodel-forms.asciidoc#datamodel.forms,"Binding Data to Forms">>
 
 
 == Validating Field Values
@@ -138,7 +138,7 @@ binder.forField(nameField)
 ----
 
 Failed validation is by default indicated with the error indicator of the field, described in
-<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
+<<../application/application-errors#application.errors.error-indicator,"Error
 Indicator and Message">>. Hovering mouse on the field displays the error message
 returned by the validator. If any value in a set of bound fields fails validation,
 none of the field values are saved into the bound property until the validation
@@ -192,7 +192,7 @@ Field values are always of some particular type. For example,
 a data source, the type of the source property can be something different,
 say an [classname]#Integer#. __Converters__ are used for converting the values
 between the presentation and the model. Their usage is described in
-<<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms.conversion,"Conversion">>.
+<<../datamodel/datamodel-forms.asciidoc#datamodel.forms.conversion,"Conversion">>.
 
 
 (((range="endofrange", startref="term.components.fields")))
diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
index 6eba3eae45..32d47097f7 100644
--- a/documentation/components/components-grid.asciidoc
+++ b/documentation/components/components-grid.asciidoc
@@ -46,7 +46,7 @@ cell style generator.
 
 [classname]#Grid# is normally used by binding it to a data provider,
 described in
-<<dummy/../../../framework/datamodel/datamodel-providers.asciidoc#datamodel.dataproviders,"Showing Many Items in a Listing">>.
+<<../datamodel/datamodel-providers.asciidoc#datamodel.dataproviders,"Showing Many Items in a Listing">>.
 By default, it is bound to List of items. You can set the items with the
 [methodname]#setItems()# method.
 
@@ -469,7 +469,7 @@ grid.addColumn(person -> "Delete",
 
 [classname]#ImageRenderer#:: Renders the cell as an image.
 The column type must be a [interfacename]#Resource#, as described in
-<<dummy/../../../framework/application/application-resources#application.resources,"Images and Other Resources">>; only [classname]#ThemeResource# and
+<<../application/application-resources#application.resources,"Images and Other Resources">>; only [classname]#ThemeResource# and
 [classname]#ExternalResource# are currently supported for images in
 [classname]#Grid#.
 
@@ -630,7 +630,7 @@ grid.addColumn(person -> {
 === Custom Renderers
 
 Renderers are component extensions that require a client-side counterpart. See
-<<dummy/../../../framework/clientsidewidgets/clientsidewidgets-grid#clientsidewidgets.grid.renderers,"Renderers">>
+<<../clientsidewidgets/clientsidewidgets-grid#clientsidewidgets.grid.renderers,"Renderers">>
 for information on implementing custom renderers.
 
 
@@ -826,7 +826,7 @@ can correct the inputs.
 The [classname]#Editor# is accessible via [methodname]#getEditor()#, and to enable editing, you need to call [methodname]#setEnabled(true)# on it.
 
 The editor is based on [classname]#Binder# which is used to bind the data to the editor.
-See <<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms.beans,"Binding Beans to Forms">> for more information on setting up field components and validation by using [classname]#Binder#.
+See <<../datamodel/datamodel-forms.asciidoc#datamodel.forms.beans,"Binding Beans to Forms">> for more information on setting up field components and validation by using [classname]#Binder#.
 For each column that should be editable, a binding should be created in the editor binder and then the column is configured to use that binding.
 For simple cases where no conversion or validation is needed, it is also possible to directly use `setEditorComponent` on a `Column` to only define the editor component and a setter that updates the row object when saving.
 
@@ -949,7 +949,7 @@ You can scroll to first item with [methodname]#scrollToStart()#, to end with
 == Drag and Drop of Rows
 
 Please refer to the
-<<dummy/../../../framework/advanced/advanced-dragndrop#advanced.dragndrop.grid,"Drag and Drop Rows in Grid">> documentation.
+<<../advanced/advanced-dragndrop#advanced.dragndrop.grid,"Drag and Drop Rows in Grid">> documentation.
 
 [[advanced.dragndrop.grid]]
 
diff --git a/documentation/components/components-interfaces.asciidoc b/documentation/components/components-interfaces.asciidoc
index 603cb4cdc7..2c1fa3f260 100644
--- a/documentation/components/components-interfaces.asciidoc
+++ b/documentation/components/components-interfaces.asciidoc
@@ -15,8 +15,8 @@ and the client.
 
 This section gives details on the basic component interfaces and abstractions.
 The layout and other component container abstractions are described in
-<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing Layout">>.
-The interfaces that define the Vaadin data model are described in <<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>.
+<<../layout/layout-overview.asciidoc#layout.overview,"Managing Layout">>.
+The interfaces that define the Vaadin data model are described in <<../datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>.
 
 [[figure.components.interfaces]]
 .Component interfaces and abstractions
diff --git a/documentation/components/components-label.asciidoc b/documentation/components/components-label.asciidoc
index 7e95e747b8..193c068ba6 100644
--- a/documentation/components/components-label.asciidoc
+++ b/documentation/components/components-label.asciidoc
@@ -122,7 +122,7 @@ content mode.
 Having [classname]#Label# in HTML content mode allows pure HTML content. If the
 content comes from user input, you should always carefully sanitize it to
 prevent cross-site scripting (XSS) attacks. Please see
-<<dummy/../../../framework/advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
+<<../advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
 User Input to Prevent Cross-Site Scripting">>.
 
 Also, the validity of the HTML content is not checked when rendering the
diff --git a/documentation/components/components-link.asciidoc b/documentation/components/components-link.asciidoc
index 5f2a3a153c..ecb39d0063 100644
--- a/documentation/components/components-link.asciidoc
+++ b/documentation/components/components-link.asciidoc
@@ -14,7 +14,7 @@ endif::web[]
 
 The [classname]#Link# component allows making hyperlinks. References to
 locations are represented as resource objects, explained in
-<<dummy/../../../framework/application/application-resources#application.resources,"Images
+<<../application/application-resources#application.resources,"Images
 and Other Resources">>. The [classname]#Link# is a regular HTML hyperlink, that
 is, an [literal]#++<a href>++# anchor element that is handled natively by the
 browser. Unlike when clicking a [classname]#Button#, clicking a
@@ -107,7 +107,7 @@ In addition to the [classname]#Link# component, Vaadin allows alternative ways t
 Also, you can make hyperlinks (or any other HTML) in a [classname]#Label# in HTML content mode.
 
 The [classname]#Button# component has a [parameter]#ValoTheme.BUTTON_LINK# style name that makes it look like a hyperlink, while handling clicks in a server-side click listener instead of in the browser.
-However, browsers do not generally allow opening new windows after server side round trip, so for such tasks you need to use the [classname]#BrowserWindowOpener# extension described in <<dummy/../../../framework/advanced/advanced-windows#advanced.windows.popup, "Opening Pop-up Windows">>
+However, browsers do not generally allow opening new windows after server side round trip, so for such tasks you need to use the [classname]#BrowserWindowOpener# extension described in <<../advanced/advanced-windows#advanced.windows.popup, "Opening Pop-up Windows">>
 
 
 == CSS Style Rules
diff --git a/documentation/components/components-listselect.asciidoc b/documentation/components/components-listselect.asciidoc
index e57d028800..cb8db962f5 100644
--- a/documentation/components/components-listselect.asciidoc
+++ b/documentation/components/components-listselect.asciidoc
@@ -41,7 +41,7 @@ The number of visible items is set with [methodname]#setRows()#.
 image::img/listselect-basic.png[width=35%, scaledwidth=50%]
 
 Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
+<<components-selection#components.selection,"Selection Components">>.
 
 == CSS Style Rules
 
diff --git a/documentation/components/components-nativeselect.asciidoc b/documentation/components/components-nativeselect.asciidoc
index 52dae0ec18..05259e4d28 100644
--- a/documentation/components/components-nativeselect.asciidoc
+++ b/documentation/components/components-nativeselect.asciidoc
@@ -31,7 +31,7 @@ select.setItems("Mercury", "Venus", ...);
 image::img/nativeselect-basic.png[width=20%, scaledwidth=35%]
 
 Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
+<<components-selection#components.selection,"Selection Components">>.
 
 == CSS Style Rules
 
diff --git a/documentation/components/components-optiongroups.asciidoc b/documentation/components/components-optiongroups.asciidoc
index bc2e261cf3..fd2c7bfd54 100644
--- a/documentation/components/components-optiongroups.asciidoc
+++ b/documentation/components/components-optiongroups.asciidoc
@@ -16,7 +16,7 @@ endif::web[]
 selection from a group of radio buttons. [classname]#CheckBoxGroup# is a multiselection
 component where items are displayed as check boxes. The common selection component features are
 described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
+<<components-selection#components.selection,"Selection Components">>.
 
 [[figure.components.optiongroups]]
 .RadioButtonGroup and CheckBoxGroup
@@ -40,7 +40,7 @@ multi.setItems("Many", "Muchos", "Monta");
 
 You can also create check boxes individually using the [classname]#CheckBox#
 class, as described in
-<<dummy/../../../framework/components/components-checkbox#components.checkbox,"CheckBox">>.
+<<components-checkbox#components.checkbox,"CheckBox">>.
 The advantages of the [classname]#CheckBoxGroup# component are that as it
 maintains the individual check box objects, you can get an array of the
 currently selected items easily, and that you can easily change the appearance
diff --git a/documentation/components/components-overview.asciidoc b/documentation/components/components-overview.asciidoc
index 0a035a3c00..5d0ccdbaca 100644
--- a/documentation/components/components-overview.asciidoc
+++ b/documentation/components/components-overview.asciidoc
@@ -63,7 +63,6 @@ abstract class.
 ((("[classname]#AbstractListing#")))
 There are three more specific types of components.
 
-Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in
 <<components-fields#components.fields,"Field Components">>.
 
 Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in
@@ -82,8 +81,7 @@ documentation, and a code samples for each of the components.
 In addition to the built-in components, many components are available as
 add-ons, either from the Vaadin Directory or from independent sources. Both
 commercial and free components exist. The installation of add-ons is described
-in
-<<../addons/addons-overview#addons.overview,"Using
+in <<../addons/addons-overview#addons.overview,"Using
 Vaadin Add-ons">>.
 
 ////
diff --git a/documentation/components/components-passwordfield.asciidoc b/documentation/components/components-passwordfield.asciidoc
index d1c18b1605..755008b526 100644
--- a/documentation/components/components-passwordfield.asciidoc
+++ b/documentation/components/components-passwordfield.asciidoc
@@ -44,4 +44,4 @@ possible by exploiting JavaScript execution security holes in the browser.
 
 The [classname]#PasswordField# does not have its own CSS style name but uses the
 same [literal]#++v-textfield++# style as the regular [classname]#TextField#. See
-<<dummy/../../../framework/components/components-textfield#components.textfield.css,"CSS Style Rules">> for information on styling it.
+<<components-textfield#components.textfield.css,"CSS Style Rules">> for information on styling it.
diff --git a/documentation/components/components-progressbar.asciidoc b/documentation/components/components-progressbar.asciidoc
index 54940799b3..f0d5051778 100644
--- a/documentation/components/components-progressbar.asciidoc
+++ b/documentation/components/components-progressbar.asciidoc
@@ -26,11 +26,11 @@ When the position of a progress bar is done in a background thread, the change
 is not shown in the browser immediately. You need to use either polling or
 server push to update the browser. You can enable polling with
 [methodname]#setPollInterval()# in the current UI instance. See
-<<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server Push">>
+<<../advanced/advanced-push#advanced.push,"Server Push">>
 for instructions about using server push. Whichever method you use to update the
 UI, it is important to lock the user session by modifying the progress bar value
 inside [methodname]#access()# call, as described in
-<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing UI from Another Thread">>.
+<<../advanced/advanced-push#advanced.push.running,"Accessing UI from Another Thread">>.
 
 [source, java]
 ----
@@ -70,7 +70,7 @@ including the progress bar, can be updated either with polling or by using
 server push. When doing so, you must ensure thread-safety, most easily by
 updating the UI inside a [methodname]#UI.access()# call in a
 [interfacename]#Runnable#, as described in
-<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing
+<<../advanced/advanced-push#advanced.push.running,"Accessing
 UI from Another Thread">>.
 
 
diff --git a/documentation/components/components-richtextarea.asciidoc b/documentation/components/components-richtextarea.asciidoc
index 9dd97bfb85..1d072d7133 100644
--- a/documentation/components/components-richtextarea.asciidoc
+++ b/documentation/components/components-richtextarea.asciidoc
@@ -63,7 +63,7 @@ not sanitize it just by removing all HTML tags. Also many attributes, such as
 [parameter]#style#, should pass through the sanitization.
 
 See
-<<dummy/../../../framework/advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
+<<../advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
 User Input to Prevent Cross-Site Scripting">> for more details on Cross-Site
 scripting vulnerabilities and sanitization of user input.
 
diff --git a/documentation/components/components-selection.asciidoc b/documentation/components/components-selection.asciidoc
index b136fe79bc..aa8e5a79ae 100644
--- a/documentation/components/components-selection.asciidoc
+++ b/documentation/components/components-selection.asciidoc
@@ -7,7 +7,7 @@ layout: page
 [[components.selection]]
 = Selection Components
 
-For a better overview on how selection works, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
+For a better overview on how selection works, see link:<<../datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
 
 Vaadin offers many alternative ways for selecting one or more items. The core
 library includes the following selection components, all based on either
@@ -42,7 +42,7 @@ In addition, the [classname]#Grid# component allows user selection.
 The selection components are typically bound to list of items obtained from backend system.
 You can give the list of items in the constructor or set it with
 [methodname]#setItems()#. Read more in
-<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
+<<../datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
 Components to Data">>.
 
 You can get the current selection as the
@@ -109,7 +109,7 @@ elements.
 [[components.selection.getset]]
 == Getting and Setting Selection
 
-For a better overview on how selection works, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
+For a better overview on how selection works, see link:<<../datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
 
 You can get selected the item with [methodname]#getValue()# of the
 [interfacename]#HasValue# interface that returns either a single selected item
@@ -154,7 +154,7 @@ image::img/select-selected1.png[width=30%, scaledwidth=40%]
 [[components.selection.multiple]]
 == Multiple Selection
 
-For a better overview on how selection works, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
+For a better overview on how selection works, see link:<<../datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
 
 Some selection components, such as [classname]#CheckBoxGroup#,
 [classname]#ListSelect# and [classname]#TwinColSelect# are multiselect components,
diff --git a/documentation/components/components-textarea.asciidoc b/documentation/components/components-textarea.asciidoc
index d982117253..a1d280f6a5 100644
--- a/documentation/components/components-textarea.asciidoc
+++ b/documentation/components/components-textarea.asciidoc
@@ -14,7 +14,7 @@ endif::web[]
 
 [classname]#TextArea# is a multi-line version of the [classname]#TextField#
 component described in
-<<dummy/../../../framework/components/components-textfield#components.textfield,"TextField">>.
+<<components-textfield#components.textfield,"TextField">>.
 
 The following example creates a simple text area:
 
diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc
index a14dedb548..ef4baedbe8 100644
--- a/documentation/components/components-textfield.asciidoc
+++ b/documentation/components/components-textfield.asciidoc
@@ -47,7 +47,7 @@ tf.addValueChangeListener(event ->
 
 [classname]#TextField# edits [classname]#String# values, but you can use [classname]#Binder#
 to bind it to any property type that has a proper converter, as described in
-<<dummy/../../../framework/datamodel/datamodel-forms.asciidoc#datamodel.forms.conversion,"Conversion">>.
+<<../datamodel/datamodel-forms.asciidoc#datamodel.forms.conversion,"Conversion">>.
 
 Much of the API of [classname]#TextField# is defined in
 [classname]#AbstractTextField#, which allows different kinds of text input
diff --git a/documentation/components/components-tree.asciidoc b/documentation/components/components-tree.asciidoc
index ef1def1beb..28986740d8 100644
--- a/documentation/components/components-tree.asciidoc
+++ b/documentation/components/components-tree.asciidoc
@@ -29,7 +29,7 @@ image::img/tree-basic.png[width=70%, scaledwidth=100%]
 == Binding to Data
 
 [classname]#Tree# is used by binding it to a hierarchical data provider. The data provider can be based on in-memory or back end data. For in-memory data, the [classname]#TreeDataProvider# can be used, and for loading data from a back end, you need to implement three methods from the [interfacename]#HierarchicalDataProvider# interface. Usage of both data providers is described in
-<<dummy/../../../framework/datamodel/datamodel-hierarchical.asciidoc#datamodel.hierarchical,"Hierarchical Data">>.
+<<../datamodel/datamodel-hierarchical.asciidoc#datamodel.hierarchical,"Hierarchical Data">>.
 
 
 The [classname]#TreeData# class can be used to build the hierarchical data structure,
@@ -81,7 +81,7 @@ The caption and the icon of tree items is generated by the [classname]#ItemCapti
 == Handling Selection and Clicks
 
 [classname]#Tree# supports single selection mode, you can use [methodname]#asSingleSelect()# to access the selection
-object, which supports selection listeners and data binding. For more details, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
+object, which supports selection listeners and data binding. For more details, see link:<<../datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
 The [classname]#Tree# also supports the shortcut method [methodname]#addSelectionListener()#.
 
 [classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked.
diff --git a/documentation/components/components-treegrid.asciidoc b/documentation/components/components-treegrid.asciidoc
index d6392f3339..90346e57bb 100644
--- a/documentation/components/components-treegrid.asciidoc
+++ b/documentation/components/components-treegrid.asciidoc
@@ -19,7 +19,7 @@ endif::web[]
 It is otherwise identical to the [classname]#Grid# component, but it adds the possibility to show
 hierarchical data, allowing the user to expand and collapse nodes to show or hide data.
 
-See the documentation for <<dummy/../../../framework/components/components-grid.asciidoc#components.grid,"Grid">> for all the shared features between [classname]#Grid# and [classname]#TreeGrid#.
+See the documentation for <<components-grid.asciidoc#components.grid,"Grid">> for all the shared features between [classname]#Grid# and [classname]#TreeGrid#.
 
 [[figure.components.treegrid.basic]]
 .A [classname]#TreeGrid#
@@ -29,7 +29,7 @@ image::img/tree-grid-basic.png[width=70%, scaledwidth=100%]
 == Binding to Data
 
 [classname]#TreeGrid# is used by binding it to a hierarchical data provider. The data provider can be based on in-memory or back end data. For in-memory data, the [classname]#TreeDataProvider# can be used, and for loading data from a back end, you need to implement three methods from the [interfacename]#HierarchicalDataProvider# interface. Usage of both data providers is described in
-<<dummy/../../../framework/datamodel/datamodel-hierarchical.asciidoc#datamodel.hierarchical,"Hierarchical Data">>.
+<<../datamodel/datamodel-hierarchical.asciidoc#datamodel.hierarchical,"Hierarchical Data">>.
 
 Populating a [classname]#TreeGrid# with in-memory data can be done as follows
 
diff --git a/documentation/components/components-twincolselect.asciidoc b/documentation/components/components-twincolselect.asciidoc
index ac2df4b788..67dd9cc557 100644
--- a/documentation/components/components-twincolselect.asciidoc
+++ b/documentation/components/components-twincolselect.asciidoc
@@ -65,7 +65,7 @@ Hence it will slow down significantly if used with large itemsets.
 The lazy loading feature could be implemented using two single column Grids instead.
 
 Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+<<components-selection#components.selection,"Selection
 Components">>.
 
 == CSS Style Rules