feat: bottom page navigation component (#2085)

ShubhamOulkar · bjohansebas · web-flow · commit edf3ba428504 · 2025-11-07T18:02:57.000-05:00
Co-authored-by: Sebastian Beltran &lt;bjohansebas@gmail.com&gt;
diff --git a/_config.yml b/_config.yml
@@ -72,6 +72,20 @@ defaults:
 
 announcement: true # Enable or disable the announcements.
 
+collections:
+  starter:
+    output: true
+    sort_by: order
+  guide:
+    output: true
+    sort_by: order
+  advanced:
+    output: true
+    sort_by: order
+  resources:
+    output: true
+    sort_by: order
+
 # Build settings
 
 plugins:
@@ -88,7 +102,7 @@ kramdown:
  hard_wrap: false
  syntax_highlighter: rouge
 
-exclude: 
+exclude:
   - [uk/CHANGELOG.md]
   - vendor/bundle
   - node_modules/
diff --git a/_includes/bottom-navigation.html b/_includes/bottom-navigation.html
@@ -0,0 +1,46 @@
+{% assign current_menu = page.menu %}
+{% assign current_lang = page.lang %}
+
+{% if current_menu and current_lang %}
+
+  {% assign all_pages_in_menu = site.pages | where: "menu", current_menu %}
+  {% assign lang_specific_pages = all_pages_in_menu | where: "lang", current_lang %}
+  
+  {% assign sorted_pages = lang_specific_pages | sort: "order" %}
+
+  {% for doc in sorted_pages %}
+    {% if doc.path == page.path %}
+      {% assign current_index = forloop.index0 %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+
+  {% if current_index != nil %}
+    {% assign prev_index = current_index | minus: 1 %}
+    {% if prev_index >= 0 %}
+      {% assign prev_page = sorted_pages[prev_index] %}
+    {% endif %}
+
+    {% assign next_index = current_index | plus: 1 %}
+    {% if next_index < sorted_pages.size %}
+      {% assign next_page = sorted_pages[next_index] %}
+    {% endif %}
+  {% endif %}
+
+  {% if prev_page or next_page %}
+    <nav class="bottom-navigation" aria-label="Pagination">
+      {% if prev_page %}
+        <a href="{{ prev_page.url | relative_url }}" class="bottom-nav-prev">
+          Previous: {{ prev_page.title }}
+        </a>
+      {% endif %}
+
+      {% if next_page %}
+        <a href="{{ next_page.url | relative_url }}" class="bottom-nav-next">
+          Next: {{ next_page.title }}
+        </a>
+      {% endif %}
+    </nav>
+  {% endif %}
+
+{% endif %}
diff --git a/_includes/header.html b/_includes/header.html
@@ -176,7 +176,7 @@
         </ul>
       </li>
       <li id="resources-menu" class="submenu">
-        <a href="/{{ page.lang }}/resources/glossary.html" {% if page.menu=='resources' %} class="active" {% endif %}>
+        <a href="/{{ page.lang }}/resources/community.html" {% if page.menu=='resources' %} class="active" {% endif %}>
           {{ site.data[page.lang].menu.resources }}
         </a>
         <ul class="submenu-content">
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -28,6 +28,7 @@
     <div class="content">
       <main>
         {{ content }}
+        {% include bottom-navigation.html %}
         {% include github-edit-btn.html %}
       </main>
     </div>
diff --git a/css/style.css b/css/style.css
@@ -688,13 +688,16 @@ div.header-btn {
   color: var(--box-fg);
 }
 
-a.edit-github-btn{
+a.edit-github-btn,
+a.bottom-nav-prev,
+a.bottom-nav-next {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   width: fit-content;
   padding: 0.5rem;
   border-radius: 0.3rem;
+  text-decoration: none;
 
   &:is(:hover, :active, :focus) {
     color: var(--fg);
@@ -1171,6 +1174,26 @@ h2 a {
   }
 }
 
+/* 'Prev' left and 'Next' right btn */
+.bottom-navigation {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-block: 1rem;
+  font-weight: 500;
+  font-size: 1.2rem;
+}
+
+.bottom-nav-prev {
+  text-align: left;
+  max-width: 50%;
+}
+
+.bottom-nav-next {
+  text-align: right;
+  max-width: 50%;
+}
+
 /* routing methods columns */
 .methods-columns {
   display: flex;
@@ -1739,3 +1762,4 @@ blockquote {
   }
 }
 
+
diff --git a/en/advanced/best-practice-performance.md b/en/advanced/best-practice-performance.md
@@ -3,6 +3,7 @@ layout: page
 title: Performance Best Practices Using Express in Production
 description: Discover performance and reliability best practices for Express apps in production, covering code optimizations and environment setups for optimal performance.
 menu: advanced
+order: 4
 redirect_from: "/advanced/best-practice-performance.html"
 ---
 # Production best practices: performance and reliability
diff --git a/en/advanced/best-practice-security.md b/en/advanced/best-practice-security.md
@@ -3,6 +3,7 @@ layout: page
 title: Security Best Practices for Express in Production
 description: Discover crucial security best practices for Express apps in production, including using TLS, input validation, secure cookies, and preventing vulnerabilities.
 menu: advanced
+order: 3
 redirect_from: "/advanced/best-practice-security.html"
 ---
 
diff --git a/en/advanced/developing-template-engines.md b/en/advanced/developing-template-engines.md
@@ -3,6 +3,7 @@ layout: page
 title: Developing template engines for Express
 description: Learn how to develop custom template engines for Express.js using app.engine(), with examples on creating and integrating your own template rendering logic.
 menu: advanced
+order: 1
 redirect_from: "/advanced/developing-template-engines.html"
 ---
 
diff --git a/en/advanced/healthcheck-graceful-shutdown.md b/en/advanced/healthcheck-graceful-shutdown.md
@@ -3,6 +3,7 @@ layout: page
 title: Health Checks and Graceful Shutdown
 description: Learn how to implement health checks and graceful shutdown in Express apps to enhance reliability, manage deployments, and integrate with load balancers like Kubernetes.
 menu: advanced
+order: 5
 redirect_from: "/advanced/healthcheck-graceful-shutdown.html"
 ---
 
diff --git a/en/advanced/security-updates.md b/en/advanced/security-updates.md
@@ -3,6 +3,7 @@ layout: page
 title: Express security updates
 description: Review the latest security updates and patches for Express.js, including detailed vulnerability lists for different versions to help maintain a secure application.
 menu: advanced
+order: 2
 redirect_from: "/advanced/security-updates.html"
 ---
 
diff --git a/en/guide/behind-proxies.md b/en/guide/behind-proxies.md
@@ -3,6 +3,7 @@ layout: page
 title: Express behind proxies
 description: Learn how to configure Express.js applications to work correctly behind reverse proxies, including using the trust proxy setting to handle client IP addresses.
 menu: guide
+order: 8
 redirect_from: "/guide/behind-proxies.html"
 ---
 
diff --git a/en/guide/database-integration.md b/en/guide/database-integration.md
@@ -3,6 +3,7 @@ layout: page
 title: Express database integration
 description: Discover how to integrate various databases with Express.js applications, including setup examples for MongoDB, MySQL, PostgreSQL, and more.
 menu: guide
+order: 11
 redirect_from: "/guide/database-integration.html"
 ---
 
diff --git a/en/guide/debugging.md b/en/guide/debugging.md
@@ -3,6 +3,7 @@ layout: page
 title: Debugging Express
 description: Learn how to enable and use debugging logs in Express.js applications by setting the DEBUG environment variable for enhanced troubleshooting.
 menu: guide
+order: 7
 redirect_from: "/guide/debugging.html"
 ---
 
diff --git a/en/guide/error-handling.md b/en/guide/error-handling.md
@@ -3,6 +3,7 @@ layout: page
 title: Express error handling
 description: Understand how Express.js handles errors in synchronous and asynchronous code, and learn to implement custom error handling middleware for your applications.
 menu: guide
+order: 6
 redirect_from: "/guide/error-handling.html"
 ---
 
diff --git a/en/guide/migrating-4.md b/en/guide/migrating-4.md
@@ -3,6 +3,7 @@ layout: page
 title: Migrating to Express 4
 description: A guide to migrating your Express.js applications from version 3 to 4, covering changes in middleware, routing, and how to update your codebase effectively.
 menu: guide
+order: 9
 redirect_from: "/guide/migrating-4.html"
 ---
 
diff --git a/en/guide/migrating-5.md b/en/guide/migrating-5.md
@@ -3,6 +3,7 @@ layout: page
 title: Migrating to Express 5
 description: A comprehensive guide to migrating your Express.js applications from version 4 to 5, detailing breaking changes, deprecated methods, and new improvements.
 menu: guide
+order: 10
 redirect_from: "/guide/migrating-5.html"
 ---
 
diff --git a/en/guide/overriding-express-api.md b/en/guide/overriding-express-api.md
@@ -3,6 +3,7 @@ layout: page
 title: Overriding the Express API
 description: Discover how to customize and extend the Express.js API by overriding methods and properties on the request and response objects using prototypes.
 menu: guide
+order: 4
 ---
 
 # Overriding the Express API
diff --git a/en/guide/routing.md b/en/guide/routing.md
@@ -3,6 +3,7 @@ layout: page
 title: Express routing
 description: Learn how to define and use routes in Express.js applications, including route methods, route paths, parameters, and using Router for modular routing.
 menu: guide
+order: 1
 redirect_from: "/guide/routing.html"
 ---
 
diff --git a/en/guide/using-middleware.md b/en/guide/using-middleware.md
@@ -3,6 +3,7 @@ layout: page
 title: Using Express middleware
 description: Learn how to use middleware in Express.js applications, including application-level and router-level middleware, error handling, and integrating third-party middleware.
 menu: guide
+order: 3
 redirect_from: "/guide/using-middleware.html"
 ---
 
diff --git a/en/guide/using-template-engines.md b/en/guide/using-template-engines.md
@@ -3,6 +3,7 @@ layout: page
 title: Using template engines with Express
 description: Discover how to integrate and use template engines like Pug, Handlebars, and EJS with Express.js to render dynamic HTML pages efficiently.
 menu: guide
+order: 5
 redirect_from: "/guide/using-template-engines.html"
 ---
 
diff --git a/en/guide/writing-middleware.md b/en/guide/writing-middleware.md
@@ -3,6 +3,7 @@ layout: page
 title: Writing middleware for use in Express apps
 description: Learn how to write custom middleware functions for Express.js applications, including examples and best practices for enhancing request and response handling.
 menu: guide
+order: 2
 redirect_from: "/guide/writing-middleware.html"
 ---
 
diff --git a/en/resources/community.md b/en/resources/community.md
@@ -3,6 +3,7 @@ layout: page
 title: Express community
 description: Connect with the Express.js community, learn about the technical committee, find resources, explore community-contributed modules, and get involved in discussions.
 menu: resources
+order: 1
 redirect_from: "/resources/community.html"
 ---
 
diff --git a/en/resources/contributing.md b/en/resources/contributing.md
@@ -3,6 +3,7 @@ layout: page
 title: Contributing to Express
 description: Find out how to contribute to Express.js, including guidelines for reporting issues, submitting pull requests, becoming a collaborator, and understanding security policies.
 menu: resources
+order: 5
 redirect_from: "/resources/community.html"
 ---
 
diff --git a/en/resources/glossary.md b/en/resources/glossary.md
@@ -3,6 +3,7 @@ layout: page
 title: Express glossary
 description: A comprehensive glossary of terms related to Express.js, Node.js, middleware, routing, and other key concepts to help you understand and use Express effectively.
 menu: resources
+order: 2
 redirect_from: "/resources/glossary.html"
 ---
 
diff --git a/en/resources/middleware.md b/en/resources/middleware.md
@@ -3,6 +3,7 @@ layout: middleware
 title: Express middleware
 description: Explore a list of Express.js middleware modules maintained by the Express team and the community, including built-in middleware and popular third-party modules.
 menu: resources
+order: 3
 redirect_from: "/resources/middleware.html"
 module: mw-home
 ---
diff --git a/en/resources/utils.md b/en/resources/utils.md
@@ -3,6 +3,7 @@ layout: page
 title: Express utilities
 description: Discover utility modules related to Express.js and Node.js, including tools for cookies, CSRF protection, URL parsing, routing, and more to enhance your applications.
 menu: resources
+order: 4
 redirect_from: "/resources/utilities.html"
 ---
 
diff --git a/en/starter/basic-routing.md b/en/starter/basic-routing.md
@@ -3,6 +3,7 @@ layout: page
 title: Express basic routing
 description: Learn the fundamentals of routing in Express.js applications, including how to define routes, handle HTTP methods, and create route handlers for your web server.
 menu: starter
+order: 4
 redirect_from: "/starter/basic-routing.html"
 ---
 
@@ -65,4 +66,3 @@ app.delete('/user', (req, res) => {
 
 For more details about routing, see the [routing guide](/{{ page.lang }}/guide/routing.html).
 
-###  [Previous: Express application generator ](/{{ page.lang }}/starter/generator.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Serving static files in Express ](/{{ page.lang }}/starter/static-files.html)
diff --git a/en/starter/examples.md b/en/starter/examples.md
@@ -3,6 +3,7 @@ layout: page
 title: Express examples
 description: Explore a collection of Express.js application examples covering various use cases, integrations, and advanced configurations to help you learn and build your projects.
 menu: starter
+order: 6
 redirect_from: "/starter/examples.html"
 ---
 
@@ -15,6 +16,5 @@ These are some additional examples with more extensive integrations.
 
 {% include community-caveat.html %}
 
-- [prisma-rest-api-ts](https://github.com/prisma/prisma-examples/tree/latest/orm/express) - REST API with Express in TypeScript using [Prisma](https://www.npmjs.com/package/prisma) as an ORM
-
-### [Previous: Static Files ](/{{ page.lang }}/starter/static-files.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: FAQ ](/{{ page.lang }}/starter/faq.html)
+- [prisma-fullstack](https://github.com/prisma/prisma-examples/tree/latest/pulse/fullstack-simple-chat) - Fullstack app with Express and Next.js using [Prisma](https://www.npmjs.com/package/prisma) as an ORM
+- [prisma-rest-api-ts](https://github.com/prisma/prisma-examples/tree/latest/orm/express) - REST API with Express in TypeScript using [Prisma](https://www.npmjs.com/package/prisma) as an ORM
diff --git a/en/starter/faq.md b/en/starter/faq.md
@@ -3,6 +3,7 @@ layout: page
 title: Express FAQ
 description: Find answers to frequently asked questions about Express.js, including topics on application structure, models, authentication, template engines, error handling, and more.
 menu: starter
+order: 7
 redirect_from: "/starter/faq.html"
 ---
 
@@ -93,6 +94,4 @@ middleware function.
 ## What version of Node.js does Express require?
 
 * [Express 4.x](/{{ page.lang }}/4x/api.html) requires Node.js 0.10 or higher.
-* [Express 5.x](/{{ page.lang }}/5x/api.html) requires Node.js 18 or higher.
-
-###  [Previous: More examples ](/{{ page.lang }}/starter/examples.html)
+* [Express 5.x](/{{ page.lang }}/5x/api.html) requires Node.js 18 or higher.
diff --git a/en/starter/generator.md b/en/starter/generator.md
@@ -3,6 +3,7 @@ layout: page
 title: Express application generator
 description: Learn how to use the Express application generator tool to quickly create a skeleton for your Express.js applications, streamlining setup and configuration.
 menu: starter
+order: 3
 redirect_from: "/starter/generator.html"
 ---
 
@@ -123,6 +124,4 @@ The generated app has the following directory structure:
 
 <div class="doc-box doc-info" markdown="1">
 The app structure created by the generator is just one of many ways to structure Express apps. Feel free to use this structure or modify it to best suit your needs.
-</div>
-
-###  [Previous: Hello World ](/{{ page.lang }}/starter/hello-world.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Basic routing](/{{ page.lang }}/starter/basic-routing.html)
+</div>
diff --git a/en/starter/hello-world.md b/en/starter/hello-world.md
@@ -3,6 +3,7 @@ layout: page
 title: Express "Hello World" example
 description: Get started with Express.js by building a simple 'Hello World' application, demonstrating the basic setup and server creation for beginners.
 menu: starter
+order: 2
 redirect_from: "/starter/hello-world.html"
 ---
 
@@ -46,6 +47,4 @@ Run the app with the following command:
 $ node app.js
 ```
 
-Then, load `http://localhost:3000/` in a browser to see the output.
-
-###  [Previous: Installing ](/{{ page.lang }}/starter/installing.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Express Generator ](/{{ page.lang }}/starter/generator.html)
+Then, load `http://localhost:3000/` in a browser to see the output.
diff --git a/en/starter/installing.md b/en/starter/installing.md
diff --git a/en/starter/static-files.md b/en/starter/static-files.md
