Privacy & Cookies Page

src/lib/layouts/Docs.svelte

@@ -32,13 +32,16 @@
             };
         });
     }
+
+    const CTX_KEY = Symbol('docs');
+    export const isInDocs = () => getContext<boolean>(CTX_KEY) ?? false;
 </script>
 
 <script lang="ts">
     import Search from '$lib/components/Search.svelte';
 
     import { isMac } from '$lib/utils/platform';
-    import { setContext } from 'svelte';
+    import { getContext, setContext } from 'svelte';
 
     export let variant: DocsLayoutVariant = 'default';
     export let isReferences = false;
@@ -59,8 +62,7 @@
             showSidenav: false
         }));
     });
-
-    setContext('isDocs', true);
+    setContext(CTX_KEY, true);
 
     const handleKeydown = (e: KeyboardEvent) => {
         if (e.key === 'Escape' && ($layoutState.showReferences || $layoutState.showSidenav)) {

src/markdoc/layouts/Changelog.svelte

@@ -14,7 +14,7 @@
         setContext(CONTEXT_KEY, null);
     }
 
-    export function isInsideChangelog() {
+    export function isInChangelog() {
         return hasContext(CONTEXT_KEY);
     }
 </script>

src/markdoc/layouts/Policy.svelte

@@ -13,7 +13,7 @@
         return getContext<PolicyContext>(POLICY_KEY);
     };
 
-    export const isInsidePolicy = () => {
+    export const isInPolicy = () => {
         return hasContext(POLICY_KEY);
     };
 </script>

src/markdoc/nodes/Heading.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getContext, hasContext, onMount } from 'svelte';
     import type { LayoutContext } from '../layouts/Article.svelte';
-    import { isInsidePolicy } from '$markdoc/layouts/Policy.svelte';
+    import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
 
     export let level: number;
     export let id: string | undefined = undefined;
@@ -48,23 +48,21 @@
         observer.observe(element);
     });
 
