Clean up templates and CSS handling 🧽

1. Create new, minimal `default-template.html` - when using for plain conversion (rather than preview), we don't need all that bulk (CSS) - this keeps the default output short and focused 2. Rename the previous default template to `preview-template.html` - this one is used for previews by the Vim plugin - it now includes the CSS directly 3. CSS insertion is removed from the command-line tool
pmeinhardt · Apr 19, 2024 · d11cb68 · d11cb68
1 parent d44a23a
commit d11cb68
Show file tree

Hide file tree

Showing 13 changed files with 1,274 additions and 1,245 deletions.
diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml
@@ -14,15 +14,15 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Update CSS
-        run: script/update-css
+      - name: Update preview template
+        run: script/update-preview-template
       - name: Create or update pull-request
         id: create-pull-request
         uses: peter-evans/create-pull-request@v4
         with:
-          title: Update CSS 💅
+          title: Update preview template 💅
           body: https://github.com/sindresorhus/github-markdown-css
-          commit-message: Update CSS 💅
+          commit-message: Update preview template 💅
           delete-branch: true
           labels: automated pull-request
       - name: Print pull-request details

diff --git a/examples/basic.md b/examples/basic.md
@@ -8,12 +8,11 @@ $ maxdown input.md
 <!DOCTYPE html>
 <html>
   <head>
-...
+    <meta charset="utf-8">
     <title>Preview</title>
     <base href="">
-...
   </head>
-  <body class="markdown-body">
+  <body>
     <p>Hello <strong>Markdown</strong>!</p>
   </body>
 </html>
@@ -33,7 +32,7 @@ $ maxdown --title "Pizzazz" input.md
     <title>Pizzazz</title>
 ...
   </head>
-  <body class="markdown-body">
+  <body>
     <p>Hello <strong>Markdown</strong>!</p>
   </body>
 </html>
@@ -53,7 +52,7 @@ $ maxdown --base "https://github.com/pmeinhardt/maxdown" input.md
     <base href="https://github.com/pmeinhardt/maxdown">
 ...
   </head>
-  <body class="markdown-body">
+  <body>
     <p>Hello <strong>Markdown</strong>!</p>
   </body>
 </html>

diff --git a/examples/read-stdin.stdout b/examples/read-stdin.stdout
@@ -3,7 +3,7 @@
   <head>
 ...
   </head>
-  <body class="markdown-body">
+  <body>
     <p>Hello I/O!</p>
   </body>
 </html>

diff --git a/examples/write-file.out/output.html b/examples/write-file.out/output.html
@@ -3,7 +3,7 @@
   <head>
 ...
   </head>
-  <body class="markdown-body">
+  <body>
     <p>Just here for the input.</p>
   </body>
 </html>
diff --git a/plugin/maxdown.vim b/plugin/maxdown.vim
@@ -29,7 +29,6 @@ function! s:convert() abort
 
   let args = [
         \ '--dangerous',
-        \ '--template', shellescape(s:path . '/src/minimal-template.html'),
         \ '--title', shellescape(expand('%:t')),
         \ '-',
         \ ]
@@ -44,6 +43,7 @@ function! s:invoke(dest, source, bnum) abort
         \ '--dangerous',
         \ '--base', shellescape(a:source),
         \ '--output', shellescape(a:dest),
+        \ '--template', shellescape(s:path . '/src/preview-template.html'),
         \ '-'
         \ ]
 

diff --git a/script/update-css → script/get-github-markdown-css b/script/update-css → script/get-github-markdown-css
@@ -9,9 +9,7 @@ BASE="https://raw.githubusercontent.com/sindresorhus/github-markdown-css/main"
 CSS="$BASE/github-markdown.css"
 LICENSE="$BASE/license"
 
-{
-  printf '/*\n'
-  curl --silent --show-error "$LICENSE"
-  printf '*/\n\n'
-  curl --silent --show-error "$CSS"
-} > src/github.css
+printf '/*\n'
+curl --silent --show-error "$LICENSE"
+printf '*/\n\n'
+curl --silent --show-error "$CSS"
diff --git a/script/update-preview-template b/script/update-preview-template
@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -o errexit
+set -o nounset
+set -o pipefail
+
+cd "$(dirname "$0")/.."
+
+TEMPLATE="src/preview-template-template.html"
+OUTPUT="src/preview-template.html"
+
+CSS="$(script/get-github-markdown-css | sed '2,$s/^/      /' | sed 's/ *$//')"
+export CSS
+
+# shellcheck disable=SC2016
+envsubst '${CSS}' < "$TEMPLATE" > "$OUTPUT"
diff --git a/src/default-template.html b/src/default-template.html
@@ -4,15 +4,8 @@
     <meta charset="utf-8">
     <title>{{ title }}</title>
     <base href="{{ base }}">
-    <style>
-      .markdown-body {
-        padding: 2rem;
-      }
-
-      {{ default-css }}
-    </style>
   </head>
-  <body class="markdown-body">
+  <body>
     {{ content }}
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
       <head>
     ...
       </head>
-      <body class="markdown-body">
+      <body>
         <p>Hello I/O!</p>
       </body>
     </html>
@@ Expand Down @@