cybersonic / luceedocs

Documentation website and generator for Lucee Server
2 stars 4 forks source link

Adds TryCF.com Editor/Runner #22

Closed abramadams closed 9 years ago

abramadams commented 9 years ago

This adds the trycf.com editor/runner box to provide live code samples for tags and functions based on the .json data. Currently only abs.json (for functions) and cfdump.json (for tags) have the added "example" key that will drive the code runner.

To add a live code sample to a function/tag page just add the "example" key to the .json file associated with that tag/function (i.e. /export/4.5.1.000/json/functions/abs.json for the abs function). The available options are (with defaults):

var opts = {
        width: "100%", // editor width in px or %
        height: "150px", // editor height in px or %
        showOptions: true, // true = show/false = hide. Controls option button to change theme/engine
        showError: true,  // true = show/false = hide. Shows or supresses error messages.
        code: "", /* string or array containing code to render inside editor.
                     If an array it will first be parsed into a return delimited string (for formatted display).
                     This is to make JSON friendly formatted code.  Otherwise everything has to be in one line.
                     Array Example:
                     code: [
                     "<cfscript>",
                     "    dump(server);",
                     "</cfscript>",
                     ]
                  */
        codeGist: "", // Gist ID of code.  If exists, will override any passed in "code" attribute
        setupCode: "", // string or array (same as "code").  This code is used for exposing any variables/functions that the user will not see but can interact with.
        setupCodeGist: "", // Gist ID of setup code. If exists, will override any passed in "setupCode" attribute
        showResults: true // true = show/false = hide.  If false will render a single code formatted box without the ability to run the code.
    }

Here's a sample from abs.json where a GistID was provided instead of an inline code sample:

"example": {
    "height" : "150px",
    "defaultEngine": "lucee",
    "codeGist": "a2b43a10500787a3a5fe"
}

And here's an example from cfdump.json where the code was provided inline:

"example": {
    "height" : "320px",
    "defaultEngine": "lucee",
    "title": "Sample",
    "code": [
    "<!--- cfDump tag example --->",
    "<cfdump",
    "      var=\"#server.lucee.version#\"",
    "      label=\"Dump from CFDump Tag\">",
    "",
    "<cfscript>",
    "   // Script alternatives:",
    "   writeDump( var = \"#dateFormat( now(), 'medium' )#\",",
    "              label = \"Dump from Script\" );",
    "",
    "   // Below is not Adobe CF compatible:",
    "   dump( var = \"#dateFormat( now(), 'medium' )#\",",
    "         label = \"Dump from Script\" );",
    "</cfscript>"
    ]
}

NOTE: the inline code has to be escaped to be JSON friendly. I allow the "code" and/or "setupCode" values to be either a plain string (one long line of code with escaped carriage returns) or an array (as demonstrated above). The array method is simply to make editing the JSON more pleasant.

cybersonic commented 9 years ago

This is a great commit, I am just commiting it to the develop branch for the moment so that I can merge it and then we will push a bunch of changes to live

cybersonic commented 9 years ago

I have merged this into the develop branch instead. Should see it in a few days once I get some of the gist functionality in there.