[wip] Create About page
This commit is contained in:
142
src/routes/about.svelte
Normal file
142
src/routes/about.svelte
Normal file
@@ -0,0 +1,142 @@
|
||||
<style lang="scss">
|
||||
@import "../style/pages/about";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, afterUpdate } from 'svelte'
|
||||
import { map } from '$utils/functions'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
|
||||
import Button from '$components/atoms/Button.svelte'
|
||||
import Heading from '$components/molecules/Heading.svelte'
|
||||
import ShopModule from '$components/organisms/ShopModule.svelte'
|
||||
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
|
||||
|
||||
export let data: any
|
||||
export let photos: any[]
|
||||
|
||||
// console.log(data)
|
||||
|
||||
let scrollY: number, innerWidth: number, innerHeight: number
|
||||
let photosGridEl: HTMLElement
|
||||
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
|
||||
let sectionsObserver: IntersectionObserver
|
||||
|
||||
$: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight / 2, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.125, true)
|
||||
$: fadedPhotosIndexes = innerWidth > 768
|
||||
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
|
||||
: [0]
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Sections observer
|
||||
sectionsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
|
||||
target.classList.toggle('is-visible', isIntersecting)
|
||||
|
||||
// Run effect once
|
||||
if (isIntersecting && target.dataset.keep) {
|
||||
sectionsObserver.unobserve(target)
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 0.2,
|
||||
rootMargin: '-10% 0px -30%'
|
||||
})
|
||||
|
||||
const sections = document.querySelectorAll('.about [data-section]')
|
||||
sections.forEach(section => sectionsObserver.observe(section))
|
||||
|
||||
// Destroy
|
||||
return () => {
|
||||
sectionsObserver && sectionsObserver.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
afterUpdate(() => {
|
||||
// Update photos grid top offset
|
||||
photosGridOffset = photosGridEl.offsetTop
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
|
||||
|
||||
<Metas
|
||||
title="About the project – Houses Of"
|
||||
description=""
|
||||
image=""
|
||||
/>
|
||||
|
||||
|
||||
<PageTransition name="about">
|
||||
<Heading
|
||||
text={data.description}
|
||||
/>
|
||||
|
||||
<section class="about__purpose" data-section data-keep="">
|
||||
<div class="container-wide">
|
||||
<div class="text title-xl" role="heading">
|
||||
{@html data.purpose_text}
|
||||
</div>
|
||||
|
||||
<div class="background" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__process">
|
||||
<div class="title">
|
||||
<h2 class="title-big">{data.process_title}</h2>
|
||||
<p class="text-normal">{data.process_subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div class="steps container-wide">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about__photos" bind:this={photosGridEl}>
|
||||
<div class="container-wide">
|
||||
<div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
|
||||
{#each photos as { image: { id }, title }, index}
|
||||
<AboutGridPhoto class="about-grid-photo"
|
||||
{id}
|
||||
alt={title}
|
||||
disabled={fadedPhotosIndexes.includes(index)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="about__bottom container grid">
|
||||
<section class="about__interest grid">
|
||||
<h2 class="title-xl">{data.contact_title}</h2>
|
||||
|
||||
<div class="blocks">
|
||||
{#each data.contact_blocks as { title, text, link, button }}
|
||||
<div class="block">
|
||||
<h3 class="text-label">{title}</h3>
|
||||
<p class="text-normal">{text}</p>
|
||||
{#if link}
|
||||
<Button size="small" url={link} text={button} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid-modules">
|
||||
<div class="wrap">
|
||||
<ShopModule />
|
||||
<NewsletterModule />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</PageTransition>
|
||||
85
src/routes/about.ts
Normal file
85
src/routes/about.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
|
||||
import { fetchAPI } from '$utils/api'
|
||||
import { getRandomItems } from '$utils/functions'
|
||||
|
||||
export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
|
||||
try {
|
||||
// Get data and total of published photos
|
||||
const res = await fetchAPI(`
|
||||
query {
|
||||
photos: photo (
|
||||
filter: {
|
||||
favorite: { _eq: true },
|
||||
status: { _eq: "published" },
|
||||
},
|
||||
limit: -1,
|
||||
) {
|
||||
id
|
||||
}
|
||||
|
||||
about {
|
||||
description
|
||||
intro_firstphoto {
|
||||
id
|
||||
title
|
||||
}
|
||||
intro_portraits {
|
||||
id
|
||||
title
|
||||
}
|
||||
intro_text
|
||||
intro_firstlocation {
|
||||
slug
|
||||
country {
|
||||
flag { id }
|
||||
slug
|
||||
}
|
||||
}
|
||||
|
||||
purpose_text
|
||||
|
||||
process_title
|
||||
process_subtitle
|
||||
|
||||
contact_title
|
||||
contact_blocks
|
||||
}
|
||||
}
|
||||
`)
|
||||
const { data: { about, photos: photosIds }} = res
|
||||
|
||||
// Get random photos
|
||||
const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
|
||||
|
||||
// Query these random photos from IDs
|
||||
const photosRes = await fetchAPI(`
|
||||
query {
|
||||
photo (filter: { id: { _in: [${randomPhotosIds}] }}) {
|
||||
id
|
||||
title
|
||||
slug
|
||||
image {
|
||||
id
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
const { data: { photo: photos }} = photosRes
|
||||
|
||||
console.log(about)
|
||||
|
||||
return {
|
||||
body: {
|
||||
data: about,
|
||||
photos,
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 404,
|
||||
body: error,
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user