Skip to content

Commit 4dc6c2e

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #262 from appwrite/hotfix/expand-image
2 parents 1150526 + f0a261b commit 4dc6c2e

7 files changed

Lines changed: 495 additions & 457 deletions

File tree

‎src/app.html‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="twitter:site" content="@appwrite" />
7+
<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
8+
<!-- preload font for headlines -->
9+
<link
10+
rel="preload"
11+
href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
12+
as="font"
13+
type="font/woff2"
14+
crossorigin
15+
/>
316

4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta name="twitter:site" content="@appwrite" />
8-
<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
9-
<!-- preload font for headlines -->
10-
<link
11-
rel="preload"
12-
href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
13-
as="font"
14-
type="font/woff2"
15-
crossorigin />
16-
17-
%sveltekit.head%
18-
</head>
17+
%sveltekit.head%
18+
</head>
1919

20-
<body class="theme-dark" data-sveltekit-preload-data="hover">
21-
<script>
22-
const isDocs = window.location.pathname.startsWith('/docs');
23-
if (isDocs) {
24-
const theme = localStorage.getItem('theme');
25-
if (theme) {
26-
document.body.classList.remove('theme-dark', 'theme-light');
27-
if (theme === 'system') {
28-
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
29-
? 'dark'
30-
: 'light';
31-
document.body.classList.add(`theme-${systemTheme}`);
32-
} else {
33-
document.body.classList.add(`theme-${theme}`);
34-
}
35-
}
36-
}
37-
</script>
38-
<div id="top" style="display: contents">%sveltekit.body%</div>
39-
</body>
40-
41-
</html>
20+
<body class="theme-dark" data-sveltekit-preload-data="hover">
21+
<script>
22+
const isDocs = window.location.pathname.startsWith('/docs');
23+
if (isDocs) {
24+
const theme = localStorage.getItem('theme');
25+
if (theme) {
26+
document.body.classList.remove('theme-dark', 'theme-light');
27+
if (theme === 'system') {
28+
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
29+
.matches
30+
? 'dark'
31+
: 'light';
32+
document.body.classList.add(`theme-${systemTheme}`);
33+
} else {
34+
document.body.classList.add(`theme-${theme}`);
35+
}
36+
}
37+
}
38+
</script>
39+
<div style="display: contents">%sveltekit.body%</div>
40+
</body>
41+
</html>

‎src/lib/actions/scrollToTop.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const scrollToTop = (node: HTMLElement) => {
2+
const handleClick = () => {
3+
window.scrollTo({
4+
top: 0,
5+
behavior: 'smooth'
6+
});
7+
};
8+
9+
node.addEventListener('click', handleClick);
10+
11+
return {
12+
destroy() {
13+
node.removeEventListener('click', handleClick);
14+
}
15+
};
16+
};

‎src/lib/layouts/DocsArticle.svelte‎

Lines changed: 122 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,138 @@
11
<script lang="ts" context="module">
2-
export type TocItem = {
3-
title: string;
4-
href: string;
5-
step?: number;
6-
selected?: boolean;
7-
children?: Array<{
8-
title: string;
9-
href: string;
10-
selected: boolean;
11-
}>;
12-
};
2+
export type TocItem = {
3+
title: string;
4+
href: string;
5+
step?: number;
6+
selected?: boolean;
7+
children?: Array<{
8+
title: string;
9+
href: string;
10+
selected: boolean;
11+
}>;
12+
};
1313
</script>
1414

1515
<script lang="ts">
16-
import { Feedback } from '$lib/components';
16+
import { scrollToTop } from '$lib/actions/scrollToTop';
1717
18-
export let title: string;
19-
export let toc: Array<TocItem>;
20-
export let back: string | undefined = undefined;
21-
export let date: string;
18+
import { Feedback } from '$lib/components';
19+
20+
export let title: string;
21+
export let toc: Array<TocItem>;
22+
export let back: string | undefined = undefined;
23+
export let date: string;
2224
</script>
2325

