mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-10 12:57:49 +00:00
feat: new structure
This commit is contained in:
Torsten Dittmann
@@ -21,7 +21,7 @@
|
||||
$: variantClass = variantClasses[variant];
|
||||
</script>
|
||||
|
||||
<div id="top" class="u-position-relative">
|
||||
<div class="u-position-relative">
|
||||
<div
|
||||
class={variantClass}
|
||||
style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
|
||||
|
||||
140
src/lib/layouts/DocsArticle.svelte
Normal file
140
src/lib/layouts/DocsArticle.svelte
Normal file
@@ -0,0 +1,140 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let toc: Array<{
|
||||
title: string;
|
||||
href: string;
|
||||
step?: number;
|
||||
children?: Array<{
|
||||
title: string;
|
||||
href: string;
|
||||
}>;
|
||||
}>;
|
||||
</script>
|
||||
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text aw-is-only-mobile
|
||||
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<slot name="metadata" />
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text is-icon aw-u-cross-center aw-u-size-40
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span
|
||||
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h1 class="aw-title">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<slot />
|
||||
<section class="aw-content-footer">
|
||||
<header class="aw-content-footer-header">
|
||||
<div class="aw-content-footer-header-start">
|
||||
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
|
||||
<div class="u-flex u-gap-8">
|
||||
<input
|
||||
class="aw-radio-button is-like"
|
||||
type="radio"
|
||||
aria-label="Helpful"
|
||||
name="happy"
|
||||
/>
|
||||
<input
|
||||
class="aw-radio-button is-dislike"
|
||||
type="radio"
|
||||
aria-label="UnHelpful"
|
||||
name="happy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-content-footer-header-end">
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>Last updated on July 16, 2023</li>
|
||||
<li>
|
||||
<button class="">
|
||||
<!-- TODO: wait for implement icons in website -->
|
||||
<span class="icon-edit" aria-hidden="true" />
|
||||
<span>Update on GitHub</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-card is-transparent" style="--card-padding:1rem">
|
||||
<label for="message">
|
||||
<span class="aw-u-color-text-primary">What did you like?</span>
|
||||
<span class="">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="aw-input-text u-margin-block-start-8"
|
||||
id="message"
|
||||
placeholder="Write your message"
|
||||
/>
|
||||
<div class="u-flex u-main-end u-margin-block-start-16">
|
||||
<button class="aw-button is-text">
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="">Submit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-references-menu-content">
|
||||
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
|
||||
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
{#each toc as parent}
|
||||
<li class="aw-references-menu-item">
|
||||
<a href={parent.href} class="aw-references-menu-link">
|
||||
{#if parent?.step}
|
||||
<span class="aw-numeric-badge">{parent.step}</span>
|
||||
{/if}
|
||||
<span class="aw-caption-400">{parent.title}</span>
|
||||
</a>
|
||||
{#if parent.children}
|
||||
<ol
|
||||
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
|
||||
>
|
||||
{#each parent.children as child}
|
||||
<li class="aw-references-menu-item">
|
||||
<a href={child.href} class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">{child.title}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
|
||||
<span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
160
src/lib/layouts/DocsTutorial.svelte
Normal file
160
src/lib/layouts/DocsTutorial.svelte
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
type Link = {
|
||||
title: string;
|
||||
href: string;
|
||||
step: number;
|
||||
};
|
||||
|
||||
export let title: string;
|
||||
export let toc: Array<
|
||||
Link & {
|
||||
children?: Array<Omit<Link, 'step'>>;
|
||||
}
|
||||
>;
|
||||
export let nextStep: Link | undefined = undefined;
|
||||
export let prevStep: Link | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text aw-is-only-mobile
|
||||
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<slot name="metadata" />
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span
|
||||
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h1 class="aw-title">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<slot />
|
||||
<div class="u-flex u-main-space-between">
|
||||
{#if prevStep}
|
||||
<a href={prevStep.href} class="aw-button is-text">
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">
|
||||
Step {prevStep.step}<span class="aw-is-not-mobile">: {prevStep.title}</span>
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if nextStep}
|
||||
<a href={nextStep.href} class="aw-button is-secondary">
|
||||
<span class="aw-sub-body-500">
|
||||
Step {nextStep.step}<span class="aw-is-not-mobile">: {nextStep.title}</span>
|
||||
</span>
|
||||
<span class="icon-cheveron-right" aria-hidden="true" />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<section class="aw-content-footer">
|
||||
<header class="aw-content-footer-header u-cross-center">
|
||||
<div class="aw-content-footer-header-start u-cross-center">
|
||||
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
|
||||
<div class="u-flex u-gap-8">
|
||||
<input
|
||||
class="aw-radio-button is-like"
|
||||
type="radio"
|
||||
aria-label="Helpful"
|
||||
name="happy"
|
||||
/>
|
||||
<input
|
||||
class="aw-radio-button is-dislike"
|
||||
type="radio"
|
||||
aria-label="UnHelpful"
|
||||
name="happy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-content-footer-header-end">
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>Last updated: July 16, 2023</li>
|
||||
<li>
|
||||
<button class="u-flex u-gap-4 u-cross-baseline">
|
||||
<span class="icon-pencil-alt u-contents" aria-hidden="true" />
|
||||
<span>Update on GitHub</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-card is-transparent" style="--card-padding:1rem">
|
||||
<label for="message">
|
||||
<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
|
||||
<span class="aw-caption-400">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="aw-input-text u-margin-block-start-8"
|
||||
id="message"
|
||||
placeholder="Write your message"
|
||||
/>
|
||||
<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
|
||||
<button class="aw-button is-text">
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="">Submit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-references-menu-content">
|
||||
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
|
||||
<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
{#each toc as parent}
|
||||
<li class="aw-references-menu-item">
|
||||
<a href={parent.href} class="aw-references-menu-link">
|
||||
<span class="aw-numeric-badge">{parent.step}</span>
|
||||
<span class="aw-caption-400">{parent.title}</span>
|
||||
</a>
|
||||
{#if parent.children}
|
||||
<ol
|
||||
class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
|
||||
>
|
||||
{#each parent.children as child}
|
||||
<li class="aw-references-menu-item">
|
||||
<a href={child.href} class="aw-references-menu-link">
|
||||
<span class="aw-caption-400">{child.title}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
|
||||
<span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
@@ -1,2 +1,4 @@
|
||||
export { default as Main } from './Main.svelte';
|
||||
export { default as Docs } from './Docs.svelte';
|
||||
export { default as DocsArticle } from './DocsArticle.svelte';
|
||||
export { default as DocsTutorial } from './DocsTutorial.svelte';
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Record<
|
||||
string,
|
||||
{
|
||||
text: string;
|
||||
title: string;
|
||||
step?: number;
|
||||
}
|
||||
>
|
||||
@@ -13,7 +13,7 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Docs } from '$lib/layouts';
|
||||
import { Docs, DocsArticle } from '$lib/layouts';
|
||||
import { getContext, setContext } from 'svelte';
|
||||
import Sidebar from '$routes/docs/Sidebar.svelte';
|
||||
|
||||
@@ -25,6 +25,11 @@
|
||||
setContext<LayoutContext>('headings', writable({}));
|
||||
|
||||
const headings = getContext<LayoutContext>('headings');
|
||||
|
||||
$: toc = Object.entries($headings).map(([id, heading]) => ({
|
||||
...heading,
|
||||
href: `#${id}`,
|
||||
}));
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -34,177 +39,15 @@
|
||||
|
||||
<Docs variant="two-side-navs">
|
||||
<Sidebar />
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text aw-is-only-mobile
|
||||
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
{#if difficulty}
|
||||
<li>{difficulty}</li>
|
||||
{/if}
|
||||
{#if readtime}
|
||||
<li>{readtime} min</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text is-icon aw-u-cross-center aw-u-size-40
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span
|
||||
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h1 class="aw-title">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<slot />
|
||||
<section class="aw-content-footer">
|
||||
<header class="aw-content-footer-header">
|
||||
<div class="aw-content-footer-header-start">
|
||||
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
|
||||
<div class="u-flex u-gap-8">
|
||||
<input
|
||||
class="aw-radio-button is-like"
|
||||
type="radio"
|
||||
aria-label="Helpful"
|
||||
name="happy"
|
||||
/>
|
||||
<input
|
||||
class="aw-radio-button is-dislike"
|
||||
type="radio"
|
||||
aria-label="UnHelpful"
|
||||
name="happy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-content-footer-header-end">
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>Last updated on July 16, 2023</li>
|
||||
<li>
|
||||
<button class="">
|
||||
<!-- TODO: wait for implement icons in website -->
|
||||
<span class="icon-edit" aria-hidden="true" />
|
||||
<span>Update on GitHub</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-card is-transparent" style="--card-padding:1rem">
|
||||
<label for="message">
|
||||
<span class="aw-u-color-text-primary">What did you like?</span>
|
||||
<span class="">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="aw-input-text u-margin-block-start-8"
|
||||
id="message"
|
||||
placeholder="Write your message"
|
||||
/>
|
||||
<div class="u-flex u-main-end u-margin-block-start-16">
|
||||
<button class="aw-button is-text">
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="">Submit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-references-menu-content">
|
||||
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
|
||||
<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
{#each Object.entries($headings) as [id, heading]}
|
||||
<li class="aw-references-menu-item">
|
||||
<a href={`#${id}`} class="aw-references-menu-link">
|
||||
{#if heading.step !== undefined}
|
||||
<span class="aw-numeric-badge">{heading.step}</span>
|
||||
{/if}
|
||||
<span class="aw-caption-400">{heading.text}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top">
|
||||
<span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
<footer class="aw-main-footer u-margin-block-start-48 u-small">
|
||||
<div class="aw-main-footer-grid-1">
|
||||
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Discord">
|
||||
<span class="icon-discord" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite GitHub">
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
|
||||
<span class="icon-linkedin" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite YouTube">
|
||||
<span class="icon-youtube" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-2">
|
||||
<div class="aw-select is-colored">
|
||||
<button class="physical-select">
|
||||
<span class="icon-moon" aria-hidden="true" />
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
|
||||
<li>
|
||||
<a href=".">Supports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".">Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">
|
||||
Copyright © 2023 Appwrite
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<DocsArticle {title} {toc}>
|
||||
<svelte:fragment slot="metadata">
|
||||
{#if difficulty}
|
||||
<li>{difficulty}</li>
|
||||
{/if}
|
||||
{#if readtime}
|
||||
<li>{readtime} min</li>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<slot />
|
||||
</DocsArticle>
|
||||
</Docs>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Record<
|
||||
string,
|
||||
{
|
||||
text: string;
|
||||
title: string;
|
||||
step?: number;
|
||||
}
|
||||
>
|
||||
@@ -13,7 +13,7 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Docs } from '$lib/layouts';
|
||||
import { Docs, DocsTutorial } from '$lib/layouts';
|
||||
import { getContext, setContext } from 'svelte';
|
||||
import Sidebar from '$routes/docs/Sidebar.svelte';
|
||||
|
||||
@@ -34,208 +34,15 @@
|
||||
|
||||
<Docs variant="two-side-navs">
|
||||
<Sidebar />
|
||||
<main class="u-contents">
|
||||
<article class="aw-article u-contents">
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text aw-is-only-mobile
|
||||
aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
</button>
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
{#if difficulty}
|
||||
<li>{difficulty}</li>
|
||||
{/if}
|
||||
{#if readtime}
|
||||
<li>{readtime} min</li>
|
||||
{/if}
|
||||
</ul>
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<button
|
||||
class="
|
||||
aw-button is-text is-icon aw-u-cross-center aw-u-size-40
|
||||
u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
|
||||
aria-label="previous page"
|
||||
>
|
||||
<span
|
||||
class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<h1 class="aw-title">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content">
|
||||
<slot />
|
||||
<div class="u-flex u-main-space-between">
|
||||
<button class="aw-button is-text">
|
||||
<span class="icon-cheveron-left" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Step 1: Setting up the environment</span>
|
||||
</button>
|
||||
<button class="aw-button is-secondary">
|
||||
<span class="aw-sub-body-500"> Step 3: Creating a login page</span>
|
||||
<span class="icon-cheveron-right" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<section class="aw-content-footer">
|
||||
<header class="aw-content-footer-header">
|
||||
<div class="aw-content-footer-header-start">
|
||||
<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
|
||||
<div class="u-flex u-gap-8">
|
||||
<input
|
||||
class="aw-radio-button is-like"
|
||||
type="radio"
|
||||
aria-label="Helpful"
|
||||
name="happy"
|
||||
/>
|
||||
<input
|
||||
class="aw-radio-button is-dislike"
|
||||
type="radio"
|
||||
aria-label="UnHelpful"
|
||||
name="happy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-content-footer-header-end">
|
||||
<ul class="aw-metadata aw-caption-400">
|
||||
<li>Last updated on July 16, 2023</li>
|
||||
<li>
|
||||
<button class="">
|
||||
<!-- TODO: wait for implement icons in website -->
|
||||
<span class="icon-edit" aria-hidden="true" />
|
||||
<span>Update on GitHub</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="aw-card is-transparent" style="--card-padding:1rem">
|
||||
<label for="message">
|
||||
<span class="aw-u-color-text-primary">What did you like?</span>
|
||||
<span class="">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
class="aw-input-text u-margin-block-start-8"
|
||||
id="message"
|
||||
placeholder="Write your message"
|
||||
/>
|
||||
<div class="u-flex u-main-end u-margin-block-start-16">
|
||||
<button class="aw-button is-text">
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
<button class="aw-button">
|
||||
<span class="">Submit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside class="aw-references-menu aw-u-padding-inline-start-24">
|
||||
<div class="aw-references-menu-content">
|
||||
<div class="u-flex u-main-space-between u-cross-center u-gap-16">
|
||||
<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5>
|
||||
</div>
|
||||
<ol class="aw-references-menu-list">
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="." class="aw-references-menu-link"
|
||||
><span class="aw-numeric-badge">1</span>
|
||||
<span class="aw-caption-400">Title</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="." class="aw-references-menu-link is-selected"
|
||||
><span class="aw-numeric-badge">2</span>
|
||||
<span class="aw-caption-400">Title</span></a
|
||||
>
|
||||
<ol class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32">
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="." class="aw-references-menu-link is-selected"
|
||||
><span class="aw-caption-400">Subtitle</span></a
|
||||
>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="." class="aw-references-menu-link is-selected"
|
||||
><span class="aw-caption-400">Subtitle</span></a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li class="aw-references-menu-item">
|
||||
<a href="." class="aw-references-menu-link"
|
||||
><span class="aw-numeric-badge">3</span>
|
||||
<span class="aw-caption-400">Title</span></a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="u-sep-block-start u-padding-block-start-20">
|
||||
<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#top"
|
||||
><span class="icon-arrow-up" aria-hidden="true" />
|
||||
<span class="aw-sub-body-500">Back to top</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</article>
|
||||
</main>
|
||||
<footer class="aw-main-footer u-margin-block-start-48 u-small">
|
||||
<div class="aw-main-footer-grid-1">
|
||||
<ul class="aw-main-footer-grid-1-column-1 u-flex u-gap-8">
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Discord">
|
||||
<span class="icon-discord" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite GitHub">
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on Twitter">
|
||||
<span class="icon-twitter" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite on LinkedIn">
|
||||
<span class="icon-linkedin" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="aw-icon-button" aria-label="Appwrite YouTube">
|
||||
<span class="icon-youtube" aria-hidden="true" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-2">
|
||||
<div class="aw-select is-colored">
|
||||
<button class="physical-select">
|
||||
<span class="icon-moon" aria-hidden="true" />
|
||||
<span>Dark</span>
|
||||
</button>
|
||||
<span class="icon-cheveron-down" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="aw-main-footer-grid-1-column-3 aw-main-footer-links">
|
||||
<li>
|
||||
<a href=".">Supports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".">Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="aw-main-footer-grid-1-column-4 aw-main-footer-copyright">
|
||||
Copyright © 2023 Appwrite
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<DocsTutorial {title} toc={[]}>
|
||||
<svelte:fragment slot="metadata">
|
||||
{#if difficulty}
|
||||
<li>{difficulty}</li>
|
||||
{/if}
|
||||
{#if readtime}
|
||||
<li>{readtime} min</li>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<slot />
|
||||
</DocsTutorial>
|
||||
</Docs>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext, hasContext, onMount } from 'svelte';
|
||||
import type { LayoutContext } from '../layouts/Tutorial.svelte';
|
||||
import { getContext, hasContext } from 'svelte';
|
||||
import type { LayoutContext } from '../layouts/Article.svelte';
|
||||
|
||||
export let level: number;
|
||||
export let id: string | undefined = undefined;
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
n[id] = {
|
||||
step,
|
||||
text: element?.textContent ?? ''
|
||||
title: element?.textContent ?? ''
|
||||
};
|
||||
|
||||
return n;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { Docs } from '$lib/layouts';
|
||||
import Sidebar from '$routes/docs/Sidebar.svelte';
|
||||
import MainFooter from "../../../../lib/components/MainFooter.svelte";
|
||||
import MainFooter from "$lib/components/MainFooter.svelte";
|
||||
</script>
|
||||
|
||||
<Docs variant="two-side-navs">
|
||||
@@ -363,19 +363,4 @@
|
||||
</main>
|
||||
|
||||
<MainFooter variant="docs"/>
|
||||
|
||||
</Docs>
|
||||
|
||||
<!-- <script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#MenuButton, #ToggleMenu").on("click", function(){
|
||||
$(".aw-grid-two-side-navs").toggleClass("is-open");
|
||||
$(".aw-references-menu").removeClass("is-open");
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script> -->
|
||||
|
||||
Reference in New Issue
Block a user