Rework API calls and each loops

src/routes/credits.svelte

@@ -50,25 +50,27 @@
             <p>{$site.credits_text}</p>
         </div>
 
+        {#if $site.credits_list}
         <div class="page__list page__part">
-            {#each $site.credits_list as category}
+            {#each $site.credits_list as { title, credits }}
             <div class="page__category">
-                <h2 class="title-category">{category.name}</h2>
-                {#each category.credits as person}
+                <h2 class="title-category">{title}</h2>
+                {#each credits as { name, role, website }, i}
                 <dl>
                     <dt class="style-location">
-                        {#if person.url}
-                        <LinkTranslate href={person.url} text={person.name} target="_blank" rel="noopener" />
+                        {#if website}
+                        <LinkTranslate href={website} text={name} target="_blank" rel="noopener" />
                         {:else}
-                        {person.name}
+                        {name}
                         {/if}
                     </dt>
-                    <dd class="style-caps style-caps style-caps--transparent">{person.role}</dd>
+                    <dd class="style-caps style-caps style-caps--transparent">{role}</dd>
                 </dl>
                 {/each}
             </div>
             {/each}
         </div>
+        {/if}
 
         <InteractiveGlobe type="part" />
     </div>

src/routes/index.svelte

@@ -4,13 +4,18 @@
 	// Preload data
 	export async function preload (page, session) {
         // Load random photos
+        const fields = [
+            'id', 'name', 'image.private_hash',
+            'location.id', 'location.name', 'location.slug', 'location.country.name'
+        ]
+        const sort = '?'
         const limit = 5
-		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
+        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
         const photos = await req.json()
 		if (req.ok) {
             return { photos: photos.data }
         }
-		this.error(404, 'Not found')
+        this.error(404, 'Not found')
 	}
 </script>
 

src/routes/location/[country]/[place].svelte

@@ -4,7 +4,14 @@
     // Preload data
     export async function preload (page, session) {
         // Load photos
-        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,slug,date,image.*,location.*,location.country.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.place}%&limit=-1&sort=-created_on,name`)
+        const fields = [
+            'id', 'name', 'slug', 'date', 'image.*',
+            'location.id', 'location.name', 'location.region', 'location.country.name',
+            'created_on', 'modified_on'
+        ]
+        const sort = ['-created_on', 'name']
+        const limit = -1
+        const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&filter[location.slug][rlike]=%${page.params.place}%&limit=${limit}&sort=${sort.join()}`)
         const photos = await req.json()
         if (req.ok) {
             return { photos: photos.data }