Merge branch 'main' into appwrite#1499-update-contributing-guide

.github/workflows/tests.yml

@@ -7,6 +7,35 @@ on:
 permissions: read-all
 
 jobs:
+    format:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  ref: ${{ github.event.pull_request.head.sha }}
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install corepack
+              run: npm i -g corepack@latest
+            - name: Install pnpm
+              run: corepack enable
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+            - uses: actions/cache@v4
+              name: Setup pnpm cache
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+            - name: Check formatting
+              run: pnpm format:check
+
     build:
         runs-on: ubuntu-latest
         steps:

CONTENT.md

@@ -49,9 +49,9 @@ Create ordered (numbered) and unordered (bulleted) lists using 1., \*, or -.
 **Unordered List**:
 
 ```md
--   Apple
--   Banana
--   Cherry
+- Apple
+- Banana
+- Cherry
 ```
 
 #### Links
@@ -130,18 +130,18 @@ Alternatively, use markdoc tables.
 ```md
 {% table %}
 
--   Heading 1
--   Heading 2
+- Heading 1
+- Heading 2
 
 ---
 
--   Row 1 Cell 1
--   Row 1 Cell 2
+- Row 1 Cell 1
+- Row 1 Cell 2
 
 ---
 
--   Row 2 Cell 1
--   Row 2 cell 2
+- Row 2 Cell 1
+- Row 2 cell 2
 
 {% /table %}
 ```

CONTRIBUTING.md

@@ -62,11 +62,11 @@ doc-548-submit-a-pull-request-section-to-contribution-guide
 
 When `TYPE` can be:
 
--   **feat** - is a new feature
--   **doc** - documentation only changes
--   **cicd** - changes related to CI/CD system
--   **fix** - a bug fix
--   **refactor** - code change that neither fixes a bug nor adds a feature
+- **feat** - is a new feature
+- **doc** - documentation only changes
+- **cicd** - changes related to CI/CD system
+- **fix** - a bug fix
+- **refactor** - code change that neither fixes a bug nor adds a feature
 
 **All PRs must include a commit message with a description of the changes made!**
 

README.md

