From 034dbf504d9de61b52d0fda1e2c0d61bb9ae0626 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 21 Jan 2021 16:58:46 +0100
Subject: [PATCH] =?UTF-8?q?Classement=20des=20=C3=A9tapes,=20affichage=20d?=
 =?UTF-8?q?u=20sommaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Montage.js                                | 32 +++++++++++++++----
 src/wiki.js                                   | 17 +++++++---
 "src/\303\211tape.js"                         | 17 +++++++++-
 .../1/tuto/1-introduction.md"                 |  0
 .../1/tuto/2-collier de selle.md"             |  0
 .../1/tuto/3-pneu et chambre \303\240 air.md" |  0
 6 files changed, 53 insertions(+), 13 deletions(-)
 rename "v\303\251los/1/tuto/introduction.md" => "v\303\251los/1/tuto/1-introduction.md" (100%)
 rename "v\303\251los/1/tuto/collier de selle.md" => "v\303\251los/1/tuto/2-collier de selle.md" (100%)
 rename "v\303\251los/1/tuto/pneu et chambre \303\240 air.md" => "v\303\251los/1/tuto/3-pneu et chambre \303\240 air.md" (100%)

diff --git a/src/Montage.js b/src/Montage.js
index 044beec..4d5f1a8 100644
--- a/src/Montage.js
+++ b/src/Montage.js
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { imageResizer } from './utils'
 
 import { articles } from './Étape'
@@ -6,12 +7,29 @@ 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;
+`
diff --git a/src/wiki.js b/src/wiki.js
index aba3f13..cf637d0 100644
--- a/src/wiki.js
+++ b/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))
 
diff --git "a/src/\303\211tape.js" "b/src/\303\211tape.js"
index ea48d8f..f5b2aa8 100644
--- "a/src/\303\211tape.js"
+++ "b/src/\303\211tape.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,7 +14,7 @@ export default ({}) => {
 
 	const [lastEditDate, setLastEditDate] = useState(null)
 
-	const { body } = theOne
+	const { body, position, title } = theOne
 
 	getLastEdit(id, setLastEditDate)
 
@@ -21,8 +22,22 @@ export default ({}) => {
 		<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={`
diff --git "a/v\303\251los/1/tuto/introduction.md" "b/v\303\251los/1/tuto/1-introduction.md"
similarity index 100%
rename from "v\303\251los/1/tuto/introduction.md"
rename to "v\303\251los/1/tuto/1-introduction.md"
diff --git "a/v\303\251los/1/tuto/collier de selle.md" "b/v\303\251los/1/tuto/2-collier de selle.md"
similarity index 100%
rename from "v\303\251los/1/tuto/collier de selle.md"
rename to "v\303\251los/1/tuto/2-collier de selle.md"
diff --git "a/v\303\251los/1/tuto/pneu et chambre \303\240 air.md" "b/v\303\251los/1/tuto/3-pneu et chambre \303\240 air.md"
similarity index 100%
rename from "v\303\251los/1/tuto/pneu et chambre \303\240 air.md"
rename to "v\303\251los/1/tuto/3-pneu et chambre \303\240 air.md"