fix: replace h3 navigation with semantic nav in starter pages

Author: sanajitjana

css/style.css

@@ -871,7 +871,6 @@ div.desktop-lang-switcher {
 .page-navigation {
   margin-top: 2rem;
   padding: 1rem 0;
-  border-top: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;

de/starter/hello-world.md

@@ -44,6 +44,4 @@ $ node app.js
 
 Laden Sie dann [http://localhost:3000/](http://localhost:3000/) in einen Browser, um die Ausgabe zu sehen.
 
-<div class="page-navigation">
-[Previous: Installing ](/{{ page.lang }}/starter/installing.html) [Next: Express Generator ](/{{ page.lang }}/starter/generator.html)
-</div>
+### [Previous: Installing ](/{{ page.lang }}/starter/installing.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Express Generator ](/{{ page.lang }}/starter/generator.html)

en/starter/basic-routing.md

@@ -65,6 +65,6 @@ app.delete('/user', (req, res) => {
 
 For more details about routing, see the [routing guide](/{{ page.lang }}/guide/routing.html).
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Previous: Express application generator ](/{{ page.lang }}/starter/generator.html) [Next: Serving static files in Express ](/{{ page.lang }}/starter/static-files.html)
-</div>
+</nav>

en/starter/examples.md

@@ -18,6 +18,6 @@ These are some additional examples with more extensive integrations.
 - [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
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Previous: Static Files ](/{{ page.lang }}/starter/static-files.html) [Next: FAQ ](/{{ page.lang }}/starter/faq.html)
-</div>
+</nav>

en/starter/generator.md

@@ -125,6 +125,6 @@ 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.
 </div>
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Previous: Hello World ](/{{ page.lang }}/starter/hello-world.html) [Next: Basic routing](/{{ page.lang }}/starter/basic-routing.html)
-</div>
+</nav>

en/starter/hello-world.md

@@ -48,6 +48,6 @@ $ node app.js
 
 Then, load `http://localhost:3000/` in a browser to see the output.
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Previous: Installing ](/{{ page.lang }}/starter/installing.html) [Next: Express Generator ](/{{ page.lang }}/starter/generator.html)
-</div>
+</nav>

en/starter/installing.md

@@ -50,6 +50,6 @@ $ 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.
 </div>
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Next: Hello World ](/{{ page.lang }}/starter/hello-world.html)
-</div>
+</nav>

en/starter/static-files.md

@@ -78,6 +78,6 @@ 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).
 
-<div class="page-navigation">
+<nav aria-label="breadcrumb" class="page-navigation" markdown="1">
 [Previous: Basic Routing ](/{{ page.lang }}/starter/basic-routing.html) [Next: More examples ](/{{ page.lang }}/starter/examples.html)
-</div>
+</nav>