Add Fullscreen in viewer, Track links with Google Analytics, Use .env file

- Fullscreen is a component that watches a store value set by the Carousel component on a picture click
- Use a .env file for API and website related settings and informations
- Google Analytics is now in place, tracking each routes link and viewer photo change

rollup.config.js

@@ -7,121 +7,121 @@ import babel from 'rollup-plugin-babel'
 // import browsersync from 'rollup-plugin-browsersync'
 import autoPreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
-import config from 'sapper/config/rollup'
+import sapperConfig from 'sapper/config/rollup'
+import { config } from 'dotenv'
 import pkg from './package.json'
 
 // Define environment and things
 const mode = process.env.NODE_ENV
 const dev = mode === 'development'
 const legacy = !!process.env.SAPPER_LEGACY_BUILD
+const replaceOptions = {
+    'process.env.NODE_ENV': JSON.stringify(mode),
+    'process.env.CONFIG': JSON.stringify(config().parsed)
+}
 
 // Svelte
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
 
 // Preprocessors
 const preprocess = autoPreprocess({
-	scss: {
-		includePaths: ['src', 'node_modules'],
-		renderSync: true
-	},
-	postcss: true
+    scss: {
+        includePaths: ['src', 'node_modules'],
+        renderSync: true
+    },
+    postcss: true
 })
 
 
 export default {
-	/*
-	** Client
-	*/
-	client: {
-		input: config.client.input(),
-		output: {
-			...config.client.output(),
-			// ...dev && { exports: 'named' }
-		},
-		// experimentalCodeSplitting: true,
-		plugins: [
-			// Javascript
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				dev,
-				hydratable: true,
-				emitCss: true,
-				// css: css => css.write('static/bundle.css'),
-				preprocess
-			}),
-			resolve({
-				browser: true,
-				extensions: ['.mjs', '.js', '.svelte', '.scss', '.json', '.html'],
-				dedupe: ['svelte']
-			}),
-			commonjs(),
-			// dev && eslint(),
-			legacy && babel({
-				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				exclude: ['*.scss', '*.css', 'node_modules/@babel/**'],
-				runtimeHelpers: true
-			}),
+    /*
+    ** Client
+    */
+    client: {
+        input: sapperConfig.client.input(),
+        output: sapperConfig.client.output(),
+        plugins: [
+            // Javascript
+            replace({
+                'process.browser': true,
+                ...replaceOptions
+            }),
+            svelte({
+                dev,
+                preprocess,
+                hydratable: true,
+                emitCss: true,
+                // css: css => css.write('static/bundle.css')
+            }),
+            resolve({
+                browser: true,
+                extensions: ['.mjs', '.js', '.svelte', '.scss', '.json', '.html'],
+                dedupe: ['svelte']
+            }),
+            commonjs(),
+            // dev && eslint(),
+            legacy && babel({
+                extensions: ['.js', '.mjs', '.html', '.svelte'],
+                exclude: ['*.scss', '*.css', 'node_modules/@babel/**'],
+                runtimeHelpers: true
+            }),
 
-			// Compress Javascript
-			!dev && terser({
-				module: true
-			}),
-		],
+            // Compress Javascript
+            !dev && terser({
+                module: true
+            }),
+        ],
 
-		onwarn,
-	},
+        onwarn,
+    },
 
 
-	/*
-	** Server
-	*/
-	server: {
-		input: config.server.input(),
-		output: config.server.output(),
-		plugins: [
-			replace({
-				'process.browser': false,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			svelte({
-				dev,
-				generate: 'ssr',
-				preprocess
-			}),
-			resolve({
-				browser: true,
-				extensions: ['.mjs', '.js', '.json', '.html', '.svelte', '.scss'],
-				dedupe: ['svelte']
-			}),
-			commonjs(),
-		],
-		external: Object.keys(pkg.dependencies).concat(
-			require('module').builtinModules || Object.keys(process.binding('natives'))
-		),
-
-		onwarn,
-	},
+    /*
+    ** Server
+    */
+    server: {
+        input: sapperConfig.server.input(),
+        output: sapperConfig.server.output(),
+        plugins: [
+            replace({
+                'process.browser': false,
+                ...replaceOptions
+            }),
+            svelte({
+                dev,
+                preprocess,
+                generate: 'ssr'
+            }),
+            resolve({
+                browser: true,
+                extensions: ['.mjs', '.js', '.json', '.html', '.svelte', '.scss'],
+                dedupe: ['svelte']
+            }),
+            commonjs(),
+        ],
+        external: Object.keys(pkg.dependencies).concat(
+            require('module').builtinModules || Object.keys(process.binding('natives'))
+        ),
+        onwarn,
+    },
 
 
-	/*
-	** Service worker
-	*/
-	// serviceworker: {
-	// 	input: config.serviceworker.input(),
-	// 	output: config.serviceworker.output(),
-	// 	plugins: [
-	// 		resolve(),
-	// 		replace({
-	// 			'process.browser': true,
-	// 			'process.env.NODE_ENV': JSON.stringify(mode)
-	// 		}),
-	// 		commonjs(),
-	// 		!dev && terser()
-	// 	],
+    /*
+    ** Service worker
+    */
+    // serviceworker: {
+    // 	input: sapperConfig.serviceworker.input(),
+    // 	output: sapperConfig.serviceworker.output(),
+    // 	plugins: [
+    // 		resolve(),
+    // 		replace({
+    // 			'process.browser': true,
+    // 			...replaceOptions
+    // 		}),
+    // 		commonjs(),
+    // 		!dev && terser()
+    // 	],
 
-	// 	onwarn,
-	// }
+    // 	onwarn,
+    // }
 }