From 5d4a586866fec0032f86f09585c4a41eb8484eab Mon Sep 17 00:00:00 2001
From: Lina Wolf <48202465+linawolf@users.noreply.github.com>
Date: Sat, 5 Oct 2024 07:36:45 +0200
Subject: [PATCH] =?UTF-8?q?[FEATURE]=20Use=20the=20new=20bootstrap=205=20t?=
 =?UTF-8?q?emplate=20from=20the=20extension=20t3docs/=E2=80=A6=20(#177)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [FEATURE] Use the new bootstrap 5 template from the extension t3docs/site-package

Releases: main

* Demonstrate the current step in a branch

Releases: main

* Replace wrong codesnippet
---
 .../CodeSnippets/Fluid/Header.rst.txt         |  29 +-
 .../CodeSnippets/Fluid/Layout.rst.txt         |  16 +-
 Documentation/CodeSnippets/Fluid/Menu.rst.txt |   6 +-
 .../Fluid/PartialJumbotron.rst.txt            |  17 +-
 .../CodeSnippets/Fluid/StaticHtml.rst.txt     |  56 ---
 .../Fluid/TemplateDefault.rst.txt             |  13 +-
 .../Fluid/TemplateTwoColumns.rst.txt          |  27 --
 .../TypoScript/Part2CssFileInclusion.rst.txt  |  27 --
 Documentation/CodeSnippets/codesnippets.php   |  18 +-
 Documentation/FluidTemplates/Index.rst        | 356 +++++++++---------
 .../_codesnippets/_DefaultWithPartials.html   |  13 +
 .../_codesnippets/_DefaultWithSection.html    |  17 +
 .../_codesnippets/_DefaultWithoutHead.html    |  52 +++
 .../_codesnippets/_Step1Default.html          |  43 ---
 .../_codesnippets/_Step2Default.html          |  17 -
 .../_codesnippets/_SubpageWithSection.html    |  30 ++
 .../FluidTemplates/_codesnippets/_assets.diff |   9 +
 .../_codesnippets/_include_layout.diff        |  13 +
 .../_move_content_to_section.diff             |  22 ++
 .../_codesnippets/_remove_head.diff           |  16 +
 .../_codesnippets/_remove_header.diff         |  26 ++
 .../_remove_menu_from_header.diff             |  22 ++
 .../_codesnippets/_replace_images.diff        |   2 +
 .../TypoScriptConfiguration/Index.rst         |  29 +-
 24 files changed, 449 insertions(+), 427 deletions(-)
 delete mode 100644 Documentation/CodeSnippets/Fluid/StaticHtml.rst.txt
 delete mode 100644 Documentation/CodeSnippets/Fluid/TemplateTwoColumns.rst.txt
 delete mode 100644 Documentation/CodeSnippets/TypoScript/Part2CssFileInclusion.rst.txt
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_DefaultWithoutHead.html
 delete mode 100644 Documentation/FluidTemplates/_codesnippets/_Step1Default.html
 delete mode 100644 Documentation/FluidTemplates/_codesnippets/_Step2Default.html
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_assets.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_include_layout.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_move_content_to_section.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_remove_head.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_remove_header.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_remove_menu_from_header.diff
 create mode 100644 Documentation/FluidTemplates/_codesnippets/_replace_images.diff

diff --git a/Documentation/CodeSnippets/Fluid/Header.rst.txt b/Documentation/CodeSnippets/Fluid/Header.rst.txt
index f6ccbd8..54ec50a 100644
--- a/Documentation/CodeSnippets/Fluid/Header.rst.txt
+++ b/Documentation/CodeSnippets/Fluid/Header.rst.txt
@@ -5,21 +5,18 @@
     :caption: EXT:site_package/Resources/Private/Templates/Partials/Header.html
     :linenos:
 
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-        <a class="navbar-brand" href="#">
-            <f:image src="{settings.mySitepackage.logo}" alt="{settings.mySitepackage.logo-alt}"/>
-        </a>
-        <button class="navbar-toggler"
-                type="button"
-                data-toggle="collapse"
-                data-target="#navbarsExampleDefault"
-                aria-controls="navbarsExampleDefault"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-        >
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-            <f:render partial="Navigation/Menu.html" arguments="{_all}"/>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
+        <div class="container">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuToggler" aria-controls="menuToggler" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="menuToggler">
+                <f:link.page pageUid="{site.rootPageId}" class="navbar-brand">
+                    <f:image src="{settings.mySitepackage.logo}" alt="{settings.mySitepackage.logo-alt}" class="pe-3" />
+                    {site.configuration.websiteTitle}
+                </f:link.page>
+
+                <f:render partial="Navigation/Menu" arguments="{_all}"/>
+            </div>
         </div>
     </nav>
diff --git a/Documentation/CodeSnippets/Fluid/Layout.rst.txt b/Documentation/CodeSnippets/Fluid/Layout.rst.txt
index 9b71545..8fbf7b1 100644
--- a/Documentation/CodeSnippets/Fluid/Layout.rst.txt
+++ b/Documentation/CodeSnippets/Fluid/Layout.rst.txt
@@ -1,10 +1,16 @@
 ..  Generated by https://github.com/TYPO3-Documentation/t3docs-codesnippets
-..  Extracted from EXT:site_package/Resources/Private/Templates/Layouts/Default.html
+..  Extracted from EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
 
 ..  code-block:: html
-    :caption: EXT:site_package/Resources/Private/Templates/Layouts/Default.html
+    :caption: EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
     :linenos:
 
-    <f:render partial="Header" arguments="{_all}"/>
-    <f:render partial="Navigation/Breadcrumb" arguments="{_all}"/>
-    <f:render section="Main"/>
+    <f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+    <f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+    <main>
+        <f:render partial="Header" arguments="{_all}"/>
+        <f:render section="Main"/>
+        <f:render partial="Footer" arguments="{_all}"/>
+    </main>
+    <f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+    <f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
diff --git a/Documentation/CodeSnippets/Fluid/Menu.rst.txt b/Documentation/CodeSnippets/Fluid/Menu.rst.txt
index fd6411b..71ba24d 100644
--- a/Documentation/CodeSnippets/Fluid/Menu.rst.txt
+++ b/Documentation/CodeSnippets/Fluid/Menu.rst.txt
@@ -5,10 +5,10 @@
     :caption: EXT:site_package/Resources/Private/Templates/Partials/Navigation/Menu.html
     :linenos:
 
-    <ul class="navbar-nav mr-auto">
+    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <f:for each="{menu}" as="menuItem">
-            <li class="nav-item {f:if(condition: menuItem.active, then:'active')}">
-                <a class="nav-link"
+            <li class="nav-item">
+                <a class="nav-link {f:if(condition: menuItem.active, then:'active')}"
                    href="{menuItem.link}"
                    target="{menuItem.target}"
                    title="{menuItem.title}"
diff --git a/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt b/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt
index f141fc7..9c4e071 100644
--- a/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt
+++ b/Documentation/CodeSnippets/Fluid/PartialJumbotron.rst.txt
@@ -5,11 +5,14 @@
     :caption: EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html
     :linenos:
 
-    <div class="jumbotron">
-        <f:for each="{records}" as="record">
-            <div class="container">
-                <h1 class="display-3">{record.header}</h1>
-                <f:format.html>{record.bodytext}</f:format.html>
+    <f:for each="{records}" as="record">
+        <div class="container">
+            <div class="p-5 mb-4 bg-body-tertiary">
+                <div class="container-fluid py-5">
+                    <h1 class="display-5 fw-bold">{record.header}</h1>
+                    <p class="col-md-8 fs-4"><f:format.stripTags>{record.bodytext}</f:format.stripTags></p>
+                    <button class="btn btn-dark btn-lg" role="button" href="#" id="exampleButton">Example button</button>
+                </div>
             </div>
-        </f:for>
-    </div>
+        </div>
+    </f:for>
diff --git a/Documentation/CodeSnippets/Fluid/StaticHtml.rst.txt b/Documentation/CodeSnippets/Fluid/StaticHtml.rst.txt
deleted file mode 100644
index baeadb4..0000000
--- a/Documentation/CodeSnippets/Fluid/StaticHtml.rst.txt
+++ /dev/null
@@ -1,56 +0,0 @@
-.. Manual code snippet
-
-.. code-block:: html
-   :caption: EXT:site_package/Resources/Public/StaticTemplate/index.html
-   :linenos:
-
-   <html>
-       <head>
-           <!--...-->
-       </head>
-       <body>
-           <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-               <a class="navbar-brand" href="#">Navbar</a>
-               <button aria-controls="navbarsExampleDefault"
-                       aria-expanded="false"
-                       aria-label="Toggle navigation"
-                       class="navbar-toggler"
-                       data-target="#navbarsExampleDefault"
-                       data-toggle="collapse"
-                       type="button"
-               >
-                   <span class="navbar-toggler-icon"></span>
-               </button>
-               <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-                   <ul class="navbar-nav mr-auto">
-                       <li class="nav-item active">
-                           <a class="nav-link" href="#">
-                               Home
-                           </a>
-                       </li>
-                   </ul>
-               </div>
-           </nav>
-
-           <main role="main">
-               <div class="jumbotron">
-                   <div class="container">
-                       <h1 class="display-3">Hello, world!</h1>
-                       <p> ... </p>
-                   </div>
-               </div>
-               <div class="container">
-                   <div class="row">
-                       <div class="col-12 col-md-6">
-                           <h2>Main Content</h2>
-                           <p> ... </p>
-                       </div>
-                       <div class="col-12 col-md-4">
-                           <h2>Sidebar Content</h2>
-                           <p> ... </p>
-                       </div>
-                   </div>
-               </div>
-           </main>
-       </body>
-   </html>
diff --git a/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt b/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt
index 6a65ed9..1900bd4 100644
--- a/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt
+++ b/Documentation/CodeSnippets/Fluid/TemplateDefault.rst.txt
@@ -5,16 +5,13 @@
     :caption: EXT:site_package/Resources/Private/Templates/Pages/Default.html
     :linenos:
 
-    <f:layout name="Default"/>
+    <f:layout name="Layout"/>
     <f:section name="Main">
 
-        <main role="main">
-            <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
+        <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
 
-            <div class="container">
-                <f:render partial="Content" arguments="{records: content.main.records}"/>
-            </div>
-
-        </main>
+        <div class="container">
+            <f:render partial="Content" arguments="{records: content.main.records}"/>
+        </div>
 
     </f:section>
diff --git a/Documentation/CodeSnippets/Fluid/TemplateTwoColumns.rst.txt b/Documentation/CodeSnippets/Fluid/TemplateTwoColumns.rst.txt
deleted file mode 100644
index 20aa1c9..0000000
--- a/Documentation/CodeSnippets/Fluid/TemplateTwoColumns.rst.txt
+++ /dev/null
@@ -1,27 +0,0 @@
-..  Generated by https://github.com/TYPO3-Documentation/t3docs-codesnippets
-..  Extracted from EXT:site_package/Resources/Private/Templates/Pages/TwoColumns.html
-
-..  code-block:: html
-    :caption: EXT:site_package/Resources/Private/Templates/Pages/TwoColumns.html
-    :linenos:
-
-    <f:layout name="Default"/>
-    <f:section name="Main">
-
-        <main role="main">
-            <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
-
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-8">
-                        <f:render partial="Content" arguments="{records: content.main.records}"/>
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <f:render partial="Content" arguments="{records: content.sidebar.records}"/>
-                    </div>
-                </div>
-            </div>
-
-        </main>
-
-    </f:section>
diff --git a/Documentation/CodeSnippets/TypoScript/Part2CssFileInclusion.rst.txt b/Documentation/CodeSnippets/TypoScript/Part2CssFileInclusion.rst.txt
deleted file mode 100644
index 2fb8238..0000000
--- a/Documentation/CodeSnippets/TypoScript/Part2CssFileInclusion.rst.txt
+++ /dev/null
@@ -1,27 +0,0 @@
-..  Generated by https://github.com/TYPO3-Documentation/t3docs-codesnippets
-..  Extracted from EXT:site_package/Configuration/TypoScript/Setup/Part2CssFileInclusion.typoscript
-
-..  code-block:: typoscript
-    :caption: EXT:site_package/Configuration/TypoScript/Setup/Part2CssFileInclusion.typoscript
-    :linenos:
-
-    page {
-      shortcutIcon = {$mySitepackage.favicon}
-      // Part 2: CSS file inclusion
-      includeCSS {
-        bootstrap = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
-        bootstrap.external = 1
-        website = EXT:site_package/Resources/Public/Css/website.css
-      }
-
-      // Part 3: JavaScript file inclusion
-      includeJSFooter {
-        jquery = https://code.jquery.com/jquery-3.2.1.slim.min.js
-        jquery.external = 1
-        popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
-        popper.external = 1
-        bootstrap = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
-        bootstrap.external = 1
-        website = EXT:site_package/Resources/Public/JavaScript/website.js
-      }
-    }
diff --git a/Documentation/CodeSnippets/codesnippets.php b/Documentation/CodeSnippets/codesnippets.php
index bdc86ec..262bcf4 100644
--- a/Documentation/CodeSnippets/codesnippets.php
+++ b/Documentation/CodeSnippets/codesnippets.php
@@ -25,13 +25,6 @@
         'caption' => 'EXT:site_package/Configuration/TypoScript/Setup/pageview.typoscript',
         'showLineNumbers' => true
     ],
