Add site to parse, render, and preview (#234)

spenserblack · Nov 10, 2024 · f5ea95e · f5ea95e
2 parents ab1c8f9 + d012cfc
commit f5ea95e
Show file tree

Hide file tree

Showing 17 changed files with 1,109 additions and 3 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -10,5 +10,13 @@
     }
   },
   "postCreateCommand": ".devcontainer/postCreate.sh",
+  "postAttachCommand": ".devcontainer/postAttach.sh",
+  "forwardPorts": [3000],
+  "portsAttributes": {
+    "3000": {
+      "label": "Site",
+      "onAutoForward": "notify"
+    }
+  },
   "remoteUser": "node"
 }
diff --git a/.devcontainer/postAttach.sh b/.devcontainer/postAttach.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+pnpm run --filter site dev --port 3000
diff --git a/.devcontainer/postCreate.sh b/.devcontainer/postCreate.sh
@@ -1,2 +1,3 @@
 #!/bin/bash
 pnpm install
+pnpm run -w build
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "svelte.svelte-vscode"
+    ]
+}
diff --git a/packages/site/.gitignore b/packages/site/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/site/index.html b/packages/site/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Steamdown</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@steamdown/site",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.1.3",
+    "svelte-check": "^4.0.5",
+    "tslib": "^2.8.0",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "@steamdown/core": "workspace:^",
+    "@steamdown/html": "workspace:^"
+  }
+}
diff --git a/packages/site/src/App.svelte b/packages/site/src/App.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Editor from './lib/Editor.svelte'
+</script>
+
+<main>
+  <h1>Steamdown</h1>
+  <p>
+    Welcome to the beta test of the new version of Steamdown! Previously, it just used
+    an existing Markdown renderer, and used a bunch of settings overrides to hack it
+    into something that could render to Steam's markup. Now, it has its own parser and
+    renderer written specifically with Steam's markup in mind. There's some new syntax,
+    some changed syntax, and some removed syntax, with the goal of handling the
+    possibilities and limitations of Steam's markup. View the
+    <a href="https://github.com/spenserblack/steamdown">GitHub Repository</a>
+    for more information on the changes.
+  </p>
+  <p>
+    As this is a beta test, you may encounter some parsing or rendering issues. If you
+    do, please <a href="https://github.com/spenserblack/steamdown/issues/new">open an issue</a>
+    and report the problem.
+  </p>
+  <Editor />
+</main>
+<footer>
+  <h6>Social</h6>
+  <ul class="social">
+    <li><a href="https://github.com/spenserblack/steamdown">GitHub</a></li>
+  </ul>
+</footer>
+
+<style>
+  footer {
+    margin-top: 2rem;
+    text-align: right;
+  }
+  footer ul.social {
+    display: flex;
+    justify-content: right;
+    gap: 1rem;
+  }
+  footer ul.social li {
+    list-style: none;
+  }
+</style>
diff --git a/packages/site/src/app.css b/packages/site/src/app.css
@@ -0,0 +1,17 @@
+:root {
+  font-family: Arial, Helvetica, sans-serif;
+  color-scheme: light dark;
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  --color-bg: #333;
+  --color-fg: #fff;
+  --color-border: #fff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #fff;
+    --color-fg: #333;
+    --color-border: #333;
+  }
+}
diff --git a/packages/site/src/demo.stmd b/packages/site/src/demo.stmd
@@ -0,0 +1,42 @@
+# Header 1
+
+## Header 2
+
+### Header 3
+
+This is a paragraph. Like GitHub flavored markdown,
+breaklines are preserved.
+
+Inline styling includes:
+
+* *italics*
+* **bold**
+* _underline_
+* >!spoiler!<
+* ~~strikes~~
+* {noparse}
+
+Oh, we do support ordered lists, too:
+
+1. See?
+2. Told you so!
+
+```
+We have code blocks.
+```
+
+{{{
+noparse works as a block, too.
+}}}
+
+> Unlike Markdown, quotes support authors:
+(me)
+
+| tables | supported? |
+| ------ | ---------- |
+|  yes   |  they are  |
+
+A link can be styled like this: [link](https://example.com/inline/)
+Or like this (good for repetitive link references): [link][id]
+
+[id]: https://example.com/reference/
diff --git a/packages/site/src/lib/Editor.svelte b/packages/site/src/lib/Editor.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { parse as parseSteamdown, render as renderMarkup } from "@steamdown/core";
+  import { render as renderHtml } from "@steamdown/html";
+  import demo from "../demo.stmd?raw";
+  let tab = $state<"editor" | "preview" | "markup" | "tree" >("editor");
+  let steamdown = $state(demo);
+  let parsedSteamdown = $derived(parseSteamdown(steamdown));
+  let renderedMarkup = $derived(renderMarkup(parsedSteamdown.tree, parsedSteamdown.context));
+  let renderedHtml = $derived(renderHtml(parsedSteamdown.tree, parsedSteamdown.context));
+
+  let showCopySuccess = $state(false);
+  const copyMarkup = async () => {
+    await navigator.clipboard.writeText(renderedMarkup);
+    showCopySuccess = true;
+    setTimeout(() => showCopySuccess = false, 1000);
+  };
+</script>
+
+<div class="editor">
+  <div class="editor-controls">
+    <button class="tab" class:active={tab === "editor"} onclick={() => tab = "editor"}>Editor</button>
+    <button class="tab" class:active={tab === "preview"} onclick={() => tab = "preview"}>Preview</button>
+    <button class="tab" class:active={tab === "markup"} onclick={() => tab = "markup"}>Markup</button>
+    <button class="tab" class:active={tab === "tree"} onclick={() => tab = "tree"}>Tree</button>
+  </div>
+  <div class="editor-content">
+    <button class="copy" onclick={copyMarkup}>Cop{#if showCopySuccess}ied{:else}y{/if} Markup</button>
+    {#if tab === "editor"}
+      <textarea rows="25" cols="88" class="editor" bind:value={steamdown}></textarea>
+    {:else if tab === "preview"}
+      <div class="preview">{@html renderedHtml}</div>
+    {:else if tab === "markup"}
+      <pre class="markup">{renderedMarkup}</pre>
+    {:else if tab === "tree"}
+      <pre class="tree">{JSON.stringify(parsedSteamdown.tree, null, 2)}</pre>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .editor {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 50rem;
+    max-width: 100%;
+    bottom: 0;
+  }
+  .editor-content {
+    display: flex;
+    border: 1px solid var(--color-border);
+    max-height: 25rem;
+    overflow: auto;
+    position: relative;
+  }
+  textarea.editor {
+    display: block;
+    font-family: monospace;
+    font-size: 1rem;
+    padding: 0.5rem;
+    border: none;
+    resize: none;
+    width: 100%;
+  }
+  .tab {
+    padding: 0.5rem 1rem;
+    border: none;
+    cursor: pointer;
+  }
+  .tab.active {
+    border: 1px solid #888;
+    border-bottom: none;
+  }
+  .copy {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0.5rem 1rem;
+    border: none;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+
+  :global(.preview em) {
+    font-style: italic;
+  }
+  :global(.preview strong) {
+    font-weight: bold;
+  }
+  :global(.preview u) {
+    text-decoration: underline;
+  }
+  :global(.preview .spoiler) {
+    background-color: black;
+    color: black;
+  }
+  :global(.preview .spoiler:hover) {
+    color: white;
+  }
+  :global(.preview s) {
+    text-decoration: line-through;
+  }
+  :global(.preview .quote) {
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    padding: 0.5rem;
+  }
+  :global(.preview .quote cite) {
+    font-style: italic;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+  :global(.preview pre.code) {
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    padding: 0.5rem;
+    font-family: monospace;
+  }
+  :global(.preview a) {
+    color: var(--color-fg);
+    text-decoration: underline;
+  }
+  :global(.preview table) {
+    border-collapse: collapse;
+  }
+  :global(.preview table th),
+  :global(.preview table td) {
+    border: 1px solid var(--color-border);
+    padding: 0.5rem;
+  }
+</style>
diff --git a/packages/site/src/main.ts b/packages/site/src/main.ts
@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app
diff --git a/packages/site/svelte.config.js b/packages/site/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
diff --git a/packages/site/tsconfig.json b/packages/site/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/site/tsconfig.node.json b/packages/site/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noEmit": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/site/vite.config.ts b/packages/site/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#!/bin/bash
		pnpm run --filter site dev --port 3000