-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweb2md.htm
101 lines (101 loc) · 6.54 KB
/
web2md.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<!-- copied from https://web2md.answer.ai see license at https://github.com/AnswerDotAI/web2md/blob/main/LICENSE -->
<html>
<head>
<title>web2md</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<script src="https://unpkg.com/htmx.org@next/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/answerdotai/surreal@main/surreal.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline@main/script.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
<style>:root { --pico-font-size: 100%; }</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/addon/fold/xml-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/addon/fold/foldcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/addon/fold/foldgutter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/addon/fold/foldgutter.min.css">
<style>.CodeMirror { height: auto; min-height: 100px; border: 1px solid #ddd; }
pre { white-space: pre-wrap; }
select { width: auto; min-width: max-content; padding-right: 2em; }</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-light.css" media="(prefers-color-scheme: light)">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/arronhunt/highlightjs-copy/dist/highlightjs-copy.min.css">
<style>@media (prefers-color-scheme: light) {.hljs-copy-button {background-color: #2d2b57;}}</style>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/languages/markdown.min.js"></script>
<script type="module">
hljs.addPlugin(new CopyButtonPlugin());
hljs.configure({'cssSelector': 'pre code'});
htmx.onLoad(hljs.highlightAll);</script>
<style>
.fh-toast-container {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
display: flex; flex-direction: column; align-items: center; width: 100%;
pointer-events: none; opacity: 0; transition: opacity 0.3s ease-in-out;
}
.fh-toast {
background-color: #333; color: white;
padding: 12px 20px; border-radius: 4px; margin-bottom: 10px;
max-width: 80%; width: auto; text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fh-toast-info { background-color: #2196F3; }
.fh-toast-success { background-color: #4CAF50; }
.fh-toast-warning { background-color: #FF9800; }
.fh-toast-error { background-color: #F44336; }
</style>
<script type="module">
export function proc_htmx(sel, func) {
htmx.onLoad(elt => {
const elements = any(sel, elt, false);
if (elt.matches && elt.matches(sel)) elements.unshift(elt);
elements.forEach(func);
});
}
proc_htmx('.fh-toast-container', async function(toast) {
await sleep(100);
toast.style.opacity = '0.8';
await sleep(3000);
toast.style.opacity = '0';
await sleep(300);
toast.remove();
});
</script>
</head>
<body><main class="container">
<h1>web2md</h1>
<form enctype="multipart/form-data">
<fieldset role="group">
<input type="text" value="https://example.org/" id="url" name="url">
<select hx-post="/" hx-vals="js:{cts: cm.getValue()}" hx-target="#details" id="extractor" name="extractor">
<option value="h2t" selected>html2text</option>
<option value="traf">trafilatura</option>
</select>
<button hx-swap="none" hx-post="/load">Load</button>
</fieldset>
<a href="#details">Go to markdown</a>
<div hx-post="/" hx-trigger="edited delay:300ms, load delay:100ms" hx-vals="js:{cts: cm.getValue()}" hx-target="#details" id="editor"></div>
</form>
<script>let ed = me("#editor");
let cm = CodeMirror(ed, { mode: "htmlmixed", foldGutter: true, gutters: ["CodeMirror-foldgutter"] });
cm.on("change", _ => ed.send("edited"));</script>
<div id="details"></div>
<script hx-swap-oob="true" id="set_cm">cm.setValue("<h1>HTML to Markdown Conversion Test</h1>\n\n<h2>Text Formatting</h2>\n<p>This paragraph contains <strong>bold text</strong>, <em>italic text</em>, and <code>inline code</code>.</p>\n\n<h3>Lists</h3>\n<h4>Unordered List</h4>\n<ul>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n</ul>\n\n<h3>Code Block</h3>\n<pre><code>\nfunction greet(name) {\nconsole.log(`Hello, ${name}!`);\n}\n</code></pre>\n\n<h3>Link and Image</h3>\n<p>Here's a <a href=\"https://www.example.com\">link to Example.com</a>.</p>\n<img src=\"https://via.placeholder.com/150\" alt=\"Placeholder image\">\n\n<hr>\n\n<h3>Table</h3>\n<table>\n <thead>\n <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>\n </thead>\n <tbody>\n <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr>\n <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr>\n </tbody>\n</table>\n");</script>
<form enctype="multipart/form-data"><div style="display: grid; grid-template-columns: 1fr auto auto; gap: 1em; align-items: center;">
<input type="text" placeholder="GitHub Token" id="github_token" style="grid-column: 1; width: 100%;" name="github_token">
<div style="grid-column: 2; display: flex; align-items: center; gap: 0.5em;">
<input type="hidden" value="" name="save_token" skip>
<input type="checkbox" name="save_token" checked value="1" id="save_token">
<label for="save_token">Save Token</label>
</div>
<button hx-post="/gistit" hx-vals='js:{cts: document.querySelector("#details pre code").textContent, save_token: document.querySelector("#save_token").checked}' id="gist-button" style="grid-column: 3;" name="gist-button">Gist It</button>
</div>
</form>
</main>
</body>
</html>