move tutorials images

doc/generate-website.md

@@ -75,7 +75,8 @@ cp doxygen-awesome.css ~/dev/qskinny/doc/
 First copy the generated files from above to the website repo:
 
 ```
-cp -r api ~/dev/qskinny-website/docs/
+cp -r html ~/dev/qskinny-website/docs/
+cp -r images ~/dev/qskinny-website/docs/
 ```
 
 Then test the website locally:

doc/tutorials/01-What-is-QSkinny.md

@@ -16,4 +16,4 @@ into the Qt architecture is depicted below:
 
 **QSkinny sits on top of QtQuick, while QML is optional**
 
-![QSkinny architecture](/doc/tutorials/images/architecture-simple.png)
+![QSkinny architecture](/doc/images/tutorials/architecture-simple.png)

doc/tutorials/03-writing-your-first-application.md

@@ -145,7 +145,7 @@ int main( int argc, char* argv[] )
 
 Now the app is displaying the two buttons:
 
-![An app showing two buttons](/doc/tutorials/images/writing-first-application.png)
+![An app showing two buttons](/doc/images/tutorials/writing-first-application.png)
 
 That’s it; you just created a QSkinny application from scratch.
 

doc/tutorials/04-Layouts.md

@@ -22,7 +22,7 @@ margins:
 
 **implicit horizontal size hint of a button**
 
-![implicit horizontal size hint of a button](/doc/tutorials/images/size-hints-calculation.png)
+![implicit horizontal size hint of a button](/doc/images/tutorials/size-hints-calculation.png)
 
 The implicit width of a composited UI element containing a
 graphic on the left and a text on the right would be the sum of the elements’
@@ -70,7 +70,7 @@ label1->setBackgroundColor( Qt::magenta );
 
 **control without explicit size hint**
 
-![Image without explicit size hint](/doc/tutorials/images/size-hints-1.png)
+![Image without explicit size hint](/doc/images/tutorials/size-hints-1.png)
 
 If we set an explicit size hint of 150x60 pixels ourselves for the
 preferred size, the control will be rendered differently:
@@ -81,7 +81,7 @@ label1->setExplicitSizeHint( Qt::PreferredSize, { 150, 60 } );
 
 **control with explicit size hint**
 
-![Image with explicit size hint](/doc/tutorials/images/size-hints-2.png)
+![Image with explicit size hint](/doc/images/tutorials/size-hints-2.png)
 
 When dealing with standard controls or layouts, the size hints don’t
 need to be specified explicitly, as it can be deduced from its standard
@@ -105,48 +105,21 @@ The size policies of QSkinny correspond to the
 *https://doc.qt.io/qt-5/qsizepolicy.html#Policy-enum[size policies from
 QtWidgets]*:
 
