Merge branch 'tuto'

src/Montage.js

@@ -1,8 +1,36 @@
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 import { imageResizer } from './utils'
-export default ({ vélo, chosen, notChosen, prixTotal }) => (
-	<div css="p {margin: .3rem 0}">
-		<p>Page en cours de construction ;-)</p>
-		<img src={imageResizer('l')('https://imgur.com/FMauafV.png')} />
+
+import { articles } from './Étape'
+
+export default () => (
+	<div css="p {margin: 2rem 0} img {margin: 2rem 0}">
+		<p>Suivez pas à pas ce guide, et vous aurez un vélo.</p>
+		<Summary articles={articles} />
+		<img src="https://velolibre-images.netlify.app/enneigé.medium.webp" />
 	</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/Vl1.js

@@ -1,10 +1,11 @@
 import { useLocation, Link, Route, Switch } from 'react-router-dom'
-import vélo from '../vélos/1.yaml'
+import vélo from '../vélos/1/specs.yaml'
 import Commande from './Commande'
-import Montage from './Montage'
+import Étape from './Étape'
 import { cascading } from './Composant'
 import Specifications from './Specifications'
 import velos from './velos.yaml'
+import Montage from './Montage'
 
 const hasMinimumAttributes = (el) => el.marque && el.modèle && el.prix && el.url
 
@@ -125,8 +126,11 @@ color: var(--darkColor)
 				</ul>
 			</header>
 			<Switch>
-				<Route path="/vélos/vl1/montage">
-					<Montage {...{ vélo, composants, chosen, notChosen, prixTotal }} />
+				<Route exact path="/vélos/vl1/montage">
+					<Montage />
+				</Route>
+				<Route path="/vélos/vl1/montage/:id">
+					<Étape />
 				</Route>
 				<Route path="/vélos/vl1/commande">
 					<Commande {...{ composants, chosen, notChosen, prixTotal }} />

src/utils.js

@@ -1,42 +1,42 @@
 import ReactMarkdown from 'react-markdown/with-html'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import gfm from 'remark-gfm'
-const ImageRenderer = ({src}) => <img src={imageResizer('l')(src)} />
+const ImageRenderer = ({ src }) => <img src={imageResizer('l')(src)} />
 
 function RouterLink(props) {
 	return props.href.match(/^(https?:)?\/\//) ? (
 		<a href={props.href}>{props.children}</a>
 	) : (
-			<Link to={props.href}>{props.children}</Link>
-		)
+		<Link to={props.href}>{props.children}</Link>
+	)
 }
 
-
 const thumbnailWidth = '320',
 	fullWidth = '800'
 
 export const imageResizer = (size) => (src) =>
 	src.includes('imgur.com')
 		? src.replace(/\.(png|jpg)$/, size + '.jpg')
 		: src.includes('unsplash.com')
-			? src.replace(
+		? src.replace(
 				/w=[0-9]+\&/,
 				(_, p1) => `w=${size === 'm' ? thumbnailWidth : fullWidth}&`
-			)
-			: src.includes('medium.com')
-				? src.replace(
-					/max\/[0-9]+\//,
-					(_, p1) => `max/${size === 'm' ? thumbnailWidth : fullWidth}/`
-				)
-				: src
-
+		  )
+		: src.includes('medium.com')
+		? src.replace(
+				/max\/[0-9]+\//,
+				(_, p1) => `max/${size === 'm' ? thumbnailWidth : fullWidth}/`
+		  )
+		: src
 
-export const Markdown = ({source}) => <ReactMarkdown
-	renderers={{image: ImageRenderer, link: RouterLink}}
-	source={source}
-	escapeHtml={false}
-	plugins={[gfm]}
-/>
+export const Markdown = ({ source, imageRenderer: customImageRender }) => (
+	<ReactMarkdown
+		renderers={{ image: customImageRender || ImageRenderer, link: RouterLink }}
+		source={source}
+		escapeHtml={false}
+		plugins={[gfm]}
+	/>
+)
 
 export const domain = (url) => {
 	const a = document.createElement('a')

src/wiki.js

@@ -0,0 +1,102 @@
+import styled from 'styled-components'
+
+const loadMdFiles = (req) =>
+	[...req.keys()]
+		.filter((key) => !key.includes('brouillon'))
+		.map((key) => [key.replace('./', '').replace('.md', ''), req(key).default])
+
+const parseArticles = (rawArticles) =>
+	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))
+
+export const dateCool = (date) =>
+	date.toLocaleString(undefined, {
+		weekday: 'long',
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+	})
+
+const repo = 'laem/velolibre'
+
+export const getLastEdit = (name, action) =>
+	fetch(
+		`https://api.github.com/repos/${repo}/commits?path=src%2Farticles%2F${name}.md&page=1&per_page=1`
+	)
+		.then((res) => res.json())
+		.then((json) => {
+			try {
+				const date = json[0].commit.committer.date
+				action(dateCool(new Date(date)))
+			} catch (e) {
+				action('')
+			}
+		})
+export const WikiPage = styled.div`
+	max-width: 700px;
+	margin: 0 auto 4rem;
+	h1 {
+		text-align: center;
+	}
+	h2,
+	h3,
+	h4,
+	h5 {
+		margin-top: 2rem;
+	}
+	img {
+		max-width: 80%;
+		margin: 2rem auto;
+		display: block;
+	}
+	img + em {
+		color: #666;
+		text-align: center;
+		width: 100%;
+		display: inline-block;
+		margin: 0 auto 1rem;
+	}
+	hr {
+		border: 1px solid #eee;
+		width: 70%;
+		margin: 2rem auto;
+	}
+	blockquote {
+		border-left: 3px solid #4d4d4d;
+		padding-left: 1rem;
+		margin-left: 0;
+	}
+	code {
+		background: #eee;
+		padding: 0.1rem 0.4rem;
+		border-radius: 0.3rem;
+		max-width: 100%;
+		display: inline-block;
+		overflow: auto;
+		vertical-align: middle;
+	}
+
+	aside {
+		border: 1px solid #ddd;
+		border-radius: 0.3rem;
+		box-shadow: 1px 3px 8px #ddd;
+		padding: 1rem;
+		margin: 2rem 0.6rem;
+	}
+	aside h2,
+	aside h3 {
+		margin: 0.3rem;
+	}
+`

