Doc: Fix Effect Composer docs

Adding sa links, fixing sidebar, fixing landing page.

Task-number: QDS-14589
Change-Id: I0e7a40dc7a6a96960f8ad87f1d645695083c8470
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>

doc/qtdesignstudio/config/style/qt5-sidebar.html

@@ -29,6 +29,7 @@
         <li><a href="qtquick-creating-ui-logic.html">Creating UI logic</a></li>
         <li><a href="quick-components.html">Components</a></li>
         <li><a href="studio-designer-developer-workflow.html">Designer-developer workflow</a></li>
+        <li><a href="effects-concept.html">Effects and shaders</a></li>
         <li><a href="studio-on-mcus.html">Qt Design Studio on MCUs</a></li>
     </ul>
 </div>
@@ -320,7 +321,9 @@
         <li><a href="rain-snow-particle-effect.html">Particle System: The rain and the snow effects</a></li>
         <li><a href="3d-scene-tutorial.html">Setting up a 3D scene</a></li>
         <li><a href="animation-tutorial.html">Timeline animation</a></li>
-        <li><a href="ai-shader-tutorial.html"></a>Using AI-generated shader code in Qt Design Studio</a></li>
+        <li><a href="ai-shader-tutorial.html">Using AI-generated shader code in Effect Composer</a></li>
+        <li><a href="effect-composer-shadertoy.html">Using a shader from Shadertoy in Effect Composer</a></li>
+        <li><a href="effect-composer-thebookofshaders.html">Using a shader from The Book of Shaders in Effect Composer</a></li>
     </ul>
 </div>
 

doc/qtdesignstudio/examples/doc/AIshadercodeTutorial.qdoc

@@ -5,7 +5,7 @@
     \page ai-shader-tutorial.html
     \ingroup gstutorials
 
-    \sa {Effect Composer}
+    \sa {Effect Composer}, {Effect Composer example}, {Working with shader code in Effect Composer}
 
     \brief Illustrates how to take AI-genetrated shader code into use in Effect Composer.
 

doc/qtdesignstudio/examples/doc/ShaderToyTutorial.qdoc

@@ -5,7 +5,7 @@
     \page effect-composer-shadertoy.html
     \ingroup gstutorials
 
-    \sa {Effect Composer}
+    \sa {Effect Composer}, {Effect Composer example}, {Working with shader code in Effect Composer}
 
     \title Using a shader from Shadertoy in Effect Composer
 

doc/qtdesignstudio/examples/doc/TheBookOfShadersTutorial.qdoc

@@ -5,7 +5,7 @@
     \page effect-composer-thebookofshaders.html
     \ingroup gstutorials
 
-    \sa {Effect Composer}
+    \sa {Effect Composer}, {Effect Composer example}, {Working with shader code in Effect Composer}
 
     \title Using a shader from The Book of Shaders in Effect Composer
 
@@ -84,7 +84,7 @@
         \li In \QDS, open the \uicontrol {Effect Composer} view.
         \li From the \uicontrol {Add Effect} dropdown menu (1), select
             \uicontrol {Custom} (2). The custom effect node is an empty effect node.
-
+    \endlist
     \image add-custom-effect-node.webp Adding a custom effect to an effect composition.
 
     \section1 Copying the shader code to Shaders Code Editor
@@ -134,7 +134,7 @@
                 \li \c gl_FragCoord to \c fragCoord
                 \li \c gl_FragColor to \c fragColor
             \endlist
-
+    \endlist
     The code in \uicontrol{Shaders Code Editor} should now look like this:
             \code
                 // 2D Random

doc/qtdesignstudio/examples/doc/effectComposerExample.qdoc

@@ -5,6 +5,11 @@
     \page effect-composer-example.html
     \ingroup studioexamples
 
+    \sa {Effect Composer}, {Using a shader from Shadertoy in Effect Composer},
+    {Using a shader from The Book of Shaders in Effect Composer},
+    {Using AI-generated shader code in Effect Composer},
+    {Working with shader code in Effect Composer}
+
     \title Effect Composer example
     \brief Illustrates how to work with the Effect Composer effects.
 

doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc

@@ -6,6 +6,11 @@
 
     \title Working with shader code in Effect Composer
 
