-
Notifications
You must be signed in to change notification settings - Fork 0
/
server.ts
143 lines (122 loc) · 4.16 KB
/
server.ts
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { Application, Router } from "oak";
const app = new Application();
const router = new Router();
import { githubUrlToScriptId, createHTMLCodeSnippet } from "./mod.ts";
const head = `
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Embedder</title>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="https://missing.style/missing-prism.css">
</head>
`;
// Serve the landing page with the form
router.get("/", (context) => {
context.response.body = `
<!DOCTYPE html>
<html lang="en">
${head}
<body>
<main>
<h1>Embed Markdown from GitHub</h1>
<form action="/embed" method="post" class="grid">
<label for="github-url">GitHub URL:
<input class="width:100%" type="text" id="github-url" name="github-url" required>
<button type="submit">Submit</button>
</label>
</form>
</main>
</body>
</html>
`;
});
router.post("/embed-id", async (context) => {
const body = await context.request.body({ type: "json" }).value;
const { githubUrl } = body || {};
context.response.body = {
url: githubUrl,
scriptId: githubUrlToScriptId(githubUrl),
};
});
// Handle form submission and generate the JavaScript to embed the Markdown
// Handle form submission and generate the JavaScript to embed the Markdown
router.post("/embed", async (context) => {
const body = await context.request.body({ type: "form" }).value;
const githubUrl = body.get("github-url");
if (!githubUrl) {
context.throw(400, "GitHub URL is required");
return;
}
const scriptId = githubUrlToScriptId(githubUrl);
const snippet = createHTMLCodeSnippet(scriptId, context.request.url.origin);
context.response.body = `
<!DOCTYPE html>
<html lang="en">
${head}
<body>
<main>
<h1>Embed this script on your webpage</h1>
<h2>Snippet</h2>
<strong>URL</strong>: <a href="${githubUrl}">${githubUrl}</a>
<label for="snippet">Embed Code</label>
<textarea id="snippet">${snippet}</textarea>
<button id="copyButton">Copy snippet</button>
<h2>Preview</h2>
<div id="ghe-${scriptId}" class="box"></div>
<script type="module" src="/embed-script/${scriptId}"></script>
<script>
function copyToClipboard() {
const textToCopy = document.getElementById('snippet');
textToCopy.select();
textToCopy.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
alert('Snippet to you clipboard!');
}
document.getElementById('copyButton').addEventListener('click', copyToClipboard);
</script>
</main>
</body>
</html>
`;
});
router.get("/embed-script/:scriptId", async (context) => {
const scriptId = context.params.scriptId!;
if (!scriptId) {
context.throw(400, "Script ID is required");
return;
}
const [repoOwner, repoName, filePath] = atob(scriptId).split(":");
try {
context.response.headers.set("Access-Control-Allow-Origin", "*");
context.response.headers.set("Content-Type", "application/javascript");
context.response.body = `
${await Deno.readTextFile("./markdown.esm.js")}
(async function() {
const containerId = "markdown-container";
await embedMarkdownFromGithub("${repoOwner}", "${repoName}", "${filePath}", "ghe-${scriptId}");
})();
`;
} catch (error) {
context.throw(500, `Error generating script: ${error.message}`);
}
});
app.use(router.routes());
app.use(router.allowedMethods());
// CORS middleware
app.use(async (context, next) => {
context.response.headers.set("Access-Control-Allow-Origin", "*");
context.response.headers.set(
"Access-Control-Allow-Methods",
"GET, POST, OPTIONS"
);
context.response.headers.set("Access-Control-Allow-Headers", "Content-Type");
if (context.request.method === "OPTIONS") {
context.response.status = 204;
} else {
await next();
}
});
const port = 8000;
console.log(`Server listening on port ${port}`);
await app.listen({ port });