From d823f2805422a992893cb31be854a119e7e0b988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 3 Mar 2020 15:36:57 +0100
Subject: [PATCH] Restructure utility files, Use a bundle.css to fix CSS issues

---
 pnpm-lock.yaml                                | 14 ---------
 rollup.config.js                              | 29 ++++++++++---------
 src/atoms/IconGlobe.svelte                    |  2 +-
 src/atoms/IconGlobeSmall.svelte               |  2 +-
 src/atoms/LinkTranslate.svelte                |  2 +-
 src/atoms/TitleSite.svelte                    |  2 +-
 src/molecules/InteractiveGlobe.svelte         |  2 +-
 src/molecules/Photo.svelte                    |  4 +--
 src/molecules/Switcher.svelte                 |  4 +--
 src/organisms/Carousel.svelte                 |  4 +--
 src/organisms/Footer.svelte                   |  2 +-
 src/organisms/Locations.svelte                |  7 ++---
 src/organisms/Pagination.svelte               |  2 +-
 src/routes/_layout.svelte                     | 22 +++++++-------
 src/routes/choose.svelte                      |  4 ++-
 src/routes/credits.svelte                     |  2 +-
 src/routes/index.svelte                       |  6 ++--
 .../location/[country]/[location].svelte      |  4 +--
 .../[country]/[location]/[photo].svelte       |  4 +--
 src/template.html                             |  5 ++--
 src/{ => utils}/animations.js                 |  0
 src/{ => utils}/functions.js                  |  0
 src/{ => utils}/store.js                      |  0
 23 files changed, 56 insertions(+), 67 deletions(-)
 rename src/{ => utils}/animations.js (100%)
 rename src/{ => utils}/functions.js (100%)
 rename src/{ => utils}/store.js (100%)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f414da..d332cca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,11 +1,9 @@
 dependencies:
-  '@polka/send': 0.4.0
   animejs: 3.1.0
   compression: 1.7.4
   dayjs: 1.8.21
   imagesloaded: 4.1.4
   lazysizes: 5.2.0
-  node-fetch: 2.6.0
   normalize.css: 8.0.1
   polka: 1.0.0-next.11
   shufflejs: 5.2.3
@@ -852,10 +850,6 @@ packages:
       node: '>=4.0.0'
     resolution:
       integrity: sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
-  /@polka/send/0.4.0:
-    dev: false
-    resolution:
-      integrity: sha1-4nccVnHTYXWDJTSriGqIT3XzHm8=
   /@polka/url/0.5.0:
     dev: false
     resolution:
@@ -2762,12 +2756,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
-  /node-fetch/2.6.0:
-    dev: false
-    engines:
-      node: 4.x || >=6.0.0
-    resolution:
-      integrity: sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
   /node-gyp/3.8.0:
     dependencies:
       fstream: 1.0.12
@@ -4449,7 +4437,6 @@ specifiers:
   '@babel/plugin-transform-runtime': ^7.8.3
   '@babel/preset-env': ^7.8.6
   '@babel/runtime': ^7.8.4
-  '@polka/send': ^0.4.0
   '@rollup/plugin-commonjs': ^11.0.2
   '@rollup/plugin-node-resolve': ^7.1.1
   '@rollup/plugin-replace': ^2.3.1
@@ -4467,7 +4454,6 @@ specifiers:
   eslint-plugin-svelte3: ^2.7.3
   imagesloaded: ^4.1.4
   lazysizes: ^5.2.0
-  node-fetch: ^2.6.0
   node-sass: ^4.13.1
   normalize.css: ^8.0.1
   polka: ^1.0.0-next.9
diff --git a/rollup.config.js b/rollup.config.js
index 035d837..2025f00 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,7 +5,7 @@ import svelte from 'rollup-plugin-svelte'
 import babel from 'rollup-plugin-babel'
 // import { eslint } from 'rollup-plugin-eslint'
 // import browsersync from 'rollup-plugin-browsersync'
-import sveltePreprocess from 'svelte-preprocess'
+import autoPreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup'
 import pkg from './package.json'
@@ -19,8 +19,10 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
 
 // Preprocessors