+    \sa {Effect Composer}, {Effect Composer example},
+    {Using a shader from Shadertoy in Effect Composer},
+    {Using a shader from The Book of Shaders in Effect Composer},
+    {Using AI-generated shader code in Effect Composer}
+
     This page contains tips, tricks, and best practices for working with shader code in the
     \uicontrol {Effect Composer} view.
 

doc/qtdesignstudio/src/effects-concept.qdoc

@@ -6,6 +6,11 @@
     \previouspage
     \nextpage
 
+    \sa {Effect Composer}, {Effect Composer example},
+    {Using a shader from Shadertoy in Effect Composer},
+    {Using a shader from The Book of Shaders in Effect Composer},
+    {Using AI-generated shader code in Effect Composer}
+
     \title Effects and shaders in \QDS
 
     \brief Effects in \QDS.
@@ -41,14 +46,14 @@ To get started with Effect Composer, see the following documentation:
     \li \l {Effect Composer}
     \li Learn how to work with Effect Composer.
   \row
-    \li \l {Effect Composer example}{Example: The Effect Composer Exampler}
+    \li \l {Effect Composer example}{Example: The Effect Composer Example}
     \li Download and explore this example to learn how you can create, add and control effects.
   \row
     \li \l {Using a shader from Shadertoy in Effect Composer}{Tutorial: Using a shader from Shadertoy in Effect Composer}
-    \li A step-by-step guide describing how to create a shader in ShaderToy and use it in \QDS.
+    \li A step-by-step guide describing how to copy a shader from ShaderToy and use it in \QDS.
   \row
     \li \l {Using a shader from The Book of Shaders in Effect Composer}{Tutorial: Use a shader from Book of Shaders}
-    \li A step-by-step guide describing how to use a shader from Book of Shaders and use it in \QDS.
+    \li A step-by-step guide describing how to copy a shader from Book of Shaders and use it in \QDS.
   \row
     \li \l {Using AI-generated shader code in Effect Composer}{Tutorial: Using AI-generated shader code in Effect Composer}
     \li A step-by-step guide describing how to use chatGPT to create a shader and use it in \QDS.
@@ -56,7 +61,7 @@ To get started with Effect Composer, see the following documentation:
     \li \l {Working with shader code in Effect Composer}{Best practices}
     \li Tips, tricks, and best practices on how to work with shader code in \QDS.
   \row
-    \li \l{https://wiki.qt.io/QtDesignStudio/EffectComposer}{Known Issues}
+    \li \l{https://wiki.qt.io/QtDesignStudio/EffectComposer}{Known issues}
     \li Known issues and work arounds.
 \endtable
 

doc/qtdesignstudio/src/qtdesignstudio.qdoc

@@ -72,6 +72,7 @@
                         \li \l{Introduction to animation techniques}{Animation techniques}
                         \li \l{Asset creation with other tools}{Creating assets with other tools}
                         \li \l{Creating UI logic}
+                        \li \l{Effects and shaders in \QDS}{Effects and shaders}
                         \li \l{Using components}{Components}
                         \li \l{Designer-developer workflow}
                         \li \l{Qt Design Studio on MCUs}

doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc

@@ -6,6 +6,11 @@
     \previouspage studio-qt-insight.html
     \nextpage studio-model-editor.html
 
+    \sa {Effect Composer example}, {Using a shader from Shadertoy in Effect Composer},
+    {Using a shader from The Book of Shaders in Effect Composer},
+    {Using AI-generated shader code in Effect Composer},
+    {Working with shader code in Effect Composer}
+
     \ingroup studio-views
 
     \title Effect Composer
@@ -154,7 +159,7 @@
     can use as a part of your effect composition. For some sources, such as
     \e {The Book of Shaders}, you may have to re-name the uniforms to use them in the \QDS
     \uicontrol {Effect Composer}. For more information, see
-    \l {Working with Shadercode in Effect Composer}.
+    \l {Working with shader code in Effect Composer}.
 
     \section2 Using shaders from Shadertoy
 
@@ -195,6 +200,7 @@
         \li Copy the code inside \c {void main} and paste it below the \c {@main} tag, inside {}.
         \li Edit the uniforms of the original shader code in \uicontrol {Shaders Code Editor} as
         described in \l {External resources}{Working with Shadercode in Effect Composer}.
+    \endlist
 
     For more information, see \l{Using a shader from The Book of Shaders in Effect Composer}.
 
@@ -303,5 +309,4 @@
             in the first step as \uicontrol {Source Item}.
     \endlist
 
-    \sa {Effect Composer example}
 */