Restructure utility files, Use a bundle.css to fix CSS issues

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

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,

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'

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'

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 = ''

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">

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

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'

src/molecules/Switcher.svelte

@@ -1,7 +1,5 @@
 <script>
-    import {
-        currentLocation,
-    } from '../store'
+    import { currentLocation } from '../utils/store'
 
     // Components
     import IconGlobe from '../atoms/IconGlobe'

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()
 

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'

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'

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

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>

src/routes/choose.svelte

@@ -4,7 +4,9 @@
         site,
         currentLocation,
         currentPhotos
-    } from '../store'
+    } from '../utils/store'
+
+    // Depencencies
     import AOS from 'aos'
 
     // Components

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'

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'

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

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()
 

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>