Merge branch 'main' into fix-too-much-content-in-titles

appwrite · Aug 5, 2024 · 7cd653d · 7cd653d
2 parents fd9133e + d864c40
commit 7cd653d
Show file tree

Hide file tree

Showing 236 changed files with 4,598 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,10 @@
     "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
     "dependencies": {
         "@sentry/sveltekit": "^8.12.0",
-        "h3": "^1.12.0"
+        "embla-carousel-svelte": "^8.1.5",
+        "embla-carousel-wheel-gestures": "^8.0.1",
+        "h3": "^1.12.0",
+        "remeda": "^2.3.0"
     },
     "devDependencies": {
         "@appwrite.io/console": "^0.6.2",
@@ -45,9 +48,11 @@
         "@typescript-eslint/eslint-plugin": "^7.13.1",
         "@typescript-eslint/parser": "^7.13.1",
         "dequal": "^2.0.3",
+        "embla-carousel": "^8.1.5",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^8.10.0",
         "eslint-plugin-svelte": "^2.40.0",
+        "fuse.js": "^7.0.0",
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />

diff --git a/src/lib/actions/autoHash.ts b/src/lib/actions/autoHash.ts
@@ -0,0 +1,12 @@
+export const autoHash = (
+    node: Element,
+    callback: (entries: IntersectionObserverEntry[]) => void
+) => {
+    const observer = new IntersectionObserver(callback, {
+        threshold: 1
+    });
+
+    observer.observe(node);
+
+    return { destroy: () => observer.disconnect() };
+};
diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
@@ -108,7 +108,11 @@
 
         &::after {
             right: 0;
-            background: linear-gradient(to left, hsl(var(--web-color-background-docs)), transparent);
+            background: linear-gradient(
+                to left,
+                hsl(var(--web-color-background-docs)),
+                transparent
+            );
         }
 
         &[data-state='end']::after {

diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
@@ -41,6 +41,7 @@
             ],
             Learn: [
                 { label: 'Docs', href: '/docs' },
+                { label: 'Integrations', href: '/integrations' },
                 { label: 'Community', href: '/community' },
                 { label: 'Init', href: '/init' },
                 { label: 'Threads', href: '/threads' },

diff --git a/src/lib/components/ProductsGrid.svelte b/src/lib/components/ProductsGrid.svelte
@@ -0,0 +1,145 @@
+<div class="web-big-padding-section-level-2">
+    <div class="web-container">
+        <h3 class="web-label web-u-color-text-primary u-text-center">
+            Keep exploring similar integrations
+        </h3>
+        <ul class="u-margin-block-start-32 l-grid-1">
+            <li>
+                <a
+                    href="/docs/products/auth"
+                    class="web-card product-card is-transparent u-block u-height-100-percent"
+                    style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;"
+                >
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <img
+                            src="/images/icons/illustrated/dark/auth.png"
+                            alt=""
+                            class=""
+                            width="32"
+                            height="32"
+                        />
+                        <h4 class="web-main-body-400 web-u-color-text-primary">Auth</h4>
+                        <span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"
+                        ></span>
+                    </div>
+                    <p class="web-sub-body-400 u-margin-block-start-4">
+                        Build secure authentication and manage your users.
+                    </p>
+                </a>
+            </li>
+            <li>
+                <a
+                    href="/docs/products/functions"
+                    class="web-card product-card is-transparent u-block u-height-100-percent"
+                    style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;"
+                >
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <img
+                            src="/images/icons/illustrated/dark/functions.png"
+                            alt=""
+                            class=""
+                            width="32"
+                            height="32"
+                        />
+                        <h4 class="web-main-body-400 web-u-color-text-primary">Functions</h4>
+                        <span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"
+                        ></span>
+                    </div>
+                    <p class="web-sub-body-400 u-margin-block-start-4">
+                        Scale big and unlock limitless potential with Appwrite functions.
+                    </p>
+                </a>
+            </li>
+            <li>
+                <a
+                    href="/docs/products/databases"
+                    class="web-card product-card is-transparent u-block u-height-100-percent"
+                    style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;"
+                >
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <img
+                            src="/images/icons/illustrated/dark/databases.png"
+                            alt=""
+                            class=""
+                            width="32"
+                            height="32"
+                        />
+                        <h4 class="web-main-body-400 web-u-color-text-primary">Databases</h4>
+                        <span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"
+                        ></span>
+                    </div>
+                    <p class="web-sub-body-400 u-margin-block-start-4">
+                        Store and query structured data, ensuring scalable storage.
+                    </p>
+                </a>
+            </li>
+            <li>
+                <a
+                    href="/docs/products/messaging"
+                    class="web-card product-card is-transparent u-block u-height-100-percent"
+                    style="--card-padding:1.5rem;--card-padding-mobile:1.5rem;"
+                >
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <img
+                            src="/images/icons/illustrated/dark/messaging.png"
+                            alt=""
+                            class=""
+                            width="32"
+                            height="32"
+                        />
+                        <h4 class="web-main-body-400 web-u-color-text-primary">Messaging</h4>
+                        <span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"
+                        ></span>
+                    </div>
+                    <p class="web-sub-body-400 u-margin-block-start-4">
+                        Manage your files’ project, using convenient APIs and utilities.
+                    </p>
+                </a>
+            </li>
+            <li>
+                <a
+                    href="/docs/apis/realtime"
+                    class="web-card product-card is-transparent u-block u-height-100-percent"
+                    style="--card-padding:1.5rem; --card-padding-mobile:1.5rem;"
+                >
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <img
+                            src="/images/icons/illustrated/dark/realtime.png"
+                            alt=""
+                            class=""
+                            width="32"
+                            height="32"
+                        />
+                        <h4 class="web-main-body-400 web-u-color-text-primary">Realtime</h4>
+                        <span class="icon-arrow-right u-margin-inline-start-auto" aria-hidden="true"
+                        ></span>
+                    </div>
+                    <p class="web-sub-body-400 u-margin-block-start-4">
+                        Utilize realtime information from all Appwrite services.
+                    </p>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<style lang="scss">
+    .l-grid-1 {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 2rem;
+
+        @media (max-width: 600px) {
+            gap: 1.25rem;
+        }
+
+        .product-card {
+            transition: all 100ms ease-in-out;
+            box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0);
+
+            &:hover {
+                box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
+            }
+        }
+    }
+</style>