Merge branch 'main' into update-timestamps-doc

Author: ebenezerdon

package.json

@@ -24,7 +24,7 @@
         "optimize": "node ./scripts/optimize-assets.js",
         "optimize:all": "node ./scripts/optimize-all.js"
     },
-    "packageManager": "pnpm@10.14.0",
+    "packageManager": "pnpm@10.15.0",
     "dependencies": {
         "h3": "^1.14.0",
         "posthog-js": "^1.210.2",
@@ -34,7 +34,7 @@
         "@appwrite.io/console": "^0.6.4",
         "@appwrite.io/pink": "~0.26.0",
         "@appwrite.io/pink-icons": "~0.26.0",
-        "@appwrite.io/repo": "github:appwrite/appwrite#1.7.x",
+        "@appwrite.io/repo": "github:appwrite/appwrite#1.8.x",
         "@eslint/compat": "^1.2.7",
         "@eslint/js": "^9.21.0",
         "@fingerprintjs/fingerprintjs": "^4.5.1",

pnpm-lock.yaml

@@ -99,7 +99,7 @@
 
 <nav
     aria-label="Footer"
-    class="web-footer-nav relative container mt-24"
+    class="web-footer-nav relative mt-24"
     class:web-u-sep-block-start={!noBorder}
 >
     <img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" />
@@ -134,7 +134,7 @@
             >
                 <h5 use:melt={$heading({ level: 5 })}>
                     <button
-                        class="web-footer-nav-button web-is-only-mobile"
+                        class="web-footer-nav-button web-is-only-mobile px-0!"
                         use:melt={$trigger({ value: title })}
                     >
                         <span class="text-caption font-medium uppercase">{title}</span>

src/lib/components/FooterNav.svelte

@@ -25,7 +25,7 @@
                 </li>
             {/each}
         </ul>
-        <div class="mt-1 grid grid-cols-2 gap-y-4 md:grid-cols-3">
+        <div class="mt-1 grid grid-cols-1 gap-y-4 md:grid-cols-3">
             <div>Copyright © {year} Appwrite</div>
 
             <iframe

src/lib/components/MainFooter.svelte

@@ -38,50 +38,6 @@
     }
 </script>
 
-<div class="pre-footer-bg" style="pointer-events:none;">
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="692"
-        height="1171"
-        viewBox="0 0 692 1171"
-        fill="none"
-        style="max-inline-size:100%;"
-    >
-        <g opacity="0.4" filter="url(#filter0_f_1577_37321)">
-            <path
-                d="M-96.9811 29.2126C-329.155 33.7322 -513.706 225.611 -509.186 457.785C-504.667 689.959 -312.788 874.51 -80.6141 869.99C33.1857 867.775 -132.237 523.592 -36.8339 437.579C62.4044 348.109 394.063 627.529 391.759 509.155C387.239 276.98 135.193 24.693 -96.9811 29.2126Z"
-                fill="url(#paint0_radial_1577_37321)"
-            />
-        </g>
-        <defs>
-            <filter
-                id="filter0_f_1577_37321"
-                x="-809.268"
-                y="-270.847"
-                width="1501.04"
-                height="1440.92"
-                filterUnits="userSpaceOnUse"
-                color-interpolation-filters="sRGB"
-            >
-                <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-                <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_1577_37321" />
-            </filter>
-            <radialGradient
-                id="paint0_radial_1577_37321"
-                cx="0"
-                cy="0"
-                r="1"
-                gradientUnits="userSpaceOnUse"
-                gradientTransform="translate(-88.7975 449.601) rotate(178.885) scale(420.468 420.468)"
-            >
-                <stop offset="0.281696" stop-color="#FE9567" />
-                <stop offset="0.59375" stop-color="#FD366E" />
-            </radialGradient>
-        </defs>
-    </svg>
-</div>
-
 <div class="web-big-padding-section">
     <div class="py-10">
         <div class="web-big-padding-section-level-2">

