LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-10 04:22:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: more stuff

Browse Source
This commit is contained in:
Torsten Dittmann
2023-09-05 15:59:48 +02:00
parent d79a424bfe
commit 332bc95df4
9 changed files with 587 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/markdoc/layouts/Tutorial.svelte
View File

@@ -2,19 +2,23 @@
import { writable, type Writable } from 'svelte/store';
export type LayoutContext = Writable<
Record<string, {
text: string;
step?: number;
}>
Record<
string,
{
text: string;
step?: number;
}
>
>;
</script>
<script lang="ts">
import { Docs } from '$lib/layouts';
import Sidebar from '$routes/docs/Sidebar.svelte';
import { getContext, setContext } from 'svelte';
import Sidebar from '$routes/docs/Sidebar.svelte';
export let title: string;
export let description: string;
export let difficulty: string;
export let readtime: string;
@@ -25,6 +29,7 @@
<svelte:head>
<title>{title}</title>
<meta name="description" content={description} />
</svelte:head>
<Docs variant="two-side-navs">
@@ -68,7 +73,16 @@
</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">
@@ -122,28 +136,49 @@
</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>
<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</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}
<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=".">
<span class="icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span>
</a>
<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>