Classement des étapes, affichage du sommaire

src/Montage.js

@@ -1,17 +1,35 @@
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { imageResizer } from './utils'
 
 import { articles } from './Étape'
 
 export default () => (
 	<div css="p {margin: .3rem 0}">
 		<p>Suivez pas à pas ce guide, et vous aurez un vélo.</p>
-		<ul>
-			{articles.map((a) => (
-				<li key={a.id}>
-					<Link to={'/vélos/vl1/montage/' + a.id}>{a.id}</Link>
-				</li>
-			))}
-		</ul>
+		<Summary articles={articles} />
 	</div>
 )
+
+export const Summary = ({ articles }) => (
+	<ul css="li {margin-top: .4rem}">
+		{articles.map((a) => (
+			<li key={a.id}>
+				<Bubble>{a.position}</Bubble>
+				<Link to={'/vélos/vl1/montage/' + a.id}>{a.id}</Link>
+			</li>
+		))}
+	</ul>
+)
+
+const Bubble = styled.span`
+	background: var(--color);
+	padding: 0.2rem;
+	margin: 0 0.4rem;
+	border-radius: 1rem;
+	width: 1.2rem;
+	line-height: 1.2rem;
+	color: white;
+	display: inline-block;
+	text-align: center;
+`

src/wiki.js

@@ -6,11 +6,18 @@ const loadMdFiles = (req) =>
 		.map((key) => [key.replace('./', '').replace('.md', ''), req(key).default])
 
 const parseArticles = (rawArticles) =>
-	rawArticles.map(([id, string]) => ({
-		body: string,
-		attributes: {}, //no front matter here yet until we need attributes, it would load a yaml library
-		id,
-	}))
+	rawArticles.map(([positionAndId, string]) => {
+		const list = positionAndId.split(/(\d\-)/),
+			id = list.length > 1 ? list[2] : list[0]
+
+		return {
+			body: string,
+			attributes: {}, //no front matter here yet until we need attributes, it would load a yaml library
+			id,
+			title: id[0].toUpperCase() + id.substring(1),
+			position: list.length > 1 ? list[1].replace('-', '') : null,
+		}
+	})
 
 export const loadPages = (req) => parseArticles(loadMdFiles(req))
 

src/Étape.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Markdown } from './utils'
 import { useParams } from 'react-router-dom'
 import { WikiPage, loadPages, getLastEdit } from './wiki'
+import { Summary } from './Montage'
 
 var req = require.context('../vélos/1/tuto', true, /\.md$/)
 export const articles = loadPages(req)
@@ -13,16 +14,30 @@ export default ({}) => {
 
 	const [lastEditDate, setLastEditDate] = useState(null)
 
-	const { body } = theOne
+	const { body, position, title } = theOne
 
 	getLastEdit(id, setLastEditDate)
 
 	return (
 		<div
 			css={`
 				padding: 1rem;
+				header {
+					display: flex;
+					align-items: center;
+				}
+				header h2 {
+					margin-right: 1rem;
+				}
 			`}
 		>
+			<Summary articles={articles} />
+			<header>
+				<h2>{title}</h2>
+				<span>
+					{position} / {articles.length}
+				</span>
+			</header>
 			<WikiPage>
 				<p
 					css={`