Importing content from a markdown-file (.md)

1

I found this example here: Importing content from a text file (.txt)

This is a very nice example on how to import text in hype-elements with jquery, quite straigtforward and simple.

Yet on a clients request I would like to integrate with a MarkDown approach for even more transparent user access.

Please visit:
https://markdown-it.github.io/

Have any in this forum hype-examples combining text-import in hype-outputs with MarkDown-formatting – or clues on how to?

Kind regards, Mikael

2

I would think you would use the import method to get the .md data then parse the result using a markdown to html parser.

A quick example…

mdTest.hype.zip (18.0 KB)

1 Like
3

Strapdown is definitely something to look into: https://naereen.github.io/StrapDown.js/

For client-editability, you would likely be importing (as an HTML widget) the external .html file. That HTML file would look something like this, where the Markdown content is in the middle:

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>« My first test with StrapDown.js »</title></head><body><textarea theme="cyborg">
# This is a Markdown document

You can now write your web page in Markdown.

</textarea><script type="text/javascript" src="https://cdn.rawgit.com/Naereen/StrapDown.js/master/strapdown.min.js"></script></body></html>
1 Like
4

@Markhunte
@Daniel

A big thank you for your kind responses. You have been enormously helpful and Hype is indeed a great “Swiss Army Knife” for creative designers! Using md-files with Hype works seamless.

Beneath, at the very end of this post, though, I have an additional question you perhaps may answer?

I have tried to review your feedback and combined the md-file with css-styles in the uploaded hype-doc. The StrapDown-approach looks very appealing, but for the moment I couldn’t figure out to incorporate it correctly for my needs (ie. with styles).

Also I guess – even though very comprehensible – the html-file vs md-file will appear more transparent in use to inexperienced persons.

Thus I here upload my own “reverse engineered version”, where I can control the commonmark typography with an imported css-sheet (in Hype resources).

But how do I manage, if I need an X-number of editable boxes and files?

Do one have to repeat the entire js-function (copypaste) X-times with different md-files and id’s?
You may notice I’m not particular stellar in javascript :wink:

Therefore – again: Thanks a lot!

Kind regards Mikael

markdown_css.hype.zip (169.0 KB)

5

If I understand you correctly.

You want to have more than one md file written into a info box at the same time.

When you have code that you do not want to repeat a load of times just because some values are changed but the function is the same you would normally try and put the code in to a sub routine . We call them functions.

A function can be constructed in a few ways but in this instance we want it;

Does not run automatically but is called each time.
Accepts some arguments,
and carries out the same task each time but using the arguments.

For this example.

All we need to to do is put the current code in a function. We only need to slightly change the code to use arguments we pass to it when we call it.

The arguments we need are; a md file name and the corresponding inbox id.

So our new function would look like this.

    function loadMDs(box,file){
    	var txtFile = new XMLHttpRequest();
    txtFile.open("GET", "${resourcesFolderName}/" + file , true);
    txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
    if (txtFile.status === 200) { // Makes sure the file exists.
    allText = txtFile.responseText;
    //lines = txtFile.responseText.split("\n"); // Will separate each line into an array
    //var customTextElement2 = document.getElementById('f0');
    //customTextElement2.innerHTML = txtFile.responseText;

    	var reader = new commonmark.Parser();
    var writer = new commonmark.HtmlRenderer();
    var parsed = reader.parse(txtFile.responseText); // parsed is a 'Node' tree
    // transform parsed if you like...
    var result = writer.render(parsed); // result is a String

    hypeDocument.getElementById(box).innerHTML = result
    }
    }
    }
    txtFile.send(null);

 }

Here you can see we are using two arguments box,file.

So how do we pass these in and call the function.

First, we have to obtain the values for the arguments.

In this case it is not info we have to go hunting for, you already know what the file names and ids are.
We can construct a named array using them.

we for instance have two elements with ids and two md files.

Ids names are :infobox, infobox2
md files names are :README.md,README2.md

So we construct the named array to use the ids as an object name/key and the file names as the value.

    //— keys are the same used for ids and values are names of md files 
   ` var infoboxes = {"infobox":"README.md","infobox2":"README2.md"}`

A named array can hold different types of objects. So notice that ours are strings ( including the keys just to be safe)

Now we have our named array we need to process each object in it and pass them to the function to work on.
Remember all we are doing here is getting each id and file name and passing it to the function one at a time.

 for(var key in array)  
   functionName(arguments ) 
 }

We use a simple for loop to parse the objects in the named array and call the functions with the id/key, filename /value as arguments.

So our for loop would like this with two arguments.

  for(var infobox_key in infoboxes) {
    loadMDs(infobox_key,infoboxes[infobox_key])
    }

Here infobox_key = an infobox name/key

Ou array only has two objects so the for loop will call the function twice, each time changing which id and file name the function uses.

Full code.

//— keys are the same used for element ids and values are names of md files 
//-- {key,value}
var infoboxes = {"infobox":"README.md","infobox2":"README2.md"} 
 

for(var infobox_key in infoboxes) {
loadMDs(infobox_key,infoboxes[infobox_key])

}


function loadMDs(box,file){
	var txtFile = new XMLHttpRequest();
txtFile.open("GET", "${resourcesFolderName}/" + file , true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
//var customTextElement2 = document.getElementById('f0');
//customTextElement2.innerHTML = txtFile.responseText;

	var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(txtFile.responseText); // parsed is a 'Node' tree
// transform parsed if you like...
var result = writer.render(parsed); // result is a String

hypeDocument.getElementById(box).innerHTML = result
}
}
}
txtFile.send(null);

 }

mdTest_mhv2.hype.zip (19.7 KB)

more on names arrays also known as Associative Arrays

more on functions

https://www.w3schools.com/js/js_functions.asp

more on loops and iteration

2 Likes
6

–> A minor update. Please read at the bottom …

Tremendous! Thanks for the wonderful thorough description. I will go study your feedback in details with pleasure.

Yet, an important overall matter: Compatibility. I noticed that your initial hype-example (as well as my own follow up version) is covered by Firefox (Mac, Win) but does not work on Chrome (Mac, Win) nor Safari or MS Explorer: the md-file content do not display. Is there anything I can do?

–> Update: this goes only for when youre editing the md-file locally. Uploaded to a server stuff seems to display correctly on all mentioned browsers. How comes?:thinking:

mdTest.hype.zip (18.0 KB)

7

I am assuming you mean when the file is not in the hype resources.

This is a security thing in regards to Cross-origin resource sharing ( CORS ) and is the main reason I put the file in the resources to show in the example how things work.
But basicly Browsers will block loading files that origins are different from the main site unless you have things setup to do so on your server.

So trying to load a file from a local HD can prove to be a pain. a few browsers have menus you can use to disable the checks so you can develope..

This is a big subject so It is best you google it to find out how it works as there is a lot out there.

ps I added a v2 file to the multiple md file post

1 Like
8

Dear @MarkHunte

Again, a big thank you for your kind, thorough help.
The comprehensive step-by-step information is indeed not wasted on me! My question yet fully solved, I promise not just to grab your examples and rig them for my own purpose without trying to gain more knowledge of the matter.

There are even more creative possibilities with Hype if one has just a bit more grasp on JS. Using a Hype document as demonstration is actually a very solid didactic approach where one gets a clear “physical” idea of how “code stuff is put”.

Also I appreciate a lot the url references you stipulate about objects, functions and loops. They are comprehensively well written for us learners.

Kind regards,
Mikael

My own humble test with four boxes:
mdTest_mhv2_adjusted_03.hype.zip (127.5 KB)

2 Likes