Last active
April 16, 2024 08:37
-
-
Save max-lt/76de5a9765fa713cc5a6e267914ebba6 to your computer and use it in GitHub Desktop.
Nginx config to render markdown files (client side)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| location /__special { | |
| internal; | |
| allow all; | |
| root /usr/share/nginx/html/__special; | |
| } | |
| location = /__md_file { | |
| internal; | |
| allow all; | |
| add_header 'Vary' 'Accept'; | |
| default_type text/html; | |
| alias /usr/share/nginx/html/__special/md-renderer.html; | |
| } | |
| location ~* \.md { | |
| error_page 418 = /__md_file; | |
| add_header 'Vary' 'Accept'; | |
| if (!-f $request_filename) { | |
| break; | |
| } | |
| # if no "text/markdown" in "accept" header: | |
| # redirect to /__md_file to serve html renderer | |
| if ($http_accept !~* "text/markdown") { | |
| return 418; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"> | |
| <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.min.js"></script> | |
| <style rel="stylesheet">code.error {line-height:2rem;font-size:2rem;color:#F43;padding:2rem;display: block;}</style> | |
| <script> | |
| const FILENAME = location.pathname; | |
| const set = (t) => document.getElementById('content').innerHTML = t; | |
| const pull = fetch(FILENAME, {headers: {'Accept': 'text/markdown'}}) | |
| .then((res) => { | |
| if (!res.ok) | |
| throw new Error(`${res.statusText} (${res.status})`); | |
| return res.text() | |
| }) | |
| </script> | |
| <script defer> | |
| pull.then((text) => set(marked(text))) | |
| .catch((err) => set(`<code class="error">Failed to load ${FILENAME}: ${err.message}</code>`)) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container box" style="margin:5rem auto;padding:4rem"> | |
| <div id="content"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Cool!
I made something related that works in Apache:
https://gist.github.com/sffc/4789c562f636260a49f9e6bd26f39557