Skip to content

Commit

Permalink
Merge branch 'main' into fix-toc-showing-on-desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
ItzNotABug authored Nov 28, 2024
2 parents 8739130 + 438de17 commit 6679499
Show file tree
Hide file tree
Showing 109 changed files with 3,754 additions and 89 deletions.
34 changes: 21 additions & 13 deletions src/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--color-primary: hsl(var(--color-primary));
--color-secondary: hsl(var(--color-secondary));
--color-accent: var(--color-secondary);
--color-smooth: var(--color-smooth);

/* pink */
--color-pink-200: hsl(var(--color-pink-hue) 98% 84%);
Expand Down Expand Up @@ -45,6 +46,9 @@
--color-blue-500: calc(hsl(var(--color-blue-hue) - 1) 99% 70%);
--color-blue-700: calc(hsl(var(--color-blue-hue) - 1) 42% 42%);

/* green */
--color-green-700: #0a714f;

/* secondary */
--color-secondary-100: hsl(var(--color-secondary-hue) 99% 66%);
--color-accent-200: hsl(var(--color-secondary-hue), 78%, 60%, 0.32);
Expand All @@ -53,7 +57,7 @@
--color-white: hsl(0 0% 100%);
--color-black: hsl(0 0% 0%);
--color-transparent: rgba(0, 0, 0, 0);
--color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
--color-offset: hsl(var(--color-greyscale-hue) 2%, 11%, 0.94);
--color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
--color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
--color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
Expand All @@ -77,10 +81,12 @@

/* Animations */
--animate-scale-in: scale-in 200ms ease-out forwards;
--animate-caret-blink: caret-blink 1s ease-in-out infinite;
--animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both,
up 0.75s ease-in-out both;
--animate-fade-in: fade 0.25s ease-in-out both;
--animate-fade-out: fade 0.25s ease-in-out both reverse;
--animate-scroll: scroll 60s linear infinite;
--animate-fade-in: fade 0.5s ease-in-out both;
--animate-marquee: marquee var(--speed, 30s) linear infinite var(--direction, forwards);

/* Pink polyfills */
--transition: 0.2s;
Expand Down Expand Up @@ -125,7 +131,7 @@
}
}

@keyframes fade {
@keyframes fade-in {
0% {
opacity: 0;
}
Expand All @@ -143,12 +149,11 @@
}
}

/* Animations */
--animate-scale-in: scale-in 200ms ease-out forwards;
--animate-caret-blink: caret-blink 1s ease-in-out infinite;
--animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
up 0.75s ease-in-out both;
--animate-scroll: scroll 60s linear infinite;
@keyframes marquee {
to {
transform: translateX(-50%);
}
}

/* Fonts */
--font-family-sans: 'Inter', arial, sans-serif;
Expand All @@ -158,9 +163,12 @@
--font-family-archia: 'Archia', arial, sans-serif;

/* Font sizes */
--font-size-x-micro: 0.625rem;
--font-size-x-micro--line-height: 0.875rem;
--font-size-x-micro--letter-spacing: var(--letter-spacing-tighter);
--font-size-micro: 0.75rem;
--font-size-micro--line-height: 1rem;
--font-size-micro--letter-spacing: var(--letter-spacing-tight);
--font-size-micro--letter-spacing: var(--letter-spacing-tighter);
--font-size-caption: 0.875rem;
--font-size-caption--line-height: 1.375rem;
--font-size-caption--letter-spacing: var(--letter-spacing-tight);
Expand Down Expand Up @@ -218,18 +226,18 @@
--color-primary: var(--color-greyscale-900);
--color-secondary: var(--color-greyscale-700);
--color-accent: var(--color-pink-600);
--carousel-gradient: transparent;
--color-badge-bg: var(--color-badge-bg-light);
--color-badge-border: var(--color-badge-border-light);
--color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
}

/* dark theme */
.dark {
--color-primary: var(--color-greyscale-100);
--color-secondary: var(--color-greyscale-300);
--carousel-gradient: 23, 23, 26;
--color-badge-bg: var(--color-badge-bg-dark);
--color-badge-border: var(--color-badge-border-dark);
--color-smooth: hsl(0 0%, 100%, 0.06);
}

