From 761d3aea5f657d14cbc0bb1a557e26b265e13cc5 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Wed, 20 Aug 2025 11:43:18 -0400 Subject: [PATCH 01/11] add markdoc tags test post --- .../blog/post/markdoc-tags/+page.markdoc | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/routes/blog/post/markdoc-tags/+page.markdoc diff --git a/src/routes/blog/post/markdoc-tags/+page.markdoc b/src/routes/blog/post/markdoc-tags/+page.markdoc new file mode 100644 index 0000000000..cff70cc62f --- /dev/null +++ b/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="Testing info" %} +This is the info block +{% /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" dark="/images/logos/appwrite.svg" %} +This is the content. +{% /cards_image_item %} +{% cards_image_item href="/" title="Cards Image Item 2" dark="/images/logos/appwrite.svg" %} +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" /%} From c7f0081a2bd5a7a8ad4094a4cbab014e54da8856 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Thu, 21 Aug 2025 13:27:59 -0400 Subject: [PATCH 02/11] update inline info design --- src/icons/optimized/info.svg | 1 + src/icons/svg/info.svg | 4 + .../components/ui/icon/sprite/sprite.svelte | 704 +++++------------- src/lib/components/ui/icon/types.ts | 65 +- src/markdoc/tags/Info.svelte | 8 +- .../blog/post/markdoc-tags/+page.markdoc | 4 +- 6 files changed, 209 insertions(+), 577 deletions(-) create mode 100644 src/icons/optimized/info.svg create mode 100644 src/icons/svg/info.svg diff --git a/src/icons/optimized/info.svg b/src/icons/optimized/info.svg new file mode 100644 index 0000000000..d8a73ee8ff --- /dev/null +++ b/src/icons/optimized/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/info.svg b/src/icons/svg/info.svg new file mode 100644 index 0000000000..1cfb07114e --- /dev/null +++ b/src/icons/svg/info.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/lib/components/ui/icon/sprite/sprite.svelte b/src/lib/components/ui/icon/sprite/sprite.svelte index 59df8605f7..8c9d0df888 100644 --- a/src/lib/components/ui/icon/sprite/sprite.svelte +++ b/src/lib/components/ui/icon/sprite/sprite.svelte @@ -1,507 +1,197 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/lib/components/ui/icon/types.ts b/src/lib/components/ui/icon/types.ts index f19ffc8620..95892d13c2 100644 --- a/src/lib/components/ui/icon/types.ts +++ b/src/lib/components/ui/icon/types.ts @@ -1,64 +1 @@ -export type IconType = - | 'apple' - | 'appwrite' - | 'arrow-down' - | 'arrow-ext-link' - | 'arrow-left' - | 'arrow-right' - | 'arrow-up' - | 'bluesky' - | 'calendar' - | 'check' - | 'chevron-down' - | 'chevron-left' - | 'chevron-right' - | 'chevron-up' - | 'close' - | 'command' - | 'copy' - | 'customize' - | 'daily-dev' - | 'dark' - | 'discord' - | 'divider-vertical' - | 'download' - | 'edge' - | 'ext-link' - | 'firebase' - | 'github' - | 'google' - | 'hamburger-menu' - | 'instagram' - | 'light' - | 'linkedin' - | 'location' - | 'logout-left' - | 'logout-right' - | 'mailgun' - | 'mcp' - | 'message' - | 'microsoft' - | 'minus' - | 'nuxt' - | 'platform' - | 'play' - | 'plus' - | 'pop-locations' - | 'product-hunt' - | 'refine' - | 'regions' - | 'remix' - | 'rest' - | 'search' - | 'sendgrid' - | 'sparkle' - | 'star' - | 'system' - | 'textmagic' - | 'ticket' - | 'tiktok' - | 'twitter' - | 'vue' - | 'x' - | 'ycombinator' - | 'youtube'; +export type IconType = "apple" | "appwrite" | "arrow-down" | "arrow-ext-link" | "arrow-left" | "arrow-right" | "arrow-up" | "bluesky" | "calendar" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "close" | "command" | "copy" | "customize" | "daily-dev" | "dark" | "discord" | "divider-vertical" | "download" | "edge" | "ext-link" | "firebase" | "github" | "google" | "hamburger-menu" | "info" | "instagram" | "light" | "linkedin" | "location" | "logout-left" | "logout-right" | "mailgun" | "mcp" | "message" | "microsoft" | "minus" | "nuxt" | "platform" | "play" | "plus" | "pop-locations" | "product-hunt" | "refine" | "regions" | "remix" | "rest" | "search" | "sendgrid" | "sparkle" | "star" | "system" | "textmagic" | "ticket" | "tiktok" | "twitter" | "vue" | "x" | "ycombinator" | "youtube"; \ No newline at end of file diff --git a/src/markdoc/tags/Info.svelte b/src/markdoc/tags/Info.svelte index d89e8f2cc4..66f8ce0913 100644 --- a/src/markdoc/tags/Info.svelte +++ b/src/markdoc/tags/Info.svelte @@ -9,8 +9,8 @@ const { title, children }: Props = $props(); -
- -
{title}
- {@render children?.()} +
+ +
{title}
+

{@render children?.()}

