clasp icon indicating copy to clipboard operation
clasp copied to clipboard

Feature Request: Convert Markdown (*.md) Files to HTML on Push

Open dskeithbuck opened this issue 5 years ago • 6 comments

Google Apps Script allows you to easily create dialogs with HTML (.html). However, some things like READMEs and CHANGELOGs are easier and more likely to be maintained as Markdown (.md) files.

I'm imagining a workflow where I could write some Typescript like:

function showChangelog() {
    var html = HtmlService.createHtmlOutputFromFile('CHANGELOG')
        .setWidth(480)
        .setHeight(640);
    SlidesApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
        .showModalDialog(html, "Storyboard");
}

and a file named CHANGELOG.md would be transformed into HTML with a style that matches the look of Google Slides/Docs.

# Changelog

# Version v1

* Initial Release
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
    />
    <style>
      .branding-below {
        bottom: 56px;
        top: 0;
      }
    </style>
  </head>
  <body>
    <h1 id="storyboardchangelogroadmap">Changelog</h1>
    <h2 id="versionv1">Version v1</h2>
    <ul>
      <li>Initial Release.</li>
    </ul>
  </body>
</html>

dskeithbuck avatar Oct 23 '19 22:10 dskeithbuck

This would be pretty cool, and not saying it shouldn't be done, but I'd also say you could do this with an off-the-shelf CLI interpreter ahead of a clasp push operation. Write your own local script to compile your HTML, copy it to the right places, and push your results up.

artofthesmart avatar Nov 12 '19 23:11 artofthesmart

I think the tricky part is what format to use when converting the .md to .html. Not everyone would want it in a style that matches Google Slides/Docs.

What you could do (I do something similar) is have a .html file in your project that has your text in whatever format you want, like Mark Down, and a JavaScript function to "process" it before sending to HtmlService. That way, I can create as many .html files as I want and all will have a similar look and feel. And if I need to change the L&F I just need to update the JavaScript function/processor.

imthenachoman avatar Dec 07 '19 03:12 imthenachoman

Also, it would get very tricky to "pull" the data back into an .md.

imthenachoman avatar Feb 28 '20 15:02 imthenachoman

The pull issue isn't really an issue if you consider that .gs cannot be pulled-back into .ts either ;)

Next step is likely for the people interested to identify a solid markdown-to-html solution which includes sanitisation.

PopGoesTheWza avatar Feb 28 '20 16:02 PopGoesTheWza

Unfortunately it's not clear still.

For an example why should I use https://ssl.gstatic.com/docs/script/css/add-ons1.css instead of something else?

showdown is pretty tools without a hardcode.

oshliaer avatar Mar 13 '20 18:03 oshliaer

I accomplish this exact step using Pandoc from the command line. I use a wrapper script around clasp push that does things like update some timestamp variables for each push as well as convert my *.md files to *.html which are then scooped up by clasp perfectly.

In place of clasp push, I run ./clasppush. An excerpt of which is below:

# render the README.md file to HTML for display in the tool
pandoc  -d ./pandoc/readme.yaml README.md
if [ $? == 0 ]; then
    echo "Docs created"
else
    echo "Error: pandoc failed to render README.md"
fi

# execute the actual clasp push
clasp push -f

# check if clasp push was successful
if [ $? -ne 0 ]; then
    echo "Error: clasp push failed"
    echo "Nothing pushed"
    exit 1
fi

# display status message
echo "Pushed AOD code  v$AOD_SCRIPT_VERSION"

#end
exit 0

The ./pandoc/readme.yaml config file contains the options for the pandoc command:

from: commonmark_x
to: html5
output-file: README.html
standalone: true
table-of-contents: false
metadata:
    lang: en-US

PhilomathJ avatar May 02 '24 17:05 PhilomathJ