From 668ee10e2566dfef27ee073389f1d67f9f3a9c8f Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Fri, 27 Jul 2018 19:35:28 +0200
Subject: [PATCH] =?UTF-8?q?adapte=20le=20titre=20=C3=A0=20la=20page=20et?=
 =?UTF-8?q?=20ajoute=20un=20robots.txt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                     | 80 ++++++++++++++++++++++++++++++++--
 robots.txt                     |  2 +
 source/components/ui/index.css |  6 ++-
 source/webpack.common.js       | 10 ++---
 4 files changed, 88 insertions(+), 10 deletions(-)
 create mode 100644 robots.txt
diff --git a/index.html b/index.html
index 713b60ca8..d97317767 100644
--- a/index.html
+++ b/index.html
@@ -7,23 +7,95 @@
 	<meta name="viewport" content="initial-scale=1">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="google-site-verification" content="C03WwnrJP0FLqf83ibMBA7_N-TLQcwsJaAhqKXppxaE" />
-	<title>🇫🇷 Set up in France</title>
-	<meta name="description" content="Simulation du prix d'une embauche en France et calcul du salaire net à partir du brut : CDD, statut cadre, cotisations sociales, retraite..."
+	<meta name="description" content="<%= htmlWebpackPlugin.options.description %>"
 	 data-react-helmet="true">
 	<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
 	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,600|IBM+Plex+Sans' rel='stylesheet' type='text/css'>
 	<link rel="manifest" href="/manifest.webmanifest">
+	<title><%= htmlWebpackPlugin.options.title %></title>
 	<style>
 		/* Prevent FOUC effect */
-
 		#js {
-			display: none
+			opacity: 0
 		}
+		/* CSS Loader */
+		#lds-ellipsis {
+			display: inline-block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			animation: appear 0.6s;
+			transform: translate(calc(50vw - 32px), 40vh);
+			width: 64px;
+			height: 64px;
+		}
+		#lds-ellipsis div {
+			position: absolute;
+			top: 27px;
+			width: 11px;
+			height: 11px;
+			border-radius: 50%;
+			background: rgb(41, 117, 209);
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		}
+		#lds-ellipsis div:nth-child(1) {
+			left: 6px;
+			animation: lds-ellipsis1 0.6s infinite;
+		}
+		#lds-ellipsis div:nth-child(2) {
+			left: 6px;
+			animation: lds-ellipsis2 0.6s infinite;
+		}
+		#lds-ellipsis div:nth-child(3) {
+			left: 26px;
+			animation: lds-ellipsis2 0.6s infinite;
+		}
+		#lds-ellipsis div:nth-child(4) {
+			left: 45px;
+			animation: lds-ellipsis3 0.6s infinite;
+		}
+		@keyframes appear {
+			from {
+				opacity: 0;
+			}
+			60% {
+				opacity: 0;
+			}
+			100% {
+				opacity: 1;
+			}
+		}
+		@keyframes lds-ellipsis1 {
+			0% {
+				transform: scale(0);
+			}
+			100% {
+				transform: scale(1);
+			}
+		}
+		@keyframes lds-ellipsis3 {
+			0% {
+				transform: scale(1);
+			}
+			100% {
+				transform: scale(0);
+			}
+		}
+		@keyframes lds-ellipsis2 {
+			0% {
+				transform: translate(0, 0);
+			}
+			100% {
+				transform: translate(19px, 0);
+			}
+		}
+
 	</style>
 	<meta name="theme-color" content="#2975d1">
 </head>
 
 <body>
+	<div id="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 	<div id="js" />
 	<script src="https://use.fontawesome.com/1da10bbdec.js"></script>
 	<script type="text/javascript">
diff --git a/robots.txt b/robots.txt
new file mode 100644
index 000000000..77470cb39
--- /dev/null
+++ b/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
\ No newline at end of file
diff --git a/source/components/ui/index.css b/source/components/ui/index.css
index 8cda9b4d1..e039ab0b4 100644
--- a/source/components/ui/index.css
+++ b/source/components/ui/index.css
@@ -37,5 +37,9 @@ ul.ui__.no-bullet {
 }
 
 #js {
-	display: block;
+	opacity: 1;
+	transition: all 0.4s;
+}
+#lds-ellipsis {
+	display: none;
 }
diff --git a/source/webpack.common.js b/source/webpack.common.js
index ef52388a7..20ce5b055 100644
--- a/source/webpack.common.js
+++ b/source/webpack.common.js
@@ -43,10 +43,6 @@ module.exports = {
 					}
 				]
 			},
-			{
-				test: /\.html$/,
-				loader: 'html-loader'
-			},
 			{
 				test: /\.(jpe?g|png|svg)$/,
 				use: {
@@ -84,11 +80,15 @@ module.exports = {
 		new HTMLPlugin({
 			template: 'index.html',
 			chunks: ['infrance'],
+			title: 'My company in france 🇫🇷',
+			description: "The easy guide to help you start your business in france. From registering your company to hiring your first employee.",
 			filename: 'infrance.html'
 		}),
 		new HTMLPlugin({
 			template: 'index.html',
 			chunks: ['embauche'],
+			title: 'Simulateur d\'embauche 🤝',
+			description: "Simulation du prix d'une embauche en France et calcul du salaire net à partir du brut : CDD, statut cadre, cotisations sociales, retraite...",
 			filename: 'embauche.html',
 		}),
 		new HTMLPlugin({
@@ -96,6 +96,6 @@ module.exports = {
 			chunks: ['colour-chooser'],
 			filename: 'couleur.html'
 		}),
-		new CopyPlugin(['./manifest.webmanifest', './source/sites/embauche.gouv.fr/images/logo'])
+		new CopyPlugin(['./manifest.webmanifest', './source/sites/embauche.gouv.fr/images/logo', './robots.txt'])
 	]
 }
