Style fixes

src/lib/components/MetricCard.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let metric: string;
+    export let description: string;
+</script>
+
+<div class="aw-card is-normal has-border-gradient">
+    <div class="aw-title aw-u-color-text-primary">{metric}</div>
+    <div class="aw-description">{description}</div>
+</div>
+
+<style lang="scss">
+    .aw-card {
+        padding: 1.25rem;
+    }
+</style>

src/lib/components/Select.svelte

@@ -91,7 +91,7 @@
         {/if}
         <span>{$selectedLabel}</span>
     </div>
-    <span class="icon-cheveron-down" aria-hidden="true" />
+    <span class="icon-cheveron-{$open ? 'up' : 'down'}" aria-hidden="true" />
 </button>
 
 {#if $open}
@@ -162,7 +162,7 @@
             {/if}
         {/each}
     </select>
-    <span class="icon-cheveron-down" aria-hidden="true" />
+    <span class="icon-cheveron-{$open ? 'up' : 'down'}" aria-hidden="true" />
 </div>
 
 <style lang="scss">

src/lib/components/Technologies.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Tooltip from '$lib/components/Tooltip.svelte';
-    import { currentTheme, themeInUse } from '$routes/+layout.svelte';
+    import { themeInUse } from '$routes/+layout.svelte';
 
     $: platforms = [
         {

src/lib/components/index.ts

@@ -12,3 +12,4 @@ export { default as FloatingHeads } from './FloatingHeads.svelte';
 export { default as FloatingHead } from './FloatingHead.svelte';
 export { default as Feedback } from './Feedback.svelte';
 export { default as Select } from './Select.svelte';
+export { default as MetricCard } from './MetricCard.svelte';

src/lib/layouts/DocsArticle.svelte

@@ -129,7 +129,7 @@
             position: absolute;
             content: '';
             top: 0;
-            left: -1.5rem;
+            left: -1.8rem;
             height: 100%;
             width: 2px;
             background-color: hsl(var(--p-references-menu-link-color-text));

src/lib/utils/date.ts

@@ -0,0 +1,7 @@
+export const formatDate = (date: string): string => {
+    const dt = new Date(date);
+    const month = dt.toLocaleString('default', { month: 'short' });
+    const day = dt.getDate();
+    const year = dt.getFullYear();
+    return `${month} ${day}, ${year}`;
+};

src/markdoc/layouts/Post.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
     import { Main } from '$lib/layouts';
+    import { formatDate } from '$lib/utils/date';
     import { getContext } from 'svelte';
-    import type { CategoryData, AuthorData, PostsData } from '$routes/blog/content';
-    import { BLOG_TITLE_SUFFIX } from '$routes/titles';
+    import { scroll } from '$lib/animations';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
+    import type { AuthorData, CategoryData, PostsData } from '$routes/blog/content';
+    import { BLOG_TITLE_SUFFIX } from '$routes/titles';
 
     export let title: string;
     export let description: string;
@@ -27,6 +29,8 @@
             cats.some((cat) => cat.toLocaleLowerCase() === c.name.toLocaleLowerCase())
         );
     }
+
+    let readPercentage = 0;
 </script>
 
 <svelte:head>
@@ -47,7 +51,13 @@
 </svelte:head>
 
 <Main>
-    <div class="aw-big-padding-section">
+    <div
+        class="aw-big-padding-section"
+        use:scroll
+        on:aw-scroll={(e) => {
+            readPercentage = e.detail.percentage;
+        }}
+    >
         <div class="aw-big-padding-section">
             <div class="aw-big-padding-section-level-1">
                 <div class="aw-big-padding-section-level-2">
@@ -60,9 +70,7 @@
                                 </a>
                                 <ul class="aw-metadata aw-caption-400">
                                     <li>
-                                        <time datetime={date}
-                                            >{new Date(date).toLocaleDateString()}</time
-                                        >
+                                        <time datetime={date}>{formatDate(date)}</time>
                                     </li>
                                     {#if timeToRead}
                                         <li>{timeToRead} min</li>
@@ -199,3 +207,16 @@
         </div>
     </div>
 </Main>
+
+<div class="progress-bar" style:--percentage="{readPercentage * 100}%" />
+
+<style lang="scss">
+    .progress-bar {
+        position: fixed;
+        top: 0;
+        height: 2px;
+        width: var(--percentage);
+        background: hsl(var(--aw-color-accent));
+        z-index: 10000;
+    }
+</style>

src/markdoc/nodes/Item.svelte

@@ -1 +1,7 @@
-<li><p><slot /></p></li>
+<script lang="ts">
+    import { getContext } from 'svelte';
+
+    const isDocs = getContext('isDocs') ?? false;
+</script>
+
+<li><p class:aw-paragraph-lg={!isDocs}><slot /></p></li>

src/markdoc/nodes/Link.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
-	export let href: string;
-	export let title: string;
+    import { getContext } from 'svelte';
 
-	const isExternal = ['http://', 'https://'].some((prefix) => href.startsWith(prefix));
-	const target = isExternal ? '_blank' : undefined;
-	const rel = isExternal ? 'noopener nofollow' : undefined;
+    export let href: string;
+    export let title: string;
+
+    const isExternal = ['http://', 'https://'].some((prefix) => href.startsWith(prefix));
+    const target = isExternal ? '_blank' : undefined;
+    const rel = isExternal ? 'noopener nofollow' : undefined;
+
+    const isDocs = getContext('isDocs') ?? false;
 </script>
 
-<a class="aw-link" {href} {title} {target} {rel}><slot /></a>
+<a
+    class="aw-link is-inline {isDocs ? 'aw-paragraph-md' : 'aw-paragraph-lg'}"
+    {href}
+    {title}
+    {target}
+    {rel}><slot /></a
+>

src/markdoc/tags/Arrow_Link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+
+    export let href: string;
+
+    const isExternal = ['http://', 'https://'].some((prefix) => href.startsWith(prefix));
+    const target = isExternal ? '_blank' : undefined;
+    const rel = isExternal ? 'noopener nofollow' : undefined;
+
+    const isDocs = getContext('isDocs') ?? false;
+</script>
+
+<a class="aw-link {isDocs ? 'aw-paragraph-md' : 'aw-paragraph-lg'}" {href} {target} {rel}
+    ><slot /><span class="icon-cheveron-right" style:font-size="16px" /></a
+>

src/markdoc/tags/Icon.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let icon: string;
-	export let size: string = 's';
+    export let icon: string;
+    export let size = 's';
 
-	const sizes: Record<string, string> = {
-		s: '16px',
+    const sizes: Record<string, string> = {
+        s: '16px',
         m: '20px',
-		l: '32px',
-		xl: '40px'
-	};
+        l: '32px',
+        xl: '40px'
+    };
 </script>
 
-<span class={`icon-${icon}`} style:font-size={sizes[size]} />
+<span class="icon-{icon}" style:font-size={sizes[size]} />

src/markdoc/tags/_Module.svelte

@@ -11,6 +11,7 @@
     export { default as Only_Light } from './Only_Light.svelte';
     export { default as Only_Dark } from './Only_Dark.svelte';
     export { default as Video } from './Video.svelte';
+    export { default as Arrow_Link } from './Arrow_Link.svelte';
     export { default as Count_Section } from './Count_Section.svelte';
     export { default as Count_Title } from './Count_Title.svelte';
 </script>

src/routes/+page.svelte

@@ -11,6 +11,7 @@
     import Tooltip from '$lib/components/Tooltip.svelte';
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
     import { isMobileNavOpen } from '$lib/layouts/Main.svelte';
+    import Technologies from '$lib/components/Technologies.svelte';
 
     const platforms: Array<{
         name: string;
@@ -549,27 +550,7 @@
                             We support many SDKs making Appwrite flexible to your needs and ensuring
                             you can code with the language you want at any time.
                         </p>
-                        <ul
-                            class="u-flex u-flex-wrap u-gap-16 aw-u-margin-block-32-mobile aw-u-margin-block-40-not-mobile"
-                        >
-                            {#each platforms as platform}
-                                <li>
-                                    <Tooltip>
-                                        <a href={platform.href} class="aw-box-icon">
-                                            <img
-                                                src={platform.image}
-                                                alt="{platform.name} Logo"
-                                                width="32"
-                                                height="32"
-                                            />
-                                        </a>
-                                        <svelte:fragment slot="tooltip"
-                                            >{platform.name}</svelte:fragment
-                                        >
-                                    </Tooltip>
-                                </li>
-                            {/each}
-                        </ul>
+                        <Technologies />
                         <a
                             href="/docs/sdks"
                             class="aw-button is-secondary"