-    const inPolicy = isInsidePolicy();
+    const inPolicy = isInPolicy();
     $: headingClass = inPolicy && level === 1 ? 'aw-title' : classList[level];
 </script>
 
 {#if id}
-
-        <svelte:element
-            this={tag}
-            {id}
-            bind:this={element}
-            class:aw-snap-location={id && !inReferences}
-            class:aw-snap-location-references={id && inReferences}
-            class="{headingClass} aw-u-color-text-primary"
-        >
-            <a href={`#${id}`} class=""><slot /></a>
-        </svelte:element>
-
+    <svelte:element
+        this={tag}
+        {id}
+        bind:this={element}
+        class:aw-snap-location={id && !inReferences}
+        class:aw-snap-location-references={id && inReferences}
+        class="{headingClass} aw-u-color-text-primary"
+    >
+        <a href={`#${id}`} class=""><slot /></a>
+    </svelte:element>
 {:else}
     <svelte:element
         this={tag}

src/markdoc/nodes/Item.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
-    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { getContext } from 'svelte';
+    import { isInDocs } from '$lib/layouts/Docs.svelte';
+    import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
+    import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
 
-    const isDocs = getContext('isDocs') ?? false;
-    const inChangelog = isInsideChangelog();
+    const inDocs = isInDocs();
+    const inChangelog = isInChangelog();
+    const inPolicy = isInPolicy();
+
+    $: classes = (() => {
+        if (inDocs) return '';
+        if (inChangelog) return '';
+        if (inPolicy) return '';
+        return 'aw-paragraph-lg';
+    })();
 </script>
 
-<li><p class:aw-paragraph-lg={!isDocs && !inChangelog}><slot /></p></li>
+<li><p class={classes}><slot /></p></li>

src/markdoc/nodes/Link.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { getContext } from 'svelte';
-    import { TABLE_CTX_KEY } from './Table.svelte';
+    import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
+    import { hasContext } from 'svelte';
 
     export let href: string;
     export let title: string;
@@ -10,22 +9,20 @@
     const target = isExternal ? '_blank' : undefined;
     const rel = isExternal ? 'noopener nofollow' : undefined;
 
-    const isDocs = getContext('isDocs') ?? false;
-    const inChangelog = isInsideChangelog();
-    const inTable = getContext(TABLE_CTX_KEY) ?? false;
+    const isDocs = hasContext('isDocs');
+    const inChangelog = isInChangelog();
+
+    $: classes = (() => {
+        if (isDocs) return 'aw-paragraph-md';
+        if (inChangelog) return 'aw-paragraph-lg in-changelog';
+        return '';
+    })();
 </script>
 
-<a
-    class="aw-link is-inline {isDocs || inChangelog ? 'aw-paragraph-md' : 'aw-paragraph-lg'}"
-    data-in-changelog={inChangelog ? '' : undefined}
-    {href}
-    {title}
-    {target}
-    {rel}><slot /></a
->
+<a class="aw-link is-inline {classes}" {href} {title} {target} {rel}><slot /></a>
 
 <style lang="scss">
-    [data-in-changelog]:last-child {
+    .in-changelog:last-child {
         margin-block-start: 1rem;
     }
 </style>

src/markdoc/nodes/List.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { isInsidePolicy } from '$markdoc/layouts/Policy.svelte';
+    import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
+    import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
     import { setContext } from 'svelte';
 
     export let ordered: boolean;
 
     setContext('no-paragraph', true);
 
-    const inPolicy = isInsidePolicy();
-    const inChangelog = isInsideChangelog();
+    const inPolicy = isInPolicy();
+    const inChangelog = isInChangelog();
 </script>
 
 <svelte:element

src/markdoc/nodes/Paragraph.svelte

@@ -1,27 +1,31 @@
 <script lang="ts">
-    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { isInsidePolicy } from '$markdoc/layouts/Policy.svelte';
+    import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
+    import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
     import { getContext, hasContext } from 'svelte';
+    import { isInTable } from './Table.svelte';
 
     const noParagraph = hasContext('no-paragraph') ? getContext('no-paragraph') : false;
-    const isDocs = getContext('isDocs') ?? false;
-    const inPolicy = isInsidePolicy();
-    const inChangelog = isInsideChangelog();
+    const isDocs = getContext<boolean>('isDocs') ?? false;
+    const inPolicy = isInPolicy();
+    const inChangelog = isInChangelog();
+    const inTable = isInTable();
 
     let className = '';
     export { className as class };
+
+    $: classes = (() => {
+        if (isDocs) return 'aw-paragraph-md';
+        if (inPolicy) return 'aw-paragraph-md in-policy';
+        if (inTable) return 'aw-paragraph-md';
+        if (inChangelog) return 'aw-paragraph-lg in-changelog';
+        return 'aw-paragraph-lg';
+    })();
 </script>
 
 {#if noParagraph}
     <slot />
-{:else if isDocs}
-    <p class="aw-paragraph-md {className}"><slot /></p>
-{:else if inPolicy}
-    <p class="aw-paragraph-md in-policy {className}"><slot /></p>
-{:else if inChangelog}
-    <p class="aw-paragraph-lg in-changelog {className}"><slot /></p>
 {:else}
-    <p class="aw-paragraph-lg {className}"><slot /></p>
+    <p class="{classes} {className}"><slot /></p>
 {/if}
 
 <style lang="scss">

src/markdoc/nodes/Table.svelte

@@ -1,17 +1,16 @@
 <script lang="ts" context="module">
-    export const TABLE_CTX_KEY = 'in-table';
-    export const getTableCtx = () => getContext<boolean>(TABLE_CTX_KEY);
-    export const isInTable = () => !!getTableCtx();
+    export const TABLE_CTX_KEY = Symbol('table');
+    export const isInTable = () => getContext<boolean>(TABLE_CTX_KEY) ?? false;
 </script>
 
 <script lang="ts">
-    import { getPolicyCtx, isInsidePolicy } from '$markdoc/layouts/Policy.svelte';
+    import { getPolicyCtx, isInPolicy } from '$markdoc/layouts/Policy.svelte';
 
     import { getContext, setContext } from 'svelte';
 
     setContext(TABLE_CTX_KEY, true);
 
-    const inPolicy = isInsidePolicy();
+    const inPolicy = isInPolicy();
     const transparentCells = inPolicy ? getPolicyCtx().transparentTableCells : false;
 </script>
 

src/markdoc/tags/Arrow_Link.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
-    import { isInsideChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { getContext } from 'svelte';
+    import { isInDocs } from '$lib/layouts/Docs.svelte';
+    import { isInChangelog } from '$markdoc/layouts/Changelog.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 inChangelog = isInsideChangelog();
 
-    const isDocs = getContext('isDocs') ?? false;
+    const inChangelog = isInChangelog();
+    const inDocs = isInDocs();
+
+    $: classes = (() => {
+        if (inDocs) return 'aw-link aw-paragraph-md';
+        if (inChangelog) return 'aw-link aw-paragraph-lg';
+        return '';
+    })();
 </script>
 
-<a
-    class="aw-link {isDocs ? 'aw-paragraph-md' : 'aw-paragraph-lg'}"
-    data-in-changelog={inChangelog ? '' : undefined}
-    {href}
-    {target}
-    {rel}><slot /><span class="icon-cheveron-right" style:font-size="16px" /></a
+<a class={classes} data-in-changelog={inChangelog ? '' : undefined} {href} {target} {rel}
+    ><slot /><span class="icon-cheveron-right" style:font-size="16px" /></a
 >
 
 <style>