Suppose I want to serve, say, D3.js (from https://d3js.org/) I'd have on my HTML page served from nodejs/express server with an ejs template perhaps,
<script src="assets/js/d3.v5.min.js"></script>
Can I have some recommendations for a user interacting with D3.js in this type of client/server situation with Nim? Thanks.
Source Code Filter is just a way to write down Nim code that deals with raw text a lot. It gets converted into regular Nim code. So you can define procs, use Nim types, pass values, and do all the things you can in regular Nim code, in the code that uses Source Code Filter.
So, to answer your question, something like this can be done:
#? stdtmpl(subsChar = '$', metaChar = '#')
#import xmltree
#
#proc `$!`(text: string): string = escape(text)
#end proc
#
#proc renderMain*(color, fontSize, body: string): string =
# result = ""
<!DOCTYPE html>
<html>
<head>
<title>Tweeter written in Nim</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="../assets/js/d3.v5.min.js"></script>
<script>
d3.select('h3').style('color', '$color');
d3.select('h3').style('font-size', '$fontSize');
</script>
</head>
<body>
<div id="main">
${body}
</div>
</body>
</html>
#end proc
@moigagoo, thank you.
Only now I noticed a basic issue. I am using the example code for Tweeter from Chapter 7 of the Nim for Action book. I hadn't noticed this when I compiled and ran this code, everything worked except that it was not finding and applying the ./public/style.css
In the book's example, ./src/views/general.nim has this line but the style.css is not being read from ./public/style.css
<link rel="stylesheet" type="text/css" href="style.css">
It is not finding the d3.v5.min.js file either that I introduced for my test in the general.nim file:
<script src="../assets/js/d3.v5.min.js"></script>
Relative to the root folder where should style.css or d3.v5.min.js be? Some alternate folder locations doesn't seem to fix the problem.
The confusion (for me) is coming from here -- if you download Tweeter Chapter 7 source code from the github location and simply cd to the Tweeter folder (I am doing this on Fedora 27 Linux, if this matters) and do,
$ nimble build
it gives the warning
Warning: Package 'Tweeter' has an incorrect structure. It should contain a single directory hierarchy for source files, named 'Tweeter', but file 'createDatabase.nim' is in a directory named 'src' instead. This will be an error in the future.
If you rename src/tweeter.nim to src/Tweeter.nim then the "nimble build" warnings gets more confusing -- it doesn't recognise the src/Tweeter.nim file. So I abandoned the nimble build and went for the direct "nim c" compilation in the src directory. At this point I have it working overall but its not finding any static files as I mentioned before.It's just a warning, have you tried ignoring it? :)
The missing styles is likely because you're not running it in the right directory. The public directory needs to be in the current work dir.
Thanks for all your suggestions, @dom96 and @moigagoo, for steering me right.
Everything falls correctly into place with this single update to the nimble dot file and then let nimble do the build correctly.
srcDir = "src"
bin = @["tweeter"]
Relative to the root folder where should style.css or d3.v5.min.js be? Some alternate folder locations doesn't seem to fix the problem.
This to avoid arbitrary directories/files access from current public path.
Refer to this https://forum.nim-lang.org/t/4028
I believe this vulnerability happened too to some webserver years ago (I forgot which tho)