mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-10 04:22:18 +00:00
fix: more stuff
This commit is contained in:
Torsten Dittmann
34
package.json
34
package.json
@@ -19,27 +19,27 @@
|
||||
"devDependencies": {
|
||||
"@melt-ui/pp": "^0.1.2",
|
||||
"@melt-ui/svelte": "^0.40.0",
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.20.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"@playwright/test": "^1.37.1",
|
||||
"@sveltejs/adapter-auto": "^2.1.0",
|
||||
"@sveltejs/kit": "^1.24.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"eslint-plugin-svelte": "^2.33.0",
|
||||
"oslllo-svg-fixer": "^2.2.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"sass": "^1.65.1",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.3",
|
||||
"sass": "^1.66.1",
|
||||
"svelte": "^4.2.0",
|
||||
"svelte-check": "^3.5.1",
|
||||
"svelte-markdoc-preprocess": "^0.3.1",
|
||||
"svelte-sequential-preprocessor": "^2.0.1",
|
||||
"svgtofont": "^3.22.0",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.4.2",
|
||||
"vitest": "^0.32.2"
|
||||
"svgtofont": "^3.25.4",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.4.9",
|
||||
"vitest": "^0.32.4"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
|
||||
531
pnpm-lock.yaml
generated
531
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -21,7 +21,7 @@
|
||||
$: variantClass = variantClasses[variant];
|
||||
</script>
|
||||
|
||||
<div id="app" class="u-position-relative">
|
||||
<div id="top" class="u-position-relative">
|
||||
<div
|
||||
class={variantClass}
|
||||
style:--container-size={variant === 'default' ? 'var(--container-size-large)' : undefined}
|
||||
|
||||
210
src/markdoc/layouts/Article.svelte
Normal file
210
src/markdoc/layouts/Article.svelte
Normal 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>
|
||||
@@ -2,19 +2,23 @@
|
||||
import { writable, type Writable } from 'svelte/store';
|
||||
|
||||
export type LayoutContext = Writable<
|
||||
Record<string, {
|
||||
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>
|
||||
<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>
|
||||
{/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=".">
|
||||
<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>
|
||||
|
||||
@@ -2,4 +2,8 @@
|
||||
export let ordered: boolean;
|
||||
</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
|
||||
>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let align: string;
|
||||
import type { HTMLTdAttributes } from "svelte/elements";
|
||||
|
||||
export let align: HTMLTdAttributes['align'];
|
||||
</script>
|
||||
|
||||
<td class="aw-table-col">
|
||||
<td class="aw-table-col" {align}>
|
||||
<slot />
|
||||
</td>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Hello world
|
||||
layout: article
|
||||
title: Hello World :)
|
||||
description: This is the description used for SEO.
|
||||
difficulty: beginner
|
||||
readtime: 3
|
||||
---
|
||||
@@ -38,9 +40,9 @@ And you can also have `inline code`.
|
||||
|
||||
#### 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
|
||||
|
||||
@@ -21,7 +21,9 @@ const config = {
|
||||
nodes: absoulute('./src/markdoc/nodes/_Module.svelte'),
|
||||
tags: absoulute('./src/markdoc/tags/_Module.svelte'),
|
||||
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()
|
||||
|
||||
Reference in New Issue
Block a user