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