flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Félix Péault
2023-02-10 19:02:15 +01:00
parent bea5da5f7c ed16fb9765
commit a7fb3e4744
117 changed files with 922 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/website/.eslintignore
View File

@@ -0,0 +1,15 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
*.d.ts
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

21
apps/website/.eslintrc.cjs
View File

@@ -1,20 +1 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2019
},
env: {
browser: true,
es2017: true,
node: true
}
}
module.exports = require('config/eslintrc.config.cjs')

25
apps/website/package.json
View File

@@ -20,26 +20,27 @@
"embla-carousel": "^7.0.9",
"focus-visible": "^5.2.0",
"motion": "^10.15.5",
"ogl": "^0.0.104",
"ogl": "^0.0.110",
"sanitize.css": "^13.0.0",
"swell-js": "3.19.5",
"tweakpane": "^3.1.4"
"swell-js": "3.19.8",
"tweakpane": "^3.1.4",
"utils": "workspace:*"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^1.0.2",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-cloudflare": "^2.0.1",
"@sveltejs/adapter-node": "^1.1.4",
"@sveltejs/adapter-vercel": "^1.0.6",
"@sveltejs/kit": "^1.3.7",
"@typescript-eslint/eslint-plugin": "^5.50.0",
"@typescript-eslint/parser": "^5.50.0",
"@sveltejs/adapter-vercel": "^2.0.2",
"@sveltejs/kit": "^1.5.3",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"base-64": "^1.0.0",
"browserslist": "^4.21.5",
"config": "workspace:*",
"cssnano": "^5.1.14",
"eslint": "^8.33.0",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-svelte": "^2.16.0",
"postcss": "^8.4.21",
"postcss-focus-visible": "^8.0.1",
"postcss-focus-visible": "^8.0.2",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^8.0.1",
"postcss-sort-media-queries": "^4.3.0",
@@ -49,7 +50,7 @@
"svelte-preprocess": "^5.0.1",
"tslib": "^2.5.0",
"typescript": "^4.9.5",
"vite": "^4.0.4"
"vite": "^4.1.1"
},
"type": "module",
"browserslist": [

17
apps/website/postcss.config.cjs → apps/website/postcss.config.js
View File

@@ -1,12 +1,11 @@
const cssnano = require('cssnano')
const presetEnv = require('postcss-preset-env')
const focusVisible = require('postcss-focus-visible')
// const sortMediaQueries = require('postcss-sort-media-queries')
const normalize = require('postcss-normalize')
import cssnano from 'cssnano'
import presetEnv from 'postcss-preset-env'
import focusVisible from 'postcss-focus-visible'
// import sortMediaQueries from 'postcss-sort-media-queries'
import normalize from 'postcss-normalize'
const dev = process.env.NODE_ENV !== 'development'
module.exports = {
export default {
plugins: [
// Preset Env
presetEnv({
@@ -25,7 +24,7 @@ module.exports = {
normalize({}),
// CSS Nano
!dev && cssnano({
!process.env.DEV && cssnano({
preset: ['default', {
autoprefixer: true,
discardComments: { removeAll: true },
@@ -34,4 +33,4 @@ module.exports = {
}]
}),
]
}
}

2
apps/website/src/animations/crossfade.ts
View File

@@ -24,4 +24,4 @@ export const [send, receive] = crossfade({
`
}
}
})
})

2
apps/website/src/animations/easings.ts
View File

@@ -4,4 +4,4 @@ import type { Easing } from 'motion'
/**
* Ease: Quart Out Array
*/
export const quartOut: Easing = [.165, .84, .44, 1]
export const quartOut: Easing = [.165, .84, .44, 1]

2
apps/website/src/animations/reveal.ts
View File

@@ -42,4 +42,4 @@ export default (node: Element | any, {
}, {
amount: options.threshold,
})
}
}

2
apps/website/src/animations/transitions.ts
View File

@@ -57,4 +57,4 @@ export const revealSplit = (node: HTMLElement, {
return null
}
}
}
}

2
apps/website/src/components/Analytics.svelte
View File

@@ -12,4 +12,4 @@
}
</script>
{/if}
</svelte:head>
</svelte:head>

2
apps/website/src/components/Metas.svelte
View File

@@ -34,4 +34,4 @@
<meta property="twitter:card" content={card} />
<meta property="twitter:creator" content={creator} />
</svelte:head>
</svelte:head>

4
apps/website/src/components/PageTransition.svelte
View File

@@ -2,7 +2,7 @@
import { page } from '$app/stores'
import { afterUpdate } from 'svelte'
import { fade } from 'svelte/transition'
import { scrollToTop } from '$utils/functions'
import { scrollToTop } from 'utils/scroll'
import { pageLoading } from '$utils/stores'
import { DELAY, DURATION } from '$utils/constants'
@@ -30,4 +30,4 @@
}}
>
<slot />
</div>
</div>

2
apps/website/src/components/SVGSprite.svelte
View File

@@ -35,4 +35,4 @@
<path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" />
</symbol>
</defs>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

2
apps/website/src/components/SmoothScroll.svelte
View File

@@ -34,4 +34,4 @@
$smoothScroll.destroy()
}
})
</script>
</script>

5
apps/website/src/components/SplitText.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { splitText } from '$utils/functions'
import { splitText } from 'utils/text'
export let text: string
export let mode: string = undefined
@@ -17,7 +17,6 @@
<span class="text-split__line" aria-hidden={index === 1}>
{#each split as word, i}
<span class="word" style:--i-w={i}>{word}</span>{#if word.includes('\n')}<br>{/if}
<!-- svelte-ignore empty-block -->
{#if i < split.length - 1}{/if}
{/each}
</span>
@@ -39,4 +38,4 @@
<span class="char" style:--i-c={i}>{char}</span>
{/each}
</span>
{/if}
{/if}

2
apps/website/src/components/atoms/AboutGridPhoto.svelte
View File

@@ -38,4 +38,4 @@
ratio={1.5}
{alt}
/>
</figure>
</figure>

2
apps/website/src/components/atoms/Badge.svelte
View File

@@ -9,4 +9,4 @@
<div class="badge badge--{size}">
<span>{text}</span>
</div>
</div>

2
apps/website/src/components/atoms/BoxCTA.svelte
View File

@@ -18,4 +18,4 @@
<span class="text-label">
{label}
</span>
</a>
</a>

3
apps/website/src/components/atoms/Button.svelte
View File

@@ -45,7 +45,6 @@
href={url} class={classes}
{target} {rel}
data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
{disabled}
tabindex="0"
on:click
>
@@ -57,4 +56,4 @@
<slot />
{/if}
</a>
{/if}
{/if}

2
apps/website/src/components/atoms/ButtonCart.svelte
View File

@@ -24,4 +24,4 @@
<span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
{/if}
</ButtonCircle>
</div>
</div>

2
apps/website/src/components/atoms/ButtonCircle.svelte
View File

@@ -41,4 +41,4 @@
<slot />
{/if}
</button>
{/if}
{/if}

2
apps/website/src/components/atoms/DiscoverText.svelte
View File

@@ -12,4 +12,4 @@
Discover <strong>{count.photos} homes</strong><br>
from <strong>{count.locations} places</strong>
in <strong>{count.countries} countries</strong>
</p>
</p>

2
apps/website/src/components/atoms/Icon.svelte
View File

@@ -7,4 +7,4 @@
<svg class={classes} aria-label={label} width="32" height="32">
<use xlink:href="#icon-{icon}" />
</svg>
</svg>

2
apps/website/src/components/atoms/IconArrow.svelte
View File

@@ -12,4 +12,4 @@
class:arrow--flip={flip}
>
<use xlink:href="#arrow" />
</svg>
</svg>

2
apps/website/src/components/atoms/IconEarth.svelte
View File

@@ -41,4 +41,4 @@
</clipPath>
</defs>
{/if}
</svg>
</svg>

12
apps/website/src/components/atoms/Image.svelte
View File

@@ -10,7 +10,7 @@
export let ratio: number = undefined
export let alt: string
export let lazy = true
export let decoding: "auto" | "sync" | "async" = "auto"
export let decoding: 'auto' | 'sync' | 'async' = 'auto'
interface Sizes {
small?: { width?: number, height?: number }
@@ -50,16 +50,16 @@
$: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
$: srcSet = {
// WebP
webp:
sizes ? [
webp: sizes
? [
`${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
]
: [getAssetUrlKey(id, `${sizeKey}-webp`)],
// JPG
jpg:
sizes ? [
jpg: sizes
? [
`${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,
@@ -83,4 +83,4 @@
loading={lazy ? 'lazy' : undefined}
{decoding}
/>
</picture>
</picture>

4
apps/website/src/components/atoms/ScrollingTitle.svelte
View File

@@ -8,7 +8,7 @@
</style>
<script lang="ts">
import { map } from '$utils/functions'
import { map } from 'utils/math'
import reveal from '$animations/reveal'
export let tag: string
@@ -69,4 +69,4 @@
use:reveal={revealOptions}
>
<slot />
</svelte:element>
</svelte:element>

2
apps/website/src/components/atoms/SiteTitle.svelte
View File

@@ -34,4 +34,4 @@
<span class="middle word-2">Of The</span>
<span class="word-3">World</span>
</div>
{/if}
{/if}

6
apps/website/src/components/layouts/PosterLayout.svelte
View File

@@ -4,7 +4,7 @@
<script lang="ts">
import { addToCart } from '$utils/functions/shop'
import { capitalizeFirstLetter } from '$utils/functions'
import { capitalizeFirstLetter } from 'utils/string'
// Components
import SplitText from '$components/SplitText.svelte'
import Button from '$components/atoms/Button.svelte'
@@ -97,7 +97,7 @@
{#if product.photos_preview.length}
<div class="poster-layout__images grid container">
{#each product.photos_preview.slice(0, 3) as { directus_files_id}, index}
{#each product.photos_preview.slice(0, 3) as { directus_files_id }, index}
<Image
class="image image--{index + 1} photo shadow-box-light"
id={directus_files_id.id}
@@ -131,4 +131,4 @@
alt={lastPreviewPhoto.title}
/>
{/if}
</section>
</section>

2
apps/website/src/components/molecules/CartItem.svelte
View File

@@ -66,4 +66,4 @@
</svg>
</ButtonCircle>
</div>
</div>
</div>

2
apps/website/src/components/molecules/EmailForm.svelte
View File

@@ -103,4 +103,4 @@
<p class="text-xsmall">{formMessages[formStatus.message]}</p>
</div>
{/if}
</div>
</div>

2
apps/website/src/components/molecules/Heading.svelte
View File

@@ -14,4 +14,4 @@
<div class="text text-medium">
{@html text}
</div>
</section>
</section>

2
apps/website/src/components/molecules/House.svelte
View File

@@ -63,4 +63,4 @@
{index}
</span>
</div>
</div>
</div>

10
apps/website/src/components/molecules/Location.svelte
View File

@@ -6,7 +6,7 @@
import { getContext } from 'svelte'
import { spring } from 'svelte/motion'
import dayjs from 'dayjs'
import { lerp } from '$utils/functions'
import { lerp } from 'utils/math'
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
import { seenLocations } from '$utils/stores'
// Components
@@ -31,7 +31,7 @@
// Detect if location has new content
const seenLocationDate = dayjs(parsedSeenLocations[location.id])
const isLocationSeen = parsedSeenLocations?.hasOwnProperty(location.id)
const isLocationSeen = location.id in parsedSeenLocations
// Define if location is has new photos
if (seenLocationDate && isLocationSeen) {
@@ -48,9 +48,9 @@
* Moving cursor over
*/
const offset = spring({ x: 0, y: 0 }, {
stiffness: 0.075,
damping: 0.9
})
stiffness: 0.075,
damping: 0.9
})
const handleMouseMove = ({ clientX }: MouseEvent) => {
const { width, left } = locationEl.getBoundingClientRect()
const moveProgress = (clientX - left) / width // 0 to 1

2
apps/website/src/components/molecules/NewsletterIssue.svelte
View File

@@ -30,4 +30,4 @@
</dd>
</dl>
</a>
</div>
</div>

5
apps/website/src/components/molecules/NotificationCart.svelte
View File

@@ -19,8 +19,9 @@
</script>
<div class="notification-cart shadow-small"
on:click={closeNotification}
transition:fly={{ y: 20, duration: 700, easing: quartOut }}
on:click={closeNotification}
on:keydown
>
<div class="notification-cart__left">
<img src={image} width={58} height={88} alt={title}>
@@ -29,4 +30,4 @@
<h3>{title}</h3>
<p>{name}</p>
</div>
</div>
</div>

2
apps/website/src/components/molecules/Pagination.svelte
View File

@@ -20,4 +20,4 @@
<slot />
</div>
</div>
</div>

2
apps/website/src/components/molecules/PhotoCard.svelte
View File

@@ -67,4 +67,4 @@
{lazy}
/>
{/if}
</div>
</div>

2
apps/website/src/components/molecules/PostCard.svelte
View File

@@ -45,4 +45,4 @@
<li>{location}{region ? `, ${region}` : ''}</li>
</ul>
</div>
</div>
</div>

2
apps/website/src/components/molecules/Poster.svelte
View File

@@ -47,4 +47,4 @@
on:click={() => addToCart(product)}
/>
</div>
</div>
</div>

4
apps/website/src/components/molecules/ProcessStep.svelte
View File

@@ -36,7 +36,7 @@
alt={image.title}
/>
{:else if video && video.mp4 && video.webm}
<video muted loop playsinline autoplay allow="autoplay">
<video muted loop playsinline autoplay>
<source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
<source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
<track kind="captions" />
@@ -48,4 +48,4 @@
<div class="text text-xsmall">
{@html text}
</div>
</div>
</div>

6
apps/website/src/components/molecules/Select.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher } from 'svelte'
interface Option {
value: string
@@ -28,7 +28,7 @@
/**
* When changing select value
*/
const handleChange = ({ target: { value }}: any) => {
const handleChange = ({ target: { value } }: any) => {
const option = options.find(option => option.value === value)
// Dispatch event to parent
@@ -48,4 +48,4 @@
</option>
{/each}
</select>
</div>
</div>

4
apps/website/src/components/molecules/ShopLocationSwitcher.svelte
View File

@@ -20,7 +20,7 @@
// Quick location change
const quickLocationChange = async ({ target: { value }}: any) => {
const quickLocationChange = async ({ target: { value } }: any) => {
const pathTo = `/shop/poster-${value}`
goto(pathTo, { replaceState: true, noScroll: true, keepFocus: true })
@@ -42,4 +42,4 @@
{/each}
</select>
</dd>
</dl>
</dl>

12
apps/website/src/components/molecules/Switcher.svelte
View File

@@ -10,7 +10,7 @@
// Components
import Icon from '$components/atoms/Icon.svelte'
const { settings: { switcher_links }}: any = getContext('global')
const { settings: { switcher_links } }: any = getContext('global')
let switcherEl: HTMLElement
let isOpen = false
@@ -30,11 +30,11 @@
* Detect outside click
*/
const windowClick = ({ target }) => {
if (!switcherEl.contains(target) && isOpen) {
if (!switcherEl.contains(target) && isOpen) {
// Close switcher
toggleSwitcher()
}
}
toggleSwitcher()
}
}
</script>
<svelte:window on:click={windowClick} />
@@ -70,4 +70,4 @@
</li>
{/each}
</ul>
</aside>
</aside>

2
apps/website/src/components/organisms/Banner.svelte
View File

@@ -39,4 +39,4 @@
}}
lazy={false}
/>
</section>
</section>

2
apps/website/src/components/organisms/Carousel.svelte
View File

@@ -127,4 +127,4 @@
</svg>
</span>
{/if}
</div>
</div>

7
apps/website/src/components/organisms/Cart.svelte
View File

@@ -10,12 +10,12 @@
import { smoothScroll } from '$utils/stores'
import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
import { sendEvent } from '$utils/analytics'
// Components
import Button from '$components/atoms/Button.svelte'
import Icon from '$components/atoms/Icon.svelte'
import CartItem from '$components/molecules/CartItem.svelte'
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
import { sendEvent } from '$utils/analytics';
// Block scroll if cart is open
@@ -140,7 +140,7 @@
text="Checkout"
color="pink"
size="small"
on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount }})}
on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount } })}
/>
</div>
{/if}
@@ -151,5 +151,6 @@
<div class="cart-overlay"
transition:fade={{ duration: 600, easing: quartOut }}
on:click={handleCloseCart}
on:keydown
/>
{/if}
{/if}

2
apps/website/src/components/organisms/Collage.svelte
View File

@@ -26,4 +26,4 @@
/>
{/each}
</div>
{/if}
{/if}

4
apps/website/src/components/organisms/Footer.svelte
View File

@@ -8,7 +8,7 @@
import SplitText from '$components/SplitText.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
const { settings: { instagram, footer_links }}: any = getContext('global')
const { settings: { instagram, footer_links } }: any = getContext('global')
</script>
@@ -42,4 +42,4 @@
</ul>
</nav>
</div>
</footer>
</footer>

7
apps/website/src/components/organisms/InteractiveGlobe.svelte
View File

@@ -7,7 +7,8 @@
import { fade, fly as flySvelte } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { Globe, type Marker } from '$modules/globe'
import { getRandomItem, debounce } from '$utils/functions'
import { getRandomItem } from 'utils/array'
import { debounce } from 'utils/actions'
import { revealSplit } from '$animations/transitions'
// Components
import SplitText from '$components/SplitText.svelte'
@@ -31,7 +32,7 @@
const { continents, locations }: any = getContext('global')
const randomContinent: any = getRandomItem(continents)
const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
const markers = locations.map(({ name, slug, country, coordinates: { coordinates } }): Marker => ({
name,
slug,
country: { ...country },
@@ -154,4 +155,4 @@
</p>
</div>
{/if}
</div>
</div>

2
apps/website/src/components/organisms/ListCTAs.svelte
View File

@@ -21,4 +21,4 @@
<ul class="list-cta" data-sveltekit-noscroll>
<slot />
</ul>
</ul>

8
apps/website/src/components/organisms/Locations.svelte
View File

@@ -8,7 +8,7 @@
import { quartOut } from 'svelte/easing'
import reveal from '$animations/reveal'
import { send, receive } from '$animations/crossfade'
import { throttle } from '$utils/functions'
import { throttle } from 'utils/actions'
import { sendEvent } from '$utils/analytics'
// Components
import Button from '$components/atoms/Button.svelte'
@@ -16,12 +16,12 @@
export let locations: any[]
const { continents, settings: { explore_list }}: any = getContext('global')
const { continents, settings: { explore_list } }: any = getContext('global')
// Continents filtering logic
let currentContinent: string = undefined
$: filteredLocations = locations.filter(({ country: { continent }}: any) => {
$: filteredLocations = locations.filter(({ country: { continent } }: any) => {
if (!currentContinent) {
// Show all locations by default
return true
@@ -89,4 +89,4 @@
</li>
{/each}
</ul>
</div>
</div>

4
apps/website/src/components/organisms/NewsletterModule.svelte
View File

@@ -9,7 +9,7 @@
export let theme = 'default'
const { settings: { newsletter_text, newsletter_subtitle }}: any = getContext('global')
const { settings: { newsletter_text, newsletter_subtitle } }: any = getContext('global')
</script>
<div class="newsletter newsletter--{theme} shadow-box-dark">
@@ -21,4 +21,4 @@
<EmailForm past={true} />
</div>
</div>
</div>

4
apps/website/src/components/organisms/PostersGrid.svelte
View File

@@ -7,7 +7,7 @@
import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
// Components
import Poster from '$components/molecules/Poster.svelte'
import { debounce } from '$utils/functions'
import { debounce } from 'utils/actions'
export let posters: any = []
@@ -117,4 +117,4 @@
{/if}
</div>
{/if}
</section>
</section>

2
apps/website/src/components/organisms/ShopBanner.svelte
View File

@@ -163,4 +163,4 @@
<ShopLocationSwitcher />
{/if}
<ButtonCart />
</nav>
</nav>

4
apps/website/src/components/organisms/ShopModule.svelte
View File

@@ -63,7 +63,7 @@
<div class="shop__images">
{#if images}
<a href={enabled ? url : undefined} title="Visit our shop" data-sveltekit-noscroll>
{#each images as { directus_files_id: { id, title }}, index}
{#each images as { directus_files_id: { id, title } }, index}
<Image
class={index === currentImageIndex ? 'is-visible' : null}
{id}
@@ -90,4 +90,4 @@
{/if}
</div>
</div>
</div>
</div>

33
apps/website/src/modules/globe/index.ts
View File

@@ -16,21 +16,10 @@ export class Globe {
this.markers = options.markers || []
this.zoom = 1.3075
// Calculate the current sun position from a given location
// const locations = [
// {
// lat: -37.840935,
// lng: 144.946457,
// tz: 'Australia/Melbourne',
// },
// {
// lat: 48.856614,
// lng: 2.3522219,
// tz: 'Europe/Paris',
// }
// ]
// const location = locations[1]
// const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz }))
// Calculate local time for sun position
const date = new Date()
const localHour = date.getHours() + date.getTimezoneOffset() / 60
this.options.sunAngle = (localHour - 12) / 12
// Parameters
this.params = {
@@ -39,7 +28,6 @@ export class Globe {
enableMarkers: options.enableMarkers,
enableMarkersLinks: options.enableMarkersLinks,
sunAngle: options.sunAngle || 0,
sunAngleDelta: 1.8,
}
// Misc
@@ -121,11 +109,10 @@ export class Globe {
imgDark.src = this.options.mapFileDark
// Create light
const lightD = degToRad(7 * 360 / 24)
const sunPosition = new Vec3(
Math.cos(lightD),
Math.sin(lightD) * Math.sin(0),
Math.sin(lightD) * Math.cos(0)
Math.cos(this.params.sunAngle),
Math.sin(this.params.sunAngle) * Math.sin(0),
Math.sin(this.params.sunAngle) * Math.cos(0)
)
// Create program
@@ -362,11 +349,11 @@ export type Marker = {
/**
* Detect WebGL support
*/
function WebGLSupport () {
const WebGLSupport = (): boolean => {
try {
const canvas = document.createElement('canvas')
return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
} catch(e) {
} catch (e) {
return false
}
}
@@ -407,4 +394,4 @@ const degToRad = (deg: number) => deg * Math.PI / 180
/**
* Get current timestamp (performance or Date)
*/
const now = () => (typeof performance === 'undefined' ? Date : performance).now()
const now = () => (typeof performance === 'undefined' ? Date : performance).now()

9
apps/website/src/modules/globe/pane.ts
View File

@@ -47,9 +47,10 @@ export const createPane = (ctx: any) => {
title: 'Misc',
})
// Sun position
misc.addInput(ctx.params, 'sunAngleDelta', {
label: 'Sun angle delta',
misc.addInput(ctx.params, 'sunAngle', {
label: 'Sun angle',
min: 0,
max: 2 * Math.PI,
max: 1,
step: 0.01,
})
}
}

4
apps/website/src/routes/(shop)/shop/+error.svelte
View File

@@ -15,7 +15,7 @@
},
500: {
title: 'Server error',
message: "That is embarassing, the problem is on our side.",
message: 'That is embarassing, the problem is on our side.',
},
}
</script>
@@ -40,4 +40,4 @@
<PostersGrid {posters} />
</main>
</PageTransition>
</PageTransition>

6
apps/website/src/routes/(shop)/shop/+layout.server.ts
View File

@@ -3,6 +3,10 @@ import type { LayoutServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { fetchSwell } from '$utils/functions/shopServer'
export const config = {
runtime: 'edge'
}
export const load = (async () => {
try {
// Get content from API
@@ -53,7 +57,7 @@ export const load = (async () => {
}
}`)
const { data: { shop, location, posters, settings }} = res
const { data: { shop, location, posters, settings } } = res
/**

2
apps/website/src/routes/(shop)/shop/+layout.svelte
View File

@@ -47,4 +47,4 @@
{/each}
</div>
<slot />
<slot />

6
apps/website/src/routes/(shop)/shop/+page.server.ts
View File

@@ -1,9 +1,13 @@
import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { getRandomItem } from '$utils/functions'
import { getRandomItem } from 'utils/array'
import { fetchSwell } from '$utils/functions/shopServer'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
// Get content from API

2
apps/website/src/routes/(shop)/shop/+page.svelte
View File

@@ -37,4 +37,4 @@
<PostersGrid {posters} />
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts
View File

@@ -3,6 +3,10 @@ import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { fetchSwell } from '$utils/functions/shopServer'
export const config = {
runtime: 'edge'
}
export const load = (async ({ params, setHeaders }) => {
try {
// Get content from API

4
apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte
View File

@@ -3,7 +3,7 @@
import { getContext } from 'svelte'
import { getAssetUrlKey } from '$utils/api'
import { shopCurrentProductSlug } from '$utils/stores/shop'
import { capitalizeFirstLetter } from '$utils/functions'
import { capitalizeFirstLetter } from 'utils/string'
// Components
import PageTransition from '$components/PageTransition.svelte'
import Metas from '$components/Metas.svelte'
@@ -36,4 +36,4 @@
<PostersGrid {posters} />
</main>
</PageTransition>
</PageTransition>

8
apps/website/src/routes/(site)/[country]/[location]/+page.server.ts
View File

@@ -3,6 +3,10 @@ import type { PageServerLoad } from './$types'
import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
import { fetchAPI, photoFields } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const load = (async ({ params, setHeaders }) => {
try {
const { location: slug } = params
@@ -70,10 +74,10 @@ export const load = (async ({ params, setHeaders }) => {
}
}`)
const { data: { location: location, photos, total_published, product }} = res
const { data: { location: location, photos, total_published, product } } = res
if (!location.length || location.length && params.country !== location[0].country.slug) {
throw error(404, "This location is not available… yet!")
throw error(404, 'This location is not available… yet!')
}
setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })

11
apps/website/src/routes/(site)/[country]/[location]/+page.svelte
View File

@@ -91,7 +91,7 @@
}
}`,
})
const { data: { photos }} = await res.json()
const { data: { photos } } = await res.json()
if (photos) {
// Return new photos
@@ -219,7 +219,6 @@
/>
<PageTransition>
<main class="location-page">
<section class="location-page__intro grid" bind:this={introEl}>
@@ -241,7 +240,7 @@
<div class="info">
<p class="text-label">
Photos by
{#each location.credits as { credit_id: { name, website }}}
{#each location.credits as { credit_id: { name, website } }}
{#if website}
<a href={website} target="_blank" rel="noopener external">
{name}
@@ -302,7 +301,7 @@
location={location.name}
ratio={width / height}
date={date_taken}
index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
/>
{/each}
</section>
@@ -312,7 +311,7 @@
ended={ended}
current={currentPhotosAmount}
total={totalPhotos}
on:click={!ended && loadMorePhotos}
on:click={() => !ended && loadMorePhotos()}
>
{#if !ended}
<p class="more">See more photos</p>
@@ -365,4 +364,4 @@
</div>
{/if}
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts
View File

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const load = (async ({ params, setHeaders }) => {
try {
// Get the first photo ID

31
apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte
View File

@@ -15,7 +15,7 @@
import { getAssetUrlKey } from '$utils/api'
import { previousPage } from '$utils/stores'
import { DELAY } from '$utils/constants'
import { throttle } from '$utils/functions'
import { throttle } from 'utils/actions'
import { swipe } from '$utils/interactions/swipe'
// Components
import Metas from '$components/Metas.svelte'
@@ -93,10 +93,10 @@
const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
if (defaultPrevented) return
switch (key) {
case 'ArrowLeft': goToPrevious(); break;
case 'ArrowRight': goToNext(); break;
case 'Escape': closeViewer(); break;
default: return;
case 'ArrowLeft': goToPrevious(); break
case 'ArrowRight': goToNext(); break
case 'Escape': closeViewer(); break
default: return
}
}
@@ -105,15 +105,15 @@
// Swipe up and down on mobile/small screens
if (innerWidth < 992) {
switch (detail) {
case '-y': goToNext(); break;
case 'y': goToPrevious(); break;
case '-y': goToNext(); break
case 'y': goToPrevious(); break
}
}
// Swipe left and right on larger screens
else {
switch (detail) {
case '-x': goToNext(); break;
case 'x': goToPrevious(); break;
case '-x': goToNext(); break
case 'x': goToPrevious(); break
}
}
}
@@ -174,7 +174,7 @@
}
}`,
})
const { data: { photos: newPhotos }} = await res.json()
const { data: { photos: newPhotos } } = await res.json()
// Not loading anymore
isLoading = false
@@ -320,7 +320,11 @@
</ButtonCircle>
<div class="photo-page__carousel">
<div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
<div class="photo-page__images"
use:swipe
on:swipe={handleSwipe}
on:tap={toggleFullscreen}
>
{#each visiblePhotos as { id, image, title }, index (id)}
<div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
<Image
@@ -377,7 +381,8 @@
</div>
{#if isFullscreen}
<div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
<div class="photo-page__fullscreen" bind:this={fullscreenEl}
on:click={toggleFullscreen} on:keydown
in:fade={{ easing: quartOut, duration: 1000 }}
out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
>
@@ -398,4 +403,4 @@
</div>
{/if}
</main>
</PageTransition>
</PageTransition>

10
apps/website/src/routes/(site)/about/+page.server.ts
View File

@@ -1,7 +1,11 @@
import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { getRandomItems } from '$utils/functions'
import { getRandomItems } from 'utils/array'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
@@ -70,7 +74,7 @@ export const load = (async ({ setHeaders }) => {
seo_image { id }
}
}`)
const { data: { about, photos: photosIds }} = res
const { data: { about, photos: photosIds } } = res
// Get random photos
const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
@@ -89,7 +93,7 @@ export const load = (async ({ setHeaders }) => {
}`)
if (photosRes) {
const { data: { photo: photos }} = photosRes
const { data: { photo: photos } } = photosRes
setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })

11
apps/website/src/routes/(site)/about/+page.svelte
View File

@@ -3,15 +3,17 @@
</style>
<script lang="ts">
import { navigating, page } from '$app/stores'
import { navigating } from '$app/stores'
import { onMount, afterUpdate } from 'svelte'
import { quartOut as quartOutSvelte } from 'svelte/easing'
import { fade, fly } from 'svelte/transition'
import type { PageData } from './$types'
import { animate, inView, stagger, timeline } from 'motion'
import { mailtoClipboard, map } from '$utils/functions'
import { mailtoClipboard } from '$utils/functions'
import { getAssetUrlKey } from '$utils/api'
import { DELAY } from '$utils/constants'
import { map } from 'utils/math'
import { sendEvent } from '$utils/analytics'
import { quartOut } from '$animations/easings'
// Components
import Metas from '$components/Metas.svelte'
@@ -21,7 +23,6 @@
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
import ProcessStep from '$components/molecules/ProcessStep.svelte'
import Banner from '$components/organisms/Banner.svelte'
import { sendEvent } from '$utils/analytics';
export let data: PageData
const { about, photos } = data
@@ -223,7 +224,7 @@
{about.intro_firstphoto_caption}<br>
in
<a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
<img src="{getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="{about.intro_firstlocation.country.flag.title}">
<img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
<span>Naarm Australia (Melbourne)</span>
</a>
</figcaption>
@@ -399,4 +400,4 @@
</div>
</section>
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(site)/api/data/+server.ts
View File

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
import type { RequestHandler } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const POST = (async ({ request, setHeaders }) => {
try {
const body = await request.text()

4
apps/website/src/routes/(site)/credits/+page.server.ts
View File

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
const res = await fetchAPI(`query {

2
apps/website/src/routes/(site)/credits/+page.svelte
View File

@@ -146,4 +146,4 @@
<InteractiveGlobe type="cropped" />
</main>
</PageTransition>
</PageTransition>

8
apps/website/src/routes/(site)/feed/products.xml/+server.ts
View File

@@ -3,6 +3,10 @@ import type { RequestHandler } from './$types'
import { fetchSwell } from '$utils/functions/shopServer'
import { fetchAPI, getAssetUrlKey } from '$utils/api'
export const config = {
runtime: 'edge'
}
const gCategories = [
{
id: '61851d83cd16416c78a8e5ef',
@@ -47,7 +51,7 @@ export const GET = (async ({ url, setHeaders }) => {
slug: siteProduct.location.slug,
description: siteProduct.description,
price: product.price,
images: siteProduct.photos_product.map(({ directus_files_id: { id }}: any) => getAssetUrlKey(id, `product-large-jpg`)),
images: siteProduct.photos_product.map(({ directus_files_id: { id } }: any) => getAssetUrlKey(id, `product-large-jpg`)),
gCategory: category.value,
gType: category.type,
})
@@ -93,4 +97,4 @@ const render = (origin: string, products: any[]) => {
`).join('')}
</channel>
</rss>`
}
}

3
apps/website/src/routes/(site)/locations/+page.server.ts Normal file
View File

@@ -0,0 +1,3 @@
export const config = {
runtime: 'edge'
}

4
apps/website/src/routes/(site)/locations/+page.svelte
View File

@@ -14,7 +14,7 @@
import Heading from '$components/molecules/Heading.svelte'
const { locations }: any = getContext('global')
const text = "Explore the globe to discover unique locations across the world"
const text = 'Explore the globe to discover unique locations across the world'
</script>
<Metas
@@ -39,4 +39,4 @@
</div>
</section>
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(site)/photos/+page.server.ts
View File

@@ -3,6 +3,10 @@ import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'
export const config = {
runtime: 'edge'
}
export const load = (async ({ url, setHeaders }) => {
try {
// Query parameters

7
apps/website/src/routes/(site)/photos/+page.svelte
View File

@@ -13,7 +13,8 @@
import relativeTime from 'dayjs/plugin/relativeTime'
import { stagger, timeline } from 'motion'
import { DELAY } from '$utils/constants'
import { map, lerp, throttle } from '$utils/functions'
import { map, lerp } from 'utils/math'
import { throttle } from 'utils/actions'
import { getAssetUrlKey } from '$utils/api'
import { quartOut } from '$animations/easings'
import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
@@ -193,7 +194,7 @@
}`,
})
const { data: { photos }} = await res.json()
const { data: { photos } } = await res.json()
if (photos) {
// Return new photos
@@ -496,4 +497,4 @@
</div>
</section>
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(site)/subscribe/+page.server.ts
View File

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
const res = await fetchAPI(`query {

2
apps/website/src/routes/(site)/subscribe/+page.svelte
View File

@@ -96,4 +96,4 @@
<InteractiveGlobe type="cropped" />
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/(site)/terms/+page.server.ts
View File

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
const res = await fetchAPI(`query {

2
apps/website/src/routes/(site)/terms/+page.svelte
View File

@@ -46,4 +46,4 @@
</div>
</section>
</main>
</PageTransition>
</PageTransition>

2
apps/website/src/routes/+error.svelte
View File

@@ -82,4 +82,4 @@
</div>
</div>
</main>
</PageTransition>
</PageTransition>

5
apps/website/src/routes/+layout.server.ts
View File

@@ -3,6 +3,9 @@ import type { LayoutServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
export const config = {
runtime: 'edge'
}
export const load = (async () => {
try {
@@ -88,7 +91,7 @@ export const load = (async () => {
}`)
if (res) {
const { data: { countPhotos, countLocations, countCountries, ...rest }} = res
const { data: { countPhotos, countLocations, countCountries, ...rest } } = res
return {
...rest,

2
apps/website/src/routes/+layout.svelte
View File

@@ -77,4 +77,4 @@
{#if browser}
<Analytics domain={PUBLIC_ANALYTICS_DOMAIN} />
{/if}
{/if}

9
apps/website/src/routes/+page.server.ts
View File

@@ -1,8 +1,11 @@
import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api'
import { getRandomItems } from '$utils/functions'
import { getRandomItems } from 'utils/array'
export const config = {
runtime: 'edge'
}
export const load = (async ({ setHeaders }) => {
try {
@@ -18,7 +21,7 @@ export const load = (async ({ setHeaders }) => {
id
}
}`)
const { data: { photo: photosIds }} = totalRes
const { data: { photo: photosIds } } = totalRes
// Get random photos
const randomPhotosIds = [...getRandomItems(photosIds, 11)].map(({ id }) => id)
@@ -41,7 +44,7 @@ export const load = (async ({ setHeaders }) => {
image { id }
}
}`)
const { data: { photo: photos }} = photosRes
const { data: { photo: photos } } = photosRes
if (photos) {
setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=599' })

2
apps/website/src/routes/+page.svelte
View File

@@ -167,4 +167,4 @@
</div>
</div>
</main>
</PageTransition>
</PageTransition>

4
apps/website/src/routes/api/newsletter/+server.ts
View File

@@ -1,6 +1,10 @@
import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
import type { RequestHandler } from './$types'
export const config = {
runtime: 'edge'
}
export const POST = (async ({ request, fetch }) => {
const data: { email: string } = await request.json()
const { email } = data

5
apps/website/src/routes/sitemap.xml/+server.ts
View File

@@ -2,6 +2,9 @@ import { error } from '@sveltejs/kit'
import type { RequestHandler } from './$types'
import { fetchAPI } from '$utils/api'
export const config = {
runtime: 'edge'
}
export const GET = (async ({ url, setHeaders }) => {
try {
@@ -54,7 +57,7 @@ export const GET = (async ({ url, setHeaders }) => {
})),
// Products
...products.map(({ location: { slug }}) => ({
...products.map(({ location: { slug } }) => ({
path: `/shop/poster-${slug}`,
priority: 0.7,
frequency: 'monthly',

56
apps/website/src/service-workers.ts
View File

@@ -15,12 +15,11 @@ const cached = build.concat(files);
.then(cache => cache.addAll(cached))
.then(() => {
// if you use typescript:
(self as unknown as ServiceWorkerGlobalScope).skipWaiting();
(self as unknown as ServiceWorkerGlobalScope).skipWaiting()
// self.skipWaiting();
})
);
}
);
)
});
// self.addEventListener(
// if you use typescript:
@@ -38,7 +37,7 @@ const cached = build.concat(files);
(self as unknown as ServiceWorkerGlobalScope).clients.claim()
// self.clients.claim()
})
);
)
})
@@ -87,28 +86,27 @@ async function fetchAndCache(request: Request) {
url.port !== self.location.port) ||
// ignore /_app/version.json
url.pathname === '/_app/version.json'
) {
return
}
// always serve static files and bundler-generated assets from cache
const isStaticAsset = url.host === self.location.host && cached.indexOf(url.pathname) > -1
if (event.request.cache === 'only-if-cached' && !isStaticAsset) {
return
}
// for everything else, try the network first, falling back to cache if the
// user is offline. (If the pages never change, you might prefer a cache-first
// approach to a network-first one.)
event.respondWith(
(async () => {
// always serve static files and bundler-generated assets from cache.
// if your application has other URLs with data that will never change,
// set this variable to true for them and they will only be fetched once.
const cachedAsset = isStaticAsset && (await caches.match(event.request))
return cachedAsset || fetchAndCache(event.request)
})()
)
) {
return
}
)
// always serve static files and bundler-generated assets from cache
const isStaticAsset = url.host === self.location.host && cached.indexOf(url.pathname) > -1
if (event.request.cache === 'only-if-cached' && !isStaticAsset) {
return
}
// for everything else, try the network first, falling back to cache if the
// user is offline. (If the pages never change, you might prefer a cache-first
// approach to a network-first one.)
event.respondWith(
(async () => {
// always serve static files and bundler-generated assets from cache.
// if your application has other URLs with data that will never change,
// set this variable to true for them and they will only be fetched once.
const cachedAsset = isStaticAsset && (await caches.match(event.request))
return cachedAsset || fetchAndCache(event.request)
})()
)
})

2
apps/website/src/utils/analytics.ts
View File

@@ -5,4 +5,4 @@ export const sendEvent = (action: string, props?: any) => {
if (typeof plausible !== 'undefined') {
plausible(action, props)
}
}
}

2
apps/website/src/utils/api.ts
View File

@@ -78,4 +78,4 @@ export const photoFields = `
// if (format) args += `&format=${format}`
// return `${API_URL}/assets/${id}?width=${width}&height=${height}&fit=${fit}${args}`
// }
// }

2
apps/website/src/utils/constants.ts
View File

@@ -7,4 +7,4 @@ export const DELAY = {
export const DURATION = {
PAGE_IN: 400,
PAGE_OUT: 400,
}
}

144
apps/website/src/utils/functions/index.ts
View File

@@ -1,150 +1,6 @@
import { sendEvent } from '$utils/analytics'
/**
* Debounce a function with a given amount of time
* @description For scrolling or other resource demanding behaviors
*/
export const debounce = (callback: (...args: any[]) => any, wait: number, immediate = false) => {
let timeout: ReturnType<typeof setTimeout> | number = 0
return (...args: any[]) => {
const callNow: boolean = immediate && !timeout
const next = () => callback(...args)
clearTimeout(timeout)
timeout = setTimeout(next, wait)
if (callNow) next()
}
}
/**
* Throttle a function by a given amount of time
* @description Throttling enforces a maximum number of times a function can be called over time, as in 'execute this function at most once every 100 milliseconds
*/
export const throttle = (fn: (...args: any[]) => any, delay: number) => {
let lastCall = 0
return (...args: unknown[]) => {
const now = performance.now()
if (now - lastCall < delay) return
lastCall = now
requestAnimationFrame(() => fn(...args))
}
}
/**
* Split text
* @description Split a string into words or characters
* @returns string[]
*/
export const splitText = (text: string, mode = 'words'): string[] => {
// Split by words
if (mode === 'words') {
const words = text
.replace(/\\n/g, '\n')
.replace(/\s+/g, m => m.includes('\n') ? '\n ' : ' ')
.trim()
.split(' ')
return words
}
// Split by chars
else if (mode === 'chars') {
const chars = Array.from(text).map(char => char === ' ' ? '\xa0' : char)
return chars
}
}
/**
* Capitalize first letter
*/
export const capitalizeFirstLetter = (string: string) => {
return string[0].toUpperCase() + string.slice(1)
}
/**
* Create a delay
*/
export const sleep = (milliseconds: number) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
/**
* Linear Interpolation
*/
export const lerp = (start: number, end: number, amount: number): number => {
return (1 - amount) * start + amount * end
}
/**
* Re-maps a number from one range to another
* @param value the incoming value to be converted
* @param start1 lower bound of the value's current range
* @param stop1 upper bound of the value's current range
* @param start2 lower bound of the value's target range
* @param stop2 upper bound of the value's target range
* @param [withinBounds] constrain the value to the newly mapped range
* @return remapped number
*/
export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds: boolean): number => {
const value = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
if (!withinBounds) return value
if (start2 < stop2) {
return clamp(value, start2, stop2)
} else {
return clamp(value, stop2, start2)
}
}
/**
* Clamp a number
*/
export const clamp = (num: number, a: number, b: number) => {
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
}
/**
* Return random elements from an array
*/
export const getRandomItems = <T> (array: T[], amount: number): T[] => {
const shuffled = array.slice()
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
}
return shuffled.slice(0, amount)
}
/**
* Return a random element from an array
*/
export const getRandomItem = <T extends Array<unknown>> (array: T): T[0] => {
return getRandomItems(array, 1)[0]
}
/**
* Scroll back to top after page transition
*/
export const scrollToTop = (delay?: number) => {
const scroll = () => window.scrollTo(0,0)
if (delay && delay > 0) {
setTimeout(scroll, delay)
} else {
return scroll()
}
}
/**
* Copy mailto links to clipboard and show message
*/

2
apps/website/src/utils/functions/notifications.ts
View File

@@ -29,4 +29,4 @@ export const addNotification = (notification: ShopNotification) => {
*/
export const dismissNotification = (id: number) => {
cartNotifications.update((all) => all.filter((t) => t.id !== id))
}
}

2
apps/website/src/utils/functions/shop.ts
View File

@@ -73,4 +73,4 @@ export const removeCartItem = async (productId: string) => {
if (updatedCart) {
return updatedCart
}
}
}

2
apps/website/src/utils/functions/shopServer.ts
View File

@@ -32,4 +32,4 @@ export const fetchSwell = async (path: string, options?: any) => {
return res
}
}
}
}

2
apps/website/src/utils/interactions/swipe.ts
View File

@@ -83,4 +83,4 @@ export const swipe = (
node.removeEventListener('pointerup', onUp)
}
}
}
}

2
apps/website/src/utils/polyfills.ts
View File

@@ -2,4 +2,4 @@
* Add tabindex outlines when navigating with keyboard
* focus-visible polyfill: adds classes when tabbing
*/
import 'focus-visible'
import 'focus-visible'

2
apps/website/src/utils/stores/index.ts
View File

@@ -21,4 +21,4 @@ if (typeof localStorage !== 'undefined') {
const parsedValue = JSON.parse(value)
localStorage.setItem('seenLocations', JSON.stringify(parsedValue))
})
}
}

Some files were not shown because too many files have changed in this diff Show More