-|=======================================================================
+|`QskSizePolicy::Policy` | description |
-|`QskSizePolicy::Policy` |description
+| ---------------------- | ----------- |
-|`Fixed` |The control has a fixed size and can neither grow nor shrink.
+|`Fixed` |The control has a fixed size and can neither grow nor shrink. |
-
+|`Minimum` |The control cannot shrink beyond its minimum size, but it can grow if needed. |
-|`Minimum` |The control cannot shrink beyond its minimum size, but it
+|`Maximum` |The control cannot grow beyond its maximum size, but it can shrink if needed. |
-can grow if needed.
+|`Preferred` |The control can grow and shrink, but it should be of the size given by `sizeHint()`. |
-
+|`MinimumExpanding` |The control cannot shrink beyond its minimum size, but it can grow and should get as much space as possible. |
-|`Maximum` |The control cannot grow beyond its maximum size, but it can
+|`Expanding` |The control can shrink and grow, and it should get as much space as possible. |
-shrink if needed.
+|`Ignored` |The `sizeHint()` is ignored, and the control will get as much space as possible. |
-
+|`Constrained` |The size of the control depends on a constraint, i.e. the width is depending on the height or vice versa. For this policy and the other `Constrained*` ones below, `QskControl::widthForHeight()` or `QskControl::heightForWidth()` will be queried. |
-|`Preferred` |The control can grow and shrink, but it should be of the
+|`ConstrainedMinimum` |The size of the control depends on a constraint, but it can grow if needed. |
-size given by `sizeHint()`.
+|`ConstrainedMaximum` |The size of the control depends on a constraint, but it can shrink if needed. |
-
+|`ConstrainedPreferred` |The size of the control depends on a constraint, but it can grow and srhink if needed. |
-|`MinimumExpanding` |The control cannot shrink beyond its minimum size,
+|`ConstrainedMinimumExpanding` |The size of the control depends on a constraint, but it can grow and should get as much space as possible. |
-but it can grow and should get as much space as possible.
+|`ConstrainedExpanding` |The size of the control depends on a constraint, and it should get as much space as possible. |
-
-|`Expanding` |The control can shrink and grow, and it should get as much
-space as possible.
-
-|`Ignored` |The `sizeHint()` is ignored, and the control will get as
-much space as possible.
-
-|`Constrained` |The size of the control depends on a constraint,
-i.e. the width is depending on the height or vice versa. For this policy
-and the other `Constrained*` ones below, `QskControl::widthForHeight()`
-or `QskControl::heightForWidth()` will be queried.
-
-|`ConstrainedMinimum` |The size of the control depends on a constraint,
-but it can grow if needed.
-
-|`ConstrainedMaximum` |The size of the control depends on a constraint,
-but it can shrink if needed.
-
-|`ConstrainedPreferred` |The size of the control depends on a
-constraint, but it can grow and srhink if needed.
-
-|`ConstrainedMinimumExpanding` |The size of the control depends on a
-constraint, but it can grow and should get as much space as possible.
-
-|`ConstrainedExpanding` |The size of the control depends on a
-constraint, and it should get as much space as possible.
-|=======================================================================
 
 All the `Constrained*` policies correspond to Qt’s
 [QSizePolicy::hasHeightForWidth()](https://doc.qt.io/qt-5/qsizepolicy.html#hasHeightForWidth)
@@ -180,7 +153,7 @@ margins:
 
 **Size policies with preferred size**
 
-![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-1.png)
+![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-1.png)
 
 After growing the window horizontally, the button with the Fixed
 horizontal size policy keeps its width, while the button with the
@@ -188,7 +161,7 @@ Minimum policy will grow:
 
 **Size policies when increasing window width**
 
-![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-2.png)
+![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-2.png)
 
 When shrinking the window below its original size, both buttons stay
 with their width: The one on the left because of its `Fixed` size policy,
@@ -197,7 +170,7 @@ due to the `Minimum` size policy.
 
 **Size policies when shrinking window width**
 
-![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-3.png)
+![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-3.png)
 
 If we change the policy of the right button to `Preferred`, it will shrink
 below its original size (even though the text is too wide now):
@@ -209,7 +182,7 @@ label2->setText( "size policy: preferred" );
 
 **Size policies when changing to preferred size policy**
 
-![Fixed vs. Minimum size policy](/doc/tutorials/images/size-policies-horizontal-minimum-4.png)
+![Fixed vs. Minimum size policy](/doc/images/tutorials/size-policies-horizontal-minimum-4.png)
 
 ### Types of layouts
 
@@ -238,7 +211,7 @@ horizontalBox->addItem( label3 );
 
 **Horizontal layout**
 
-![Horizontal layout](/doc/tutorials/images/layout-horizontal.png)
+![Horizontal layout](/doc/images/tutorials/layout-horizontal.png)
 
 ```
 auto verticalBox = new QskLinearBox( Qt::Vertical );
@@ -256,7 +229,7 @@ verticalBox->addItem( label3 );
 
 **Vertical layout**
 
-![Vertical layout](/doc/tutorials/images/layout-vertical.png)
+![Vertical layout](/doc/images/tutorials/layout-vertical.png)
 
 #### Grid layouts (QskGridBox)
 
@@ -290,7 +263,7 @@ gridBox->addItem( label7, 2, 1, 1, 2 );
 
 **Grid layout**
 
-![Grid layout](/doc/tutorials/images/layout-grid.png)
+![Grid layout](/doc/images/tutorials/layout-grid.png)
 
 #### Stack layouts (QskStackBox)
 
@@ -319,12 +292,12 @@ stackBox->setCurrentIndex( 2 );
 
 **Stack layout (symbolized)**
 
-![Stack layout](/doc/tutorials/images/layout-stack.png)
+![Stack layout](/doc/images/tutorials/layout-stack.png)
 
 In this example, "control 3" is stacked on top of the blue and the
 cyan control. Controls in a stacked layout can be of different sizes.
 
-**📌 NOTE**\
+**NOTE**:
 The image above is just for illustrating purposes. In practice
 the topmost control ("control 3" here) is completely covering the ones
 below it.
@@ -365,13 +338,13 @@ are rendered with their preferred size:
 
 **Stretch factors with preferred size**
 
-![Stretch factors preferred size](/doc/tutorials/images/stretch-factors-1.png)
+![Stretch factors preferred size](/doc/images/tutorials/stretch-factors-1.png)
 
 When the layout gets more width, the stretch factors come into play:
 
 **A stretch factor of 1:2**
 
-![Stretch factors increasing width](/doc/tutorials/images/stretch-factors-2.png)
+![Stretch factors increasing width](/doc/images/tutorials/stretch-factors-2.png)
 
 No matter how wide the layout is, the aspect ratio of 1:2 will always be
 kept, meaning that the label on the left will get 33% of the space, and
@@ -379,7 +352,7 @@ the label on the right 67%:
 
 **A stretch factor of 1:2 with different widths**
 
-![Stretch factors even more width](/doc/tutorials/images/stretch-factors-3.png)
+![Stretch factors even more width](/doc/images/tutorials/stretch-factors-3.png)
 
 Stretch factors in QSkinny are the same as in the Qt Graphics View
 Framework, see
@@ -394,7 +367,7 @@ on the left:
 
 **A UI with nested layouts**
 
-![Nested layouts](/doc/tutorials/images/nesting-layouts.png)
+![Nested layouts](/doc/images/tutorials/nesting-layouts.png)
 
 The code to produce the above UI could look like this (setting colors
 etc. omitted for brevity):
@@ -430,7 +403,7 @@ The following diagram makes the layouts visible:
 
 **The layout structure of the UI**
 
-![Nested layouts architecture](/doc/tutorials/images/nesting-layouts-architecture.png)
+![Nested layouts architecture](/doc/images/tutorials/nesting-layouts-architecture.png)
 
 ### Anchoring in QSkinny
 

doc/tutorials/05-Skins.md

@@ -9,7 +9,7 @@ itself as well as read the skin hints from the skin:
 
 **Skinlets query the control and the skin**
 
-![Styling controls](/doc/tutorials/images/skins-1.png)
+![Styling controls](/doc/images/tutorials/skins-1.png)
 
 For instance, a button skinlet will read the margins from the skin and
 the text to render from the button.
@@ -39,11 +39,11 @@ often found in mobile devices.
 
 **desktop style button**
 
-![desktop style button](/doc/tutorials/images/skinlets-button-1.png)
+![desktop style button](/doc/images/tutorials/skinlets-button-1.png)
 
 **flat button**
 
-![flat button](/doc/tutorials/images/skinlets-button-2.png)
+![flat button](/doc/images/tutorials/skinlets-button-2.png)
 
 ### Skin hints
 
@@ -81,7 +81,7 @@ public:
 
 **A button styled with skin hints**
 
-![Button with skin hints](/doc/tutorials/images/skin-hints.png)
+![Button with skin hints](/doc/images/tutorials/skin-hints.png)
 
 When writing a new skin, a developer needs to know which hints to set
 for which control. This usually depends on the control itself; however,
@@ -149,11 +149,11 @@ public:
 
 **button in normal state**
 
-![button in normal state](/doc/tutorials/images/skin-hints-states-1.png)
+![button in normal state](/doc/images/tutorials/skin-hints-states-1.png)
 
 **button in hovered state**
 
-![button in hovered state](/doc/tutorials/images/skin-hints-states-2.png)
+![button in hovered state](/doc/images/tutorials/skin-hints-states-2.png)
 
 #### Local skin hints
 
@@ -177,7 +177,7 @@ diagram now looks like this:
 
 **Skinlets can also read from local skinlets and animators**
 
-![Animators and local skin hints](/doc/tutorials/images/skins-2.png)
+![Animators and local skin hints](/doc/images/tutorials/skins-2.png)
 
 ### Skinlets
 
@@ -211,7 +211,7 @@ diagram looks like this:
 
 **There is one skinlet for each atomic control**
 
-![Animators and local skin hints](/doc/tutorials/images/skins-3.png)
+![Animators and local skin hints](/doc/images/tutorials/skins-3.png)
 
 ### Skin factories and switching between skins
 
@@ -293,8 +293,8 @@ instances:
 
 **button in `MySkin` (as above)**
 
-![button in normal state](/doc/tutorials/images/skin-hints-states-1.png)
+![button in normal state](/doc/images/tutorials/skin-hints-states-1.png)
 
 **button in `OtherSkin`**
 
-![Styling controls](/doc/tutorials/images/skin-factory.png)
+![Styling controls](/doc/images/tutorials/skin-factory.png)

doc/tutorials/06-scalable-graphics.md

@@ -27,18 +27,18 @@ label2->setSizePolicy( QskSizePolicy::ConstrainedPreferred, QskSizePolicy::Expan
 
 **graphics with preferred size**
 
-![Scalable graphics default](/doc/tutorials/images/scalable-graphics-1.png)
+![Scalable graphics default](/doc/images/tutorials/scalable-graphics-1.png)
 
 When resizing the window, the graphics will scale according to the size
 available in the layout:
 
 **graphics bounded by width**
 
-![Scalable graphics bounded by width](/doc/tutorials/images/scalable-graphics-2.png)
+![Scalable graphics bounded by width](/doc/images/tutorials/scalable-graphics-2.png)
 
 **graphics bounded by height**
 
-![Scalable graphics bounded by height](/doc/tutorials/images/scalable-graphics-3.png)
+![Scalable graphics bounded by height](/doc/images/tutorials/scalable-graphics-3.png)
 
 Since we set the horizontal size policy of the graphics to
 `ConstrainedPreferred`, the scaling is done through QskGraphic’s

doc/tutorials/08-qskinny-and-qml.md

@@ -49,7 +49,7 @@ The full Buttons example is depicted below.
 
 **The buttons example shows how to mix QSkinny and QML**
 
-![Buttons example](/doc/tutorials/images/buttons-example.png)
+![Buttons example](/doc/images/tutorials/buttons-example.png)
 
 For more information on using C++ classes from QML, see the article about exposing attributes of {cpp} types to QML in the
 [Qt documentation](https://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html).

doc/tutorials/09-writing-own-controls.md

@@ -30,7 +30,7 @@ public:
 
 **A subclassed control with local skin hints**
 
-![Subclassing existing controls](/doc/tutorials/images/subclassing-existing-controls.png)
+![Subclassing existing controls](/doc/images/tutorials/subclassing-existing-controls.png)
 
 Then there is no need to set the margins and background color for every
 instance of the custom text label.
@@ -87,7 +87,7 @@ public:
 
 **A subclassed control with skin hints defined in the skin**
 
-![Subclassing existing controls](/doc/tutorials/images/subclassing-existing-controls.png)
+![Subclassing existing controls](/doc/images/tutorials/subclassing-existing-controls.png)
 
 The styling described above has the same effect as in the simpler
 example, but now the `TextLabel` control can be given a different style
@@ -142,7 +142,7 @@ auto* textAndGraphic = new TextAndGraphic( "Text", "cloud" );
 
 **A composited control**
 
-![Compositing controls](/doc/tutorials/images/compositing-controls.png)
+![Compositing controls](/doc/images/tutorials/compositing-controls.png)
 
 ### Writing controls with a skinlet
 
@@ -300,4 +300,4 @@ colors etc. can be written with less code.
 
 **A class with an own skinlet**
 
-![Control with skinlet](/doc/tutorials/images/control-with-skinlet.png)
+![Control with skinlet](/doc/images/tutorials/control-with-skinlet.png)

doc/tutorials/10-scene-graph.md

@@ -21,7 +21,7 @@ For this example, the scene graph will contain the following nodes:
 
 **Scene graph representation of a button**
 
-![Scene graph nodes for a button](/doc/tutorials/images/skins-sg-1.png)
+![Scene graph nodes for a button](/doc/images/tutorials/skins-sg-1.png)
 
 The top two nodes (root and Quick root item) are created for every
 QtQuick application. The button itself consists of 5 nodes in our case:
@@ -54,7 +54,7 @@ Then the scene graph has the following structure:
 
 **Scene graph representation of a button inside a box**
 
-![Scene graph nodes for a button in a box](/doc/tutorials/images/skins-sg-2.png)
+![Scene graph nodes for a button in a box](/doc/images/tutorials/skins-sg-2.png)
 
 Here we can see that since the box is a parent of the button, the `box
 node` is also a parent of the `button node` in the scene graph. Also, the

doc/tutorials/11-How-to-build-for-Wasm.md

@@ -39,4 +39,4 @@ Qt creates the HTML wrappers automatically, so there is not much to do except le
 
 **The IOT dashboard example in a browser**
 
-![The IOT dashboard example in a browser](/doc/tutorials/images/iotdashboard-wasm.png)
+![The IOT dashboard example in a browser](/doc/images/tutorials/iotdashboard-wasm.png)