2426
<main class="u-contents">
25-
<article class="aw-article u-contents">
26-
<header class="aw-article-header">
27-
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
28-
{#if back}
29-
<a
30-
href={back}
31-
class="
27+
<article class="aw-article u-contents">
28+
<header class="aw-article-header">
29+
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
30+
{#if back}
31+
<a
32+
href={back}
33+
class="
3234
aw-button is-text aw-is-only-mobile
3335
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
34-
aria-label="previous page"
35-
>
36-
<span class="icon-cheveron-left" aria-hidden="true" />
37-
</a>
38-
{/if}
39-
<ul class="aw-metadata aw-caption-400">
40-
<slot name="metadata" />
41-
</ul>
42-
<div class="u-position-relative u-flex u-cross-center">
43-
{#if back}
44-
<a
45-
href={back}
46-
class="
36+
aria-label="previous page"
37+
>
38+
<span class="icon-cheveron-left" aria-hidden="true" />
39+
</a>
40+
{/if}
41+
<ul class="aw-metadata aw-caption-400">
42+
<slot name="metadata" />
43+
</ul>
44+
<div class="u-position-relative u-flex u-cross-center">
45+
{#if back}
46+
<a
47+
href={back}
48+
class="
4749
aw-button is-text is-icon aw-u-cross-center aw-u-size-40
4850
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
49-
aria-label="previous page"
50-
>
51-
<span
52-
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
53-
aria-hidden="true"
54-
/>
55-
</a>
56-
{/if}
57-
<h1 class="aw-title">{title}</h1>
58-
</div>
59-
</div>
60-
<div class="aw-article-header-end" />
61-
</header>
62-
<div class="aw-article-content">
63-
<slot />
64-
<Feedback {date} />
65-
</div>
66-
<aside class="aw-references-menu aw-u-padding-inline-start-24">
67-
<div class="aw-references-menu-content">
68-
{#if toc && toc.length > 0}
69-
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
70-
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
71-
</div>
72-
<ol class="aw-references-menu-list">
73-
{#each toc as parent (parent.href)}
74-
<li class="aw-references-menu-item" class:article-scroll-indicator={parent.selected}>
75-
<a
76-
href={parent.href}
77-
class="aw-references-menu-link"
78-
class:is-selected={parent.selected}
79-
>
80-
{#if parent?.step}
81-
<span class="aw-numeric-badge">{parent.step}</span>
82-
{/if}
83-
<span class="aw-caption-400">{parent.title}</span>
84-
</a>
85-
{#if parent.children}
86-
<ol
87-
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
88-
>
89-
{#each parent.children as child}
90-
<li class="aw-references-menu-item">
91-
<a href={child.href} class="aw-references-menu-link">
92-
<span class="aw-caption-400">{child.title}</span>
93-
</a>
94-
</li>
95-
{/each}
96-
</ol>
97-
{/if}
98-
</li>
99-
{/each}
100-
</ol>
101-
<div class="u-sep-block-start u-padding-block-start-20">
102-
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
103-
<span class="aw-icon-arrow-up" aria-hidden="true" />
104-
<span class="aw-sub-body-500">Back to top</span>
105-
</a>
106-
</div>
107-
{/if}
108-
</div>
109-
</aside>
110-
</article>
51+
aria-label="previous page"
52+
>
53+
<span
54+
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
55+
aria-hidden="true"
56+
/>
57+
</a>
58+
{/if}
59+
<h1 class="aw-title">{title}</h1>
60+
</div>
61+
</div>
62+
<div class="aw-article-header-end" />
63+
</header>
64+
<div class="aw-article-content">
65+
<slot />
66+
<Feedback {date} />
67+
</div>
68+
<aside class="aw-references-menu aw-u-padding-inline-start-24">
69+
<div class="aw-references-menu-content">
70+
{#if toc && toc.length > 0}
71+
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
72+
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
73+
</div>
74+
<ol class="aw-references-menu-list">
75+
{#each toc as parent (parent.href)}
76+
<li
77+
class="aw-references-menu-item"
78+
class:article-scroll-indicator={parent.selected}
79+
>
80+
<a
81+
href={parent.href}
82+
class="aw-references-menu-link"
83+
class:is-selected={parent.selected}
84+
>
85+
{#if parent?.step}
86+
<span class="aw-numeric-badge">{parent.step}</span>
87+
{/if}
88+
<span class="aw-caption-400">{parent.title}</span>
89+
</a>
90+
{#if parent.children}
91+
<ol
92+
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
93+
>
94+
{#each parent.children as child}
95+
<li class="aw-references-menu-item">
96+
<a
97+
href={child.href}
98+
class="aw-references-menu-link"
99+
>
100+
<span class="aw-caption-400">{child.title}</span
101+
>
102+
</a>
103+
</li>
104+
{/each}
105+
</ol>
106+
{/if}
107+
</li>
108+
{/each}
109+
</ol>
110+
<div class="u-sep-block-start u-padding-block-start-20">
111+
<button
112+
class="aw-link u-inline-flex u-cross-center u-gap-8"
113+
use:scrollToTop
114+
>
115+
<span class="aw-icon-arrow-up" aria-hidden="true" />
116+
<span class="aw-sub-body-500">Back to top</span>
117+
</button>
118+
</div>
119+
{/if}
120+
</div>
121+
</aside>
122+
</article>
111123
</main>
112124

113125
<style lang="scss">
114-
.article-scroll-indicator {
115-
position: relative;
116-
&::before {
117-
position: absolute;
118-
content: '';
119-
top: 0;
120-
left: -1.5rem;
121-
height: 100%;
122-
width: 2px;
123-
background-color: hsl(var(--p-references-menu-link-color-text));
124-
}
125-
}
126+
.article-scroll-indicator {
127+
position: relative;
128+
&::before {
129+
position: absolute;
130+
content: '';
131+
top: 0;
132+
left: -1.5rem;
133+
height: 100%;
134+
width: 2px;
135+
background-color: hsl(var(--p-references-menu-link-color-text));
136+
}
137+
}
126138
</style>

‎src/lib/layouts/DocsTutorial.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { scrollToTop } from '$lib/actions/scrollToTop';
23
import { Feedback } from '$lib/components';
34
import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
45
import type { TocItem } from './DocsArticle.svelte';
@@ -144,10 +145,10 @@
144145
{/each}
145146
</ol>
146147
<div class="u-sep-block-start u-padding-block-start-20">
147-
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
148+
<button class="aw-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
148149
<span class="aw-icon-arrow-up" aria-hidden="true" />
149150
<span class="aw-sub-body-500">Back to top</span>
150-
</a>
151+
</button>
151152
</div>
152153
</div>
153154
</aside>

‎src/markdoc/nodes/Image.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
position: fixed;
8383
inset: 0;
8484
background-color: rgba(0, 0, 0, 0.25);
85+
z-index: 1000;
8586
}
8687
8788
.content {
@@ -95,5 +96,7 @@
9596
9697
max-height: 75vh;
9798
max-width: calc(100% - 2.5rem);
99+
100+
z-index: 1000;
98101
}
99102
</style>

0 commit comments

Comments
 (0)