/* Container */
Expand Down
7 changes: 7 additions & 0 deletions src/lib/components/MainFooter.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,13 @@
display: grid;
}
@media #{devices.$break1} {
.status {
height: 55px;
margin-bottom: 6px; /* balancing due to style:margin-top="-4px" & the `iframe` has some spacings too I think */
}
}
.e-main-footer {
display: flex;
@media #{devices.$break1} {
Expand Down
95 changes: 95 additions & 0 deletions src/lib/components/MultiCodeContextless.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<script lang="ts">
import { platformMap } from '$lib/utils/references';
import { writable } from 'svelte/store';
import { getCodeHtml, type Language } from '$lib/utils/code';
import { copy } from '$lib/utils/copy';
import { Select, Tooltip } from '$lib/components';
export let selected: Language = 'js';
export let data: { language: string; content: string; platform?: string }[] = [];
export let width: number | null = null;
export let height: number | null = null;
$: snippets = writable(new Set(data.map((d) => d.language)));
$: content = data.find((d) => d.language === selected)?.content ?? '';
$: platform = data.find((d) => d.language === selected)?.platform ?? '';
snippets?.subscribe((n) => {
if (selected === null && n.size > 0) {
selected = Array.from(n)[0] as Language;
}
});
enum CopyStatus {
Copy = 'Copy',
Copied = 'Copied!'
}
let copyText = CopyStatus.Copy;
async function handleCopy() {
await copy(content);
copyText = CopyStatus.Copied;
setTimeout(() => {
copyText = CopyStatus.Copy;
}, 1000);
}
$: result = getCodeHtml({
content,
language: selected ?? 'sh',
withLineNumbers: true
});
$: options = Array.from($snippets).map((language) => ({
value: language,
label: platformMap[language]
}));
</script>

<section
class="dark web-code-snippet mx-auto lg:!max-w-[90vw]"
aria-label="code-snippet panel"
style={`width: ${width ? width / 16 + 'rem' : 'inherit'}; height: ${
height ? height / 16 + 'rem' : 'inherit'
}`}
>
<header class="web-code-snippet-header">
<div class="web-code-snippet-header-start">
<div class="flex gap-4">
{#if platform}
<div class="web-tag"><span class="text">{platform}</span></div>
{/if}
</div>
</div>
<div class="web-code-snippet-header-end">
<ul class="buttons-list flex gap-3">
{#if $snippets.entries.length}
<li class="buttons-list-item flex self-center">
<Select bind:value={selected} bind:options />
</li>
{/if}
<li class="buttons-list-item" style="padding-inline-start: 13px">
<Tooltip>
<button
on:click={handleCopy}
class="web-icon-button"
aria-label="copy code from code-snippet"
><span class="web-icon-copy" aria-hidden="true" /></button
>
<svelte:fragment slot="tooltip">
{copyText}
</svelte:fragment>
</Tooltip>
</li>
</ul>
</div>
</header>
<div
class="web-code-snippet-content"
style={`height: ${height ? height / 16 + 'rem' : 'inherit'}`}
>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html result}
</div>
</section>
3 changes: 2 additions & 1 deletion src/lib/components/PreFooter.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { trackEvent } from '$lib/actions/analytics';
</script>

<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" style="z-index:-1" />
<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" loading="lazy" style="z-index:-1" />

<div class="web-u-row-gap-80 relative grid gap-8 md:grid-cols-2">
<section class="web-hero flex items-center justify-center gap-y-8">
Expand Down Expand Up @@ -152,5 +152,6 @@
height: auto;
max-inline-size: unset;
max-block-size: unset;
filter: blur(100px);
}
</style>
18 changes: 9 additions & 9 deletions src/lib/components/ProductsSubmenu.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
export const products: Array<SubmenuItem> = [
{
name: 'Auth',
href: '/docs/products/auth',
href: '/products/auth',
description: 'Secure login with multi-factor auth.',
icon: '/images/icons/illustrated/dark/auth.png'
},
Expand All @@ -27,19 +27,19 @@
},
{
name: 'Storage',
href: '/docs/products/storage',
href: '/products/storage',
description: 'Advanced compression and encryption.',
icon: '/images/icons/illustrated/dark/storage.png'
},
{
name: 'Functions',
href: '/docs/products/functions',
href: '/products/functions',
description: 'Deploy & scale serverless functions.',
icon: '/images/icons/illustrated/dark/functions.png'
},
{
name: 'Messaging',
href: '/docs/products/messaging',
href: '/products/messaging',
description: 'Set up a full-functioning messaging service.',
icon: '/images/icons/illustrated/dark/messaging.png'
},
Expand Down Expand Up @@ -103,12 +103,10 @@
<div
use:melt={$menu}
class={classNames(
'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative z-10 mt-6 mx-auto hidden w-full flex-col items-center p-0 outline-none md:flex'
'data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in relative !left-1/2 z-10 mt-6 mx-auto hidden w-full -translate-x-1/2 flex-col items-center p-0 outline-none [max-inline-size:86.875rem] md:flex'
)}
>
<div
class="is-special-padding w-full rounded-2xl border border-white/8 bg-[#232325] p-6 [max-inline-size:86.875rem]"
>
<div class="is-special-padding w-full rounded-2xl border border-white/8 bg-[#232325] p-6">
<div class="grid w-full grid-cols-1 place-content-between gap-16 lg:grid-cols-12">
<div class="col-span-8 -mr-12 pr-12">
<span
Expand Down Expand Up @@ -163,7 +161,9 @@
class="font-aeonik-fono tracking-loose text-secondary block text-xs uppercase"
>Case studies<span class="text-accent">_</span></span
>
<a href="/" class="text-primary text-caption flex items-center gap-2"
<a
href="/blog/category/case-studies"
class="text-primary text-caption flex items-center gap-2"
>See more <span class="web-icon-chevron-right" /></a
>
</header>
Expand Down
1 change: 0 additions & 1 deletion src/lib/components/carousel/Carousel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
let emblaApi: EmblaCarouselType;
export let showGradient: boolean = true;
export let showBullets: boolean = true;
export let showArrows: boolean = true;
export let autoScrollOptions: AutoScrollOptionsType = {
Expand Down
78 changes: 78 additions & 0 deletions src/lib/components/product-pages/hero.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<script lang="ts">
import { classNames } from '$lib/utils/classnames';
type $$Props = {
eyebrow: {
label: string;
icon: string;
};
title: string;
description: string;
cta: {
label: string;
url: string;
};
secondaryCta?: {
label: string;
url: string;
};
image: {
url: string;
alt?: string;
};
mobileImage?: {
url: string;
alt?: string;
};
};
export let eyebrow: $$Props['eyebrow'];
export let title: $$Props['title'];
export let description: $$Props['description'];
export let cta: $$Props['cta'];
export let secondaryCta: $$Props['secondaryCta'] = undefined;
export let image: $$Props['image'];
export let mobileImage: $$Props['mobileImage'] = undefined;
</script>

<div
class="border-smooth box-content flex items-center border-b bg-[url(/images/bgs/mobile-hero.png)] bg-cover bg-bottom py-12 px-5 md:bg-[url(/images/bgs/hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
>
<div class="mx-auto grid max-w-[75rem] items-center gap-16 md:grid-cols-2">
<div class="space-y-8">
<div class="flex items-center gap-2">
<img src={eyebrow.icon} class="size-8" alt="" />
<span class="text-micro font-aeonik-fono tracking-loose text-primary uppercase">
{eyebrow.label}<span class="web-u-color-text-accent">_</span>
</span>
</div>
<h1
class="text-display font-aeonik-pro text-primary text-pretty max-sm:max-w-[300px] md:max-w-md"
>
{title}
</h1>
<p class="text-description text-secondary text-pretty font-medium">
{description}
</p>

<div class="flex flex-col items-center gap-2 md:flex-row">
<a href={cta.url} class="web-button !w-full md:!w-fit">
{cta.label}
</a>
{#if secondaryCta}
<a href={secondaryCta.url} class="web-button is-secondary !w-full md:!w-fit">
{secondaryCta.label}
</a>
{/if}
</div>
</div>
<img
class={classNames({ 'hidden md:block': mobileImage })}
src={image.url}
alt={image.alt ?? ''}
/>
{#if mobileImage}
<img class="block md:hidden" src={mobileImage.url} alt={mobileImage.alt ?? ''} />
{/if}
</div>
</div>
Loading

0 comments on commit 6679499

Please sign in to comment.