src/Étape.js

@@ -0,0 +1,79 @@
+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)
+
+export default ({}) => {
+	const { id } = useParams()
+	console.log(id, articles)
+	const theOne = articles.find(({ id: id2 }) => id === id2)
+
+	const [lastEditDate, setLastEditDate] = useState(null)
+
+	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={`
+						text-align: center;
+						font-style: italic;
+						opacity: 0.8;
+						margin-bottom: 2rem;
+					`}
+				>
+					<small>
+						{lastEditDate && (
+							<span>
+								Mis à jour le{' '}
+								<a
+									href={`https://github.com/${repo}/blob/master/src/articles/${id}.md`}
+								>
+									{lastEditDate}
+								</a>
+							</span>
+						)}
+					</small>
+				</p>
+				<Markdown imageRenderer={ImageRenderer(id)} source={body} />
+				<hr />
+			</WikiPage>
+		</div>
+	)
+}
+
+const ImageRenderer = (dir) => ({ src }) => {
+	const imageBase = 'https://velolibre-images.netlify.app/'
+	const ext = 'webp'
+
+	return (
+		<a href={`${imageBase}${dir}/${src}.${ext}`}>
+			<img src={`${imageBase}${dir}/${src}.medium.${ext}`} />
+		</a>
+	)
+}

vélos/1/tuto/1-introduction.md

@@ -0,0 +1,18 @@
+Prêt à monter votre super-vélo-ultime-t'as-vu-c'est-moi-qui-ai-fait ?
+
+Enfilez un jogging, et en fonction de la température, des chaussons en laine ou des sandales confortables.
+
+C'est aussi intimidant et facile qu'une recette de cuisine mais avec de la graisse industrielle à la place de l'huile d'olive.
+
+Voilà la 1ère règle à respecter : disposez de la graisse dès que vous installez une partie en métal sur une autre partie en métal.
+
+Je vous préviens : votre lieu d'installation, au moins pour la 1ère, sera un véritable chantier. Un conseil : le siège pour vous, le tabouret pour vos outils (pour pas vous rompre le dos toutes les 2 minutes), le banc ou la table pour les composants.
+
+> Personnellement, je n'ai pas vu l'intérêt du pied d'atelier, il faut juste faire attention à ne rien faire tomber. Même le réglage des vitesses peut se faire vélo retourné selle en bas.
+
+Première étape, oh combien importante pour vos premiers vélos : disposer tous les composants à votre guise pour prendre une photos du mezze de métal et de plastique qui deviendra votre vélo.
+
+![](mezze)
+
+![](mezze-plus)
+_J'ai utilisé le carton du cadre pour poser tous mes composants en évitant les chocs des petites manipulations hasardeuses_

vélos/1/tuto/2-collier de selle.md

@@ -0,0 +1,24 @@
+Dévisser le collier, graisser l'intérieur.
+
+![](graisse-collier)
+
+Graisser le haut du tube de cadre.
+
+![](graisse-tube)
+
+L'installer délicatement pour ne pas défaire la peinture des bords du tube souvent fragile.
+
+![](collier-installé)
+
+Graisser la tige de selle, enfiler la selle à l'intérieur (on s'occupera de son réglage après).
+
+Serrer le collier avec votre clef allen.
+
+![](serrage-collier)
+_Ici nous utilisons une `clef dynamométrique` fixée à 5Nm, ce qui correspond en général au couple du collier de selle. Toute clef allen peut la remplacer, mais allez y pas à pas, plutôt qu'à la bourrin_
+
+Contempler votre premier succès.
+
+![](fin)
+
+> Si vous avez un pied d'atelier, vous pouvez maintenant y attacher la tige de selle pour bosser debout :)

vélos/1/tuto/4-suite à venir.md

@@ -0,0 +1 @@
+Ce tuto est en cours de rédaction (et le site en cours de construction), mais devrait être terminé avant fin janvier :)