update markdoc tags

src/app.css

@@ -353,7 +353,7 @@
     --text-caption--line-height: var(--leading-xs);
     --text-caption--letter-spacing: var(--tracking-tighter);
     --text-sub-body: clamp(var(--font-size-tiny), 0.756rem + 0.382vw, var(--font-size-small));
-    --text-sub-body--line-height: clamp(var(--leading-tiny), 0.642rem + 1.145vw, var(--leading-xs));
+    --text-sub-body--line-height: var(--leading-xs);
     --text-sub-body--letter-spacing: clamp(
         var(--tracking-tighter),
         -0.013em,

src/lib/components/Accordion/Item.svelte

@@ -1,37 +1,27 @@
 <script lang="ts">
-    export let open: boolean = false;
-    export let title: string;
+    import type { Snippet } from 'svelte';
+
+    interface ItemProps {
+        open?: boolean;
+        title: string;
+        children: Snippet;
+    }
+
+    const { open, title, children }: ItemProps = $props();
 </script>
 
-<li class="collapsible-item">
-    <details class="collapsible-wrapper group" {open}>
+<li class="border-offset border-b">
+    <details class="group" {open}>
         <summary
-            class="collapsible-button flex cursor-pointer list-none appearance-none items-center justify-between marker:hidden [&::-webkit-details-marker]:hidden"
+            class="flex cursor-pointer list-none appearance-none items-center justify-between py-4 marker:hidden [&::-webkit-details-marker]:hidden"
         >
             <span class="text-primary text-sub-body font-medium">{title}</span>
             <div class="icon text-primary transition-transform group-[&[open]]:rotate-180">
                 <span class="icon-cheveron-down" aria-hidden="true"></span>
             </div>
         </summary>
-        <div class="collapsible-content text-secondary text-sub-body flex flex-col">
-            <slot />
+        <div class="text-secondary text-sub-body mt-0 flex flex-col gap-4 pb-4">
+            {@render children()}
         </div>
     </details>
 </li>
-
-<style>
-    .collapsible-item {
-        border-block-end: 0.0625rem solid hsl(var(--web-color-offset));
-    }
-
-    .collapsible-button {
-        padding-block-start: 1rem;
-        padding-block-end: 1rem;
-    }
-
-    .collapsible-content {
-        margin-block-start: 0;
-        padding-block-end: 0;
-        gap: 4px;
-    }
-</style>

src/lib/components/MultiCodeContextless.svelte

@@ -64,7 +64,9 @@
         <div class="web-code-snippet-header-start">
             <div class="flex gap-4">
                 {#if platform}
-                    <div class="web-tag"><span class="text">{platform}</span></div>
+                    <div class="web-tag rounded-full!">
+                        <span class="text-caption">{platform}</span>
+                    </div>
                 {/if}
             </div>
         </div>

src/lib/components/Newsletter.svelte

@@ -141,16 +141,3 @@
         </div>
     </div>
 </div>
-
-<style lang="scss">
-    .pre-footer-bg {
-        position: absolute;
-        top: clamp(300px, 50vw, 50%);
-        left: clamp(300px, 50vw, 50%);
-        transform: translate(-50%, -70%);
-        width: clamp(1200px, 100vw, 3000px);
-        height: auto;
-        max-inline-size: unset;
-        max-block-size: unset;
-    }
-</style>

src/lib/components/shared/video/player.svelte

@@ -31,7 +31,7 @@
         >
             <path
                 d="M15.9565 9.11814L-0.000196062 18.2363L-0.000195265 -6.97491e-07L15.9565 9.11814Z"
-                fill="#000000"
+                fill="#fff"
             />
         </svg>
     </div>
@@ -79,8 +79,8 @@
             rgba(255, 255, 255, 0) 127.21%
         );
         backdrop-filter: blur(16px);
-        width: 2.625rem;
-        height: 2.625rem;
+        width: 3.125rem;
+        height: 3.125rem;
 
         position: absolute;
         top: 50%;

src/lib/components/ui/icon/sprite/sprite.svelte

@@ -235,6 +235,14 @@
             fill="currentColor"
         ></path>
     </symbol>
+    <symbol id="info" stroke="currentColor" viewBox="0 0 20 20">
+        <path
+            d="M5.473 3.821 C 5.412 3.852,5.322 3.930,5.273 3.994 L 5.183 4.111 5.175 9.897 C 5.167 15.548,5.168 15.686,5.230 15.788 C 5.266 15.845,5.351 15.935,5.420 15.988 C 5.527 16.070,5.574 16.083,5.748 16.081 L 5.950 16.078 11.115 13.303 C 13.956 11.777,16.324 10.497,16.377 10.459 C 16.494 10.376,16.599 10.160,16.599 10.000 C 16.599 9.864,16.504 9.641,16.413 9.562 C 16.378 9.532,14.017 8.221,11.167 6.649 C 6.134 3.873,5.978 3.789,5.783 3.777 C 5.641 3.768,5.551 3.781,5.473 3.821 M11.573 8.243 C 13.310 9.200,14.720 9.993,14.707 10.006 C 14.666 10.045,6.459 14.442,6.395 14.458 C 6.335 14.474,6.333 14.328,6.333 9.943 C 6.333 7.450,6.342 5.403,6.352 5.393 C 6.362 5.383,6.831 5.628,7.393 5.939 C 7.956 6.249,9.837 7.286,11.573 8.243 "
+            stroke="none"
+            fill-rule="evenodd"
+            fill="currentColor"
+        ></path>
+    </symbol>
     <symbol id="instagram" stroke="currentColor" viewBox="0 0 30 30">
         <path
             d="M10.375 0.031 C 9.250 0.064,7.859 0.154,7.350 0.229 C 5.392 0.514,3.783 1.277,2.553 2.502 C 1.586 3.465,1.038 4.367,0.597 5.719 C 0.088 7.282,0.000 8.647,0.000 15.000 C 0.000 21.460,0.086 22.729,0.633 24.391 C 1.424 26.792,3.137 28.515,5.556 29.343 C 7.226 29.914,8.467 30.000,15.018 30.000 C 21.544 29.999,22.704 29.918,24.425 29.345 C 26.565 28.633,28.221 27.121,29.091 25.086 C 29.908 23.175,30.035 21.556,29.984 13.750 C 29.953 8.945,29.910 7.999,29.668 6.800 C 29.482 5.878,29.077 4.749,28.694 4.086 C 27.595 2.185,25.765 0.894,23.444 0.383 C 22.093 0.085,21.209 0.045,15.675 0.029 C 13.063 0.022,10.678 0.023,10.375 0.031 M21.147 2.797 C 22.819 2.913,23.916 3.209,24.775 3.776 C 25.544 4.284,26.291 5.189,26.632 6.026 C 27.069 7.096,27.176 7.907,27.255 10.713 C 27.321 13.071,27.286 19.608,27.200 21.022 C 27.078 23.016,26.694 24.234,25.881 25.205 C 24.921 26.349,23.631 26.958,21.761 27.147 C 20.680 27.257,17.315 27.312,13.575 27.283 C 8.791 27.245,7.856 27.189,6.778 26.875 C 5.764 26.580,5.080 26.193,4.446 25.556 C 3.505 24.610,3.027 23.461,2.854 21.725 C 2.698 20.170,2.663 11.634,2.801 9.100 C 2.888 7.513,3.055 6.701,3.477 5.807 C 3.757 5.217,4.041 4.820,4.507 4.370 C 5.314 3.590,6.285 3.142,7.650 2.919 C 8.064 2.852,9.417 2.763,10.525 2.731 C 11.806 2.694,20.435 2.747,21.147 2.797 M22.514 5.270 C 21.719 5.529,21.239 6.180,21.239 7.000 C 21.239 7.839,21.771 8.518,22.593 8.728 C 23.215 8.886,23.866 8.689,24.316 8.206 C 24.683 7.811,24.775 7.570,24.775 7.000 C 24.775 6.590,24.757 6.486,24.641 6.240 C 24.357 5.633,23.775 5.245,23.107 5.217 C 22.875 5.207,22.642 5.228,22.514 5.270 M13.941 7.373 C 12.249 7.616,10.798 8.346,9.572 9.572 C 8.915 10.229,8.502 10.798,8.102 11.598 C 7.065 13.671,7.038 16.178,8.030 18.250 C 8.471 19.170,8.803 19.650,9.497 20.368 C 10.613 21.524,12.030 22.283,13.625 22.582 C 14.320 22.712,15.680 22.712,16.375 22.582 C 19.542 21.989,21.989 19.542,22.582 16.375 C 22.712 15.680,22.712 14.320,22.582 13.625 C 22.283 12.030,21.524 10.613,20.368 9.497 C 19.215 8.383,17.889 7.698,16.351 7.419 C 15.751 7.311,14.537 7.287,13.941 7.373 M16.175 10.144 C 17.970 10.592,19.337 11.932,19.836 13.732 C 19.958 14.171,19.973 14.310,19.973 15.000 C 19.973 15.851,19.896 16.256,19.596 16.978 C 19.142 18.068,18.068 19.142,16.978 19.596 C 16.256 19.896,15.851 19.973,15.000 19.973 C 14.310 19.973,14.171 19.958,13.732 19.836 C 10.960 19.068,9.387 16.230,10.235 13.526 C 10.801 11.721,12.266 10.434,14.167 10.071 C 14.656 9.977,15.653 10.014,16.175 10.144 "

src/lib/components/ui/icon/types.ts

@@ -28,6 +28,7 @@ export type IconType =
     | 'github'
     | 'google'
     | 'hamburger-menu'
+    | 'info'
     | 'instagram'
     | 'light'
     | 'linkedin'

src/markdoc/nodes/Fence.svelte

@@ -87,7 +87,9 @@
             <div class="web-code-snippet-header-start">
                 {#if badgeValue}
                     <div class="flex gap-4">
-                        <div class="web-tag"><span class="text">{badgeValue}</span></div>
+                        <div class="web-tag rounded-full!">
+                            <span class="text text-caption">{badgeValue}</span>
+                        </div>
                     </div>
                 {/if}
             </div>

src/markdoc/nodes/Th.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import type { HTMLTdAttributes } from 'svelte/elements';
 
-    export let align: HTMLTdAttributes['align'] = undefined;
-    export let width: HTMLTdAttributes['width'] = undefined;
+    interface ThProps {
+        align?: HTMLTdAttributes['align'];
+        width?: HTMLTdAttributes['width'];
+        children: Snippet;
+    }
+
+    const { align = 'left', width, children }: ThProps = $props();
 </script>
 
 <td
@@ -12,7 +18,7 @@
     class="min-w-44 px-3 py-[0.5625rem]"
     {align}
 >
-    <span class="text-sm leading-[1.375rem] text-[hsl(var(--web-color-primary))]">
-        <slot />
+    <span class="text-primary font-aeonik-fono text-eyebrow uppercase">
+        {@render children()}
     </span>
 </td>

src/markdoc/tags/Cards.svelte

@@ -8,6 +8,6 @@
     const { children }: CardsProps = $props();
 </script>
 
-<div class="not-prose my-8 grid grid-cols-1 gap-8 md:grid-cols-2">
+<div class="not-prose my-8 grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-8">
     {@render children()}
 </div>

src/markdoc/tags/Cards_Image_Item.svelte

@@ -24,7 +24,7 @@
         </h4>
     </header>
 
-    <p class="text-sub-body text-primary font-medium">
+    <p class="text-sub-body">
         {@render children()}
     </p>
 </a>

src/markdoc/tags/Info.svelte

@@ -9,8 +9,8 @@
     const { title, children }: Props = $props();
 </script>
 
-<div class="web-inline-info not-prose my-12!">
-    <span class="icon-info" aria-hidden="true"></span>
-    <h5 class="text-sub-body text-primary font-medium">{title}</h5>
-    {@render children?.()}
+<div class="bg-card border-smooth not-prose my-12! flex flex-col gap-3 rounded-xl border p-5">
+    <span class="icon-info" style:font-size="1.5rem" aria-hidden="true"></span>
+    <h5 class="text-description text-primary font-medium">{title}</h5>
+    <p class="text-paragraph-lg text-secondary">{@render children?.()}</p>
 </div>

src/markdoc/tags/Tabs.svelte

@@ -44,7 +44,7 @@
 </script>
 
 <div
-    class="dark:bg-greyscale-850/90 not-prose mt-4 mb-8 flex flex-col gap-1 rounded-2xl border border-black/8 bg-white/90 px-6 pt-4 pb-6 outline-0 dark:border-white/10"
+    class="dark:bg-greyscale-850/90 not-prose mt-4 mb-8 flex flex-col gap-1 rounded-2xl border border-black/8 bg-white/90 px-5 pt-4 pb-5 outline-0 dark:border-white/10"
 >
     <div
         class="flex items-center gap-4 overflow-scroll [-ms-overflow-style:none] [scrollbar-width:none]"
@@ -54,10 +54,10 @@
                 <button
                     class={cn(
                         'shrink-0 rounded-t-[0.625rem] text-center hover:bg-white/4',
-                        'relative cursor-pointer bg-clip-padding px-1 py-[0.625rem] font-light outline-none',
-                        'after:relative after:top-1 after:bottom-0 after:block after:h-px after:transition-all',
+                        'relative cursor-pointer bg-clip-padding px-1 pt-1 pb-2 font-light outline-none',
+                        'after:relative after:top-2 after:bottom-0 after:block after:h-px after:transition-all',
                         {
-                            'after:bg-(--color-primary)': tabs.value === id
+                            'after:bg-primary': tabs.value === id
                         }
                     )}
                     {...tabs.getTrigger(id)}

src/markdoc/tags/TabsItem.svelte

@@ -21,6 +21,6 @@
     });
 </script>
 