-const preprocess = sveltePreprocess({
-	scss: { includePaths: ['node_modules', 'src'] },
+const preprocess = autoPreprocess({
+	scss: {
+		includePaths: ['src', 'node_modules'],
+	},
 	postcss: true
 })
 
@@ -33,21 +35,22 @@ export default {
 		input: config.client.input(),
 		output: {
 			...config.client.output(),
-			...dev && { exports: 'named' }
+			// ...dev && { exports: 'named' }
 		},
-		experimentalCodeSplitting: true,
+		// experimentalCodeSplitting: true,
 		plugins: [
 			// Javascript
-			svelte({
-				dev,
-				preprocess,
-				hydratable: true,
-				emitCss: true
-			}),
 			replace({
 				'process.browser': true,
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
+			svelte({
+				dev,
+				hydratable: true,
+				emitCss: false,
+				css: css => css.write('static/bundle.css'),
+				preprocess
+			}),
 			resolve({
 				browser: true,
 				extensions: ['.mjs', '.js', '.svelte', '.scss', '.json', '.html'],
@@ -84,8 +87,8 @@ export default {
 			}),
 			svelte({
 				dev,
-				preprocess,
-				generate: 'ssr'
+				generate: 'ssr',
+				preprocess
 			}),
 			resolve({
 				browser: true,
diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte
index ac0d28e..fc56bf0 100644
--- a/src/atoms/IconGlobe.svelte
+++ b/src/atoms/IconGlobe.svelte
@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let width = 56
     export let color = '#000'
diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte
index 6e6c29d..d1019ec 100644
--- a/src/atoms/IconGlobeSmall.svelte
+++ b/src/atoms/IconGlobeSmall.svelte
@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let width = 56
     export let color = '#000'
diff --git a/src/atoms/LinkTranslate.svelte b/src/atoms/LinkTranslate.svelte
index 5be9d6b..a45012f 100644
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 
     export let href = '/'
     export let text = ''
diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte
index 7ccd076..1578ab6 100644
--- a/src/atoms/TitleSite.svelte
+++ b/src/atoms/TitleSite.svelte
@@ -1,5 +1,5 @@
 <script>
-    import * as fn from '../functions'
+    import * as fn from '../utils/functions'
 </script>
 
 <div class="title-location title-location--inline">
diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte
index 53323e3..d868f70 100644
--- a/src/molecules/InteractiveGlobe.svelte
+++ b/src/molecules/InteractiveGlobe.svelte
@@ -4,7 +4,7 @@
     // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
 
     import { onMount } from 'svelte'
-    import { locations } from '../store'
+    import { locations } from '../utils/store'
 
 
     // Props
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index e1af0d4..d329e56 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -2,8 +2,8 @@
     import { onMount } from 'svelte'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
-    import { site, currentLocation } from '../store'
-    import * as fn from '../functions'
+    import { site, currentLocation } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index 2ff4e62..34cb069 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -1,7 +1,5 @@
 <script>
-    import {
-        currentLocation,
-    } from '../store'
+    import { currentLocation } from '../utils/store'
 
     // Components
     import IconGlobe from '../atoms/IconGlobe'
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index ad778ba..bc36ecb 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -1,8 +1,8 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { stores } from '@sapper/app'
-    import { currentLocation } from '../store'
-    import * as fn from '../functions'
+    import { currentLocation } from '../utils/store'
+    import * as fn from '../utils/functions'
     const dispatch = createEventDispatcher()
     const { page } = stores()
 
diff --git a/src/organisms/Footer.svelte b/src/organisms/Footer.svelte
index 1e1d8c0..84ea403 100644
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -1,6 +1,6 @@
 <script>
 	// Svelte
-	import { site, currentLocation } from '../store'
+	import { site, currentLocation } from '../utils/store'
 
 	// Components
 	import LinkTranslate from '../atoms/LinkTranslate'
diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte
index 25e6fbb..27cc691 100644
--- a/src/organisms/Locations.svelte
+++ b/src/organisms/Locations.svelte
@@ -1,10 +1,9 @@
 <script>
     import { onMount } from 'svelte'
     import { flip } from 'svelte/animate'
-    import { fly, fade } from 'svelte/transition'
-    import { locations, countries, continents } from '../store'
-    import { crossfadeReceive, crossfadeSend } from '../animations'
-    import * as fn from '../functions'
+    import { crossfadeReceive, crossfadeSend } from '../utils/animations'
+    import { locations, countries, continents } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import AOS from 'aos'
diff --git a/src/organisms/Pagination.svelte b/src/organisms/Pagination.svelte
index 5bc3bc8..135bebb 100644
--- a/src/organisms/Pagination.svelte
+++ b/src/organisms/Pagination.svelte
@@ -1,6 +1,6 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
-    import { currentLocation } from '../store'
+    import { currentLocation } from '../utils/store'
     const dispatch = createEventDispatcher()
 
     // Props
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 9a4761c..064b45b 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -5,10 +5,10 @@
         continents,
         countries,
         locations
-    } from '../store'
+    } from '../utils/store'
 
     export async function preload (page, session) {
-        const request = await this.fetch(apiEndpoints.gql, {
+        const req = await this.fetch(apiEndpoints.gql, {
             method: 'post',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ query: `{
@@ -54,13 +54,14 @@
                 }
             }`})
         })
-        const result = await request.json()
-
-        // Set data into store
-        site.set(result.data.site.data[0])
-        continents.set(result.data.continents.data)
-        countries.set(result.data.countries.data)
-        locations.set(result.data.locations.data)
+        const result = await req.json()
+        if (req.ok) {
+            // Set data into store
+            site.set(result.data.site.data[0])
+            continents.set(result.data.continents.data)
+            countries.set(result.data.countries.data)
+            locations.set(result.data.locations.data)
+        }
     }
 </script>
 
@@ -82,9 +83,8 @@
     $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
 </script>
 
-<!-- <style src="../style/style.scss" global></style> -->
 <style lang="scss" global>
-    @import "./style/style.scss";
+    @import "../style/style.scss";
 </style>
 
 <slot></slot>
diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte
index c3f2f1c..7f4f958 100644
--- a/src/routes/choose.svelte
+++ b/src/routes/choose.svelte
@@ -4,7 +4,9 @@
         site,
         currentLocation,
         currentPhotos
-    } from '../store'
+    } from '../utils/store'
+
+    // Depencencies
     import AOS from 'aos'
 
     // Components
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index e070ae6..9ef07c3 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte'
-    import { site } from '../store'
+    import { site } from '../utils/store'
 
     // Dependencies
     import AOS from 'aos'
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1ca5a18..98860c4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,7 +1,7 @@
 <script context="module">
 	import {
         apiEndpoints,
-    } from '../store'
+    } from '../utils/store'
 
 	// Preload data
 	export async function preload (page, session) {
@@ -18,8 +18,8 @@
 
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation, currentPhotos } from '../store'
-    import * as fn from '../functions'
+    import { site, currentLocation, currentPhotos } from '../utils/store'
+    import * as fn from '../utils/functions'
 
     // Dependencies
     import * as basicScroll from 'basicscroll'
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index 8302f64..b6e10ab 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -5,7 +5,7 @@
         locations,
         currentLocation,
         currentPhotos
-    } from '../../../store'
+    } from '../../../utils/store'
     import { stores } from '@sapper/app'
 
     // Preload data
@@ -23,7 +23,7 @@
 
 <script>
     import { onMount } from 'svelte'
-    import * as fn from '../../../functions'
+    import * as fn from '../../../utils/functions'
     const { page } = stores()
 
     // Dependencies
diff --git a/src/routes/viewer/[country]/[location]/[photo].svelte b/src/routes/viewer/[country]/[location]/[photo].svelte
index 857abc7..acab8bd 100644
--- a/src/routes/viewer/[country]/[location]/[photo].svelte
+++ b/src/routes/viewer/[country]/[location]/[photo].svelte
@@ -5,7 +5,7 @@
         locations,
         currentLocation,
         currentPhotos
-    } from '../../../../store'
+    } from '../../../../utils/store'
 
     // Define either to preload data or use the store
     let preloaded
@@ -32,7 +32,7 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { goto } from '@sapper/app'
-    import * as fn from '../../../../functions'
+    import * as fn from '../../../../utils/functions'
     const { page } = stores()
     const dispatch = createEventDispatcher()
 
diff --git a/src/template.html b/src/template.html
index 989dfcc..44d5090 100644
--- a/src/template.html
+++ b/src/template.html
@@ -2,13 +2,14 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta name="theme-color" content="#3C0576">
+
 	<link rel="shortcut icon" type="image/png" href="/img/favicon.png">
+	<link rel="stylesheet" href="/bundle.css">
 
 	%sapper.base%
 	%sapper.head%
-	%sapper.styles%
 </head>
 
 <body>
diff --git a/src/animations.js b/src/utils/animations.js
similarity index 100%
rename from src/animations.js
rename to src/utils/animations.js
diff --git a/src/functions.js b/src/utils/functions.js
similarity index 100%
rename from src/functions.js
rename to src/utils/functions.js
diff --git a/src/store.js b/src/utils/store.js
similarity index 100%
rename from src/store.js
rename to src/utils/store.js