@@ -10,8 +10,8 @@ The Appwrite Website repo features the main Appwrite website, including our [hom
 
 The Appwrite Website has been built with the following frameworks:
 
--   [Svelte](https://svelte.dev/)
--   [SvelteKit](https://kit.svelte.dev/)
+- [Svelte](https://svelte.dev/)
+- [SvelteKit](https://kit.svelte.dev/)
 
 ## Development
 

package.json

@@ -11,6 +11,7 @@
         "dev": "vite dev",
         "download-contributors": "node ./scripts/download-contributor-data.js",
         "format": "prettier --write .",
+        "format:check": "prettier --check .",
         "icons:build": "node ./src/icons/build.js",
         "icons:generate": "node ./src/icons/optimize.js && node ./src/icons/build.js",
         "icons:optimize": "node ./src/icons/optimize.js",

src/lib/components/CommunitySupportChat.svelte

@@ -0,0 +1,95 @@
+<ul class="web-chat-list">
+    <li class="web-chat-item is-user-a">
+        <div class="web-chat-message">
+            <div class="web-user-box">
+                <img
+                    class="web-user-box-image"
+                    src="/images/community/avatars/walter.avif"
+                    height="40"
+                    width="40"
+                    alt="Avatar of Walter"
+                />
+                <div class="web-user-box-name flex gap-2">
+                    <span class="text-sub-body font-medium">Walter O'Brien</span>
+                    <time class="text-caption web-u-color-text-tertiary">8:32 AM</time>
+                </div>
+                <div class="web-user-box-content text-caption text-primary">
+                    Hello devs! I am getting a CORS error when sending a request to the backend. Can
+                    you help me?
+                </div>
+            </div>
+        </div>
+    </li>
+    <li class="web-chat-item is-user-b">
+        <div class="web-chat-message reply">
+            <div class="web-user-box">
+                <img
+                    class="web-user-box-image"
+                    src="/images/avatars/steven.avif"
+                    width="48"
+                    height="48"
+                    alt="Avatar of Steven"
+                />
+                <div class="web-user-box-name flex gap-2">
+                    <span class="text-sub-body font-medium">Steven</span>
+                    <time class="text-caption web-u-color-text-tertiary">8:38 AM</time>
+                </div>
+                <div class="web-user-box-content text-caption text-primary">
+                    Hey Walter! Is this the message you get
+                    <a class="web-link is-pink" href="/blog/post/cors-error" target="_blank"
+                        >"Access blocked by CORS policy"</a
+                    >?
+                </div>
+            </div>
+        </div>
+    </li>
+    <li class="web-chat-item is-user-a">
+        <div class="web-chat-message">
+            <div class="web-user-box">
+                <img
+                    class="web-user-box-image"
+                    src="/images/community/avatars/walter.avif"
+                    height="40"
+                    width="40"
+                    alt="Avatar of Walter"
+                />
+                <div class="web-user-box-name flex gap-2">
+                    <span class="text-sub-body font-medium">Walter O'Brien</span>
+                    <time class="text-caption web-u-color-text-tertiary">9:05 AM</time>
+                </div>
+                <div class="web-user-box-content text-caption text-primary">Yes!</div>
+            </div>
+        </div>
+    </li>
+    <li class="web-chat-item is-user-b">
+        <div class="web-chat-message reply">
+            <div class="web-user-box">
+                <img
+                    class="web-user-box-image"
+                    src="/images/avatars/steven.avif"
+                    width="48"
+                    height="48"
+                    alt="Avatar of Steven"
+                />
+                <div class="web-user-box-name flex gap-2">
+                    <span class="text-sub-body font-medium">Steven</span>
+                    <time class="text-caption web-u-color-text-tertiary">9:08 AM</time>
+                </div>
+                <div class="web-user-box-content text-caption text-primary">
+                    You should be able to debug this with a few steps. Just follow this blog:
+                    <a class="web-link is-pink" href="/blog/post/cors-error" target="_blank"
+                        >https://appwrite.io/blog/post/cors-error</a
+                    >. Let me know if this helps 🙂
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
+
+<style>
+    @media (max-width: 768px) {
+        .web-chat-list {
+            gap: 2rem;
+        }
+    }
+</style>

src/lib/components/MainNav.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+    import type { ComponentType } from 'svelte';
+
     export type NavLink = {
         label: string;
         href?: string;
@@ -10,7 +12,7 @@
 
 <script lang="ts">
     import { classNames } from '$lib/utils/classnames';
-    import type { ComponentType } from 'svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let initialized = false;
 
@@ -39,6 +41,12 @@
                         href={link.href}
                         data-initialized={initialized ? '' : undefined}
                         data-badge={link.showBadge ? '' : undefined}
+                        on:click={() => {
+                            trackEvent({
+                                plausible: { name: `${link.label} in header` },
+                                posthog: { name: `${link.label.toLowerCase()}_nav_click` }
+                            });
+                        }}
                         >{link.label}
                     </a>
                 {/if}

src/lib/components/ProductsMobileSubmenu.svelte

@@ -4,6 +4,7 @@
     import { slide } from 'svelte/transition';
     import { products, sublinks } from './ProductsSubmenu.svelte';
     import { dev } from '$app/environment';
+    import { trackEvent } from '$lib/actions/analytics';
 
     export let label: string;
 
@@ -35,6 +36,12 @@
                         <a
                             href={product.href}
                             class="group flex gap-3 rounded-xl p-2 text-white outline-none transition-colors focus:bg-white/8"
+                            on:click={() =>
+                                trackEvent({
+                                    plausible: {
+                                        name: `${product.name} in products submenu`
+                                    }
+                                })}
                         >
                             <div
                                 class="flex size-12 shrink-0 items-center justify-center rounded-lg border border-white/12 bg-white/6"

src/lib/layouts/DocsArticle.svelte

@@ -17,12 +17,16 @@
     import { writable } from 'svelte/store';
     import { Feedback } from '$lib/components';
     import { scrollToTop } from '$lib/actions/scrollToTop';
+    import type { Language } from '$lib/utils/code';
 
     export let title: string;
     export let toc: Array<TocItem>;
     export let back: string | undefined = undefined;
     export let date: string | undefined = undefined;
 
+    // Shared writable store for a selected language.
+    setContext('language-context', writable<Language>());
+
     const reducedArticleSize = setContext('articleHasNumericBadge', writable(false));
 </script>
 

src/markdoc/nodes/Image.svelte

@@ -93,8 +93,13 @@
 
     .overlay {
         inset: 0;
-        z-index: 25;
+        /* docs side nav have a z-index of 35 */
+        z-index: 36;
         position: fixed;
+        background-color: rgba(228, 228, 228, 0.98);
+    }
+
+    :global(.dark) .overlay {
         background-color: rgba(27, 27, 27, 0.98);
     }
 

src/markdoc/tags/Icon_Image.svelte

@@ -19,4 +19,5 @@
     height={sizes[size]}
     style:width={sizes[size]}
     style:vertical-align="middle"
+    style:min-width={sizes[size]}
 />

src/markdoc/tags/MultiCode.svelte

@@ -21,6 +21,8 @@
         content: writable('')
     });
 
+    const languageContext = getContext<Writable<string>>('language-context');
+
     const { snippets, selected, content } = getContext<CodeContext>('multi-code');
 
     snippets.subscribe((n) => {
@@ -29,6 +31,24 @@
         }
     });
 
+    selected.subscribe((language) => {
+        // apply if exists in snippets
+        if (language && $snippets.has(language as Language)) {
+            languageContext?.set(language);
+        }
+    });
+
+    languageContext?.subscribe((language) => {
+        if (
+            language &&
+            language !== $selected &&
+            // apply if exists in snippets
+            $snippets.has(language as Language)
+        ) {
+            selected.set(language);
+        }
+    });
+
     enum CopyStatus {
         Copy = 'Copy',
         Copied = 'Copied!'