Merge pull request #884 from plone/prep-vlt-expand-page-nav

VLT Training and page contents fixes
plone · Nov 23, 2024 · 995caeb · 995caeb
2 parents f25f3b7 + ec08797
commit 995caeb
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/docs/conf.py b/docs/conf.py
@@ -176,16 +176,66 @@
 html_static_path = ["_static"]
 
 html_theme_options = {
+    "article_header_start": ["toggle-primary-sidebar", "chapter-title"],
+    "extra_footer": """<p>The text and illustrations in this website are licensed by the Plone Foundation under a Creative Commons Attribution 4.0 International license. Plone and the Plone® logo are registered trademarks of the Plone Foundation, registered in the United States and other countries. For guidelines on the permitted uses of the Plone trademarks, see <a href="https://plone.org/foundation/logo">https://plone.org/foundation/logo</a>. All other trademarks are owned by their respective owners.</p>
+    <p>Pull request previews by <a href="https://readthedocs.org/">Read the Docs</a>.</p>""",
+    "icon_links": [
+        {
+            "name": "GitHub",
+            "url": "https://github.com/plone/documentation",
+            "icon": "fa-brands fa-square-github",
+            "type": "fontawesome",
+            "attributes": {
+                "target": "_blank",
+                "rel": "noopener me",
+                "class": "nav-link custom-fancy-css"
+            }
+        },
+        {
+            "name": "Mastodon",
+            "url": "https://plone.social/@plone",
+            "icon": "fa-brands fa-mastodon",
+            "type": "fontawesome",
+            "attributes": {
+                "target": "_blank",
+                "rel": "noopener me",
+                "class": "nav-link custom-fancy-css"
+            }
+        },
+        {
+            "name": "YouTube",
+            "url": "https://www.youtube.com/@PloneCMS",
+            "icon": "fa-brands fa-youtube",
+            "type": "fontawesome",
+            "attributes": {
+                "target": "_blank",
+                "rel": "noopener me",
+                "class": "nav-link custom-fancy-css"
+            }
+        },
+        {
+            "name": "X (formerly Twitter)",
+            "url": "https://x.com/plone",
+            "icon": "fa-brands fa-square-x-twitter",
+            "type": "fontawesome",
+            "attributes": {
+                "target": "_blank",
+                "rel": "noopener me",
+                "class": "nav-link custom-fancy-css"
+            }
+        },
+    ],
     "logo": {
         "text": "Plone Training 2024",
     },
+    "navigation_with_keys": True,
     "path_to_docs": "docs",
     "repository_branch": "main",
     "repository_url": "https://github.com/plone/training",
+    "show_toc_level": 2,
     "use_edit_page_button": True,
     "use_issues_button": True,
     "use_repository_button": True,
-    "article_header_start": ["toggle-primary-sidebar", "chapter-title"],
 }
 
 

diff --git a/docs/customizing-volto-light-theme/installing-vlt.md b/docs/customizing-volto-light-theme/installing-vlt.md
@@ -12,7 +12,7 @@ myst:
 
 Follow the steps below to install and configure VLT in your project. VLT provides a clean and modern design with ready-to-use blocks and components.
 
-### Step 1: Install Volto Light Theme
+## Step 1: Install Volto Light Theme
 
 To install VLT, navigate to the {file}`frontend/packages/volto-my-project` folder and run the following command:
 
@@ -30,7 +30,7 @@ While in your project package folder, add VLT to the `addons` list in your {file
 "addons": ["@kitconcept/volto-light-theme"],
 ```
 
-### Step 2: install block add-ons
+## Step 2: install block add-ons
 
 Volto Light Theme comes with several pre-configured add-ons that provide basic blocks for your website. If you'd like to include them, you can add them in the `addons` section in your {file}`package.json`, but this is not required.
 
@@ -49,7 +49,7 @@ Here is the list of recommended addons to install, including VLT, which should b
 ],
 ```
 
-### Step 3: configure Volto Light Theme as the theme provider
+## Step 3: configure Volto Light Theme as the theme provider
 
 To leverage a cohesive set of styles, components, and design patterns that align with Volto's best practices, you need to set VLT as your theme provider.
 

diff --git a/docs/index.md b/docs/index.md
@@ -59,6 +59,10 @@ teaching/index
 
 ## Volto, React, and Javascript
 
+{doc}`customizing-volto-light-theme/index`
+
+:   This training provides comprehensive knowledge and practical skills for theming in Plone 6's Volto frontend by using and extending Volto Light Theme.
+
 {doc}`volto-customization/index`
 
 :   Are you new to JavaScript development and eager to explore the world of Volto customization?