Skip to content

Commit

Permalink
Merge branch 'main' into add-user-verification-journey
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebenezerdon
ebenezerdon authored Dec 13, 2024
2 parents b2accb4 + 579a714 commit de53dfd
Show file tree
Hide file tree
Showing 14 changed files with 230 additions and 61 deletions.
3 changes: 3 additions & 0 deletions markdoc.config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
"type": "esm",
"property": "default",
"watch": true
},
"partials": {
"auth-security.md": "./src/partials/auth-security.md"
}
}
]
20 changes: 17 additions & 3 deletions src/lib/components/Feedback.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import { loggedIn, user } from '$lib/utils/console';
import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';
export let date: string | undefined = undefined;
Expand All @@ -14,6 +16,9 @@
async function handleSubmit() {
submitting = true;
error = undefined;
const userId = loggedIn && $user?.$id ? $user.$id : undefined;
const response = await fetch(`${PUBLIC_GROWTH_ENDPOINT}/feedback/docs`, {
method: 'POST',
headers: {
Expand All @@ -23,7 +28,10 @@
email,
type: feedbackType,
route: $page.route.id,
comment
comment,
metaFields: {
userId
}
})
});
submitting = false;
Expand All @@ -33,6 +41,7 @@
}
comment = email = '';
submitted = true;
setTimeout(() => (showFeedback = false), 500);
}
function reset() {
Expand All @@ -45,6 +54,10 @@
$: if (!showFeedback) {
reset();
}
$: if (showFeedback && loggedIn && $user?.email) {
email = $user?.email;
}
</script>

<section class="web-content-footer">
Expand All @@ -60,7 +73,7 @@
class="web-radio-button"
aria-label="helpful"
on:click={() => {
showFeedback = feedbackType === 'positive' ? false : true;
showFeedback = feedbackType !== 'positive';
feedbackType = 'positive';
}}
>
Expand All @@ -70,7 +83,7 @@
class="web-radio-button"
aria-label="unhelpful"
on:click={() => {
showFeedback = feedbackType === 'negative' ? false : true;
showFeedback = feedbackType !== 'negative';
feedbackType = 'negative';
}}
>
Expand Down Expand Up @@ -104,6 +117,7 @@
on:submit|preventDefault={handleSubmit}
class="web-card is-normal"
style="--card-padding:1rem"
out:fade={{ duration: 450 }}
>
<div class="flex flex-col gap-2">
<label for="message">
Expand Down
8 changes: 7 additions & 1 deletion src/lib/components/PreFooter.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
import { trackEvent } from '$lib/actions/analytics';
</script>

<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" loading="lazy" 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
7 changes: 6 additions & 1 deletion src/lib/layouts/Docs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
}
const CTX_KEY = Symbol('docs');
const TUT_CTX_KEY = Symbol('tut-docs');
export const isInDocs = () => getContext<boolean>(CTX_KEY) ?? false;
export const isInTutorialDocs = () => getContext<boolean>(TUT_CTX_KEY) ?? false;
</script>

