Add missing markdown rendering
parent
a00ae0b6f8
commit
4d10a4db8a
@ -0,0 +1,30 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<blockquote class="blockquote">
|
||||||
|
{@render children()}
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.blockquote {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
border-left: 5px solid var(--color-context);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: var(--color-background-light);
|
||||||
|
font-family: var(--font-readable);
|
||||||
|
|
||||||
|
:global(> .blockquote) {
|
||||||
|
box-shadow: 0 -5px 5px var(--color-background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,19 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
type Props = {
|
||||||
|
src: string;
|
||||||
|
title?: string;
|
||||||
|
text?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { src, title, text }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img class="image" {src} {title} alt={text} />
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.image {
|
||||||
|
max-width: 35%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,35 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
header: Snippet;
|
||||||
|
rows: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { header, rows }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
{@render header()}
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{@render rows()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.table {
|
||||||
|
border-collapse: true;
|
||||||
|
margin: 1em 0;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
font-family: var(--font-readable);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<td class="table-cell">
|
||||||
|
{@render children()}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.table-cell {
|
||||||
|
padding: 0.25em;
|
||||||
|
border-top: 2px solid var(--color-context);
|
||||||
|
border-left: 2px solid var(--color-context);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<th class="table-header">
|
||||||
|
{@render children()}
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@layer component {
|
||||||
|
.table-header {
|
||||||
|
padding: 0.25em;
|
||||||
|
border-left: 2px solid var(--color-context);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from "svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
children: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
{@render children()}
|
||||||
|
</tr>
|
@ -0,0 +1,56 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Token } from "marked";
|
||||||
|
import HighlightedCode from "../atoms/HighlightedCode.svelte";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
markdownToken: Token;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { markdownToken }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet inlineMarkdown(token)}
|
||||||
|
{#if token.type === "text" || token.type === "escape"}
|
||||||
|
{@render tokenValue(token)}
|
||||||
|
{:else if token.type === "strong"}
|
||||||
|
<strong>{@render tokenValue(token)}</strong>
|
||||||
|
{:else if token.type === "link"}
|
||||||
|
<a href={token.href} title={token.title}>{@render tokenValue(token)}</a>
|
||||||
|
{:else if token.type === "em"}
|
||||||
|
<em>{@render tokenValue(token)}</em>
|
||||||
|
{:else if token.type === "del"}
|
||||||
|
<del>{@render tokenValue(token)}</del>
|
||||||
|
{:else if token.type === "codespan"}
|
||||||
|
<code>{@render tokenValue(token)}</code>
|
||||||
|
{:else if token.type === "emoji"}
|
||||||
|
<span class="emoji">{token.emoji}</span>
|
||||||
|
{:else}
|
||||||
|
<h4 style="color: var(--color-red)">This needs to be rendered</h4>
|
||||||
|
<HighlightedCode code={JSON.stringify(token, null, 2)} />
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{#snippet tokenValue(token)}
|
||||||
|
{#if token.tokens}
|
||||||
|
{#each token.tokens as childToken}
|
||||||
|
{@render inlineMarkdown(childToken)}
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{@html token.text}
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{@render inlineMarkdown(markdownToken)}
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "$lib/styles/mixins.scss";
|
||||||
|
|
||||||
|
@layer component {
|
||||||
|
.emoji {
|
||||||
|
font-family: var(--font-emoji);
|
||||||
|
font-weight: bold;
|
||||||
|
@include lighten-color(color, var(--color-context));
|
||||||
|
text-shadow: 0 0 5px var(--color-context);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in New Issue