Skip to content

Commit

Permalink
i need sleep.
Browse files Browse the repository at this point in the history 
Signed-off-by: Mia <mia@mia.cx>
  • Loading branch information
@mia-riezebos
mia-riezebos committed Aug 5, 2024
1 parent 86d7dbb commit 8ff347b
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 66 deletions.
25 changes: 25 additions & 0 deletions src/lib/components/utils/Button.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import Link from './Link.svelte';
let {
href,
class: className,
icon,
children,
...props
}: {
href?: string;
class?: string;
icon?: Snippet;
children?: Snippet;
} = $props();
</script>

{#if href}
<Link {href} class="reset group/fancy-button p-8 bg-other-black/50 backdrop-blur-md {className}" {icon} {children} {...props} />
{:else}{/if}

<style>
</style>
46 changes: 21 additions & 25 deletions src/lib/components/utils/Link.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,17 @@
} = $props();
</script>

<span>
<a {href} class="reset group/fancy-link {className}" {...props}>
<span>{@render children()}</span>

{#if icon}
{@render icon()}
{:else if href.startsWith('http')}
<ArrowUpRight
size={16}
strokeWidth={1.5}
absoluteStrokeWidth={true}
class="
<a {href} class="reset group/fancy-link {className}" {...props}>
<span>{@render children()}</span>

{#if icon}
{@render icon()}
{:else if href.startsWith('http')}
<ArrowUpRight
size={16}
strokeWidth={1.5}
absoluteStrokeWidth={true}
class="
inline-block
-mt-2 -ml-0.5
transition-colors duration-default ease-out
Expand All @@ -38,13 +37,13 @@
group-hover/fancy-link:opacity-100
"
/>
{:else}
<ArrowRight
size={16}
strokeWidth={1.5}
absoluteStrokeWidth={true}
class="
/>
{:else}
<ArrowRight
size={16}
strokeWidth={1.5}
absoluteStrokeWidth={true}
class="
inline-block
-mt-1
-translate-x-0.5
Expand All @@ -55,15 +54,12 @@
group-hover/fancy-link:translate-x-0
group-hover/fancy-link:opacity-100
"
/>
{/if}
</a>
</span>
/>
{/if}
</a>

<style lang="scss">
a {
:first-child {
&::after {
@apply absolute left-0 bottom-0 w-0 h-px;
Expand Down
16 changes: 4 additions & 12 deletions src/lib/shopify/zod/custom/media.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,19 @@ const Song = BaseMetaobject.extend({
})
.optional()
.nullable(),
authors: BaseMetaobjectField.extend(AuthorArray)
.optional()
.nullable(),
authors: BaseMetaobjectField.extend(AuthorArray).optional().nullable(),
image: BaseMetaobjectField.extend({
reference: MediaImage
})
.optional()
.nullable(),
index: BaseMetaobjectField.optional().nullable(),
links: BaseMetaobjectField.extend(LinkArray)
.optional()
.nullable(),
links: BaseMetaobjectField.extend(LinkArray).optional().nullable(),
title: BaseMetaobjectField.optional().nullable()
});

const Album = BaseMetaobject.extend({
authors: BaseMetaobjectField.extend(AuthorArray)
.optional()
.nullable(),
authors: BaseMetaobjectField.extend(AuthorArray).optional().nullable(),

description: BaseMetaobjectField.optional().nullable(),

Expand All @@ -67,9 +61,7 @@ const Album = BaseMetaobject.extend({
.optional()
.nullable(),
index: BaseMetaobjectField.optional().nullable(),
links: BaseMetaobjectField.extend(LinkArray)
.optional()
.nullable(),
links: BaseMetaobjectField.extend(LinkArray).optional().nullable(),

media: BaseMetaobjectField.extend(RefEdgesNodeArray(z.union([Artwork, Song])))
.optional()
Expand Down
4 changes: 2 additions & 2 deletions src/lib/shopify/zod/simple-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@ const PageInfo = z.object({
export function RefNodesArray<T extends z.ZodTypeAny>(schema: T) {
return {
references: z.object({
nodes: z.array(schema as z.infer<T>)
nodes: z.array(schema as z.infer<T>).default([])
})
};
}

export function RefEdgesNodeArray<T extends z.ZodTypeAny>(schema: T) {
return {
references: z.object({
edges: z.array(z.object({ node: schema as z.infer<T> }))
edges: z.array(z.object({ node: schema as z.infer<T> })).default([])
})
};
}
Expand Down
127 changes: 100 additions & 27 deletions src/routes/[[lang=lang]]/(store)/[collection]/Album.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,117 @@
<script lang="ts">
import Button from '$lib/components/utils/Button.svelte';
import type Collection from '$lib/shopify/zod/catalog/collection/Collection';
import type { z } from 'zod';
let { collection }: { collection: z.infer<typeof Collection> } = $props();
</script>


<!-- <main> -->
<!-- <section id="hero" class="flex flex-col gap-10 items-center min-h-screen py-12"> -->
<!-- -->
<!-- album cover and description -->
<!-- <div class="flex justify-center flex-col md:flex-row gap-10 max-w-m md:w-9/12 max-h-m items-stretch"> -->
<!-- album cover island -->
<!-- <div class="relative bg-dark-primary-island flex items-center justify-center min-w-96 min-h-96 max-w-96 max-h-96"> -->
<!-- <img src="{collection.album?.reference.image?.reference.image.url}" alt="{collection.title} cover" class="w-full h-full object-cover" /> -->
<!-- </div> -->
<!-- album title and description island -->
<!-- <div class="gap-10 flex flex-col flex-grow"> -->
<!-- <div class="bg-dark-primary-island p-7 max-h-64 flex flex-col "> -->
<!-- title and description -->
<!-- <div> -->
<!-- <h2>{collection.title}</h2> -->
<!-- <p>{collection.description} description</p> -->
<!-- </div> -->
<!-- <button class="mt-4 px-6 py-2 mx-auto">buy now</button> -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- -->
<!-- </div> -->
<!-- -->
<!-- youtube embed -->
<!-- <div class="relative bg-dark-primary-island p-5 w-full max-w-m md:w-9/12"> -->
<!-- <div class="aspect-w-16 aspect-h-9"> -->
<!-- <iframe src="{collection.feature?.value}" title="youtube embed" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen></iframe> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<!-- </section> -->
<!-- -->
<!-- -->
<!-- </main> -->

<main>
<section id="hero" class="flex flex-col gap-10 items-center min-h-screen py-12">
<section id="hero" class="py-48">
<div
data-role="background"
class="relative flex justify-center items-center [&>*]:w-full overflow-clip"
>
{#if collection.banner?.reference?.image}
<img
src={collection.banner?.reference?.image.url}
class="w-full h-full object-cover"
alt="{collection.title} banner"
/>
{:else}
<video autoplay loop muted>
{#each collection.banner?.reference.sources as source}
<source src={source.url} type={source.mimeType} />
{/each}
</video>
{/if}
</div>
<div data-role="background" class="bg-other-black/50 backdrop-blur-md"></div>

<!-- album cover and description -->
<div class="flex justify-center flex-col md:flex-row gap-10 max-w-m md:w-9/12 max-h-m items-stretch">
<!-- album cover island -->
<div class="relative bg-dark-primary-island flex items-center justify-center min-w-96 min-h-96 max-w-96 max-h-96">
<img src="{collection.album?.reference.image?.reference.image.url}" alt="{collection.title} cover" class="w-full h-full object-cover" />
</div>
<!-- album title and description island -->
<div class="gap-10 flex flex-col flex-grow">
<div class="bg-dark-primary-island p-7 max-h-64 flex flex-col ">
<!-- title and description -->
<div>
<h2>{collection.title}</h2>
<p>{collection.description} description</p>
</div>
<button class="mt-4 px-6 py-2 mx-auto">buy now</button>
<div class="!grid grid-cols-1 lg:grid-cols-2 auto-rows-[fit-content] gap-xl relative">
<img
src={collection.image?.url}
alt="{collection.title} cover"
class="w-full h-full object-cover border-other-white/25 border-[1px]"
/>
<div class="flex flex-col gap-xl justify-center relative">
<div class="bg-other-black/50 backdrop-blur-md p-xxl border-other-white/25 border-[1px]">
<h1 class="">{collection.title}</h1>
{@html collection.descriptionHtml}
</div>
<div class="relative flex gap-xs items-start">
<Button href="#" class="flex-1 border-other-white/25 border-[1px]">buy now</Button>
<Button href="#" class="border-other-white/25 border-[1px]"></Button>
</div>

</div>

</div>
</section>
<section>
<div
data-role="background"
class="!h-48 !bottom-full !inset-auto bg-gradient-to-t from-dark-background to-transparent"
></div>

<!-- youtube embed -->
<div class="relative bg-dark-primary-island p-5 w-full max-w-m md:w-9/12">
<div class="aspect-w-16 aspect-h-9">
<iframe src="{collection.feature?.value}" title="youtube embed" class="absolute inset-0 w-full h-full" frameborder="0" allowfullscreen></iframe>
<div class="-mt-24">
<h2 class="text-center text-display mb-xxl">watch</h2>
<iframe
src={collection.feature?.value}
title="youtube embed"
class="w-full aspect-[16/9] border-other-white/25 border-[1px]"
frameborder="0"
allowfullscreen
>
</iframe>
</div>
</section>
<section>
<div class="bg-other-black/50 p-xxl">
<h2>tracks</h2>
<ul>
{#each collection.album?.reference.media?.references.edges as song_edge}
<li>
{song_edge.node.title.value}
</li>
{/each}
</ul>
</div>
</div>

</section>


</main>

<style>
Expand Down

0 comments on commit 8ff347b

Please sign in to comment.