Implemented markdown preview

This commit is contained in:
Sun Knudsen 2022-03-14 08:53:50 -04:00
parent d5ab483e9d
commit e4972b54d0
No known key found for this signature in database
GPG Key ID: 02C43AD072D57783
9 changed files with 957 additions and 183 deletions

View File

@ -1,2 +1,3 @@
PORT=8080
REPO=
LOCALHOST_PROXY=

40
.vscode/tasks.json vendored
View File

@ -3,8 +3,35 @@
"tasks": [
{
"type": "shell",
"label": "Copy link",
"command": "node ./tasks/copy-link.js \"${selectedText}\"",
"label": "Organize steps",
"command": "node ./tasks/organize-steps.js \"${file}\"",
"presentation": {
"reveal": "silent"
},
"problemMatcher": []
},
{
"type": "shell",
"label": "Preview markdown",
"command": "node ./tasks/preview-markdown.js \"${relativeFile}\"",
"presentation": {
"reveal": "silent"
},
"problemMatcher": []
},
{
"type": "shell",
"label": "Preview markdown (using reverse proxy)",
"command": "node ./tasks/preview-markdown.js \"${relativeFile}\" use-proxy",
"presentation": {
"reveal": "silent"
},
"problemMatcher": []
},
{
"type": "shell",
"label": "Proxify link",
"command": "node ./tasks/proxify-link.js \"${selectedText}\"",
"presentation": {
"reveal": "silent"
},
@ -27,15 +54,6 @@
"reveal": "always"
},
"problemMatcher": []
},
{
"type": "shell",
"label": "Organize steps",
"command": "node ./tasks/organize-steps.js \"${file}\"",
"presentation": {
"reveal": "silent"
},
"problemMatcher": []
}
],
"inputs": [

26
gfm.hbs Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/github-markdown.css">
<style>
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
</style>
</head>
<body>
<article class="markdown-body">
{{{markdown}}}
</article>
</body>

View File

@ -1,9 +1,65 @@
"use strict"
import "dotenv/config"
import express from "express"
import got from "got"
import fsExtra from "fs-extra"
import prettier from "prettier"
import handlebars from "handlebars"
const { pathExists, readFile } = fsExtra
const gfm = handlebars.compile(await readFile("./gfm.hbs", "utf8"))
const app = express()
app.get("/github-markdown.css", async (req, res, next) => {
try {
const path = "./node_modules/github-markdown-css/github-markdown.css"
const exists = await pathExists(path)
if (exists === false) {
return next()
}
const css = await readFile(path, "utf8")
res.setHeader("Content-Type", "text/css")
return res.send(css)
} catch (error) {
console.log(error)
return res.sendStatus(500)
}
})
app.get("*.md", async (req, res, next) => {
try {
const path = `.${req.url}`
const exists = await pathExists(path)
if (exists === false) {
return next()
}
const markdown = await readFile(path, "utf8")
const response = await got.post("https://api.github.com/markdown", {
json: {
mode: "gfm",
text: markdown,
},
})
res.setHeader("Content-Type", "text/html")
return res.send(
prettier.format(
gfm({
markdown: response.body,
}),
{
parser: "html",
}
)
)
} catch (error) {
console.log(error)
return res.sendStatus(500)
}
})
app.use(
express.static(".", {
dotfiles: "ignore",

945
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,12 @@
"dotenv": "^16.0.0",
"express": "^4.17.2",
"fs-extra": "^10.0.0",
"github-markdown-css": "^5.1.0",
"got": "^12.0.1",
"handlebars": "^4.7.7",
"npm-check-updates": "^12.3.0",
"open": "^8.4.0",
"prettier": "^2.5.1",
"readdirp": "^3.6.0",
"youtube-player-screenshot": "^0.3.0"
},

View File

@ -1,21 +0,0 @@
"use strict"
import "dotenv/config"
import clipboard from "clipboardy"
if (process.argv.length !== 3 || !process.argv[2].match(/http(s)?:\/\//)) {
console.info("Usage: node copy-link.js selectedText")
process.exit(1)
}
var text = process.argv[2]
if (process.env.LOCALHOST_PROXY) {
text = text.replace(
"https://raw.githubusercontent.com/sunknudsen/privacy-guides/master",
process.env.LOCALHOST_PROXY
)
}
clipboard.write(text)

18
tasks/preview-markdown.js Normal file
View File

@ -0,0 +1,18 @@
"use strict"
import "dotenv/config"
import open from "open"
if (process.argv.length < 3 || !process.argv[2].match(/\.md$/)) {
console.info("Usage: node open-preview.js file")
process.exit(1)
}
const file = process.argv[2]
const options = process.argv[3]
if (options === "use-proxy") {
open(`${process.env.LOCALHOST_PROXY}/${file}`)
} else {
open(`http://localhost:${process.env.PORT ?? 8080}/${file}`)
}

26
tasks/proxify-link.js Normal file
View File

@ -0,0 +1,26 @@
"use strict"
import "dotenv/config"
import clipboard from "clipboardy"
if (process.argv.length !== 3 || !process.argv[2].match(/http(s)?:\/\//)) {
console.info("Usage: node copy-link.js selectedText")
process.exit(1)
}
if (
process.env.REPO === undefined ||
process.env.LOCALHOST_PROXY === undefined
) {
console.info("Missing environment variables")
process.exit(1)
}
const selectedText = process.argv[2]
clipboard.write(
selectedText.replace(
`https://raw.githubusercontent.com/${process.env.REPO}/master`,
process.env.LOCALHOST_PROXY
)
)