Recueil + ancins articles

App.js

@@ -20,7 +20,6 @@ import AccueilEn from './Accueil.en'
 import Blog from './Blog'
 import Communs from './Communs'
 import Action from './Action'
-import Article from './Article'
 import Ecosystem from './Ecosystem'
 import About from './About'
 
@@ -58,9 +57,6 @@ const Container = () => (
 				<Route path="/en/">
 					<AccueilEn />
 				</Route>
-				<Route path="/blog/:id">
-					<Article />
-				</Route>
 				<Route path="/blog">
 					<Blog />
 				</Route>

Article.js

@@ -12,9 +12,12 @@ const getLastEdit = (name, action) =>
 	)
 		.then((res) => res.json())
 		.then((json) => {
-			const date = json[0].commit.committer.date
-
-			action(dateCool(new Date(date)))
+			try {
+				const date = json[0].commit.committer.date
+				action(dateCool(new Date(date)))
+			} catch (e) {
+				console.log(e)
+			}
 		})
 
 export const imageResizer = (size) => (src) =>
@@ -28,21 +31,31 @@ export default ({}) => {
 	const { id } = useParams(),
 		article = articles.find((a) => a.id === id),
 		{
-			attributes: { image, auteur, date },
+			attributes: { image, titre, auteur, date },
 			body,
-		} = article
+		} = article,
+		// imported articles from wordpress have english attributes
+		author = auteur || article.attributes.author,
+		title = titre || article.attributes.title,
+		year = new Date(date).getFullYear()
 
 	const [lastEditDate, setLastEditDate] = useState(null)
 	getLastEdit(id, setLastEditDate)
 
 	return (
 		<div css={() => articleStyle}>
-			<img css="max-height: 30rem;" src={imageResizer('l')(image)}></img>
+			{image && (
+				<img css="max-height: 30rem;" src={imageResizer('l')(image)}></img>
+			)}
+			{title && <h1>{title}</h1>}
 			<p
 				css={`
 					text-align: center;
 					font-style: italic;
 					margin-bottom: 2rem;
+					border-bottom: 1px solid lightGrey;
+					border-top: 1px solid lightGrey;
+					padding: 0.4rem;
 				`}
 			>
 				<small>
@@ -56,24 +69,31 @@ export default ({}) => {
 							border-radius: 0.3rem;
 						`}
 					>
-						{auteur}
+						{author}
 					</span>
-					le {dateCool(date)}, mis à jour le{' '}
-					<a href={`https://github.com/${repo}/blob/master/articles/${id}.md`}>
-						{lastEditDate}
-					</a>
+					le {dateCool(date)}
+					{lastEditDate && (
+						<span>
+							, mis à jour le{' '}
+							<a
+								href={`https://github.com/${repo}/blob/master/articles/${id}.md`}
+							>
+								{lastEditDate}
+							</a>
+						</span>
+					)}
 				</small>
 			</p>
 			<ReactMarkdown
-				renderers={{ image: ImageRenderer }}
+				renderers={{ image: ImageRenderer(year) }}
 				source={body}
 				escapeHtml={false}
 			/>
 			<p>
 				Venez discuter de cet article{' '}
 				<a
 					class="twitter-share-button"
-					href="https://twitter.com/intent/tweet?text=La crise, ou la ville idéale ? kont.me/ville-id%C3%A9ale-ou-crise @maeool"
+					href="https://twitter.com/intent/tweet?text= Super article à lire sur le blog @fab_mob"
 					data-size="large"
 				>
 					sur twitter
@@ -83,7 +103,14 @@ export default ({}) => {
 	)
 }
 
-const ImageRenderer = ({ src }) => <img src={imageResizer('l')(src)} />
+const ImageRenderer = (year) => ({ src: rawSrc }) => {
+	const src = rawSrc.includes('http')
+		? imageResizer('l')(rawSrc)
+		: rawSrc.indexOf('images/') === 0
+		? `/articles/${year}/images/${rawSrc.split('images/')[1]}`
+		: rawSrc
+	return <img src={src} />
+}
 
 const articleStyle = `
 	max-width: 800px;

Blog.js

@@ -2,9 +2,11 @@ import React from 'react'
 import { imageResizer } from './Article'
 import { Link } from 'react-router-dom'
 import articles from './getArticles.js'
+import { Switch, Route, useParams } from 'react-router-dom'
+import Article from './Article'
 
 export const dateCool = (date) =>
-	date.toLocaleString(undefined, {
+	(typeof date === 'string' ? new Date(date) : date).toLocaleString(undefined, {
 		weekday: 'long',
 		year: 'numeric',
 		month: 'long',
@@ -37,62 +39,138 @@ const Header = () => (
 
 export default ({}) => (
 	<main css={pageLayout}>
-		<Header />
-		<section
+		<Switch>
+			<Route exact path="/blog/:id">
+				<Article />
+			</Route>
+			<Route path="/blog/année/:year">
+				<Articles />
+			</Route>
+			<Route path="/blog/">
+				<Articles year="2020" />
+			</Route>
+		</Switch>
+	</main>
+)
+
+const years = ['2020', '2019', '2018', '2017', '2016', '2015', '2014']
+
+const Articles = ({ year }) => {
+	let year2 = year || useParams().year
+	console.log(year2, year, useParams())
+	return (
+		<div>
+			<Header />
+			<section>
+				<YearMenu year2={year2} />
+				<ul
+					css={`
+						display: flex;
+						flex-wrap: wrap;
+						align-items: center;
+						justify-content: center;
+						aside {
+							text-align: center;
+							width: 20rem;
+							height: 28rem;
+						}
+					`}
+				>
+					{articles
+						.sort((a1, a2) =>
+							new Date(a1.attributes.date) > new Date(a2.attributes.date)
+								? -1
+								: 1
+						)
+						.filter((a) => new Date(a.attributes.date).getFullYear() == year2)
+						.map((a) => (
+							<li key={a.id}>
+								<ArticleVignette {...a} />
+							</li>
+						))}
+				</ul>
+			</section>
+		</div>
+	)
+}
+const YearMenu = ({ year2 }) => (
+	<ul
+		css={`
+			display: flex;
+			justify-content: center;
+			li {
+				margin: 0 0.2rem;
+			}
+			button {
+				margin: 0;
+				padding: 0.1rem 0.6rem;
+			}
+		`}
+	>
+		{years.map((y) => (
+			<li key={y}>
+				<button css={y === year2 ? 'background: var(--color-secondary)' : ''}>
+					<Link to={'/blog/année/' + y}>{y}</Link>
+				</button>
+			</li>
+		))}
+	</ul>
+)
+
+const ArticleVignette = ({
+	id,
+	attributes: { date, résumé, titre, title, image },
+	body,
+}) => {
+	const résumé2 = résumé || body.split(' ').slice(0, 16).join(' ') + '...'
+	return (
+		<aside
 			css={`
-				display: flex;
-				flex-wrap: wrap;
-				align-items: center;
-				aside {
-					text-align: center;
-					width: 20rem;
-					height: 28rem;
+				p {
+					max-width: 36rem;
+					margin-bottom: 0.3rem;
+				}
+				header {
+					margin-bottom: 1rem;
 				}
+				header > a {
+					text-decoration: none;
+				}
+				h2 {
+					display: block;
+					text-decoration: none;
+					margin-bottom: 0.3rem;
+				}
+				margin-bottom: 3rem;
 			`}
 		>
-			{articles
-				.sort((a1, a2) => (a1.attributes.date > a2.attributes.date ? -1 : 1))
-				.map((a) => (
-					<aside
-						css={`
-							p {
-								max-width: 36rem;
-								margin-bottom: 0.3rem;
-							}
-							header {
-								margin-bottom: 1rem;
-							}
-							header > a {
-								text-decoration: none;
-							}
-							h2 {
-								display: block;
-								text-decoration: none;
-								margin-bottom: 0.3rem;
-							}
-							margin-bottom: 3rem;
-						`}
-					>
-						<header>
-							<Link to={'/blog/' + a.id}>
-								<h2>{a.attributes.titre}</h2>
-							</Link>
-							<small>
-								<small>{dateCool(a.attributes.date)}</small>
-							</small>
-						</header>
-						<Link to={'/blog/' + a.id}>
-							<img
-								css="max-width: 20rem; max-height: 10rem; box-shadow: rgb(147, 143, 143) 2px 2px 10px 0px;"
-								src={imageResizer('m')(a.attributes.image)}
-							></img>
-						</Link>
-						<p>{a.attributes.résumé} </p>
-						<Link to={'/blog/' + a.id}>
-							<em>Lire</em>
-						</Link>
-					</aside>
-				))}
-		</section>
-	</main>
-)
+			<header>
+				<Link to={'/blog/' + id}>
+					<h2>{titre || title}</h2>
+				</Link>
+				<small>
+					<small>{dateCool(date)}</small>
+				</small>
+			</header>
+			<Link to={'/blog/' + id}>
+				<img
+					css={`
+						max-width: 20rem;
+						max-height: 10rem;
+						box-shadow: rgb(147, 143, 143) 2px 2px 10px 0px;
+						${!image ? 'padding: .4rem' : ''}
+					`}
+					src={
+						image
+							? imageResizer('m')(image)
+							: '/images/logo fabmob sans texte.svg'
+					}
+				></img>
+			</Link>
+			<p>{résumé2} </p>
+			<Link to={'/blog/' + id}>
+				<em>Lire</em>
+			</Link>
+		</aside>
+	)
+}

articles/2014/ouishare-fest.md

@@ -0,0 +1,10 @@
+---
+title: "Ouishare Fest du 20 au 22 mai au Cabaret Sauvage"
+date: "2014-12-10T16:30:18.000Z"
+categories: 
+  - "actualites"
+tags: 
+author: "Damien Colloc"
+---
+
+Le Ouishare Festival c'est 3 jours pour écouter, parler et réfléchir autour de l'économie du partage. Pour s'inscrire c'est ici : [http://2015.ouisharefest.com/](http://2015.ouisharefest.com/)

articles/2015/berlin21_2205.md

@@ -0,0 +1,10 @@
+---
+title: "La FabMob sera représentée à deux conférences sur l'innovation de Berlin les 21 et 22 mai"
+date: "2015-01-10T16:26:02.000Z"
+categories: 
+  - "actualites"
+tags: 
+author: "Damien Colloc"
+---
+
+Les candidatures au Startup Bootcamp de Berlin "Transport et Energy" sont ouvertes jusqu'au 7 juin. PLus d'info [ici](http://www.startupbootcamp.org/accelerator/berlin.html)

articles/2015/colloque-routes-intelligentes-et-vehicules-communicants.md

@@ -0,0 +1,10 @@
+---
+title: "Le 16 Juin, Colloque \"Routes intelligentes et véhicules communicants\""
+date: "2015-06-15T09:04:50.000Z"
+categories: 
+  - "actualites"
+tags: 
+author: "Gabriel Plassat"
+---
+
+

articles/2015/conference-smart-mobilite-issy-les-moulineaux.md

@@ -0,0 +1,10 @@
+---
+title: "Le 16 Juin, Conférence \"smart mobilité\" Issy les Moulineaux"
+date: "2015-06-15T09:08:44.000Z"
+categories: 
+  - "actualites"
+tags: 
+author: "Gabriel Plassat"
+---
+
+