From bd968613145dc5974dfee21afdcf018720002b8e Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sat, 25 Oct 2025 19:34:29 +0530 Subject: [PATCH 1/6] add bottom navigation --- _config.yml | 5 +++ _includes/bottom-navigation.html | 52 ++++++++++++++++++++++++++++++++ _layouts/page.html | 1 + css/style.css | 18 +++++++++++ en/starter/basic-routing.md | 2 +- en/starter/examples.md | 5 ++- en/starter/faq.md | 5 ++- en/starter/generator.md | 5 ++- en/starter/hello-world.md | 5 ++- en/starter/installing.md | 5 ++- en/starter/static-files.md | 5 ++- 11 files changed, 89 insertions(+), 19 deletions(-) create mode 100644 _includes/bottom-navigation.html diff --git a/_config.yml b/_config.yml index e00de3f993..39d91f7124 100644 --- a/_config.yml +++ b/_config.yml @@ -72,6 +72,11 @@ defaults: announcement: true # Enable or disable the announcements. +collections: + starter: + output: true + sort_by: order + # Build settings plugins: diff --git a/_includes/bottom-navigation.html b/_includes/bottom-navigation.html new file mode 100644 index 0000000000..b5c117ac01 --- /dev/null +++ b/_includes/bottom-navigation.html @@ -0,0 +1,52 @@ +{% comment %} + This component finds the current page within its collection + (based on `page.menu`) and generates 'Previous' and 'Next' links. +{% endcomment %} + +{% assign collection_name = page.menu %} + +{% if collection_name %} + {% assign collection = site[collection_name] %} + + {% if collection %} + {% comment %} Find the current page's index in the sorted collection {% endcomment %} + {% for doc in collection %} + {% if doc.url == page.url %} + {% assign current_index = forloop.index0 %} + {% break %} + {% endif %} + {% endfor %} + + {% comment %} Assign 'prev_page' and 'next_page' based on the index {% endcomment %} + {% if current_index %} + {% assign prev_index = current_index | minus: 1 %} + {% if prev_index >= 0 %} + {% assign prev_page = collection[prev_index] %} + {% endif %} + + {% assign next_index = current_index | plus: 1 %} + {% if next_index < collection.size %} + {% assign next_page = collection[next_index] %} + {% endif %} + {% endif %} + + {% comment %} Render the navigation links if either page exists {% endcomment %} + {% if prev_page or next_page %} +
+ + {% endif %} + + {% endif %} +{% endif %} \ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index 0a93f56c84..a289dac078 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -29,6 +29,7 @@
{{ content }} {% include github-edit-btn.html %} + {% include bottom-nav.html %}
{% endif %} diff --git a/css/style.css b/css/style.css index 1226c519a8..48d13fa031 100644 --- a/css/style.css +++ b/css/style.css @@ -1169,6 +1169,24 @@ h2 a { } } +/* 'Prev' left and 'Next' right btn */ +.bottom-navigation { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 1.5rem; + font-weight: 500; +} + +.bottom-nav-prev { + text-align: left; +} + +.bottom-nav-next { + margin-left: auto; + text-align: right; +} + /* routing methods columns */ .methods-columns { display: flex; diff --git a/en/starter/basic-routing.md b/en/starter/basic-routing.md index 00a65988ab..e515c5cedc 100755 --- 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)    [Next: Serving static files in Express ](/{{ page.lang }}/starter/static-files.html) diff --git a/en/starter/examples.md b/en/starter/examples.md index ca376a2e64..228509a17b 100755 --- 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" --- @@ -16,6 +17,4 @@ These are some additional examples with more extensive integrations. {% include community-caveat.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 - -### [Previous: Static Files ](/{{ page.lang }}/starter/static-files.html)    [Next: FAQ ](/{{ page.lang }}/starter/faq.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 \ No newline at end of file diff --git a/en/starter/faq.md b/en/starter/faq.md index 80ce90b3bf..03cd0bf69a 100755 --- 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. \ No newline at end of file diff --git a/en/starter/generator.md b/en/starter/generator.md index a95c9dcbfe..e2d3437be5 100755 --- 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:
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. -
- -### [Previous: Hello World ](/{{ page.lang }}/starter/hello-world.html)    [Next: Basic routing](/{{ page.lang }}/starter/basic-routing.html) + \ No newline at end of file diff --git a/en/starter/hello-world.md b/en/starter/hello-world.md index 67c9aee082..9edbcf2d34 100755 --- 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)    [Next: Express Generator ](/{{ page.lang }}/starter/generator.html) +Then, load `http://localhost:3000/` in a browser to see the output. \ No newline at end of file diff --git a/en/starter/installing.md b/en/starter/installing.md index 9f99a681f2..e115db5cc4 100755 --- a/en/starter/installing.md +++ b/en/starter/installing.md @@ -3,6 +3,7 @@ layout: page title: Installing Express description: Learn how to install Express.js in your Node.js environment, including setting up your project directory and managing dependencies with npm. menu: starter +order: 1 redirect_from: "/starter/installing.html" --- @@ -48,6 +49,4 @@ $ npm install express --no-save
By default with version npm 5.0+, `npm install` adds the module to the `dependencies` list in the `package.json` file; with earlier versions of npm, you must specify the `--save` option explicitly. Then, afterwards, running `npm install` in the app directory will automatically install modules in the dependencies list. -
- -### [Next: Hello World ](/{{ page.lang }}/starter/hello-world.html) \ No newline at end of file + \ No newline at end of file diff --git a/en/starter/static-files.md b/en/starter/static-files.md index 3d5e4309bf..1ee822011c 100755 --- a/en/starter/static-files.md +++ b/en/starter/static-files.md @@ -3,6 +3,7 @@ layout: page title: Serving static files in Express description: Understand how to serve static files like images, CSS, and JavaScript in Express.js applications using the built-in 'static' middleware. menu: starter +order: 5 redirect_from: "/starter/static-files.html" --- @@ -76,6 +77,4 @@ const path = require('path') app.use('/static', express.static(path.join(__dirname, 'public'))) ``` -For more details about the `serve-static` function and its options, see [serve-static](/resources/middleware/serve-static.html). - -### [Previous: Basic Routing ](/{{ page.lang }}/starter/basic-routing.html)    [Next: More examples ](/{{ page.lang }}/starter/examples.html) +For more details about the `serve-static` function and its options, see [serve-static](/resources/middleware/serve-static.html). \ No newline at end of file From da1e9414e14b1ce565afc476800fdb1cc9a8d39c Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sat, 25 Oct 2025 14:50:47 +0000 Subject: [PATCH 2/6] test component --- _includes/bottom-navigation.html | 82 +++++++++++++++----------------- _layouts/page.html | 2 +- css/style.css | 9 ++-- 3 files changed, 45 insertions(+), 48 deletions(-) diff --git a/_includes/bottom-navigation.html b/_includes/bottom-navigation.html index b5c117ac01..10ce134c1f 100644 --- a/_includes/bottom-navigation.html +++ b/_includes/bottom-navigation.html @@ -1,52 +1,46 @@ -{% comment %} - This component finds the current page within its collection - (based on `page.menu`) and generates 'Previous' and 'Next' links. -{% endcomment %} - -{% assign collection_name = page.menu %} - -{% if collection_name %} - {% assign collection = site[collection_name] %} - - {% if collection %} - {% comment %} Find the current page's index in the sorted collection {% endcomment %} - {% for doc in collection %} - {% if doc.url == page.url %} - {% assign current_index = forloop.index0 %} - {% break %} - {% endif %} - {% endfor %} +{% assign current_menu = page.menu %} +{% assign current_lang = page.lang %} - {% comment %} Assign 'prev_page' and 'next_page' based on the index {% endcomment %} - {% if current_index %} - {% assign prev_index = current_index | minus: 1 %} - {% if prev_index >= 0 %} - {% assign prev_page = collection[prev_index] %} - {% endif %} +{% if current_menu and current_lang %} - {% assign next_index = current_index | plus: 1 %} - {% if next_index < collection.size %} - {% assign next_page = collection[next_index] %} - {% endif %} + {% 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 %} - {% comment %} Render the navigation links if either page exists {% endcomment %} - {% if prev_page or next_page %} -
- + {% 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 %} + + {% endif %} + {% endif %} \ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index a289dac078..e013c5b3ab 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -28,8 +28,8 @@
{{ content }} + {% include bottom-navigation.html %} {% include github-edit-btn.html %} - {% include bottom-nav.html %}
{% endif %} diff --git a/css/style.css b/css/style.css index 48d13fa031..27d7880552 100644 --- a/css/style.css +++ b/css/style.css @@ -686,13 +686,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); @@ -1174,8 +1177,9 @@ h2 a { display: flex; justify-content: space-between; flex-wrap: wrap; - margin-top: 1.5rem; + margin: 1rem; font-weight: 500; + font-size: 1.2rem; } .bottom-nav-prev { @@ -1183,7 +1187,6 @@ h2 a { } .bottom-nav-next { - margin-left: auto; text-align: right; } From 718d36434b34bb636bdf75c6a6c18980a78b5f42 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sat, 25 Oct 2025 20:29:08 +0530 Subject: [PATCH 3/6] add bottom navigation on guide pages --- _config.yml | 7 +++++-- en/guide/behind-proxies.md | 1 + en/guide/database-integration.md | 1 + en/guide/debugging.md | 1 + en/guide/error-handling.md | 1 + en/guide/migrating-4.md | 1 + en/guide/migrating-5.md | 1 + en/guide/overriding-express-api.md | 1 + en/guide/routing.md | 1 + en/guide/using-middleware.md | 1 + en/guide/using-template-engines.md | 1 + en/guide/writing-middleware.md | 1 + 12 files changed, 16 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 39d91f7124..7c4845aa22 100644 --- a/_config.yml +++ b/_config.yml @@ -76,6 +76,9 @@ collections: starter: output: true sort_by: order + guide: + output: true + sort_by: order # Build settings @@ -84,7 +87,7 @@ plugins: - jekyll-github-metadata highlighter: rouge -# library used for syntax highlighting +# library used for syntax hilighting markdown: kramdown kramdown: @@ -93,7 +96,7 @@ kramdown: hard_wrap: false syntax_highlighter: rouge -exclude: +exclude: gh - [uk/CHANGELOG.md] - vendor/bundle - node_modules/ diff --git a/en/guide/behind-proxies.md b/en/guide/behind-proxies.md index 38109f5a96..669e65d9c3 100755 --- 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 index 5f0956f65c..a2b63ac5b5 100644 --- 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 index 4f2f04e396..e71cce273a 100755 --- 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 index 493dafe8eb..1dcc0cf470 100755 --- 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 index 32776440f8..a45f550a27 100755 --- 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 index 99a5b8fb9f..8e03cb7692 100755 --- 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 index 032e3dd625..5210622ff2 100644 --- 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 index 8ff238884a..4f311aba3c 100755 --- 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 index ad5b80ca25..c0469d03ca 100644 --- 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 index c043102e88..9921ce5b7a 100755 --- 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 index 0b02f20312..35d2486f57 100755 --- 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" --- From 41ae18b8e98fae1a4e25a514ec110a774fb62aad Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sat, 25 Oct 2025 20:48:58 +0530 Subject: [PATCH 4/6] test ci --- _config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 7c4845aa22..40c3321ede 100644 --- a/_config.yml +++ b/_config.yml @@ -87,7 +87,7 @@ plugins: - jekyll-github-metadata highlighter: rouge -# library used for syntax hilighting +# library used for syntax highlighting markdown: kramdown kramdown: @@ -96,7 +96,7 @@ kramdown: hard_wrap: false syntax_highlighter: rouge -exclude: gh +exclude: - [uk/CHANGELOG.md] - vendor/bundle - node_modules/ From da813de8dc75db98d7ed6d3a11bf82bc6bccb96a Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sun, 26 Oct 2025 08:01:33 +0530 Subject: [PATCH 5/6] add bottom navigation on advance and resources pages --- _config.yml | 6 ++++++ _includes/header.html | 2 +- css/style.css | 2 +- en/advanced/best-practice-performance.md | 1 + en/advanced/best-practice-security.md | 1 + en/advanced/developing-template-engines.md | 1 + en/advanced/healthcheck-graceful-shutdown.md | 1 + en/advanced/security-updates.md | 1 + en/resources/community.md | 1 + en/resources/contributing.md | 1 + en/resources/glossary.md | 1 + en/resources/middleware.md | 1 + en/resources/utils.md | 1 + 13 files changed, 18 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 40c3321ede..a53e453901 100644 --- a/_config.yml +++ b/_config.yml @@ -79,6 +79,12 @@ collections: guide: output: true sort_by: order + advanced: + output: true + sort_by: order + resources: + output: true + sort_by: order # Build settings diff --git a/_includes/header.html b/_includes/header.html index b000605958..190e035ce6 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -176,7 +176,7 @@