-<div class="border-smooth border-t pt-4" {...$ctx.tabs.getContent(id)}>
+<div class="border-smooth -mt-1.25 border-t pt-4" {...$ctx.tabs.getContent(id)}>
     {@render children()}
 </div>

src/routes/blog/post/markdoc-tags/+page.markdoc

@@ -0,0 +1,81 @@
+---
+layout: post
+title: "Markdoc Tags in Appwrite"
+description: All of our markdoc tags.
+date: 2025-08-21
+cover: /images/blog/sites-announcement/sites-cover.png
+timeToRead: 6
+author: jesse-winton
+draft: true
+---
+
+# All of our tags
+
+## Accordion
+{% accordion %}
+{%accordion_item title="What is Appwrite Sites?" id="what-is-appwrite-sites" %}
+Appwrite Sites is a new product that allows you to deploy and host your websites and web apps directly within Appwrite. It provides an all-in-one solution for building, deploying, and scaling your applications without needing to rely on external platforms like Vercel or Netlify.
+
+{% /accordion_item %}
+
+{%accordion_item title="What features does Appwrite Sites offer?" id="features-of-appwrite-sites" %}
+Appwrite Sites offers a range of features including:
+{% /accordion_item %}
+{% /accordion %}
+
+## Info
+{% info title="Lorem ipsum dolor sit amet consectetur" %}
+Lorem ipsum dolor sit amet consectetur. Sed volutpat nec pharetra nisl dis. Donec accumsan in orci volutpat augue sed sit sollicitudin. Nunc nec nunc nisl faucibus cursus diam tellus aliquet. Ac blandit et varius egestas.
+{% /info %}
+
+## Icon 
+{% icon icon="arrow-up" /%}
+{% icon icon="arrow-up" size="m" /%}
+{% icon icon="arrow-up" size="l" /%}
+{% icon icon="arrow-up" size="xl" /%}
+
+## Arrow Link
+
+{% arrow_link href="/" %}
+This is an arrow link
+{% /arrow_link %}
+
+## Blockquote
+
+{% blockquote name="Jesse Winton" title="Design Engineer" %}
+This is the blockquote content.
+{% /blockquote %}
+
+## Cards
+{% cards %}
+{% cards_item href="/" title="Cards Item" %}
+This is the content.
+{% /cards_item %}
+{% cards_item href="/" title="Cards Item 2" %}
+This is the content.
+{% /cards_item %}
+{% cards_image_item href="/" title="Cards Image Item" light="/images/docs/ai/computer-vision-light.png" dark="/images/docs/ai/computer-vision-dark.png"  %}
+This is the content.
+{% /cards_image_item %}
+{% cards_image_item href="/" title="Cards Image Item 2" light="/images/docs/ai/computer-vision-light.png" dark="/images/docs/ai/computer-vision-dark.png"  %}
+This is the content.
+{% /cards_image_item %}
+{% /cards %}
+
+## Tabs
+{% tabs %}
+{% tabsitem #js title="Javascript" %}
+Lorem ipsum dolor sit amet consectetur.
+{% /tabsitem %}
+
+{% tabsitem #flutter title="Flutter" %}
+Lorem ipsum dolor sit amet consectetur.
+{% /tabsitem %}
+{% /tabs %}
+
+## Video
+{% video
+   src="/images/blog/defying-the-laws-of-web-animations/animations.mp4" /%}
+
+## YouTube
+{% youtube src="https://www.youtube-nocookie.com/embed/5NtrYks2dqE?si=0vjkBCZYg8yf2GUW" thumbnail="/images/blog/a-recap-of-init/thumbnails/thumbnail-1.png" /%}

src/routes/docs/references/[version]/[platform]/[service]/(components)/RateLimits.svelte

@@ -52,7 +52,7 @@
                     using SSR with <code>setSession</code>, these rate limits will still apply.
                     <a
                         href="/docs/products/auth/server-side-rendering#rate-limits"
-                        class="u-link text-primary"
+                        class="u-link text-primary mt-3 block"
                     >
                         Learn more about SSR rate limits.
                     </a>
@@ -66,17 +66,23 @@
                     <thead class="web-table-header">
                         <tr class="web-table-row">
                             <th class="web-table-head-col">
-                                <div class="text-eyebrow font-aeonik-fono text-primary uppercase">
+                                <div
+                                    class="text-eyebrow font-regular font-aeonik-fono text-primary uppercase"
+                                >
                                     Time frame
                                 </div>
                             </th>
                             <th class="web-table-head-col">
-                                <div class="text-eyebrow font-aeonik-fono text-primary uppercase">
+                                <div
+                                    class="text-eyebrow font-regular font-aeonik-fono text-primary uppercase"
+                                >
                                     Attempts
                                 </div>
                             </th>
                             <th class="web-table-head-col">
-                                <div class="text-eyebrow font-aeonik-fono text-primary uppercase">
+                                <div
+                                    class="text-eyebrow font-regular font-aeonik-fono text-primary uppercase"
+                                >
                                     Key
                                 </div>
                             </th>
@@ -94,7 +100,7 @@
                                 </tr>
                             {/each}
                         {:else if typeof rateKeys === 'string'}
-                            <tr class="web-table-row">
+                            <tr class="web-table-row rounded-none!">
                                 <td class="web-table-col">{Math.floor(rateTime / 60)} minutes</td>
                                 <td class="web-table-col">{rateLimit} requests</td>
                                 <td class="web-table-col">{parseKeys(rateKeys)}</td>
@@ -107,7 +113,7 @@
         <div class="">
             <a
                 href="/docs/advanced/platform/rate-limits"
-                class="u-link text-primary"
+                class="u-link text-primary mt-3 block"
                 onclick={() => trackEvent(`docs-rate_limits_learn_more-click`)}
             >
                 <span>Learn more about rate limits</span>