Mercurial
diff mrjunejune/test/snapshots/tools_markdown_to_html.snapshot @ 94:092afa595764
[MrJuneJune] Added Integration tests.
| author | June Park <parkjune1995@gmail.com> |
|---|---|
| date | Fri, 02 Jan 2026 18:13:32 -0800 |
| parents | |
| children | 1c446ab6f945 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/test/snapshots/tools_markdown_to_html.snapshot Fri Jan 02 18:13:32 2026 -0800 @@ -0,0 +1,261 @@ +HTTP/1.1 200 OK +Content-Type: text/html +Content-Length: 5891 +Connection: close + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Markdown to HTML Converter</title> + <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg"> + +<link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font" crossorigin> +<link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin> + +<link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> +<link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> + +<link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> +<link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin> +<link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin> + +<link rel="preload" href="/base.css" as="style" /> +<link rel="stylesheet" href="/base.css" /> + + + <link rel="stylesheet" href="markdown_to_html/index.css" /> +</head> +<body> + <style> + :root { + --header-background: var(--white); + --header-color: rgb(var(--black)); + --link-hover-accent: var(--awesome); + } + + /* Fixed icon in top left corner */ + #themeToggle { + position: fixed; + top: 20px; + left: 20px; + background: var(--header-background); + display: flex; + align-items: center; + border-radius: 50%; + cursor: pointer; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease; + } + + #themeToggle:hover { + transform: scale(1.05); + } + + /* Professional header */ + header { + margin: auto; + padding: 1.5em 1em; + font-family: "More", sans-serif; + box-shadow: 0 2px 8px rgba(var(--black), 5%); + width: 720px; + max-width: calc(100% - 2em); + text-align: center; + } + + header h1 { + margin: 0; + font-size: 1.8em; + font-weight: 700; + letter-spacing: -0.5px; + } + + header h1 a { + text-decoration: none; + color: var(--header-color); + } + + header h1 a::before { + display: none; + } + + /* Mobile responsiveness */ + @media (max-width: 720px) { + #themeToggle { + top: 15px; + left: 15px; + } + + header { + padding: 1em; + } + + header h1 { + font-size: 1.5em; + } + } + + @media (max-width: 480px) { + #themeToggle { + top: 10px; + left: 10px; + } + + #themeToggle img { + height: 40px; + width: 40px; + } + + header h1 { + font-size: 1.3em; + } + } + + #logo { + width: 300px; + } + + /* 1. DEFINE THE DEFAULTS (Light Mode) */ + :root { + --logo-invert: invert(0); + --epi-grayscale: grayscale(0) brightness(1); + } + + /* 2. MANUAL DARK OVERRIDE */ + html.dark { + --logo-invert: invert(1); + --epi-grayscale: grayscale(1); + } + + /* 3. MANUAL LIGHT OVERRIDE */ + html.light-mode { + --logo-invert: invert(0); + --epi-grayscale: brightness(2.9) grayscale(1); + } + + /* 4. SYSTEM PREFERENCE */ + @media (prefers-color-scheme: dark) { + :root:not(.light-mode) { + --logo-invert: invert(1); + } + } + + /* 5. APPLY TO ELEMENTS */ + #logo { + -webkit-filter: var(--logo-invert); + filter: var(--logo-invert); + transition: filter 0.3s ease; + } + + .epi-logo { + -webkit-filter: var(--epi-grayscale); + filter: var(--epi-grayscale); + transition: filter 0.3s ease; + } +</style> + +<div id="themeToggle"> + <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50"> +</div> + +<header> + <h1><a href="/">MrJuneJune</a></h1> +</header> +<script src="/index.js"></script> + + + <div class="header"> + <h1>Markdown to HTML Converter</h1> + </div> + + <div class="container"> + <div class="panel"> + <div class="label">Markdown Input</div> + <textarea id="input" placeholder="Type your markdown here..."># Welcome to Markdown Converter + +## Features + +This converter supports: + +- **Bold text** and *italic text* +- [Links](https://example.com) +- `inline code` +- ~~strikethrough~~ + +### Lists + +1. Ordered lists +2. Like this one +3. With numbers + +- Unordered lists +- Use dashes +- Or asterisks + +### Code Blocks + +``` +function example() { + return "Hello World"; +} +``` + +### Blockquotes + +> This is a blockquote +> It can span multiple lines + +--- + +### Images + + + +**Try editing this text!**</textarea> + </div> + + <div class="panel"> + <div class="title"> + <div class="label">HTML Output</div> + <button id="copy"> Copy </button> + </div> + <div id="output"></div> + </div> + </div> + <div style="display: flex; align-items: center; justify-content: center; margin: 30px 0px;"> + <small>© 2026 June Park</small> +</div> + + <script src="/markdown_to_html.js"></script> + <script> + function convert() { + output.innerHTML = ''; + const markdown = input.value; + renderMarkdown(output, markdown); + } + input.addEventListener('input', convert); + + convert(); + + copy.addEventListener('click', () => { + const htmlBlob = new Blob([output.innerHTML], { type: 'text/html'}); + const textBlob = new Blob([output.innerText], { type: 'text/plain'}); + const data = [new ClipboardItem({ + 'text/html': htmlBlob, + 'text/plain': textBlob + })]; + navigator.clipboard.write(data).then(() => { + copy.textContent = "Copied!"; + setTimeout(() => { + copy.textContent = "Copy"; + copy.classList.remove('success'); + }, 1000); + }).catch(err => { + console.error('Failed to copy: ', err); + }); + }); + </script> +</body> +</html>