mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-11 04:22:19 +00:00
feat: add support for new accordions
This commit is contained in:
Christy Jacob
committed by
Torsten Dittmann
Torsten Dittmann
parent
f3ee4bb277
commit
f6e23dbb9f
22
src/lib/components/Accordion/Content.svelte
Normal file
22
src/lib/components/Accordion/Content.svelte
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="collapsible-content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.collapsible-content {
|
||||
margin-block-start: 0;
|
||||
padding-block-end: 1rem;
|
||||
|
||||
/* article :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
gap: 1rem;
|
||||
|
||||
li:not(:first-child) {
|
||||
border-block-start: solid 0.0625rem hsl(var(--aw-color-offset));
|
||||
}
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
7
src/lib/components/Accordion/Content/Code.svelte
Normal file
7
src/lib/components/Accordion/Content/Code.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<Fence
|
||||
badge={'Web'}
|
||||
language={'javascript'}
|
||||
content={"import { Client } from 'appwrite';"}
|
||||
process
|
||||
withLineNumbers={true}
|
||||
/>
|
||||
1
src/lib/components/Accordion/Content/Image.svelte
Normal file
1
src/lib/components/Accordion/Content/Image.svelte
Normal file
@@ -0,0 +1 @@
|
||||
<Image src="/images/docs/quick-starts/dark/add-platform.png" alt="Hello world Image" title="Hello World" />
|
||||
31
src/lib/components/Accordion/Content/Request.svelte
Normal file
31
src/lib/components/Accordion/Content/Request.svelte
Normal file
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { parse } from '$lib/utils/markdown';
|
||||
import type { SDKMethod } from '$lib/utils/specs';
|
||||
|
||||
export let method: SDKMethod;
|
||||
</script>
|
||||
|
||||
<div class="aw-card is-transparent u-padding-16">
|
||||
<ul class="u-flex-vertical">
|
||||
{#each method.parameters as parameter, i}
|
||||
{@const first = i === 0}
|
||||
<li class:u-padding-block-start-16={!first}>
|
||||
<article>
|
||||
<header class="u-flex u-cross-baseline u-gap-8">
|
||||
<span class="aw-code aw-u-color-text-primary">
|
||||
{parameter.name}
|
||||
</span>
|
||||
<span class="aw-caption-400">{parameter.type}</span>
|
||||
{#if parameter.required}
|
||||
<div class="aw-tag">required</div>
|
||||
{/if}
|
||||
</header>
|
||||
<p class="aw-sub-body-400 u-margin-block-start-16">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html parse(parameter.description)}
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
40
src/lib/components/Accordion/Content/Response.svelte
Normal file
40
src/lib/components/Accordion/Content/Response.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="aw-card is-transparent u-padding-16">
|
||||
<ul>
|
||||
{#each method.responses as response}
|
||||
{#if response.models}
|
||||
<li>
|
||||
<article>
|
||||
<header
|
||||
class="u-flex u-cross-baseline u-gap-8"
|
||||
>
|
||||
<span
|
||||
class="aw-eyebrow aw-u-color-text-primary"
|
||||
>
|
||||
{response.code}
|
||||
</span>
|
||||
<span class="aw-caption-400"
|
||||
>application/json</span
|
||||
>
|
||||
</header>
|
||||
{#if response.models.length > 0}
|
||||
<ul
|
||||
class="aw-sub-body-400 u-margin-block-start-16"
|
||||
>
|
||||
{#each response.models as model}
|
||||
<li>
|
||||
<a
|
||||
class="aw-link"
|
||||
href={`/docs/references/${$page.params.version}/models/${model.id}`}
|
||||
>
|
||||
{model.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</article>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
24
src/lib/components/Accordion/Content/Table.svelte
Normal file
24
src/lib/components/Accordion/Content/Table.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="collapsible-content">
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>
|
||||
<span class="aw-eyebrow">NAME</span>
|
||||
</Th>
|
||||
<Th>
|
||||
<span class="aw-eyebrow">TYPE</span>
|
||||
</Th>
|
||||
<Th>
|
||||
<span class="aw-eyebrow">DESCRIPTION</span>
|
||||
</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td>Name</Td>
|
||||
<Td>Type</Td>
|
||||
<Td>Description</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</div>
|
||||
11
src/lib/components/Accordion/Content/index.ts
Normal file
11
src/lib/components/Accordion/Content/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import Code from "./Code.svelte"
|
||||
import Request from "./Code.svelte"
|
||||
import Response from "./Code.svelte"
|
||||
import Table from "./Code.svelte"
|
||||
|
||||
export {
|
||||
Code as ContentCode,
|
||||
Request as ContentRequest,
|
||||
Response as ContentResponse,
|
||||
Table as ContentTable,
|
||||
}
|
||||
16
src/lib/components/Accordion/Item.svelte
Normal file
16
src/lib/components/Accordion/Item.svelte
Normal file
@@ -0,0 +1,16 @@
|
||||
<!-- AccordionItem.svelte -->
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<li class="collapsible-item">
|
||||
<details class="collapsible-wrapper" open>
|
||||
<slot name="trigger"/>
|
||||
<slot name="content"/>
|
||||
</details>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
.collapsible-item {
|
||||
border-block-end: 0.0625rem solid hsl(var(--aw-color-offset));
|
||||
}
|
||||
</style>
|
||||
9
src/lib/components/Accordion/Root.svelte
Normal file
9
src/lib/components/Accordion/Root.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<!-- AccordionRoot.svelte -->
|
||||
<script>
|
||||
import { getContext, setContext } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
</script>
|
||||
|
||||
<ul class="collapsible u-width-full-line" style="--p-toggle-border-color: var(--aw-color-border);">
|
||||
<slot />
|
||||
</ul>
|
||||
15
src/lib/components/Accordion/Trigger.svelte
Normal file
15
src/lib/components/Accordion/Trigger.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<summary class="collapsible-button">
|
||||
<span class="text"><slot /></span>
|
||||
<div class="icon aw-u-color-text-primary">
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<style>
|
||||
.collapsible-button {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
</style>
|
||||
16
src/lib/components/Accordion/index.ts
Normal file
16
src/lib/components/Accordion/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import Root from "./Root.svelte";
|
||||
import Content from "./Content.svelte"
|
||||
import Item from "./Item.svelte";
|
||||
import Trigger from "./Trigger.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Item,
|
||||
Trigger,
|
||||
|
||||
Root as Accordion,
|
||||
Content as AccordionContent,
|
||||
Item as AccordionItem,
|
||||
Trigger as AccordionTrigger,
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { OpenAPIV3 } from 'openapi-types';
|
||||
import { Platform, type Service } from './references';
|
||||
|
||||
type SDKMethod = {
|
||||
export type SDKMethod = {
|
||||
'rate-limit': number;
|
||||
'rate-time': number;
|
||||
'rate-key': string;
|
||||
|
||||
@@ -22,6 +22,12 @@
|
||||
import { anyify } from '$lib/utils/anyify.js';
|
||||
import { scrollToTop } from '$lib/actions/scrollToTop.js';
|
||||
import { clickOutside } from '$lib/actions/clickOutside.js';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger
|
||||
} from '$lib/components/Accordion';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -91,9 +97,11 @@
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
|
||||
{#if $page.params.version !== 'cloud'}
|
||||
<link rel="canonical" href={`https://appwrite.io/docs/references/cloud/${$page.params.platform}/${$page.params.service}`} />
|
||||
<link
|
||||
rel="canonical"
|
||||
href={`https://appwrite.io/docs/references/cloud/${$page.params.platform}/${$page.params.service}`}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
</svelte:head>
|
||||
|
||||
<main class="u-contents" id="main">
|
||||
@@ -190,116 +198,98 @@
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html parse(method.description)}
|
||||
</p>
|
||||
<ul
|
||||
class="collapsible u-width-full-line"
|
||||
style="--p-toggle-border-color: var(--aw-color-border);"
|
||||
>
|
||||
<Accordion>
|
||||
{#if method.parameters.length > 0}
|
||||
<li class="collapsible-item">
|
||||
<details class="collapsible-wrapper" open>
|
||||
<summary class="collapsible-button">
|
||||
<span class="text">Request</span>
|
||||
<div class="icon aw-u-color-text-primary">
|
||||
<span
|
||||
class="icon-cheveron-down"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="collapsible-content">
|
||||
<div class="aw-card is-transparent u-padding-16">
|
||||
<ul class="u-flex-vertical">
|
||||
{#each method.parameters as parameter, i}
|
||||
{@const first = i === 0}
|
||||
<li class:u-padding-block-start-16={!first}>
|
||||
<article>
|
||||
<header
|
||||
class="u-flex u-cross-baseline u-gap-8"
|
||||
>
|
||||
<span
|
||||
class="aw-code aw-u-color-text-primary"
|
||||
>
|
||||
{parameter.name}
|
||||
</span>
|
||||
<span class="aw-caption-400"
|
||||
>{parameter.type}</span
|
||||
>
|
||||
{#if parameter.required}
|
||||
<div class="aw-tag">
|
||||
required
|
||||
</div>
|
||||
{/if}
|
||||
</header>
|
||||
<p
|
||||
class="aw-sub-body-400 u-margin-block-start-16"
|
||||
>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html parse(
|
||||
parameter.description
|
||||
)}
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
{/if}
|
||||
<li class="collapsible-item">
|
||||
<details class="collapsible-wrapper">
|
||||
<summary class="collapsible-button">
|
||||
<span class="text">Response</span>
|
||||
<div class="icon aw-u-color-text-primary">
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</summary>
|
||||
<div class="collapsible-content">
|
||||
<AccordionItem>
|
||||
<AccordionTrigger slot="trigger">
|
||||
<p class="text">Request</p>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent slot="content">
|
||||
<div class="aw-card is-transparent u-padding-16">
|
||||
<ul>
|
||||
{#each method.responses as response}
|
||||
{#if response.models}
|
||||
<li>
|
||||
<article>
|
||||
<header
|
||||
class="u-flex u-cross-baseline u-gap-8"
|
||||
<ul class="u-flex-vertical">
|
||||
{#each method.parameters as parameter, i}
|
||||
{@const first = i === 0}
|
||||
<li class:u-padding-block-start-16={!first}>
|
||||
<article>
|
||||
<header
|
||||
class="u-flex u-cross-baseline u-gap-8"
|
||||
>
|
||||
<span
|
||||
class="aw-code aw-u-color-text-primary"
|
||||
>
|
||||
<span
|
||||
class="aw-eyebrow aw-u-color-text-primary"
|
||||
>
|
||||
{response.code}
|
||||
</span>
|
||||
<span class="aw-caption-400"
|
||||
>application/json</span
|
||||
>
|
||||
</header>
|
||||
{#if response.models.length > 0}
|
||||
<ul
|
||||
class="aw-sub-body-400 u-margin-block-start-16"
|
||||
>
|
||||
{#each response.models as model}
|
||||
<li>
|
||||
<a
|
||||
class="aw-link"
|
||||
href={`/docs/references/${$page.params.version}/models/${model.id}`}
|
||||
>
|
||||
{model.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{parameter.name}
|
||||
</span>
|
||||
<span class="aw-caption-400"
|
||||
>{parameter.type}</span
|
||||
>
|
||||
{#if parameter.required}
|
||||
<div class="aw-tag">
|
||||
required
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
</li>
|
||||
{/if}
|
||||
</header>
|
||||
<p
|
||||
class="aw-sub-body-400 u-margin-block-start-16"
|
||||
>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
{@html parse(parameter.description)}
|
||||
</p>
|
||||
</article>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
<AccordionItem>
|
||||
<AccordionTrigger slot="trigger">
|
||||
<p class="text">Response</p>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent slot="content">
|
||||
<div class="aw-card is-transparent u-padding-16">
|
||||
<ul>
|
||||
{#each method.responses as response}
|
||||
{#if response.models}
|
||||
<li>
|
||||
<article>
|
||||
<header
|
||||
class="u-flex u-cross-baseline u-gap-8"
|
||||
>
|
||||
<span
|
||||
class="aw-eyebrow aw-u-color-text-primary"
|
||||
>
|
||||
{response.code}
|
||||
</span>
|
||||
<span class="aw-caption-400"
|
||||
>application/json</span
|
||||
>
|
||||
</header>
|
||||
{#if response.models.length > 0}
|
||||
<ul
|
||||
class="aw-sub-body-400 u-margin-block-start-16"
|
||||
>
|
||||
{#each response.models as model}
|
||||
<li>
|
||||
<a
|
||||
class="aw-link"
|
||||
href={`/docs/references/${$page.params.version}/models/${model.id}`}
|
||||
>
|
||||
{model.name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</article>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div class="aw-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32">
|
||||
<div class="u-contents theme-dark">
|
||||
@@ -378,29 +368,4 @@
|
||||
.aw-inline-code {
|
||||
translate: 0 0.125rem;
|
||||
}
|
||||
|
||||
.collapsible-item {
|
||||
border-block-end: 0.0625rem solid hsl(var(--aw-color-offset));
|
||||
}
|
||||
|
||||
.collapsible-button {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
margin-block-start: 0;
|
||||
padding-block-end: 1rem;
|
||||
|
||||
article :last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
gap: 1rem;
|
||||
|
||||
li:not(:first-child) {
|
||||
border-block-start: solid 0.0625rem hsl(var(--aw-color-offset));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user