<script lang="ts">
Expand All @@ -43,6 +45,7 @@
import { getContext, setContext } from 'svelte';
import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { page } from '$app/stores';
export let variant: DocsLayoutVariant = 'default';
export let isReferences = false;
Expand All @@ -63,7 +66,9 @@
showSidenav: false
}));
});
setContext(CTX_KEY, true);
const key = $page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
setContext(key, true);
const handleKeydown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && ($layoutState.showReferences || $layoutState.showSidenav)) {
Expand Down
19 changes: 16 additions & 3 deletions src/lib/layouts/DocsArticle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@
</script>

<script lang="ts">
import { scrollToTop } from '$lib/actions/scrollToTop';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import { Feedback } from '$lib/components';
import { scrollToTop } from '$lib/actions/scrollToTop';
export let title: string;
export let toc: Array<TocItem>;
export let back: string | undefined = undefined;
export let date: string | undefined = undefined;
const reducedArticleSize = setContext('articleHasNumericBadge', writable(false));
</script>

<main class="contents" id="main">
Expand Down Expand Up @@ -59,8 +62,9 @@
</div>
<div class="web-article-header-end" />
</header>
<div class="web-article-content">
<div class="web-article-content" class:web-reduced-article-size={$reducedArticleSize}>
<slot />

<Feedback {date} />
</div>
<aside class="web-references-menu ps-6">
Expand Down Expand Up @@ -110,3 +114,12 @@
</aside>
</article>
</main>

<style>
@media (min-width: 1280px) and (max-width: 1330px) {
.web-reduced-article-size {
/* original/default is 41.5rem */
max-inline-size: 40.5rem;
}
}
</style>
128 changes: 117 additions & 11 deletions src/lib/layouts/DocsTutorial.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
import type { TocItem } from './DocsArticle.svelte';
import Heading from '$markdoc/nodes/Heading.svelte';
import { onMount } from 'svelte';
import { onMount, tick } from 'svelte';
import { page } from '$app/stores';
export let toc: Array<TocItem>;
export let back: string;
Expand All @@ -31,13 +32,66 @@
let slotContent: HTMLElement | null = null;
function scrollToElement(pageHash: string) {
const element = document.getElementById(pageHash);
if (element) {
const offset = 50;
const rect = element.getBoundingClientRect();
window.scroll({ top: window.scrollY + rect.top - offset });
}
}
/**
* Due to underlying logic with anchor links & the auto-scroll via hash values in the URL,
* we have an issue where if the first item is not scrolled enough it isn't marked as `selected`.
*
* We do below workaround for the time being without breaking things to scroll to the first item.
*/
async function preSelectItemOnInit() {
await tick();
if (!$page.url.hash) return;
const tocItem = toc.slice(1);
// no sub-items, return.
if (!tocItem.length) return;
const pageHash = $page.url.hash.replace('#', '');
const tocItemHref = tocItem[0].href.replace('#', '');
if (pageHash !== tocItemHref) return;
scrollToElement(pageHash);
}
// same issue as above, only happens on the first item.
function scrollToItem(parent: TocItem, index: number) {
const tocItem = toc.slice(1);
if (!tocItem.length) return;
const tocItemHref = parent.href.replace('#', '');
const element = document.getElementById(tocItemHref);
if (index === 0) {
scrollToElement(tocItemHref);
} else {
element?.scrollIntoView();
}
// because we used `preventDefault`.
history.pushState(null, '', parent.href);
}
onMount(() => {
if (!slotContent) return;
// dynamically modify all `label` headers to `body`.
slotContent.querySelectorAll<HTMLHeadingElement>('h2.web-label').forEach((header) => {
header.classList.replace('web-label', 'web-main-body-500');
slotContent.querySelectorAll<HTMLHeadingElement>('h2.text-label').forEach((header) => {
header.classList.replace('text-label', 'web-main-body-500');
});
preSelectItemOnInit();
});
</script>

Expand Down Expand Up @@ -77,7 +131,9 @@
/>
</a>
{/if}
<h1 class="web-title lg:-ml-5">{firstStepItem?.title}</h1>
<h1 class="web-title {currentStep === 1 ? 'lg:-ml-5' : ''}">
{firstStepItem?.title}
</h1>
</div>
</div>
<div class="web-article-header-end" />
Expand All @@ -87,16 +143,18 @@
<section class="web-article-content-sub-section">
<header class="web-article-content-header">
<span class="web-numeric-badge">{currentStep}</span>
<Heading level={1} id={currentStepItem.href} step={currentStep}>
{getCorrectTitle(currentStepItem, 1)}
</Heading>
<div class="tutorial-heading">
<Heading level={1} id={currentStepItem.href} step={currentStep}>
{getCorrectTitle(currentStepItem, 1)}
</Heading>
</div>
</header>

<div class="u-padding-block-start-32" bind:this={slotContent}>
<div class="web-u-padding-block-start-32" bind:this={slotContent}>
<slot />
</div>

<div class="flex justify-between">
<div class="web-u-padding-block-start-32 flex justify-between">
{#if prevStep}
<a href={prevStep.href} class="web-button is-text previous-step-anchor">
<span class="icon-cheveron-left" aria-hidden="true" />
Expand Down Expand Up @@ -135,6 +193,7 @@
<ol class="web-references-menu-list">
{#each tutorials as tutorial, index}
{@const isCurrentStep = currentStep === tutorial.step}
{@const absoluteToc = toc.slice(1)}
<li class="web-references-menu-item">
<a
href={tutorial.href}
Expand All @@ -148,14 +207,16 @@
>{index === 0 ? 'Introduction' : tutorial.title}</span
>
</a>
{#if isCurrentStep && toc.length}
{#if isCurrentStep && absoluteToc.length}
<ol
class="web-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
>
{#each toc.slice(1) as parent}
{#each absoluteToc as parent, innerIndex}
<li class="web-references-menu-item">
<a
href={parent.href}
on:click|preventDefault={() =>
scrollToItem(parent, innerIndex)}
class="web-references-menu-link is-inner"
class:tutorial-scroll-indicator={parent.selected}
class:is-selected={parent.selected}
Expand Down Expand Up @@ -208,4 +269,49 @@
background: unset;
padding-inline-start: unset;
}
.u-margin-block-start-16 {
margin-block-start: 1rem;
}
.u-margin-inline-start-32 {
margin-inline-start: 2rem;
}
.web-references-menu-item:has(.is-selected)::before {
/* maintains the distance correctly for the children items */
inset-inline-start: -3.55rem;
}
/* Static slider: default slider for each selected link */
.web-references-menu-list > .web-references-menu-item > .is-selected::before {
content: ' ';
position: absolute;
inset-block-start: 0;
block-size: 1.375rem;
inline-size: 0.0625rem;
inset-inline-start: -1.3125rem;
background-color: hsl(var(--p-references-menu-link-color-text));
}
/* Hide static slider if any child menu item is selected */
.web-references-menu-list
> .web-references-menu-item:has(.web-references-menu-list .is-selected)
> .is-selected::before {
background-color: transparent;
}
/* Transparent slider for selected child items because we use parent level */
.web-references-menu-list
> .web-references-menu-item
> .web-references-menu-list
> .web-references-menu-item
> .is-selected::before {
content: '';
background-color: transparent;
}
:global(.tutorial-heading h2) {
margin-bottom: unset;
}
</style>
Loading

0 comments on commit de53dfd

Please sign in to comment.