Update Fluid Templates page doc

Documentation/CodeSnippets/Fluid/Layout.rst.txt

@@ -1,16 +1,13 @@
-..  Generated by https://github.com/TYPO3-Documentation/t3docs-codesnippets
-..  Extracted from EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
-
 ..  code-block:: html
-    :caption: EXT:site_package/Resources/Private/Templates/Layouts/Layout.html
+    :caption: EXT:my_site_package/Resources/Private/Templates/Layouts/Layout.html
     :linenos:
 
-    <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" />
+    <f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+    <f:asset.css identifier="main" href="EXT:my_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:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+    <f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

Documentation/CodeSnippets/codesnippets.php

@@ -95,13 +95,6 @@
         'caption' => 'EXT:site_package/Resources/Private/Templates/Partials/Jumbotron.html',
         'showLineNumbers' => true
     ],
-    [
-        'action' => 'createCodeSnippet',
-        'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
-        'targetFileName' => 'Fluid/Layout.rst.txt',
-        'caption' => 'EXT:site_package/Resources/Private/Templates/Layouts/Layout.html',
-        'showLineNumbers' => true
-    ],
     [
         'action' => 'createCodeSnippet',
         'sourceFile' => 'EXT:site_package/Resources/Private/Templates/Partials/Header.html',

Documentation/FluidTemplates/Index.rst

@@ -35,7 +35,7 @@ Copy the main :ref:`static HTML file <theme-example-static-html>` from
 :file:`Resources/Public/StaticTemplate/default.html`
 to :file:`Resources/Private/Templates/Pages/Default.html`. You can override
 the file created in step :ref:`Minimal site package - The TYPO3 Fluid
-version <t3sitepackage:minimal-extension-fluid>`. The file name must begin 
+version <t3sitepackage:minimal-extension-fluid>`. The file name must begin
 with a capital letter
 
 The template name `Default.html` is used as a fall back if no other template
@@ -87,7 +87,7 @@ Replace `<script>` tags in the body by using the
     :caption: Resources/Private/Templates/Pages/Default.html (difference)
 
 The path to the assets will be resolved by TYPO3. `EXT:` tells TYPO3 that this is
-an extension path. `site_package` is the
+an extension path. `my_site_package` is the
 :ref:`Extension name defined in the composer.json <extension-configuration-composer>`.
 
 Flush all caches and preview the page.
@@ -140,7 +140,7 @@ Remove the header from the template and replace it with a render ViewHelper:
     :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`.
+:file:`my-site-package/Resources/Private/Templates/Partials/Header.html`.
 
 Do the same with the jumbotron, the breadcrumb, and the footer.
 
@@ -150,18 +150,18 @@ You should now have the following files:
     :level: 3
     :show-file-icons: true
 
-    *   EXT:my_sitepackage/Resources/Private/Templates
+    *   EXT:my_site_package/Resources/Private/Templates
 
-    *   Pages
+        *   Pages
 
-        *   Default.html
-        *   Subpage.html
+            *   Default.html
+            *   Subpage.html
 
-    *   Partials
+        *   Partials
 
-        *   Footer.html
-        *   Header.html
-        *   Jumbotron.html
+            *   Footer.html
+            *   Header.html
+            *   Jumbotron.html
 
 The Fluid template :file:`Resources/Private/Templates/Pages/Default.html`
 should now look like this:
@@ -181,14 +181,31 @@ the partial :file:`Resources/Private/Templates/Partials/Header.html` to its
 own partial, :file:`Resources/Private/Templates/Partials/Navigation/Menu.html`:
 
 ..  literalinclude:: _codesnippets/_remove_menu_from_header.diff
-    :caption: EXT:site_package/Resources/Private/Templates/Partials/Header.html (Difference)
+    :caption: EXT:my_site_package/Resources/Private/Templates/Partials/Header.html (Difference)
 
 The :ref:`Render ViewHelper <f:render> <t3viewhelper:typo3-fluid-render>` is used
 the same like from within the template.
 
 Chapter :ref:`Main menu <t3sitepackage:main-menu-creation>` will teach you how
 to make the menu work.
 
+..  _create_partial_footer_menu:
+
+Extract the footer menu into a partial
+-------------------------------
+
+We can also move the footer menu from
+the partial :file:`Resources/Private/Templates/Partials/Footer.html` to its
+own partial, :file:`Resources/Private/Templates/Partials/Navigation/FooterMenu.html`:
+
+..  literalinclude:: _codesnippets/_remove_menu_from_footer.diff
+    :caption: EXT:my_site_package/Resources/Private/Templates/Partials/Footer.html (Difference)
+
+The footer menu partial looks like this:
+
+..  literalinclude:: _codesnippets/_FooterMenuPartial.html
+    :caption: Resources/Private/Templates/Partials/Navigation/FooterMenu.html
+
 ..  _create_section:
 
 Move the content into a section
@@ -223,6 +240,19 @@ We can repeat the above steps for the subpage and write such a template:
     :linenos:
     :emphasize-lines: 1-9
 
+..  _create_partial_breadcrumb:
+
+Extract the breadcrumb into a partial
+-------------------------------------
+
+The subpage template contain a breadcrumb, between jumbotron and content, that
+you can also move to a partial.
+
+The breadcrum partial looks like this:
+
+..  literalinclude:: _codesnippets/_BreadcrumbPartial.html
+    :caption: Resources/Private/Templates/Partials/Navigation/Breadcrumb.html
+
 ..  _the-website-layout-file:
 
 Extract the repeated part to a layout

Documentation/FluidTemplates/_codesnippets/_BreadcrumbPartial.html

@@ -0,0 +1,15 @@
+<div class="container">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary">
+            <li class="breadcrumb-item">
+                <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Home</a>
+            </li>
+            <li class="breadcrumb-item">
+                <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">
+                Data
+            </li>
+        </ol>
+    </nav>
+</div>

Documentation/FluidTemplates/_codesnippets/_DefaultWithPartials.html

@@ -1,5 +1,5 @@
-<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" />
+<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
 <main>
     <f:render partial="Header" arguments="{_all}"/>
     <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
@@ -9,5 +9,5 @@ <h2>Start page content</h2>
     </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" />
+<f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

Documentation/FluidTemplates/_codesnippets/_DefaultWithSection.html

@@ -1,12 +1,12 @@
-<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" />
+<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:my_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:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
 
 <f:section name="Main">
     <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>

Documentation/FluidTemplates/_codesnippets/_FooterMenuPartial.html

@@ -0,0 +1,4 @@
+<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>

Documentation/FluidTemplates/_codesnippets/_SubpageWithSection.html

@@ -1,29 +1,25 @@
-<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" />
+<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+<f:asset.css identifier="main" href="EXT:my_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:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+<f:asset.script identifier="main" src="EXT:my_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>
+                <h2>Main page content (2/3)</h2>
+                <p>The main content of each page can be displayed here.</p>
             </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>
+                <h2>Sidebar page content (1/3)</h2>
+                <p>The sidebar content of each page can be displayed here. </p>
             </div>
         </div>
     </div>

Documentation/FluidTemplates/_codesnippets/_assets.diff

@@ -1,9 +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" />
++ <f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
++ <f:asset.css identifier="main" href="EXT:my_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" />
++ <f:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
++ <f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />

Documentation/FluidTemplates/_codesnippets/_include_layout.diff

@@ -1,12 +1,12 @@
--<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" />
+-<f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+-<f:asset.css identifier="main" href="EXT:my_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:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+-<f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
 +<f:layout name="Layout"/>
  <f:section name="Main">
      ...

Documentation/FluidTemplates/_codesnippets/_move_content_to_section.diff

@@ -1,7 +1,7 @@
- <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" />
+ <f:asset.css identifier="bootstrap" href="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
+ <f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
  <main>
--    <f:render partial="Header" arguments="{_all}"/>
+     <f:render partial="Header" arguments="{_all}"/>
 -    <f:render partial="Jumbotron" arguments="{records: content.jumbotron.records}"/>
 -    <div class="container">
 -        <h2>Start page content</h2>
@@ -10,8 +10,8 @@
 +    <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:asset.script identifier="bootstrap" src="EXT:my_site_package/Resources/Public/Libaries/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js" />
+ <f:asset.script identifier="main" src="EXT:my_site_package/Resources/Public/JavaScript/main.js" />
 
 +<f:section name="Main">
 +    <f:render partial="Jumbotron" arguments="{_all}"/>

Documentation/FluidTemplates/_codesnippets/_remove_header.diff

@@ -1,5 +1,5 @@
  <main>
-     <nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
+-     <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">

Documentation/FluidTemplates/_codesnippets/_remove_menu_from_footer.diff

@@ -0,0 +1,16 @@
+<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">
+                <f:image src="EXT:my_site_package/Resources/Public/Images/logo.svg" alt="Logo" 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>
++        <f:render partial="Navigation/FooterMenu.html" arguments="{_all}"/>
+    </footer>
+</div>

Documentation/FluidTemplates/_codesnippets/_remove_menu_from_header.diff

@@ -16,7 +16,7 @@
 -                <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}"/>
++             <f:render partial="Navigation/Menu.html" arguments="{_all}"/>
          </div>
      </div>
  </nav>

Documentation/FluidTemplates/_codesnippets/_replace_images.diff

@@ -1,2 +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" />
++<f:image src="EXT:my_site_package/Resources/Public/Images/logo.svg" alt="Logo" class="pe-3" />