Skip to content

Commit

Permalink
Merge pull request #262 from appwrite/hotfix/expand-image
Browse files Browse the repository at this point in the history
  • Loading branch information
@TorstenDittmann
TorstenDittmann authored Oct 18, 2023
2 parents 1150526 + f0a261b commit 4dc6c2e
Show file tree
Hide file tree
Showing 7 changed files with 495 additions and 457 deletions.
74 changes: 37 additions & 37 deletions src/app.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="twitter:site" content="@appwrite" />
<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
<!-- preload font for headlines -->
<link
rel="preload"
href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="twitter:site" content="@appwrite" />
<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
<!-- preload font for headlines -->
<link
rel="preload"
href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
as="font"
type="font/woff2"
crossorigin />

%sveltekit.head%
</head>
%sveltekit.head%
</head>

<body class="theme-dark" data-sveltekit-preload-data="hover">
<script>
const isDocs = window.location.pathname.startsWith('/docs');
if (isDocs) {
const theme = localStorage.getItem('theme');
if (theme) {
document.body.classList.remove('theme-dark', 'theme-light');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
document.body.classList.add(`theme-${systemTheme}`);
} else {
document.body.classList.add(`theme-${theme}`);
}
}
}
</script>
<div id="top" style="display: contents">%sveltekit.body%</div>
</body>

</html>
<body class="theme-dark" data-sveltekit-preload-data="hover">
<script>
const isDocs = window.location.pathname.startsWith('/docs');
if (isDocs) {
const theme = localStorage.getItem('theme');
if (theme) {
document.body.classList.remove('theme-dark', 'theme-light');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches
? 'dark'
: 'light';
document.body.classList.add(`theme-${systemTheme}`);
} else {
document.body.classList.add(`theme-${theme}`);
}
}
}
</script>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
16 changes: 16 additions & 0 deletions src/lib/actions/scrollToTop.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export const scrollToTop = (node: HTMLElement) => {
const handleClick = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};

node.addEventListener('click', handleClick);

return {
destroy() {
node.removeEventListener('click', handleClick);
}
};
};
232 changes: 122 additions & 110 deletions src/lib/layouts/DocsArticle.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,138 @@
<script lang="ts" context="module">
export type TocItem = {
title: string;
href: string;
step?: number;
selected?: boolean;
children?: Array<{
title: string;
href: string;
selected: boolean;
}>;
};
export type TocItem = {
title: string;
href: string;
step?: number;
selected?: boolean;
children?: Array<{
title: string;
href: string;
selected: boolean;
}>;
};
</script>

<script lang="ts">
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;
import { Feedback } from '$lib/components';
export let title: string;
export let toc: Array<TocItem>;
export let back: string | undefined = undefined;
export let date: string;
</script>

<main class="u-contents">
<article class="aw-article u-contents">
<header class="aw-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
{#if back}
<a
href={back}
class="
<article class="aw-article u-contents">
<header class="aw-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
{#if back}
<a
href={back}
class="
aw-button is-text aw-is-only-mobile
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
aria-label="previous page"
>
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
{/if}
<ul class="aw-metadata aw-caption-400">
<slot name="metadata" />
</ul>
<div class="u-position-relative u-flex u-cross-center">
{#if back}
<a
href={back}
class="
aria-label="previous page"
>
<span class="icon-cheveron-left" aria-hidden="true" />
</a>
{/if}
<ul class="aw-metadata aw-caption-400">
<slot name="metadata" />
</ul>
<div class="u-position-relative u-flex u-cross-center">
{#if back}
<a
href={back}
class="
aw-button is-text is-icon aw-u-cross-center aw-u-size-40
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
aria-label="previous page"
>
<span
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
aria-hidden="true"
/>
</a>
{/if}
<h1 class="aw-title">{title}</h1>
</div>
</div>
<div class="aw-article-header-end" />
</header>
<div class="aw-article-content">
<slot />
<Feedback {date} />
</div>
<aside class="aw-references-menu aw-u-padding-inline-start-24">
<div class="aw-references-menu-content">
{#if toc && toc.length > 0}
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
</div>
<ol class="aw-references-menu-list">
{#each toc as parent (parent.href)}
<li class="aw-references-menu-item" class:article-scroll-indicator={parent.selected}>
<a
href={parent.href}
class="aw-references-menu-link"
class:is-selected={parent.selected}
>
{#if parent?.step}
<span class="aw-numeric-badge">{parent.step}</span>
{/if}
<span class="aw-caption-400">{parent.title}</span>
</a>
{#if parent.children}
<ol
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
>
{#each parent.children as child}
<li class="aw-references-menu-item">
<a href={child.href} class="aw-references-menu-link">
<span class="aw-caption-400">{child.title}</span>
</a>
</li>
{/each}
</ol>
{/if}
</li>
{/each}
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
</div>
{/if}
</div>
</aside>
</article>
aria-label="previous page"
>
<span
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
aria-hidden="true"
/>
</a>
{/if}
<h1 class="aw-title">{title}</h1>
</div>
</div>
<div class="aw-article-header-end" />
</header>
<div class="aw-article-content">
<slot />
<Feedback {date} />
</div>
<aside class="aw-references-menu aw-u-padding-inline-start-24">
<div class="aw-references-menu-content">
{#if toc && toc.length > 0}
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
</div>
<ol class="aw-references-menu-list">
{#each toc as parent (parent.href)}
<li
class="aw-references-menu-item"
class:article-scroll-indicator={parent.selected}
>
<a
href={parent.href}
class="aw-references-menu-link"
class:is-selected={parent.selected}
>
{#if parent?.step}
<span class="aw-numeric-badge">{parent.step}</span>
{/if}
<span class="aw-caption-400">{parent.title}</span>
</a>
{#if parent.children}
<ol
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
>
{#each parent.children as child}
<li class="aw-references-menu-item">
<a
href={child.href}
class="aw-references-menu-link"
>
<span class="aw-caption-400">{child.title}</span
>
</a>
</li>
{/each}
</ol>
{/if}
</li>
{/each}
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<button
class="aw-link u-inline-flex u-cross-center u-gap-8"
use:scrollToTop
>
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</button>
</div>
{/if}
</div>
</aside>
</article>
</main>

<style lang="scss">
.article-scroll-indicator {
position: relative;
&::before {
position: absolute;
content: '';
top: 0;
left: -1.5rem;
height: 100%;
width: 2px;
background-color: hsl(var(--p-references-menu-link-color-text));
}
}
.article-scroll-indicator {
position: relative;
&::before {
position: absolute;
content: '';
top: 0;
left: -1.5rem;
height: 100%;
width: 2px;
background-color: hsl(var(--p-references-menu-link-color-text));
}
}
</style>
5 changes: 3 additions & 2 deletions src/lib/layouts/DocsTutorial.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { scrollToTop } from '$lib/actions/scrollToTop';
import { Feedback } from '$lib/components';
import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
import type { TocItem } from './DocsArticle.svelte';
Expand Down Expand Up @@ -144,10 +145,10 @@
{/each}
</ol>
<div class="u-sep-block-start u-padding-block-start-20">
<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
<button class="aw-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
<span class="aw-icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
</button>
</div>
</div>
</aside>
Expand Down
3 changes: 3 additions & 0 deletions src/markdoc/nodes/Image.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.25);
z-index: 1000;
}
.content {
Expand All @@ -95,5 +96,7 @@
max-height: 75vh;
max-width: calc(100% - 2.5rem);
z-index: 1000;
}
</style>
Loading

0 comments on commit 4dc6c2e

Please sign in to comment.