Mirror of Steamdown (Markdown -> Steam Markup converter)
Show editor
Spenser Black
(Nov 9, 2024, 3:56 PM EST)
4c17677b
507905d4
+170
-120
+1
-2
packages/site/index.html
+1
-2
packages/site/index.html
···
2
2
<html lang="en">
3
3
<head>
4
4
<meta charset="UTF-8" />
5
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
<title>Vite + Svelte + TS</title>
6
+
<title>Steamdown</title>
8
7
</head>
9
8
<body>
10
9
<div id="app"></div>
+4
packages/site/package.json
+4
packages/site/package.json
-1
packages/site/public/vite.svg
-1
packages/site/public/vite.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
+3
-42
packages/site/src/App.svelte
+3
-42
packages/site/src/App.svelte
···
1
1
<script lang="ts">
2
-
import svelteLogo from './assets/svelte.svg'
3
-
import viteLogo from '/vite.svg'
4
-
import Counter from './lib/Counter.svelte'
2
+
import Editor from './lib/Editor.svelte'
5
3
</script>
6
4
7
5
<main>
8
-
<div>
9
-
<a href="https://vite.dev" target="_blank" rel="noreferrer">
10
-
<img src={viteLogo} class="logo" alt="Vite Logo" />
11
-
</a>
12
-
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
13
-
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
14
-
</a>
15
-
</div>
16
-
<h1>Vite + Svelte</h1>
17
-
18
-
<div class="card">
19
-
<Counter />
20
-
</div>
21
-
22
-
<p>
23
-
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
24
-
</p>
25
-
26
-
<p class="read-the-docs">
27
-
Click on the Vite and Svelte logos to learn more
28
-
</p>
6
+
<h1>Steamdown</h1>
7
+
<Editor />
29
8
</main>
30
-
31
-
<style>
32
-
.logo {
33
-
height: 6em;
34
-
padding: 1.5em;
35
-
will-change: filter;
36
-
transition: filter 300ms;
37
-
}
38
-
.logo:hover {
39
-
filter: drop-shadow(0 0 2em #646cffaa);
40
-
}
41
-
.logo.svelte:hover {
42
-
filter: drop-shadow(0 0 2em #ff3e00aa);
43
-
}
44
-
.read-the-docs {
45
-
color: #888;
46
-
}
47
-
</style>
+49
-64
packages/site/src/app.css
+49
-64
packages/site/src/app.css
···
1
1
:root {
2
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
-
line-height: 1.5;
4
-
font-weight: 400;
5
-
2
+
font-family: Arial, Helvetica, sans-serif;
6
3
color-scheme: light dark;
7
-
color: rgba(255, 255, 255, 0.87);
8
-
background-color: #242424;
4
+
background-color: var(--color-bg);
5
+
color: var(--color-fg);
6
+
--color-bg: #333;
7
+
--color-fg: #fff;
8
+
--color-border: #fff;
9
+
}
9
10
10
-
font-synthesis: none;
11
-
text-rendering: optimizeLegibility;
12
-
-webkit-font-smoothing: antialiased;
13
-
-moz-osx-font-smoothing: grayscale;
11
+
@media (prefers-color-scheme: light) {
12
+
:root {
13
+
--color-bg: #fff;
14
+
--color-fg: #333;
15
+
--color-border: #333;
16
+
}
14
17
}
15
18
16
-
a {
17
-
font-weight: 500;
18
-
color: #646cff;
19
-
text-decoration: inherit;
19
+
em {
20
+
font-style: italic;
21
+
}
22
+
strong {
23
+
font-weight: bold;
24
+
}
25
+
u {
26
+
text-decoration: underline;
20
27
}
21
-
a:hover {
22
-
color: #535bf2;
28
+
.spoiler {
29
+
background-color: black;
30
+
color: black;
23
31
}
24
-
25
-
body {
26
-
margin: 0;
27
-
display: flex;
28
-
place-items: center;
29
-
min-width: 320px;
30
-
min-height: 100vh;
32
+
.spoiler:hover {
33
+
color: white;
31
34
}
32
-
33
-
h1 {
34
-
font-size: 3.2em;
35
-
line-height: 1.1;
35
+
s {
36
+
text-decoration: line-through;
36
37
}
37
-
38
-
.card {
39
-
padding: 2em;
38
+
.quote {
39
+
border: 1px solid var(--color-border);
40
+
border-radius: 5px;
41
+
padding: 0.5rem;
40
42
}
41
-
42
-
#app {
43
-
max-width: 1280px;
44
-
margin: 0 auto;
45
-
padding: 2rem;
46
-
text-align: center;
43
+
.quote cite {
44
+
font-style: italic;
45
+
font-weight: bold;
46
+
text-decoration: underline;
47
47
}
48
-
49
-
button {
50
-
border-radius: 8px;
51
-
border: 1px solid transparent;
52
-
padding: 0.6em 1.2em;
53
-
font-size: 1em;
54
-
font-weight: 500;
55
-
font-family: inherit;
56
-
background-color: #1a1a1a;
57
-
cursor: pointer;
58
-
transition: border-color 0.25s;
48
+
pre.code {
49
+
border: 1px solid var(--color-border);
50
+
border-radius: 5px;
51
+
padding: 0.5rem;
52
+
font-family: monospace;
59
53
}
60
-
button:hover {
61
-
border-color: #646cff;
54
+
a {
55
+
color: var(--color-fg);
56
+
text-decoration: underline;
62
57
}
63
-
button:focus,
64
-
button:focus-visible {
65
-
outline: 4px auto -webkit-focus-ring-color;
58
+
table {
59
+
border-collapse: collapse;
66
60
}
67
-
68
-
@media (prefers-color-scheme: light) {
69
-
:root {
70
-
color: #213547;
71
-
background-color: #ffffff;
72
-
}
73
-
a:hover {
74
-
color: #747bff;
75
-
}
76
-
button {
77
-
background-color: #f9f9f9;
78
-
}
61
+
table th, table td {
62
+
border: 1px solid var(--color-border);
63
+
padding: 0.5rem;
79
64
}
-1
packages/site/src/assets/svelte.svg
-1
packages/site/src/assets/svelte.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
+42
packages/site/src/demo.stmd
+42
packages/site/src/demo.stmd
···
1
+
# Header 1
2
+
3
+
## Header 2
4
+
5
+
### Header 3
6
+
7
+
This is a paragraph. Like GitHub flavored markdown,
8
+
breaklines are preserved.
9
+
10
+
Inline styling includes:
11
+
12
+
* *italics*
13
+
* **bold**
14
+
* _underline_
15
+
* >!spoiler!<
16
+
* ~~strikes~~
17
+
* {noparse}
18
+
19
+
Oh, we do support ordered lists, too:
20
+
21
+
1. See?
22
+
2. Told you so!
23
+
24
+
```
25
+
We have code blocks.
26
+
```
27
+
28
+
{{{
29
+
noparse works as a block, too.
30
+
}}}
31
+
32
+
> Unlike Markdown, quotes support authors:
33
+
(me)
34
+
35
+
| tables | supported? |
36
+
| ------ | ---------- |
37
+
| yes | they are |
38
+
39
+
A link can be styled like this: [link](https://example.com/inline/)
40
+
Or like this (good for repetitive link references): [link][id]
41
+
42
+
[id]: https://example.com/reference/
-10
packages/site/src/lib/Counter.svelte
-10
packages/site/src/lib/Counter.svelte
+64
packages/site/src/lib/Editor.svelte
+64
packages/site/src/lib/Editor.svelte
···
1
+
<script lang="ts">
2
+
import { parse as parseSteamdown, render as renderMarkup } from "@steamdown/core";
3
+
import { render as renderHtml } from "@steamdown/html";
4
+
import demo from "../demo.stmd?raw";
5
+
let tab = $state<"editor" | "preview" | "markup" | "tree" >("editor");
6
+
let steamdown = $state(demo);
7
+
let parsedSteamdown = $derived(parseSteamdown(steamdown));
8
+
let renderedMarkup = $derived(renderMarkup(parsedSteamdown.tree, parsedSteamdown.context));
9
+
let renderedHtml = $derived(renderHtml(parsedSteamdown.tree, parsedSteamdown.context));
10
+
</script>
11
+
12
+
<div class="editor">
13
+
<div class="editor-controls">
14
+
<button class="tab" class:active={tab === "editor"} onclick={() => tab = "editor"}>Editor</button>
15
+
<button class="tab" class:active={tab === "preview"} onclick={() => tab = "preview"}>Preview</button>
16
+
<button class="tab" class:active={tab === "markup"} onclick={() => tab = "markup"}>Markup</button>
17
+
<button class="tab" class:active={tab === "tree"} onclick={() => tab = "tree"}>Tree</button>
18
+
</div>
19
+
<div class="editor-content">
20
+
{#if tab === "editor"}
21
+
<textarea rows="25" cols="88" class="editor" bind:value={steamdown}></textarea>
22
+
{:else if tab === "preview"}
23
+
<div class="preview">{@html renderedHtml}</div>
24
+
{:else if tab === "markup"}
25
+
<pre class="markup">{renderedMarkup}</pre>
26
+
{:else if tab === "tree"}
27
+
<pre class="tree">{JSON.stringify(parsedSteamdown.tree, null, 2)}</pre>
28
+
{/if}
29
+
</div>
30
+
</div>
31
+
32
+
<style>
33
+
.editor {
34
+
display: flex;
35
+
flex-direction: column;
36
+
min-width: 50rem;
37
+
max-width: 100%;
38
+
bottom: 0;
39
+
}
40
+
.editor-content {
41
+
display: flex;
42
+
border: 1px solid var(--color-border);
43
+
max-height: 25rem;
44
+
overflow: auto;
45
+
}
46
+
textarea.editor {
47
+
display: block;
48
+
font-family: monospace;
49
+
font-size: 1rem;
50
+
padding: 0.5rem;
51
+
border: none;
52
+
resize: none;
53
+
width: 100%;
54
+
}
55
+
.tab {
56
+
padding: 0.5rem 1rem;
57
+
border: none;
58
+
cursor: pointer;
59
+
}
60
+
.tab.active {
61
+
border: 1px solid #888;
62
+
border-bottom: none;
63
+
}
64
+
</style>
+7
pnpm-lock.yaml
+7
pnpm-lock.yaml
···
68
68
version: 4.0.0
69
69
70
70
packages/site:
71
+
dependencies:
72
+
'@steamdown/core':
73
+
specifier: workspace:^
74
+
version: link:../steamdown
75
+
'@steamdown/html':
76
+
specifier: workspace:^
77
+
version: link:../html
71
78
devDependencies:
72
79
'@sveltejs/vite-plugin-svelte':
73
80
specifier: ^4.0.0