From 86cdc1511492bc126fea16396fe9b941ced91217 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 14:09:24 +0200 Subject: [PATCH 01/11] fix: some issues with references --- src/lib/utils/code.ts | 4 +++ src/lib/utils/references.ts | 36 +++++++++++++++++-- src/lib/utils/specs.ts | 35 +++++++++--------- src/routes/docs/+error.svelte | 16 +++++++-- src/routes/docs/+page.svelte | 2 -- .../[platform]/[service]/+page.svelte | 16 ++++----- 6 files changed, 77 insertions(+), 32 deletions(-) diff --git a/src/lib/utils/code.ts b/src/lib/utils/code.ts index af46c12c85..165680cc16 100644 --- a/src/lib/utils/code.ts +++ b/src/lib/utils/code.ts @@ -14,6 +14,8 @@ import diff from 'highlight.js/lib/languages/diff'; import ruby from 'highlight.js/lib/languages/ruby'; import csharp from 'highlight.js/lib/languages/csharp'; import http from 'highlight.js/lib/languages/http'; +import kotlin from 'highlight.js/lib/languages/kotlin'; +import java from 'highlight.js/lib/languages/java'; const languages = { js: javascript, @@ -31,6 +33,8 @@ const languages = { rb: ruby, cs: csharp, http: http, + kotlin: kotlin, + java: java, } as const satisfies Record; Object.entries(languages).forEach(([key, value]) => { diff --git a/src/lib/utils/references.ts b/src/lib/utils/references.ts index 65aa036d0d..efe77a1a03 100644 --- a/src/lib/utils/references.ts +++ b/src/lib/utils/references.ts @@ -15,9 +15,11 @@ export enum Service { } export enum Platform { - ClientApple = 'client-apple', - ClientFlutter = 'client-flutter', ClientWeb = 'client-web', + ClientFlutter = 'client-flutter', + ClientApple = 'client-apple', + ClientAndroidKotlin = 'client-android-kotlin', + ClientAndroidJava = 'client-android-java', ServerDart = 'server-dart', ServerDeno = 'server-deno', ServerDotNet = 'server-dotnet', @@ -32,6 +34,8 @@ export const languageMap: Record = { [Platform.ClientApple]: 'swift', [Platform.ClientFlutter]: 'dart', [Platform.ClientWeb]: 'js', + [Platform.ClientAndroidKotlin]: 'kotlin', + [Platform.ClientAndroidJava]: 'java', [Platform.ServerDart]: 'dart', [Platform.ServerDeno]: 'ts', [Platform.ServerDotNet]: 'cs', @@ -41,3 +45,31 @@ export const languageMap: Record = { [Platform.ServerRuby]: 'rb', [Platform.ServerSwift]: 'swift' }; + +export const platformMap: Record = { + [Platform.ClientApple]: 'Apple SDK', + [Platform.ClientFlutter]: 'Flutter SDK', + [Platform.ClientWeb]: 'Web SDK', + [Platform.ClientAndroidKotlin]: 'Android SDK (Kotlin)', + [Platform.ClientAndroidJava]: 'Android SDK (Java)', + [Platform.ServerDart]: 'Dart SDK', + [Platform.ServerDeno]: 'Deno SDK', + [Platform.ServerDotNet]: '.NET SDK', + [Platform.ServerNodeJs]: 'Node.js SDK', + [Platform.ServerPhp]: 'PHP SDK', + [Platform.ServerPython]: 'Python SDK', + [Platform.ServerRuby]: 'Ruby SDK', + [Platform.ServerSwift]: 'Swift SDK' +}; + +export const serviceMap: Record = { + [Service.Account]: 'Account', + [Service.Avatars]: 'Avatars', + [Service.Databases]: 'Databases', + [Service.Functions]: 'Functions', + [Service.Health]: 'Health', + [Service.Locale]: 'Locale', + [Service.Storage]: 'Storage', + [Service.Teams]: 'Teams', + [Service.Users]: 'Users' +}; diff --git a/src/lib/utils/specs.ts b/src/lib/utils/specs.ts index 9392c20671..38bf44e911 100644 --- a/src/lib/utils/specs.ts +++ b/src/lib/utils/specs.ts @@ -1,5 +1,6 @@ import SwaggerParser from '@apidevtools/swagger-parser'; import { OpenAPIV3 } from 'openapi-types'; +import { Platform, type Service } from './references'; type SDKMethod = { id: string; @@ -155,32 +156,28 @@ export async function getService( service: string ): Promise<{ service: { - name: string; + name: Service; description: string; }; methods: SDKMethod[]; }> { + /** + * Exceptions for Android SDK. + */ + const isAndroidJava = platform === Platform.ClientAndroidJava; + const isAndroidKotlin = platform === Platform.ClientAndroidKotlin; + const isAndroid = isAndroidJava || isAndroidKotlin; const spec = await getSpec(version, platform); - const data: { - service: { - name: string; - description: string; - }; - methods: SDKMethod[]; - } = { - service: { - name: '', - description: '' - }, - methods: [] - }; const parser = new SwaggerParser(); const api = (await parser.bundle(spec as unknown as OpenAPIV3.Document)) as OpenAPIV3.Document; const tag = api.tags?.find((n) => n.name === service); - data.service = { - name: tag?.name ?? '', - description: tag?.description ?? '' + const data: Awaited> = { + service: { + name: tag?.name as Service, + description: tag?.description ?? '' + }, + methods: [] }; const examples = getExamples(version); @@ -215,7 +212,9 @@ export async function getService( } ); - const path = `/node_modules/@appwrite.io/repo/docs/examples/${version}/${platform}/examples/${operation['x-appwrite'].demo}`; + const path = isAndroid + ? `/node_modules/@appwrite.io/repo/docs/examples/${version}/client-android/${isAndroidJava ? 'java' : 'kotlin'}/${operation['x-appwrite'].demo}` + : `/node_modules/@appwrite.io/repo/docs/examples/${version}/${platform}/examples/${operation['x-appwrite'].demo}`; if (!(path in examples)) { continue; } diff --git a/src/routes/docs/+error.svelte b/src/routes/docs/+error.svelte index 8ffea6e385..69c3678189 100644 --- a/src/routes/docs/+error.svelte +++ b/src/routes/docs/+error.svelte @@ -1,5 +1,17 @@ - -

{$page?.error?.message}

\ No newline at end of file +
+
+
+
+
+

{$page?.error?.message}

+
+
+
+
+ I am a placeholder for an error site. +
+
+
\ No newline at end of file diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte index 0286a025a5..7250bf5825 100644 --- a/src/routes/docs/+page.svelte +++ b/src/routes/docs/+page.svelte @@ -1,6 +1,4 @@ diff --git a/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte index 216ec39ae7..749d3642b0 100644 --- a/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte +++ b/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte @@ -3,7 +3,7 @@ import { page } from '$app/stores'; import { MainFooter } from '$lib/components'; import { parse } from '$lib/utils/markdown'; - import { Platform, languageMap, versions } from '$lib/utils/references.js'; + import { Platform, languageMap, platformMap, serviceMap, versions } from '$lib/utils/references.js'; import { Fence } from '$markdoc/nodes/_Module.svelte'; export let data; @@ -35,7 +35,7 @@
-

{data.service?.name}

+

{serviceMap[data.service?.name]}

{platformType}
@@ -46,12 +46,12 @@ @@ -98,7 +98,7 @@
  • - Request + Request
    @@ -138,7 +138,7 @@
  • - Response + Response
    @@ -153,10 +153,10 @@

    {response.code}

    - {response.contentType} + {response.model?.name}

    • - {response.model?.name} + Payload

    From 2769d71907f2a7d7ab88a2761600a27cdfc6e238 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 14:11:01 +0200 Subject: [PATCH 02/11] fix: rename refernce to references --- src/routes/docs/Sidebar.svelte | 16 ++++++++-------- .../docs/{reference => references}/+page.svelte | 0 .../[platform]/[service]/+page.server.ts | 0 .../[version]/[platform]/[service]/+page.svelte | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) rename src/routes/docs/{reference => references}/+page.svelte (100%) rename src/routes/docs/{reference => references}/[version]/[platform]/[service]/+page.server.ts (100%) rename src/routes/docs/{reference => references}/[version]/[platform]/[service]/+page.svelte (98%) diff --git a/src/routes/docs/Sidebar.svelte b/src/routes/docs/Sidebar.svelte index 77569e2567..92b81fb355 100644 --- a/src/routes/docs/Sidebar.svelte +++ b/src/routes/docs/Sidebar.svelte @@ -61,35 +61,35 @@ items: [ { label: 'Account', - href: '/docs/reference/cloud/client-web/account' + href: '/docs/references/cloud/client-web/account' }, { label: 'Users', - href: '/docs/reference/cloud/client-web/users' + href: '/docs/references/cloud/client-web/users' }, { label: 'Teams', - href: '/docs/reference/cloud/client-web/teams' + href: '/docs/references/cloud/client-web/teams' }, { label: 'Databases', - href: '/docs/reference/cloud/client-web/databases' + href: '/docs/references/cloud/client-web/databases' }, { label: 'Storage', - href: '/docs/reference/cloud/client-web/storage' + href: '/docs/references/cloud/client-web/storage' }, { label: 'Functions', - href: '/docs/reference/cloud/client-web/functions' + href: '/docs/references/cloud/client-web/functions' }, { label: 'Localization', - href: '/docs/reference/cloud/client-web/locale' + href: '/docs/references/cloud/client-web/locale' }, { label: 'Avatars', - href: '/docs/reference/1.3.x/client-web/avatars' + href: '/docs/references/1.3.x/client-web/avatars' } ] } diff --git a/src/routes/docs/reference/+page.svelte b/src/routes/docs/references/+page.svelte similarity index 100% rename from src/routes/docs/reference/+page.svelte rename to src/routes/docs/references/+page.svelte diff --git a/src/routes/docs/reference/[version]/[platform]/[service]/+page.server.ts b/src/routes/docs/references/[version]/[platform]/[service]/+page.server.ts similarity index 100% rename from src/routes/docs/reference/[version]/[platform]/[service]/+page.server.ts rename to src/routes/docs/references/[version]/[platform]/[service]/+page.server.ts diff --git a/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte similarity index 98% rename from src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte rename to src/routes/docs/references/[version]/[platform]/[service]/+page.svelte index 749d3642b0..32516e2692 100644 --- a/src/routes/docs/reference/[version]/[platform]/[service]/+page.svelte +++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte @@ -15,14 +15,14 @@ function selectPlatform(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) { const { version, service } = $page.params; - goto(`/docs/reference/${version}/${event.currentTarget.value}/${service}`, { + goto(`/docs/references/${version}/${event.currentTarget.value}/${service}`, { noScroll: true }); } function selectVersion(event: Event & { currentTarget: EventTarget & HTMLSelectElement }) { const { platform, service } = $page.params; - goto(`/docs/reference/${event.currentTarget.value}/${platform}/${service}`, { + goto(`/docs/references/${event.currentTarget.value}/${platform}/${service}`, { noScroll: true }); } From e48d3603f5666c05cae7ebb139de1dde246adb0c Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 14:15:45 +0200 Subject: [PATCH 03/11] fix: references --- src/routes/docs/+layout.svelte | 2 +- src/routes/docs/Sidebar.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 51142566c6..4e7dab6150 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -6,7 +6,7 @@ function getDocsVariant(pathname: string): DocsLayoutVariant { const isTutorial = pathname.includes('/tutorials/'); const isProduct = pathname.includes('/products/') || pathname.includes('/article'); - const isReference = pathname.includes('/reference'); + const isReference = pathname.includes('/references'); if (isTutorial || isProduct) { return 'two-side-navs'; diff --git a/src/routes/docs/Sidebar.svelte b/src/routes/docs/Sidebar.svelte index 92b81fb355..c387e88da2 100644 --- a/src/routes/docs/Sidebar.svelte +++ b/src/routes/docs/Sidebar.svelte @@ -56,7 +56,7 @@ }, { label: 'References', - href: '/docs/reference', + href: '/docs/references', icon: 'icon-document', items: [ { From 955694d7148d15f92d85bc52b6823742314b2bb1 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 17:55:45 +0200 Subject: [PATCH 04/11] feat: tooltips and line numbers --- src/lib/components/Tooltip.svelte | 26 ++++++++ src/lib/components/index.ts | 1 + src/lib/utils/code.ts | 43 +++++++++++-- src/lib/utils/copy.ts | 42 +++++++++++++ src/lib/utils/references.ts | 63 ++++++++++--------- src/markdoc/nodes/Fence.css | 13 ++++ src/markdoc/nodes/Fence.svelte | 44 ++++++++++--- .../[platform]/[service]/+page.svelte | 4 +- src/scss/6-elements/_index.scss | 1 + src/scss/6-elements/_table.scss | 1 + src/scss/6-elements/_tooltip.scss | 12 ++++ src/scss/7-components/_article.scss | 8 +-- 12 files changed, 211 insertions(+), 47 deletions(-) create mode 100644 src/lib/components/Tooltip.svelte create mode 100644 src/lib/utils/copy.ts create mode 100644 src/scss/6-elements/_tooltip.scss diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte new file mode 100644 index 0000000000..ada5343940 --- /dev/null +++ b/src/lib/components/Tooltip.svelte @@ -0,0 +1,26 @@ + + + + + + +{#if $open} +
    +
    + +
    +{/if} diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 8f6780ea14..60739ec1c8 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -3,3 +3,4 @@ export { default as MainFooter } from './MainFooter.svelte'; export { default as PreFooter } from './PreFooter.svelte'; export { default as MobileNav } from './MobileNav.svelte'; export { default as Phone } from './Phone.svelte'; +export { default as Tooltip } from './Tooltip.svelte'; diff --git a/src/lib/utils/code.ts b/src/lib/utils/code.ts index 165680cc16..ea6e8c15f3 100644 --- a/src/lib/utils/code.ts +++ b/src/lib/utils/code.ts @@ -1,4 +1,4 @@ -import type { LanguageFn } from 'highlight.js'; +import type { HLJSApi, LanguageFn } from 'highlight.js'; import hljs from 'highlight.js/lib/core'; import dart from 'highlight.js/lib/languages/dart'; import javascript from 'highlight.js/lib/languages/javascript'; @@ -16,6 +16,9 @@ import csharp from 'highlight.js/lib/languages/csharp'; import http from 'highlight.js/lib/languages/http'; import kotlin from 'highlight.js/lib/languages/kotlin'; import java from 'highlight.js/lib/languages/java'; +import css from 'highlight.js/lib/languages/css'; +import graphql from 'highlight.js/lib/languages/graphql'; +import { Platform } from './references'; const languages = { js: javascript, @@ -35,22 +38,54 @@ const languages = { http: http, kotlin: kotlin, java: java, + css: css, + graphql: graphql } as const satisfies Record; +const platformAliases: Record = { + [Platform.ClientWeb]: 'js', + [Platform.ClientFlutter]: 'dart', + [Platform.ClientAndroidJava]: 'java', + [Platform.ClientAndroidKotlin]: 'kotlin', + [Platform.ClientApple]: 'swift', + [Platform.ServerDart]: 'dart', + [Platform.ServerDeno]: 'ts', + [Platform.ServerDotNet]: 'cs', + [Platform.ServerNodeJs]: 'js', + [Platform.ServerPhp]: 'php', + [Platform.ServerPython]: 'py', + [Platform.ServerRuby]: 'rb', + [Platform.ServerSwift]: 'swift' +}; + Object.entries(languages).forEach(([key, value]) => { hljs.registerLanguage(key, value); }); -export type Language = keyof typeof languages; +Object.entries(platformAliases).forEach(([key, value]) => { + hljs.registerAliases(key, { + languageName: value + }); +}); + +export type Language = keyof typeof languages | Platform; type Args = { content: string; language?: Language; + withLineNumbers?: boolean; }; export const getCodeHtml = (args: Args) => { - const { content, language } = args; + const { content, language, withLineNumbers } = args; const res = hljs.highlight(content, { language: language ?? 'sh' }).value; + const lines = res.split(/\n/g).slice(0, -1); + const final = lines.reduce((carry, line) => { + carry += `${line}\n`; + return carry; + }, ''); - return `
    ${res}
    `; + return `
    ${final}
    `; }; diff --git a/src/lib/utils/copy.ts b/src/lib/utils/copy.ts new file mode 100644 index 0000000000..4c3779ffcd --- /dev/null +++ b/src/lib/utils/copy.ts @@ -0,0 +1,42 @@ +async function securedCopy(value: string) { + try { + await navigator.clipboard.writeText(value); + } catch { + return false; + } + + return true; +} + +function unsecuredCopy(value: string) { + const textArea = document.createElement('textarea'); + textArea.value = value; + + // Avoid scrolling to bottom + textArea.style.top = '0'; + textArea.style.left = '0'; + textArea.style.position = 'fixed'; + + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + let success = true; + try { + document.execCommand('copy'); + } catch { + success = false; + } finally { + document.body.removeChild(textArea); + } + + return success; +} + +export async function copy(value: string) { + // securedCopy works only in HTTPS environment. + // unsecuredCopy works in HTTP and only runs if securedCopy fails. + const success = (await securedCopy(value)) || unsecuredCopy(value); + + return success; +} diff --git a/src/lib/utils/references.ts b/src/lib/utils/references.ts index efe77a1a03..5cf4b245e7 100644 --- a/src/lib/utils/references.ts +++ b/src/lib/utils/references.ts @@ -30,36 +30,39 @@ export enum Platform { ServerSwift = 'server-swift' } -export const languageMap: Record = { - [Platform.ClientApple]: 'swift', - [Platform.ClientFlutter]: 'dart', - [Platform.ClientWeb]: 'js', - [Platform.ClientAndroidKotlin]: 'kotlin', - [Platform.ClientAndroidJava]: 'java', - [Platform.ServerDart]: 'dart', - [Platform.ServerDeno]: 'ts', - [Platform.ServerDotNet]: 'cs', - [Platform.ServerNodeJs]: 'js', - [Platform.ServerPhp]: 'php', - [Platform.ServerPython]: 'py', - [Platform.ServerRuby]: 'rb', - [Platform.ServerSwift]: 'swift' -}; - -export const platformMap: Record = { - [Platform.ClientApple]: 'Apple SDK', - [Platform.ClientFlutter]: 'Flutter SDK', - [Platform.ClientWeb]: 'Web SDK', - [Platform.ClientAndroidKotlin]: 'Android SDK (Kotlin)', - [Platform.ClientAndroidJava]: 'Android SDK (Java)', - [Platform.ServerDart]: 'Dart SDK', - [Platform.ServerDeno]: 'Deno SDK', - [Platform.ServerDotNet]: '.NET SDK', - [Platform.ServerNodeJs]: 'Node.js SDK', - [Platform.ServerPhp]: 'PHP SDK', - [Platform.ServerPython]: 'Python SDK', - [Platform.ServerRuby]: 'Ruby SDK', - [Platform.ServerSwift]: 'Swift SDK' +export const platformMap: Record = { + [Platform.ClientApple]: 'Apple', + [Platform.ClientFlutter]: 'Flutter', + [Platform.ClientWeb]: 'Web', + [Platform.ClientAndroidKotlin]: 'Android (Kotlin)', + [Platform.ClientAndroidJava]: 'Android (Java)', + [Platform.ServerDart]: 'Dart', + [Platform.ServerDeno]: 'Deno', + [Platform.ServerDotNet]: '.NET', + [Platform.ServerNodeJs]: 'Node.js', + [Platform.ServerPhp]: 'PHP', + [Platform.ServerPython]: 'Python', + [Platform.ServerRuby]: 'Ruby', + [Platform.ServerSwift]: 'Swift', + sh: 'Shell', + js: 'JavaScript', + ts: 'TypeScript', + dart: 'Dart', + java: 'Java', + kotlin: 'Kotlin', + cs: 'C#', + py: 'Python', + rb: 'Ruby', + php: 'PHP', + swift: 'Swift', + xml: 'XML', + html: 'HTML', + md: 'Markdown', + json: 'JSON', + diff: 'Diff', + http: 'HTTP', + css: 'CSS', + graphql: 'GraphQL' }; export const serviceMap: Record = { diff --git a/src/markdoc/nodes/Fence.css b/src/markdoc/nodes/Fence.css index 110e37b116..ca8457d687 100644 --- a/src/markdoc/nodes/Fence.css +++ b/src/markdoc/nodes/Fence.css @@ -2,6 +2,19 @@ pre { color: #e4e4e7; } +code.line-numbers .line { + counter-increment: line; +} + +code.line-numbers .line:before { + content: counter(line); + display: inline-block; + text-align: right; + padding-right: 8px; + color: #6C6C71; + width: 2rem; +} + .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, diff --git a/src/markdoc/nodes/Fence.svelte b/src/markdoc/nodes/Fence.svelte index 6ae84d339b..bd1949603e 100644 --- a/src/markdoc/nodes/Fence.svelte +++ b/src/markdoc/nodes/Fence.svelte @@ -2,14 +2,33 @@ import './Fence.css'; import { getCodeHtml, type Language } from '$lib/utils/code'; import { getContext, hasContext } from 'svelte'; + import { platformMap } from '$lib/utils/references'; + import { Tooltip } from '$lib/components'; + import { copy } from '$lib/utils/copy'; import type { CodeContext } from '../tags/MultiCode.svelte'; + export let content: string; export let language: Language; export let process: boolean; + export let withLineNumbers = true; const insideMultiCode = hasContext('multi-code'); const selected = insideMultiCode ? getContext('multi-code').selected : null; + enum CopyStatus { + Copy = 'Copy', + Copied = 'Copied!' + } + let copyText = CopyStatus.Copy; + async function handleCopy() { + await copy(content); + + copyText = CopyStatus.Copied; + setTimeout(() => { + copyText = CopyStatus.Copy; + }, 1000); + } + if (insideMultiCode) { getContext('multi-code').snippets.update((n) => { n.add(language); @@ -18,7 +37,9 @@ }); } - $: result = process ? getCodeHtml({ content, language: language ?? 'sh' }) : content; + $: result = process + ? getCodeHtml({ content, language: language ?? 'sh', withLineNumbers }) + : content; {#if insideMultiCode} @@ -30,16 +51,25 @@
    - +
    +
    {platformMap[language]}
    +
    • - + + + + {copyText} + +
    diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte index 32516e2692..f3957d4a90 100644 --- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte +++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte @@ -3,7 +3,7 @@ import { page } from '$app/stores'; import { MainFooter } from '$lib/components'; import { parse } from '$lib/utils/markdown'; - import { Platform, languageMap, platformMap, serviceMap, versions } from '$lib/utils/references.js'; + import { Platform, platformMap, serviceMap, versions } from '$lib/utils/references.js'; import { Fence } from '$markdoc/nodes/_Module.svelte'; export let data; @@ -174,7 +174,7 @@ class="u-position-sticky" style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);" > - +
    diff --git a/src/scss/6-elements/_index.scss b/src/scss/6-elements/_index.scss index c5e81c1de2..9307a462b9 100644 --- a/src/scss/6-elements/_index.scss +++ b/src/scss/6-elements/_index.scss @@ -22,6 +22,7 @@ @forward "media-container"; @forward "gradient-text"; @forward "mini-card"; +@forward "tooltip"; /* form */ @forward "button"; diff --git a/src/scss/6-elements/_table.scss b/src/scss/6-elements/_table.scss index e25e5a386a..fb9fe715e4 100644 --- a/src/scss/6-elements/_table.scss +++ b/src/scss/6-elements/_table.scss @@ -19,6 +19,7 @@ border-collapse: collapse; border-style: hidden; min-inline-size:100%; + font-size: pxToRem(14); &-wrapper { @include light-mode(); diff --git a/src/scss/6-elements/_tooltip.scss b/src/scss/6-elements/_tooltip.scss new file mode 100644 index 0000000000..e81a3e73d5 --- /dev/null +++ b/src/scss/6-elements/_tooltip.scss @@ -0,0 +1,12 @@ +@use '../abstract' as *; + +.#{$p}-tooltip { + --p-tooltip-bg: rgba(47, 48, 49, 1); + --p-tooltip-color: rgba(228, 228, 231, 1); + + font-size: pxToRem(16); + color: var(--p-tooltip-color); + background-color: var(--p-tooltip-bg); + padding: pxToRem(8) pxToRem(12); + border-radius: pxToRem(8); +} \ No newline at end of file diff --git a/src/scss/7-components/_article.scss b/src/scss/7-components/_article.scss index 9ff203783a..f320a84d5c 100644 --- a/src/scss/7-components/_article.scss +++ b/src/scss/7-components/_article.scss @@ -16,16 +16,16 @@ display:flex; flex-direction:column; gap:pxToRem(32); color:hsl(var(--aw-color-secondary)); article .#{$p}, &-spacing-logic .#{$p}{ - &-sub-body-400 { margin-block:pxToRem(16); } - &-sub-body-500 { margin-block-end:pxToRem(4); } + &-sub-body-400 { margin-block:pxToRem(16); } + &-sub-body-500 { margin-block-end:pxToRem(4); } &-main-body-500 { margin-block-start:pxToRem(4); } - &-label { margin-block-end:pxToRem(16); } + &-label { margin-block-end:pxToRem(16); } &-paragraph-md { margin-block-end:pxToRem(32); } &-code-snippet { margin-block-start:pxToRem(16); margin-block-end:pxToRem(32); } &-card { margin-block-end:pxToRem(32); } &-list, &-numeric-list, - &-pink-dots { margin-block-end:pxToRem(24); } + &-pink-dots { margin-block-end:pxToRem(24); } &-blockquote { margin-block:pxToRem(16); } &-table-wrapper { margin-block-end:pxToRem(32); } &-media { margin-block-end:pxToRem(32); } From d3524dd6d4d52f6d45ef3f68f7d1ec77dae21798 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 18:32:48 +0200 Subject: [PATCH 05/11] feat: tooltip and copy to multicode --- src/markdoc/nodes/Fence.svelte | 12 ++++++--- src/markdoc/tags/MultiCode.svelte | 44 +++++++++++++++++++++++++------ 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/markdoc/nodes/Fence.svelte b/src/markdoc/nodes/Fence.svelte index bd1949603e..611df8d0df 100644 --- a/src/markdoc/nodes/Fence.svelte +++ b/src/markdoc/nodes/Fence.svelte @@ -30,11 +30,19 @@ } if (insideMultiCode) { - getContext('multi-code').snippets.update((n) => { + const ctx = getContext('multi-code'); + + ctx.snippets.update((n) => { n.add(language); return n; }); + + ctx.selected.subscribe((n) => { + if (n === language) { + ctx.content.set(content); + } + }); } $: result = process @@ -44,7 +52,6 @@ {#if insideMultiCode} {#if $selected === language} - {@html result} {/if} {:else} @@ -75,7 +82,6 @@
    - {@html result}
    diff --git a/src/markdoc/tags/MultiCode.svelte b/src/markdoc/tags/MultiCode.svelte index 264d842331..bdca73a98b 100644 --- a/src/markdoc/tags/MultiCode.svelte +++ b/src/markdoc/tags/MultiCode.svelte @@ -2,33 +2,53 @@ import type { Writable } from 'svelte/store'; export type CodeContext = { selected: Writable; - snippets: Writable>; + snippets: Writable>; + content: Writable; };
    -
    Default
    +
    @@ -37,16 +57,24 @@
  • - + + + + {copyText} + +
    • From bfa00c77680ab3279dbc9141553fea8b9fadf171 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 18:44:17 +0200 Subject: [PATCH 06/11] fix: remove unused import --- src/lib/utils/code.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/utils/code.ts b/src/lib/utils/code.ts index ea6e8c15f3..e173940dd0 100644 --- a/src/lib/utils/code.ts +++ b/src/lib/utils/code.ts @@ -1,4 +1,4 @@ -import type { HLJSApi, LanguageFn } from 'highlight.js'; +import type { LanguageFn } from 'highlight.js'; import hljs from 'highlight.js/lib/core'; import dart from 'highlight.js/lib/languages/dart'; import javascript from 'highlight.js/lib/languages/javascript'; From e4bdb7da57c21185fbdb52ff5b212cdd360c7f6d Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 18:51:12 +0200 Subject: [PATCH 07/11] fix: footer font size --- src/lib/components/FooterNav.svelte | 17 ++++++++--------- src/scss/7-components/_footer-nav.scss | 2 +- src/scss/7-components/_main-footer.scss | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte index 8e81f21547..5b4423e0a0 100644 --- a/src/lib/components/FooterNav.svelte +++ b/src/lib/components/FooterNav.svelte @@ -52,18 +52,17 @@
  • -
    Legal
    +
    Legal
    -
    +
    On This Page
    +
    + {#if parent} +
    + + + + +
    + {/if} + {#each navigation as navGroup} +
    + {#if isNavLink(navGroup)} + + + {:else} + {#if navGroup.label} +

    {navGroup.label}

    + {/if} + + {/if} +
    + {/each} +
    + {#if expandable} + + {/if} +
    + + + +
    +
    + diff --git a/src/markdoc/nodes/Blockquote.svelte b/src/markdoc/nodes/Blockquote.svelte index a004573c33..65c40f9421 100644 --- a/src/markdoc/nodes/Blockquote.svelte +++ b/src/markdoc/nodes/Blockquote.svelte @@ -1,4 +1,4 @@ - -
    +{#if inTable} -
    +{:else} +
    + +
    +{/if} diff --git a/src/markdoc/nodes/Table.svelte b/src/markdoc/nodes/Table.svelte index 123911d7db..d7056c374f 100644 --- a/src/markdoc/nodes/Table.svelte +++ b/src/markdoc/nodes/Table.svelte @@ -1,3 +1,9 @@ + +
    diff --git a/src/markdoc/nodes/Th.svelte b/src/markdoc/nodes/Th.svelte index 68e8e64464..0c8a71d94f 100644 --- a/src/markdoc/nodes/Th.svelte +++ b/src/markdoc/nodes/Th.svelte @@ -6,11 +6,11 @@
    diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte deleted file mode 100644 index 4e7dab6150..0000000000 --- a/src/routes/docs/+layout.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte index 7250bf5825..eedabb6e4f 100644 --- a/src/routes/docs/+page.svelte +++ b/src/routes/docs/+page.svelte @@ -1,493 +1,600 @@ -
    - - - - - - - - - - - - -
    + + +
    + + + + + + + + + + + + +
    -
    - -
    +
    + +
    -
    -
    -

    Run on any provider or through Appwrite Cloud

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus. -

    -
    -
    -

    Get started quickly with your preferred technology

    -

    - Start building with your preferred web, mobile, and native frameworks by following a quick - start guide. -

    -
      -
    • -
      - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    • -
      - - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    • -
      - - - -
      -
      • -
    - -
    -
    -

    Show me some code

    -

    - Talk is cheap, where's the code? If you'd rather see some examples, we've got you covered. - Clone a template to get started. -

    -
    -
  • - -
    - + + -
    -
    -

    React sign up template

    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

    -
    -
    -     + +
  • - -
    - + + -
    -
    -

    React sign up template

    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

    -
    -
    -     -
    • -
  • - -
    - -
    -
    -

    React sign up template

    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

    -
    -
    -     -
    • - - -
    -
    -

    Show me some code

    -

    - All the core functionalities you need with a scalable and flexible API. Explore Appwrite's - product offerings. -

    -
    -
      -
    • -
      - -

      Auth

      -

      - Sign in users with multiple OAuth providers. -

      -
      -
      • -
    • -
      - -

      Databases

      -

      - Store your application and users' data. -

      -
      -
      • -
    • -
      - -

      Functions

      -

      - Extend and customize your server’s functionality. -

      -
      -
      • -
    • -
      - -

      Storage

      -

      - Store images, videos, documents, and files. -

      +
    • -
      - -

      Realtime

      -

      - Listen to any events on the server-side in realtime. -

      -
      -
      • -
    • -
      - -

      Messaging

      -

      - Sign in users with multiple OAuth providers. -

      -
      -
      • -
    -
    -
    -
    -

    Explore ways to integrate

    -

    - Choose how you integrate with Appwrite. Explore references for the Appwrite SDK, REST API, - GraphQL API, or Realtime API. -

    -
    -
      -
    • -
      -

      SDKs

      -

      - Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. -

      -
      -
      • -
    • -
      -

      REST API

      -

      - Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. -

      -
      -
      • -
    • -
      -

      GraphQL

      -

      - Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. -

      +
      + + +
    • -
      -

      Realtime

      -

      - Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. -

      -
      -
      • -
    -
    -
    -
    -

    Migrate to Appwrite

    -

    - Lorem ipsum dolor sit amet consectetur. Orci netus est urna dictum eleifend diam. -

    -
    -
      -
    • -
      -

      Self-hosted

      -

      - Lorem ipsum dolor sit amet consectetur. -

      +
      + + +
    • -
      -

      Firebase

      -

      - Lorem ipsum dolor sit amet consectetur. -

      +
      + + +
    • -
      -

      Superbase

      -

      - Lorem ipsum dolor sit amet consectetur. -

      +
      + + +
    • -
      -

      NHost

      -

      - Lorem ipsum dolor sit amet consectetur. -

      +
      + + +
    -
    -
    + + +
    +

    Show me some code

    +

    + Talk is cheap, where's the code? If you'd rather see some examples, we've got you covered. + Clone a template to get started. +

    +
    + +
    +
    +
    +

    Show me some code

    +

    + All the core functionalities you need with a scalable and flexible API. Explore Appwrite's + product offerings. +

    +
    +
      +
    • +
      + +

      Auth

      +

      + Sign in users with multiple OAuth providers. +

      +
      +
      • +
    • +
      + +

      Databases

      +

      + Store your application and users' data. +

      +
      +
      • +
    • +
      + +

      Functions

      +

      + Extend and customize your server’s functionality. +

      +
      +
      • +
    • +
      + +

      Storage

      +

      + Store images, videos, documents, and files. +

      +
      +
      • +
    • +
      + +

      Realtime

      +

      + Listen to any events on the server-side in realtime. +

      +
      +
      • +
    • +
      + +

      Messaging

      +

      + Sign in users with multiple OAuth providers. +

      +
      +
      • +
    +
    +
    +
    +

    Explore ways to integrate

    +

    + Choose how you integrate with Appwrite. Explore references for the Appwrite SDK, REST API, + GraphQL API, or Realtime API. +

    +
    +
      +
    • +
      +

      SDKs

      +

      + Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. +

      +
      +
      • +
    • +
      +

      REST API

      +

      + Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. +

      +
      +
      • +
    • +
      +

      GraphQL

      +

      + Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. +

      +
      +
      • +
    • +
      +

      Realtime

      +

      + Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse. +

      +
      +
      • +
    +
    +
    +
    +

    Migrate to Appwrite

    +

    + Lorem ipsum dolor sit amet consectetur. Orci netus est urna dictum eleifend diam. +

    +
    +
      +
    • +
      +

      Self-hosted

      +

      + Lorem ipsum dolor sit amet consectetur. +

      +
      +
      • +
    • +
      +

      Firebase

      +

      + Lorem ipsum dolor sit amet consectetur. +

      +
      +
      • +
    • +
      +

      Superbase

      +

      + Lorem ipsum dolor sit amet consectetur. +

      +
      +
      • +
    • +
      +

      NHost

      +

      + Lorem ipsum dolor sit amet consectetur. +

      +
      +
      • +
    +
    +
    - -
    + + +     diff --git a/src/routes/docs/products/auth/+layout.svelte b/src/routes/docs/products/auth/+layout.svelte new file mode 100644 index 0000000000..f69e6b1045 --- /dev/null +++ b/src/routes/docs/products/auth/+layout.svelte @@ -0,0 +1,56 @@ + + + + + + diff --git a/src/routes/docs/products/databases/+layout.svelte b/src/routes/docs/products/databases/+layout.svelte new file mode 100644 index 0000000000..3f0a21488f --- /dev/null +++ b/src/routes/docs/products/databases/+layout.svelte @@ -0,0 +1,28 @@ + + + + + + diff --git a/src/routes/docs/quick-start/+layout.svelte b/src/routes/docs/quick-start/+layout.svelte new file mode 100644 index 0000000000..fa95b6ef5d --- /dev/null +++ b/src/routes/docs/quick-start/+layout.svelte @@ -0,0 +1,111 @@ + + + + + + diff --git a/src/routes/docs/references/+layout.svelte b/src/routes/docs/references/+layout.svelte new file mode 100644 index 0000000000..fafab6e424 --- /dev/null +++ b/src/routes/docs/references/+layout.svelte @@ -0,0 +1,66 @@ + + + + + + diff --git a/src/routes/docs/test/+layout.svelte b/src/routes/docs/test/+layout.svelte new file mode 100644 index 0000000000..fa95b6ef5d --- /dev/null +++ b/src/routes/docs/test/+layout.svelte @@ -0,0 +1,111 @@ + + + + + + diff --git a/src/routes/docs/test/article/+page.markdoc b/src/routes/docs/test/article/+page.markdoc index 8f011626f1..4ddcbeb5b5 100644 --- a/src/routes/docs/test/article/+page.markdoc +++ b/src/routes/docs/test/article/+page.markdoc @@ -64,7 +64,7 @@ This is a nice table: | head1 {% width=20 %} | head two | three | | -------------------- | -------------------- | -------------------- | -| ok | good swedish fish | nice | +| ![](/favicon.png) | good swedish fish | nice | | ok | good and plenty | nice | | ok | good `oreos` | hmm | | ok | good `zoute` drop | yumm | diff --git a/src/routes/docs/tutorials/+layout.svelte b/src/routes/docs/tutorials/+layout.svelte index aa881fa886..cfc276f4fb 100644 --- a/src/routes/docs/tutorials/+layout.svelte +++ b/src/routes/docs/tutorials/+layout.svelte @@ -1,8 +1,115 @@ - + + + + diff --git a/src/routes/docs/tutorials/test/+page.ts b/src/routes/docs/tutorials/test/+page.ts index 7b83c81b48..dadbafa938 100644 --- a/src/routes/docs/tutorials/test/+page.ts +++ b/src/routes/docs/tutorials/test/+page.ts @@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit'; import type { PageLoad } from './$types'; export const load: PageLoad = async () => { - throw redirect(303, '/docs/tutorials'); + throw redirect(303, '/docs/tutorials/test/introduction'); }; From ef1191c4b884a49d21b334da6adb78e84622ffe3 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 18 Sep 2023 22:57:52 +0200 Subject: [PATCH 11/11] chore: remove unused comment --- svelte.config.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/svelte.config.js b/svelte.config.js index 8b58d2533c..32a2cfc719 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -31,9 +31,6 @@ const config = { ]), extensions: ['.markdoc', '.svelte', '.md'], kit: { - // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. - // If your environment is not supported or you settled on a specific environment, switch out the adapter. - // See https://kit.svelte.dev/docs/adapters for more information about adapters. adapter: adapter(), alias: { $routes: './src/routes',