-    [
-        'action' => 'createCodeSnippet',
-        'sourceFile' => 'EXT:site_package/Configuration/TypoScript/Setup/Part2CssFileInclusion.typoscript',
-        'targetFileName' => 'TypoScript/Part2CssFileInclusion.rst.txt',
-        'caption' => 'EXT:site_package/Configuration/TypoScript/Setup/Part2CssFileInclusion.typoscript',
-        'showLineNumbers' => true
-    ],
     [
         'action' => 'createCodeSnippet',
         'sourceFile' => 'EXT:site_package/Configuration/TypoScript/Setup/Part4GlobalConfiguration.typoscript',
@@ -96,13 +89,6 @@
         'caption' => 'EXT:site_package/Resources/Private/Templates/Pages/Default.html',
         'showLineNumbers' => true
     ],
-    [
-        'action' => 'createCodeSnippet',
-        'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Pages/TwoColumns.html',
-        'targetFileName' => 'Fluid/TemplateTwoColumns.rst.txt',
-        'caption' => 'EXT:site_package/Resources/Private/Templates/Pages/TwoColumns.html',
-        'showLineNumbers' => true
-    ],
     [
         'action' => 'createCodeSnippet',
         'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html',
@@ -112,9 +98,9 @@
     ],
     [
         'action' => 'createCodeSnippet',
-        'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Layouts/Default.html',
+        'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
         'targetFileName' => 'Fluid/Layout.rst.txt',
-        'caption' => 'EXT:site_package/Resources/Private/Templates/Layouts/Default.html',
+        'caption' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
         'showLineNumbers' => true
     ],
     [
diff --git a/Documentation/FluidTemplates/Index.rst b/Documentation/FluidTemplates/Index.rst
index c5b2e06..eb18630 100644
--- a/Documentation/FluidTemplates/Index.rst
+++ b/Documentation/FluidTemplates/Index.rst
@@ -221,6 +221,7 @@ As a result, we end up with the following structure.
                     *   Pages
 
                         *   Default.html
+                        *   Subpage.html
 
                     *   Partials
 
@@ -256,228 +257,235 @@ TypeScript for improved productivity and maintainability of your style sheets
 and JavaScript code. For the sake of simplicity, this tutorial uses the basic
 implementation of Cascading Style Sheets (CSS) and JavaScript files.
 
-
 .. _the-page-layout-file:
+.. _create_template:
+
+Create the Fluid templates
+==========================
+
+Copy the :ref:`static HTML file <design-template>` from
+:file:`Resources/Public/StaticTemplate/index.html`
+to :file:`Resources/Private/Templates/Pages/Default.html`.
 
-The page layout file Private/Templates/Pages/Default.html
-=========================================================
+Even though this file ends on `.html` it will be interpreted by the templating
+engine Fluid.
 
-As described before, a typical static :file:`index.html` file contains a :html:`<head>`
-and a :html:`<body>` section, but we only need to focus on the :html:`<body>`. Open
-file :file:`site_package/Resources/Private/Templates/Pages/Default.html` in your
-favorite text editor and remove all lines before the starting :html:`<body>` tag
-and after the closing :html:`</body>` tag. Then, remove these two lines, too. As a
-result, your :file:`Default.html` may now be empty. In that case, you can use the
-following example based on the Bootstrap Jumbotron. If using your own layout template,
-your :file:`Default.html` now contains only the HTML code inside the body.
+TYPO3 takes care of creating the outermost HTML structure of the site, including
+the `<html>` and `<head>` tags therefore they need to be removed from the
+template:
 
-So, let's assume it contains something like the following HTML code:
+..  literalinclude:: _codesnippets/_remove_head.diff
+    :caption: Resources/Private/Templates/Pages/Default.html (difference)
 
-..  literalinclude:: _codesnippets/_Step1Default.html
+The Fluid template :file:`Default.html` now contains only the HTML
+code inside the body:
+
+..  literalinclude:: _codesnippets/_DefaultWithoutHead.html
     :caption: Resources/Private/Templates/Pages/Default.html
 
-In case you have worked with the Bootstrap library before, you will quickly
-realize that this is a simplified version of the well-known template called
-`Bootstrap Jumbotron <http://getbootstrap.com/docs/4.0/examples/jumbotron/>`__.
-The first section creates a mobile responsive navigation menu (:html:`<nav> ...
-</nav>`) and the second section a container for the content (:html:`<main> ...
-</main>`). Inside the content area we see a full-width section (:html:`<div
-class="jumbotron"> ... </div>`) and a simple container with two columns.
-
-The code above misses a few lines at the end, which include some JavaScript
-files such as jQuery and Bootstrap. You are advised to remove these line from
-the :file:`Resources/Private/Templates/Pages/Default.html` file, too.
-
-.. _create_partial_jumbotron:
-
-Extract the jumbotron to a partial
-----------------------------------
-
-Due to the fact that the "jumbotron" elements could be used on several pages
-(page layouts) across the entire website, we should move this part to a
-partial. Create a new file named :file:`Jumbotron.html` inside directory
-:file:`site_package/Resources/Private/Templates/Partials/` and copy the
-appropriate six lines (starting from :html:`<div class="jumbotron">`) into it.
-Make sure the file name reads **exactly** as stated above with upper case "J"
-as the first character.
-
-Now, remove the lines from file
-:file:`Resources/Private/Templates/Pages/Default.html` and replace them with the
-following single line:
-
-..  code-block:: diff
-    :caption: EXT:site_package/Resources/Private/Templates/Pages/Default.html (Difference)
-
-     <main role="main">
-    +    <f:render partial="Jumbotron" />
-    -    <div class="jumbotron">
-    -        <div class="container">
-    -            <h1 class="display-3">Hello, world!</h1>
-    -            <p> ... </p>
-    -        </div>
-    -    </div>
-         <div class="container">
-
-Congratulations -- you just applied your first ViewHelper! HTML tags starting
-with :html:`<f:...>` are typically core ViewHelpers in Fluid. The tag
-:html:`<f:render>` is the so called
-:ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>`, which (as the name suggests)
-renders the content of a section or partial. In our case it is the latter,
-because of the :html:`partial="..."` argument. Note: do not append :file:`.html` here.
-HTML is the default format and as a convention, the ViewHelper automatically
-knows the file name and its location: :file:`Partials/Jumbotron.html`.
-
-.. _create_partial_header:
-
-Extract the header an menu into partials
-----------------------------------------
-
-Move the header part HTML and the menu contained there-in into their
-own partials:
-
-..  code-block:: diff
-    :caption: EXT:site_package/Resources/Private/Templates/Pages/Default.html (Difference)
-
-    +<f:render partial="Header.html" arguments="{_all}"/>
-    -<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-    -    ...
-    -</nav>
-
-     <main role="main">
-
-Move the static HTML of the header into a file at
-:file:`Resources/Private/Templates/Partials/Header.html`. Replace everything
-between the `<ul>...</ul>` tags by yet another f:render and move the menu,
-including the tags `<ul>...</ul>` into a file called
-:file:`Resources/Private/Templates/Partials/Navigation/Menu.html`.
-
-You should now have the following:
-
-..  include:: /CodeSnippets/Fluid/Header.rst.txt
-
-and
-
-..  code-block:: html
-    :caption: Resources/Private/Templates/Partials/Navigation/Menu.html
-
-    <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-            <a class="nav-link" href="#">
-                Home
-            </a>
-        </li>
-    </ul>
+..  _typoscript-configuration-css-js-inclusion:
+..  _assets:
 
-Chapter :ref:`Main menu <t3sitepackage:main-menu-creation>` will teach you how
-to make the menu work.
+Load assets (CSS, JavaScript)
+-----------------------------
 
-The file :file:`Default.html` should now look like this:
+Load all CSS which had been removed in step :ref:`create_template`
+using the :ref:`Asset.css ViewHelper <f:asset.css> <t3viewhelper:typo3-fluid-asset-css>`.
 
-..  literalinclude:: _codesnippets/_Step2Default.html
-    :caption: Resources/Private/Templates/Pages/Default.html
+Replace `<script>` tags in the body by using the
+:ref:`Asset.script ViewHelper <f:asset.script> <t3viewhelper:typo3-fluid-asset-script>`.
 
-At this point, we have implemented an (optional) partial and a page layout
-template. Keep the file :file:`Resources/Private/Templates/Pages/Default.html` open
-in your text editor, because we need to make one more small adjustment.
+..  literalinclude:: _codesnippets/_assets.diff
+    :caption: Resources/Private/Templates/Pages/Default.html (difference)
 
-As described above, files inside the :file:`Templates/Pages/` directory are
-page-specific layouts. An additional component allows web developers to build
-the overall *layout* (the skeleton) of the website: this is an HTML file in the
-:file:`Resources/Private/Templates/Layouts/` folder that we name
-:file:`Default.html`, too. Before we create this file, we need to tell our
-page layout template (:file:`Resources/Private/Templates/Pages/Default.html`)
-which website template it should use:
+The path to the assets will be resolved by TYPO3. `EXT:` tells TYPO3 that this is
+an extension path. `site_package` is the
+:ref:`Extension name defined in the composer.json <extension-configuration-composer>`.
 
-..  literalinclude:: _codesnippets/_Step3Default.html
-    :caption: Resources/Private/Templates/Pages/Default.html
+When you load your page and inspect it with the developer tools of your browser
+you will notice that the assets are loaded from paths like
+`/_assets/99a57ea771f379715c522bf185e9a315/Css/main.css?1728057333`. You must
+never try to use these path directly, for example as absolute paths. They can
+change at any time. Only use the `EXT:` syntax.
 
-The updated template file shows two additional lines at the top (:html:`<f:layout>`
-and :html:`<f:section>`) and an additional line at the bottom (the closing
-:html:`</f:section>` tag). The :ref:`Layout ViewHelper <f:layout> <t3viewhelper:typo3fluid-fluid-layout>`
-refers to the "Default" website layout file, which we will create in the next
-step. The :ref:`Section ViewHelper <f:section> <t3viewhelper:typo3fluid-fluid-section>`
-simply wraps the page template code we created before and therefore defines a
-section named "Main".
+When you now preview the page you will notice that the your page is loaded
+with the dummy content from the template and functioning CSS and JavaScript.
+The logo however is not found.
 
+..  _images:
 
-.. _the-website-layout-file:
+Load images in Fluid
+--------------------
 
-The website layout file in Private/Templates/Layouts/Default.html
-=================================================================
+Replace all `<img>` tags in the template with the
+:ref:`Image ViewHelper <f:image> <t3viewhelper:typo3-fluid-image>`:
 
-Now, let's implement the website layout file. First, we create a new file
-:file:`Default.html` inside the directory
-:file:`site_package/Resources/Private/Templates/Layouts/` and add the following line:
+..  literalinclude:: _codesnippets/_replace_images.diff
+    :caption: Resources/Private/Templates/Pages/Default.html (difference)
 
-.. code-block:: html
-   :caption: EXT:site_package/Resources/Private/Templates/Layouts/Default.html
+Just like happened with the CSS paths in step :ref:`assets` the path to the
+image is now replaced in the output by a path like
+`/_assets/99a57ea771f379715c522bf185e9a315/Images/logo.svg?1728057333`.
 
-   <f:render section="Main" />
+..  _create_partial_jumbotron:
+..  _partials:
 
-Surprisingly, that is all. This line instructs Fluid to render the section
-"Main", which we have implemented in the page layout template file
-:file:`Resources/Private/Templates/Pages/Default.html`.
+Split up the Template into partials
+-----------------------------------
 
-However, we will do an additional step. The navigation menu will be shown on
-all pages across the entire website. Therefore, it can be part of the global
-website layout. Therefore, file
-:file:`Resources/Private/Templates/Layouts/Default.html` is a suitable destination.
+If you compare the two static templates
+:file:`Resources/Public/StaticTemplate/default.html`
+and :file:`Resources/Public/StaticTemplate/subpagepage.html` they share many
+parts like the footer or the header with the menu. In order to reuse those parts
+we extract them to their own Fluid files. These are called partials and stored
+in path :path:`Resources/Private/Templates/Partials`.
 
-Move the :html:`<f:render partial="Navigation/MainNavigation.html" arguments="{_all}"/>`
-part from file
-:file:`Resources/Private/Templates/Pages/Default.html` to
-:file:`Resources/Private/Templates/Layouts/Default.html` as shown here:
+We can use the :ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>`
+to render the partial in the correct place.
 
-.. include:: /CodeSnippets/Fluid/Layout.rst.txt
+Remove the header from the template and replace it with a render ViewHelper:
 
-Do not forget to remove the line from the
-:file:`Resources/Private/Templates/Pages/Default.html` file. If you do not
-remove them, the menu would appear twice in the frontend.
+..  literalinclude:: _codesnippets/_remove_header.diff
+    :caption: Resources/Private/Templates/Pages/Default.html (difference)
+
+Move the Fluid code you just remove to a file called
+:file:`sitepackage/Resources/Private/Templates/Partials/Header.html`.
+
+Do the same with the jumbotron, the breadcrumb, and the footer.
+
+You should now have the following files:
 
 ..  directory-tree::
     :level: 3
     :show-file-icons: true
 
-    *   EXT:my_sitepackage
+    *   EXT:my_sitepackage/Resources/Private/Templates
 
-        *   Resources
+    *   Layouts
 
-            *   Private
+        * [empty]
 
-                *   Language
+    *   Pages
 
-                *   Templates
+        *   Default.html
+        *   Subpage.html
 
-                    *   Layouts
+    *   Partials
 
-                        *   Default.html
+        *   Footer.html
+        *   Header.html
+        *   Jumbotron.html
 
-                    *   Pages
+The Fluid template :file:`Resources/Private/Templates/Pages/Default.html`
+should now look like this:
 
-                        *   Default.html
+..  literalinclude:: _codesnippets/_DefaultWithPartials.html
+    :caption: Resources/Private/Templates/Pages/Default.html
 
-                    *   Partials
+You will learn how to display the dynamic content in chapter :ref:`content-mapping`.
 
-            *   Public
+..  _create_partial_header:
 
-                *   Css
+Extract the menu into a partial
+-------------------------------
 
-                    *   website.css
+Partials can also be rendered from within another partial. We move the menu in
+the partial :file:`Resources/Private/Templates/Partials/Header.html` to its
+own partial, :file:`Resources/Private/Templates/Partials/Navigation/Menu.html`:
 
-                *   Images
+..  literalinclude:: _codesnippets/_remove_menu_from_header.diff
+    :caption: EXT:site_package/Resources/Private/Templates/Partials/Header.html (Difference)
 
-                    *   logo.svg
+The :ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>` is used
+the same like from within the template.
 
-                *   JavaScript
+Chapter :ref:`Main menu <t3sitepackage:main-menu-creation>` will teach you how
+to make the menu work.
 
-                    *   website.js
+..  _create_section:
 
-                *   StaticTemplate
+Move the content into a section
+-------------------------------
+
+You can also move a part of the template into a section, surrounded by a
+:ref:`Section ViewHelper <f:section> <t3viewhelper:typo3fluid-fluid-section>`
+and use the :ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>`
+with argument `section` to render it.
+
+We move the content, including the Jumbotron into such a section:
+
+..  literalinclude:: _codesnippets/_move_content_to_section.diff
+    :caption: Resources/Private/Templates/Pages/Default.html (difference)
+
+The result looks like this:
+
+..  literalinclude:: _codesnippets/_DefaultWithSection.html
+    :caption: Resources/Private/Templates/Pages/Default.html
+
+You will learn how to display the dynamic content in chapter :ref:`content-mapping`.
+
+.. _subpage:
+
+The Fluid template for the subpage
+==================================
+
+We can repeat the above steps for the subpage and write such a template:
+
+..  literalinclude:: _codesnippets/_SubpageWithSection.html
+    :caption: Resources/Private/Templates/Pages/Subpage.html
+    :linenos:
+    :emphasize-lines: 1-9
+
+.. _the-website-layout-file:
+
+Extract the repeated part to a layout
+=====================================
+
+Lines 1-9 are exactly the same like in file
+:file:`Resources/Private/Templates/Pages/Default.html`. We can extract these
+lines into a so called Fluid layout and load them with the
+:ref:`Layout ViewHelper <f:layout> <t3viewhelper:typo3fluid-fluid-layout>`:
+
+..  literalinclude:: _codesnippets/_include_layout.diff
+    :caption: Resources/Private/Templates/Pages/Subpage.html (difference)
+
+Save the extracted layout to a file called
+:file:`Resources/Private/Templates/Layouts/Layout.html`. This file now contains
+the following:
+
+..  include:: /CodeSnippets/Fluid/Layout.rst.txt
+
+Repeat the same for file :file:`Resources/Private/Templates/Pages/Default.html`.
+
+..  directory-tree::
+    :level: 3
+    :show-file-icons: true
+
+    *   EXT:my_sitepackage/Resources/Private/Templates
+
+        *   Layouts
+
+            *   Layout.html
+
+        *   Pages
+
+            *   Default.html
+            *   Subpage.html
+
+        *   Partials
+
+            *   Navigation
+
+                *   Breadcrumb.html
+                *   FooterMenu.html
+                *   Menu.html
+
+            *   Footer.html
+            *   Header.html
+            *   Jumbotron.html
 
-                    *   index.html
-                    *   Step1Default.html
-                    *   Step2Default.html
-                    *   Step3Default.html
+You can finde the complete site package extension at this step at branch
+`main-step/fluid <https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code/tree/main-step/fluid>`__.
 
 .. toctree::
    :titlesonly:
diff --git a/Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html b/Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html
new file mode 100644
index 0000000..87fccfd
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html
@@ -0,0 +1,13 @@
+<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+<main>
+    <f:render partial="Header" arguments="{_all}"/>
+    <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
+    <div class="container">
+        <h2>Start page content</h2>
+        <p>The content of the start page is displayed here. This content should be generated from the content element of the startpage </p>
+    </div>
+    <f:render partial="Footer" arguments="{_all}"/>
+</main>
+<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
diff --git a/Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html b/Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html
new file mode 100644
index 0000000..1d53bef
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html
@@ -0,0 +1,17 @@
+<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+<main>
+    <f:render partial="Header" arguments="{_all}"/>
+    <f:render section="Main"/>
+    <f:render partial="Footer" arguments="{_all}"/>
+</main>
+<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
+
+<f:section name="Main">
+    <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
+    <div class="container">
+        <h2>Start page content</h2>
+        <p>The content of the start page is displayed here. This content should be generated from the content element of the startpage </p>
+    </div>
+</f:section>
diff --git a/Documentation/FluidTemplates/_codesnippets/_DefaultWithoutHead.html b/Documentation/FluidTemplates/_codesnippets/_DefaultWithoutHead.html
new file mode 100644
index 0000000..7ef93ef
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_DefaultWithoutHead.html
@@ -0,0 +1,52 @@
+<main>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
+        <div class="container">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuToggler"
+                    aria-controls="menuToggler" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="menuToggler">
+                <a href="#" class="navbar-brand">
+                    <img src="../Images/logo.svg" alt="Logo" height="50px" class="pe-3">
+                    Site name
+                </a>
+
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <div class="container">
+        <div class="p-5 mb-4 bg-body-tertiary">
+            <div class="container-fluid py-5">
+                <h1 class="display-5 fw-bold">Custom jumbotron</h1>
+                <p class="col-md-8 fs-4">This jumbotron contains a button to demonstrate that JavaScript is working: </p>
+                <button class="btn btn-dark btn-lg" role="button" href="#" id="exampleButton">Example button</button>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <h2>Start page content</h2>
+        <p>The content of the start page is displayed here. This content should be generated from the content element of the startpage </p>
+    </div>
+    <div class="container">
+        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+            <div class="col-md-4 d-flex align-items-center">
+                <a href="#" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
+                    <img src="../Images/logo.svg" alt="Logo" height="24" class="bi">
+                </a>
+                <span class="mb-3 mb-md-0 text-body-secondary">&copy; 2024 Site name</span>
+            </div>
+
+            <ul class="nav col-md-4 justify-content-end">
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Data privacy</a></li>
+                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Imprint</a></li>
+            </ul>
+        </footer>
+    </div>
+</main>
\ No newline at end of file
diff --git a/Documentation/FluidTemplates/_codesnippets/_Step1Default.html b/Documentation/FluidTemplates/_codesnippets/_Step1Default.html
deleted file mode 100644
index 734ae23..0000000
--- a/Documentation/FluidTemplates/_codesnippets/_Step1Default.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <button aria-controls="navbarsExampleDefault"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-            class="navbar-toggler"
-            data-target="#navbarsExampleDefault"
-            data-toggle="collapse"
-            type="button"
-    >
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-        <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-                <a class="nav-link" href="#">
-                    Home
-                </a>
-            </li>
-        </ul>
-    </div>
-</nav>
-
-<main role="main">
-    <div class="jumbotron">
-        <div class="container">
-            <h1 class="display-3">Hello, world!</h1>
-            <p> ... </p>
-        </div>
-    </div>
-    <div class="container">
-        <div class="row">
-            <div class="col-12 col-md-6">
-                <h2>Main Content</h2>
-                <p> ... </p>
-            </div>
-            <div class="col-12 col-md-4">
-                <h2>Sidebar Content</h2>
-                <p> ... </p>
-            </div>
-        </div>
-    </div>
-</main>
diff --git a/Documentation/FluidTemplates/_codesnippets/_Step2Default.html b/Documentation/FluidTemplates/_codesnippets/_Step2Default.html
deleted file mode 100644
index 8ed8e08..0000000
--- a/Documentation/FluidTemplates/_codesnippets/_Step2Default.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<f:render partial="Header.html" arguments="{_all}"/>
-
-<main role="main">
-    <f:render partial="Jumbotron" />
-    <div class="container">
-        <div class="row">
-            <div class="col-12 col-md-6">
-                <h2>Main Content</h2>
-                <p> ... </p>
-            </div>
-            <div class="col-12 col-md-4">
-                <h2>Sidebar Content</h2>
-                <p> ... </p>
-            </div>
-        </div>
-    </div>
-</main>
diff --git a/Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html b/Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html
new file mode 100644
index 0000000..68f90fb
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html
@@ -0,0 +1,30 @@
+<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+<main>
+    <f:render partial="Header" arguments="{_all}"/>
+    <f:render section="Main"/>
+    <f:render partial="Footer" arguments="{_all}"/>
+</main>
+<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
+
+<f:section name="Main">
+    <f:render partial="Jumbotron" arguments="{_all}"/>
+    <f:render partial="Navigation/Breadcrumb" arguments="{_all}"/>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8">
+                <div class="h-100 p-5 text-bg-white">
+                    <h2>Page content</h2>
+                    <p>The content of each page can be displayed here. </p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="h-100 p-5 bg-body-tertiary">
+                    <h2>Sidebar </h2>
+                    <p>Place for some shared content</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</f:section>
diff --git a/Documentation/FluidTemplates/_codesnippets/_assets.diff b/Documentation/FluidTemplates/_codesnippets/_assets.diff
new file mode 100644
index 0000000..627f148
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_assets.diff
@@ -0,0 +1,9 @@
++ <f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
++ <f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+  <main>
+      ...
+  </main>
+- <script src="../Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
+- <script src="../JavaScript/main.js"></script>
++ <f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
++ <f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
diff --git a/Documentation/FluidTemplates/_codesnippets/_include_layout.diff b/Documentation/FluidTemplates/_codesnippets/_include_layout.diff
new file mode 100644
index 0000000..97a0b38
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_include_layout.diff
@@ -0,0 +1,13 @@
+-<f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+-<f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+-<main>
+-    <f:render partial="Header" arguments="{_all}"/>
+-    <f:render section="Main"/>
+-    <f:render partial="Footer" arguments="{_all}"/>
+-</main>
+-<f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+-<f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
++<f:layout name="Layout"/>
+ <f:section name="Main">
+     ...
+ </f:section>
diff --git a/Documentation/FluidTemplates/_codesnippets/_move_content_to_section.diff b/Documentation/FluidTemplates/_codesnippets/_move_content_to_section.diff
new file mode 100644
index 0000000..5ce15c1
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_move_content_to_section.diff
@@ -0,0 +1,22 @@
+ <f:asset.css identifier="bootstrap" href="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+ <f:asset.css identifier="main" href="EXT:site_package/Resources/Public/Css/main.css" />
+ <main>
+-    <f:render partial="Header" arguments="{_all}"/>
+-    <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
+-    <div class="container">
+-        <h2>Start page content</h2>
+-        <p>The content of the start page is displayed here. This content should be generated from the content element of the startpage </p>
+-    </div>
++    <f:render section="Main"/>
+     <f:render partial="Footer" arguments="{_all}"/>
+ </main>
+ <f:asset.script identifier="bootstrap" src="EXT:site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+ <f:asset.script identifier="main" src="EXT:site_package/Resources/Public/JavaScript/main.js" />
+
++<f:section name="Main">
++    <f:render partial="Jumbotron" arguments="{_all}"/>
++    <div class="container">
++        <h2>Start page content</h2>
++        <p>The content of the start page is displayed here. This content should be generated from the content element of the startpage </p>
++    </div>
++</f:section>
diff --git a/Documentation/FluidTemplates/_codesnippets/_remove_head.diff b/Documentation/FluidTemplates/_codesnippets/_remove_head.diff
new file mode 100644
index 0000000..fc97242
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_remove_head.diff
@@ -0,0 +1,16 @@
+-<!doctype html>
+-<html lang="en" data-bs-theme="auto">
+-<head>
+-    <meta name="viewport" content="width=device-width, initial-scale=1">
+-    <title>TYPO3 site package example</title>
+-    <link href="../Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">
+-    <link href="../Css/main.css" rel="stylesheet">
+-</head>
+-<body>
+ <main>
+     ...
+ </main>
+-<script src="../Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
+-<script src="../JavaScript/main.js"></script>
+-</body>
+-</html>
diff --git a/Documentation/FluidTemplates/_codesnippets/_remove_header.diff b/Documentation/FluidTemplates/_codesnippets/_remove_header.diff
new file mode 100644
index 0000000..678bc7c
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_remove_header.diff
@@ -0,0 +1,26 @@
+ <main>
+     <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
+-        <div class="container">
+-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuToggler"
+-                    aria-controls="menuToggler" aria-expanded="false" aria-label="Toggle navigation">
+-                <span class="navbar-toggler-icon"></span>
+-            </button>
+-            <div class="collapse navbar-collapse" id="menuToggler">
+-                <a href="#" class="navbar-brand">
+-                    <img src="../Images/logo.svg" alt="Logo" height="50px" class="pe-3">
+-                    Site name
+-                </a>
+-
+-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+-                    <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+-                    <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+-                    <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+-                    <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+-                    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+-                </ul>
+-            </div>
+-        </div>
+-    </nav>
++    <f:render partial="Header" arguments="{_all}"/>
+     ...
+ </main>
diff --git a/Documentation/FluidTemplates/_codesnippets/_remove_menu_from_header.diff b/Documentation/FluidTemplates/_codesnippets/_remove_menu_from_header.diff
new file mode 100644
index 0000000..a59b91e
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_remove_menu_from_header.diff
@@ -0,0 +1,22 @@
+ <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
+     <div class="container">
+         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuToggler"
+                 aria-controls="menuToggler" aria-expanded="false" aria-label="Toggle navigation">
+             <span class="navbar-toggler-icon"></span>
+         </button>
+         <div class="collapse navbar-collapse" id="menuToggler">
+             <a href="#" class="navbar-brand">
+                 <f:image src="{settings.mySitepackage.logo}" alt="{settings.mySitepackage.logo-alt}" class="pe-3" />
+                 Site name
+             </a>
+-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+-                <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+-                <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+-                <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+-                <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+-                <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+-            </ul>
+             <f:render partial="Navigation/Menu.html" arguments="{_all}"/>
+         </div>
+     </div>
+ </nav>
diff --git a/Documentation/FluidTemplates/_codesnippets/_replace_images.diff b/Documentation/FluidTemplates/_codesnippets/_replace_images.diff
new file mode 100644
index 0000000..9e50e2f
--- /dev/null
+++ b/Documentation/FluidTemplates/_codesnippets/_replace_images.diff
@@ -0,0 +1,2 @@
+-<img src="../Images/logo.svg" alt="Logo" height="50px" class="pe-3">
++<f:image src="EXT:site_package/Resources/Public/Images/logo.svg" alt="Logo" class="pe-3" />
diff --git a/Documentation/TypoScriptConfiguration/Index.rst b/Documentation/TypoScriptConfiguration/Index.rst
index 7ae57be..6c33112 100644
--- a/Documentation/TypoScriptConfiguration/Index.rst
+++ b/Documentation/TypoScriptConfiguration/Index.rst
@@ -216,34 +216,7 @@ The reason for this error is that the system expects a file named :file:`Default
 (with captial D) within :file:`EXT:my_site_package/Resources/Private/Templates/Pages/` or
 :file:`EXT:my_site_package/Resources/Private/Templates/`.
 
-.. _typoscript-configuration-css-js-inclusion:
-
-Part 2 and 3: CSS and JavaScript file inclusion
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-We have combined part 2 and 3, because the inclusion of CSS and JavaScript
-files in TypoScript is pretty straight forward. Create a file called
-:file:`Part2CssFileInclusion.typoscript` in the
-folder :file:`Configuration/TypoScript/Setup/` with the following content:
-
-.. include:: /CodeSnippets/TypoScript/Part2CssFileInclusion.rst.txt
-
-Section :typoscript:`includeCSS { ... }` instructs TYPO3 to include the CSS from the
-Bootstrap library from an external source. It also includes file
-:file:`website.css` from the site package extension. We have copied this file
-into the appropriate folder before.
-
-Section :typoscript:`includeJSFooter { ... }` includes four JavaScript files in total.
-The first three are externally hosted files (jQuery, Popper and Bootstrap).
-Therefore, :typoscript:`.external = 1` forces TYPO3, not to check for their local
-existence. The fourth JavaScript file is the file we added before to the site
-package extension itself.
-
-You can also include CSS or JavaScript per-component in your Fluid template or
-by PHP. See :ref:`t3coreapi:assets`.
-
-
-Part 4: Global site configuration
+Part 3: Global site configuration
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 It is possible to configure multiple options globally in the section Typoscript