diff --git a/src/routes/blog/post/markdoc-tags/+page.markdoc b/src/routes/blog/post/markdoc-tags/+page.markdoc index cff70cc62f..c5044a9832 100644 --- a/src/routes/blog/post/markdoc-tags/+page.markdoc +++ b/src/routes/blog/post/markdoc-tags/+page.markdoc @@ -24,8 +24,8 @@ Appwrite Sites offers a range of features including: {% /accordion %} ## Info -{% info title="Testing info" %} -This is the info block +{% 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 From c6fd8188cd3f8cb21f963a987fd3ac333462fd7d Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 22 Aug 2025 10:06:57 -0400 Subject: [PATCH 03/11] update accordion item --- src/lib/components/Accordion/Item.svelte | 38 +++++++++--------------- src/markdoc/tags/Info.svelte | 2 +- 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/src/lib/components/Accordion/Item.svelte b/src/lib/components/Accordion/Item.svelte index 37b15b2567..e110f435e9 100644 --- a/src/lib/components/Accordion/Item.svelte +++ b/src/lib/components/Accordion/Item.svelte @@ -1,37 +1,27 @@ -
  • -
    +
  • +
    {title}
    -
    - +
    + {@render children()}
    • - - diff --git a/src/markdoc/tags/Info.svelte b/src/markdoc/tags/Info.svelte index 66f8ce0913..656d9e54a5 100644 --- a/src/markdoc/tags/Info.svelte +++ b/src/markdoc/tags/Info.svelte @@ -9,7 +9,7 @@ const { title, children }: Props = $props(); -
    +
    {title}

    {@render children?.()}

    From 49dc216130ef8f7802bc52393b2f01d8534e4d38 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 22 Aug 2025 10:10:33 -0400 Subject: [PATCH 04/11] tweaks --- src/lib/components/shared/video/player.svelte | 2 +- src/markdoc/tags/Tabs.svelte | 4 ++-- src/routes/blog/post/markdoc-tags/+page.markdoc | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/components/shared/video/player.svelte b/src/lib/components/shared/video/player.svelte index f6e67c5b6e..f3674946ad 100644 --- a/src/lib/components/shared/video/player.svelte +++ b/src/lib/components/shared/video/player.svelte @@ -31,7 +31,7 @@ >
    diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte index 627a02b592..12ee3397d5 100644 --- a/src/markdoc/tags/Tabs.svelte +++ b/src/markdoc/tags/Tabs.svelte @@ -44,7 +44,7 @@
    Date: Fri, 22 Aug 2025 10:12:24 -0400 Subject: [PATCH 05/11] update cards item --- src/lib/components/shared/video/player.svelte | 4 ++-- src/markdoc/tags/Cards_Image_Item.svelte | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/shared/video/player.svelte b/src/lib/components/shared/video/player.svelte index f3674946ad..feabeac8ba 100644 --- a/src/lib/components/shared/video/player.svelte +++ b/src/lib/components/shared/video/player.svelte @@ -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%; diff --git a/src/markdoc/tags/Cards_Image_Item.svelte b/src/markdoc/tags/Cards_Image_Item.svelte index 5fc2612599..b5f57f6a97 100644 --- a/src/markdoc/tags/Cards_Image_Item.svelte +++ b/src/markdoc/tags/Cards_Image_Item.svelte @@ -24,7 +24,7 @@ -

    +

    {@render children()}

    From 387c8158ab85ff567684a34d0b6e5133af5b9561 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 22 Aug 2025 11:07:41 -0400 Subject: [PATCH 06/11] updates --- src/lib/components/MultiCodeContextless.svelte | 4 +++- src/markdoc/nodes/Fence.svelte | 4 +++- src/markdoc/nodes/Th.svelte | 14 ++++++++++---- src/markdoc/tags/Tabs.svelte | 4 ++-- .../[service]/(components)/RateLimits.svelte | 18 ++++++++++++------ .../[service]/(components)/Request.svelte | 6 +++--- .../[platform]/[service]/+page.svelte | 2 +- .../(components)/MultiFrameworkCode.svelte | 4 +++- .../(components)/MultiFrameworkCode.svelte | 4 +++- .../(components)/MultiCodeContextless.svelte | 2 +- src/routes/threads/[id]/CodeRenderer.svelte | 2 +- src/scss/6-elements/_card.scss | 2 +- src/scss/6-elements/_table.scss | 4 ++-- 13 files changed, 45 insertions(+), 25 deletions(-) diff --git a/src/lib/components/MultiCodeContextless.svelte b/src/lib/components/MultiCodeContextless.svelte index d356c1f957..9d33dfdf86 100644 --- a/src/lib/components/MultiCodeContextless.svelte +++ b/src/lib/components/MultiCodeContextless.svelte @@ -64,7 +64,9 @@
    {#if platform} -
    {platform}
    +
    + {platform} +
    {/if}
    diff --git a/src/markdoc/nodes/Fence.svelte b/src/markdoc/nodes/Fence.svelte index 183113bff7..bdf61d075e 100644 --- a/src/markdoc/nodes/Fence.svelte +++ b/src/markdoc/nodes/Fence.svelte @@ -87,7 +87,9 @@
    {#if badgeValue}
    -
    {badgeValue}
    +
    + {badgeValue} +
    {/if}
    diff --git a/src/markdoc/nodes/Th.svelte b/src/markdoc/nodes/Th.svelte index a7a3499907..407df9b620 100644 --- a/src/markdoc/nodes/Th.svelte +++ b/src/markdoc/nodes/Th.svelte @@ -1,8 +1,14 @@ - - + + {@render children()} diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte index 12ee3397d5..0640a33ded 100644 --- a/src/markdoc/tags/Tabs.svelte +++ b/src/markdoc/tags/Tabs.svelte @@ -54,10 +54,10 @@