src/lib/components/Newsletter.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import { handleCopy } from '$lib/utils/copy';
+    import { cn } from '$lib/utils/cn';
+    import { rawContent } from '$routes/docs/+layout.svelte';
+
+    interface CopyAsMarkdownProps {
+        class?: string;
+    }
+
+    const { copy, copied } = handleCopy($rawContent ?? '', 2000);
+
+    const { class: classNames }: CopyAsMarkdownProps = $props();
+</script>
+
+{#if $rawContent}
+    <button
+        class={cn(
+            'text-caption hover:text-accent text-secondary ml-4 flex cursor-pointer items-center gap-2.5 rounded-md p-1.5 transition-colors',
+            classNames
+        )}
+        onclick={copy}
+    >
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-6" viewBox="0 0 208 128"
+            ><rect
+                width="198"
+                height="118"
+                x="5"
+                y="5"
+                ry="10"
+                stroke="currentColor"
+                stroke-width="10"
+                fill="none"
+            /><path
+                d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"
+                fill="currentColor"
+            />
+        </svg>
+        {#if $copied}
+            Copied
+        {:else}
+            Copy page as markdown
+        {/if}
+    </button>
+{/if}

src/lib/components/blog/copy-as-markdown.svelte

@@ -3,6 +3,7 @@
     import { handleCopy } from '$lib/utils/copy';
     import { formatDate } from '$lib/utils/date';
     import type { AuthorData } from '$routes/blog/content';
+    import { page } from '$app/state';
 
     interface Props {
         date?: string;

src/lib/components/blog/post-meta.svelte

@@ -11,6 +11,7 @@
 <script lang="ts">
     import { cn } from '$lib/utils/cn';
     import { onMount, tick } from 'svelte';
+    import CopyAsMarkdown from './copy-as-markdown.svelte';
     interface TableOfContentProps {
         toc?: Array<TocItem>;
         heading?: string;
@@ -38,7 +39,7 @@
     <span class="text-eyebrow text-primary font-aeonik-fono ps-6 uppercase">{heading}</span>
     <div class="relative">
         <ul
-            class="text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll pb-11 [scrollbar-width:none]"
+            class="text-caption flex max-h-[600px] flex-col gap-4 overflow-scroll [scrollbar-width:none]"
             bind:clientHeight={height}
         >
             {#each toc as parent (parent.href)}
@@ -80,4 +81,5 @@
             style:transform={`translateY(${position}px)`}
         ></div>
     </div>
+    <CopyAsMarkdown />
 </nav>

src/lib/components/blog/table-of-contents.svelte

@@ -12,26 +12,35 @@
             level?: number;
         }>;
     };
+
+    export type HeaderSectionInfoAlert = {
+        title?: string;
+        description?: string;
+    };
 </script>
 
 <script lang="ts">
-    import { setContext } from 'svelte';
-    import { writable } from 'svelte/store';
+    import { getContext, hasContext, setContext } from 'svelte';
+    import { readable, type Readable, writable } from 'svelte/store';
     import { Feedback } from '$lib/components';
     import TableOfContents from '$lib/components/blog/table-of-contents.svelte';
     import { Button, Icon } from '$lib/components/ui';
+    import Info from '$markdoc/tags/Info.svelte';
 
     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));
+    const headerSectionInfoAlert = hasContext('headerSectionInfoAlert')
+        ? getContext<Readable<HeaderSectionInfoAlert | null>>('headerSectionInfoAlert')
+        : readable(null);
 </script>
 
 <main class="contents" id="main">
     <article class="web-article contents">
-        <header class="web-article-header">
+        <header class="web-article-header flex flex-col">
             <div class="web-article-header-start web-u-cross-start flex flex-col">
                 {#if back}
                     <a
@@ -60,10 +69,10 @@
                             />
                         </Button>
                     {/if}
+
                     <h1 class="text-title font-aeonik-pro text-primary">{title}</h1>
                 </div>
             </div>
-            <div class="web-article-header-end"></div>
         </header>
         <div class="web-article-content prose" class:web-reduced-article-size={$reducedArticleSize}>
             <slot />

src/lib/layouts/DocsArticle.svelte

@@ -8,6 +8,7 @@
     import { page } from '$app/state';
     import { Button, Icon } from '$lib/components/ui';
     import { cn } from '$lib/utils/cn';
+    import CopyAsMarkdown from '$lib/components/blog/copy-as-markdown.svelte';
 
     export let toc: Array<TocItem>;
     export let back: string;
@@ -262,12 +263,14 @@
                         </li>
                     {/each}
                 </ol>
-                <div class="border-greyscale-900/4 border-t pt-5">
+
+                <div class="border-greyscale-900/4 border-t">
                     <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                         <span class="web-icon-arrow-up" aria-hidden="true"></span>
                         <span class="text-caption">Back to top</span>
                     </button>
                 </div>
+                <CopyAsMarkdown class="mt-4 ml-0" />
             </div>
         </aside>
     </article>