LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-10 12:57:49 +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

34
package.json
View File

@@ -19,27 +19,27 @@
"devDependencies": { "devDependencies": {
"@melt-ui/pp": "^0.1.2", "@melt-ui/pp": "^0.1.2",
"@melt-ui/svelte": "^0.40.0", "@melt-ui/svelte": "^0.40.0",
"@playwright/test": "^1.28.1", "@playwright/test": "^1.37.1",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.24.1",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.62.0",
"eslint": "^8.28.0", "eslint": "^8.48.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.10.0",
"eslint-plugin-svelte": "^2.30.0", "eslint-plugin-svelte": "^2.33.0",
"oslllo-svg-fixer": "^2.2.0", "oslllo-svg-fixer": "^2.2.0",
"prettier": "^2.8.0", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"sass": "^1.65.1", "sass": "^1.66.1",
"svelte": "^4.0.5", "svelte": "^4.2.0",
"svelte-check": "^3.4.3", "svelte-check": "^3.5.1",
"svelte-markdoc-preprocess": "^0.3.1", "svelte-markdoc-preprocess": "^0.3.1",
"svelte-sequential-preprocessor": "^2.0.1", "svelte-sequential-preprocessor": "^2.0.1",
"svgtofont": "^3.22.0", "svgtofont": "^3.25.4",
"tslib": "^2.4.1", "tslib": "^2.6.2",
"typescript": "^5.0.0", "typescript": "^5.2.2",
"vite": "^4.4.2", "vite": "^4.4.9",
"vitest": "^0.32.2" "vitest": "^0.32.4"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {

531
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
src/lib/layouts/Docs.svelte
View File

@@ -21,7 +21,7 @@
$: variantClass = variantClasses[variant]; $: variantClass = variantClasses[variant];
</script> </script>
<div id="app" class="u-position-relative"> <div id="top" class="u-position-relative">
<div <div
class={variantClass} class={variantClass}
style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined} style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}

210
src/markdoc/layouts/Article.svelte Normal file
View File

@@ -0,0 +1,210 @@
<script context="module" lang="ts">
import { writable, type Writable } from 'svelte/store';
export type LayoutContext = Writable<
Record<
string,
{
text: string;
step?: number;
}
>
>;
</script>
<script lang="ts">
import { Docs } from '$lib/layouts';
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;
setContext<LayoutContext>('headings', writable({}));
const headings = getContext<LayoutContext>('headings');
</script>
<svelte:head>
<title>{title}</title>
<meta name="description" content={description} />
</svelte:head>
<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>
</Docs>

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

@@ -2,19 +2,23 @@
import { writable, type Writable } from 'svelte/store'; import { writable, type Writable } from 'svelte/store';
export type LayoutContext = Writable< export type LayoutContext = Writable<
Record<string, { Record<
text: string; string,
step?: number; {
}> text: string;
step?: number;
}
>
>; >;
</script> </script>
<script lang="ts"> <script lang="ts">
import { Docs } from '$lib/layouts'; import { Docs } from '$lib/layouts';
import Sidebar from '$routes/docs/Sidebar.svelte';
import { getContext, setContext } from 'svelte'; import { getContext, setContext } from 'svelte';
import Sidebar from '$routes/docs/Sidebar.svelte';
export let title: string; export let title: string;
export let description: string;
export let difficulty: string; export let difficulty: string;
export let readtime: string; export let readtime: string;
@@ -25,6 +29,7 @@
<svelte:head> <svelte:head>
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} />
</svelte:head> </svelte:head>
<Docs variant="two-side-navs"> <Docs variant="two-side-navs">
@@ -68,7 +73,16 @@
</header> </header>
<div class="aw-article-content"> <div class="aw-article-content">
<slot /> <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"> <section class="aw-content-footer">
<header class="aw-content-footer-header"> <header class="aw-content-footer-header">
<div class="aw-content-footer-header-start"> <div class="aw-content-footer-header-start">
@@ -122,28 +136,49 @@
</div> </div>
</section> </section>
</div> </div>
<aside class="aw-references-menu aw-u-padding-inline-start-24"> <aside class="aw-references-menu aw-u-padding-inline-start-24">
<div class="aw-references-menu-content"> <div class="aw-references-menu-content">
<div class="u-flex u-main-space-between u-cross-center u-gap-16"> <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> </div>
<ol class="aw-references-menu-list"> <ol class="aw-references-menu-list">
{#each Object.entries($headings) as [id, heading]} <li class="aw-references-menu-item">
<li class="aw-references-menu-item"> <a href="." class="aw-references-menu-link"
<a href={`#${id}`} class="aw-references-menu-link"> ><span class="aw-numeric-badge">1</span>
{#if heading.step !== undefined} <span class="aw-caption-400">Title</span></a
<span class="aw-numeric-badge">{heading.step}</span> >
{/if} </li>
<span class="aw-caption-400">{heading.text}</span> <li class="aw-references-menu-item">
</a> <a href="." class="aw-references-menu-link is-selected"
</li> ><span class="aw-numeric-badge">2</span>
{/each} <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> </ol>
<div class="u-sep-block-start u-padding-block-start-20"> <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="."> <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="icon-arrow-up" aria-hidden="true" />
<span class="aw-sub-body-500">Back to top</span> <span class="aw-sub-body-500">Back to top</span></a
</a> >
</div> </div>
</div> </div>
</aside> </aside>

6
src/markdoc/nodes/List.svelte
View File

@@ -2,4 +2,8 @@
export let ordered: boolean; export let ordered: boolean;
</script> </script>
<svelte:element this={ordered ? 'ol' : 'ul'} class="aw-list"><slot /></svelte:element> <svelte:element
this={ordered ? 'ol' : 'ul'}
class:aw-numeric-list={ordered}
class:aw-list={!ordered}><slot /></svelte:element
>

6
src/markdoc/nodes/Td.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
export let align: string; import type { HTMLTdAttributes } from "svelte/elements";
export let align: HTMLTdAttributes['align'];
</script> </script>
<td class="aw-table-col"> <td class="aw-table-col" {align}>
<slot /> <slot />
</td> </td>

10
src/routes/test/+page.markdoc → src/routes/test/article/+page.markdoc
View File

@@ -1,5 +1,7 @@
--- ---
title: Hello world layout: article
title: Hello World :)
description: This is the description used for SEO.
difficulty: beginner difficulty: beginner
readtime: 3 readtime: 3
--- ---
@@ -38,9 +40,9 @@ And you can also have `inline code`.
#### Header 4 #### Header 4
* This is an unordered list following a header. - This is an unordered list following a header.
* This is an unordered list following a header. - This is an unordered list following a header.
* This is an unordered list following a header. - This is an unordered list following a header.
##### Header 5 ##### Header 5

4
svelte.config.js
View File

@@ -21,7 +21,9 @@ const config = {
nodes: absoulute('./src/markdoc/nodes/_Module.svelte'), nodes: absoulute('./src/markdoc/nodes/_Module.svelte'),
tags: absoulute('./src/markdoc/tags/_Module.svelte'), tags: absoulute('./src/markdoc/tags/_Module.svelte'),
layouts: { layouts: {
default: absoulute('./src/markdoc/layouts/Tutorial.svelte'), default: absoulute('./src/markdoc/layouts/Article.svelte'),
article: absoulute('./src/markdoc/layouts/Article.svelte'),
tutorial: absoulute('./src/markdoc/layouts/Tutorial.svelte')
} }
}), }),
preprocessMeltUI() preprocessMeltUI()