mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-10 04:22:18 +00:00
feat: new structure
This commit is contained in:
Torsten Dittmann
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user