Hello again to all the esteemed members.
I had been away for a few weeks working out on whatever I had learnt about goHugo. Thanks to you all for assisting me in my learning.
Now after assuming that I had learnt some good stuff about goHugo, in the days I was away, I did start learning Plotly. And created a few graphs/charts - and let me be honest, coming from a Humanities background, I have had a tough time trying to figure out the Terminology.
After I had a few charts ready, I somehow managed them to integrate with goHugo and the outputs are quite good at least this far. But as always, you cannot learn without a Guide or a Trainer. So I messed up somethings.
When I use the following shortcode in the .md file (I have one called bar.md which displays a bar chart) -
{{< plotly json="/test/json/3dscatter.json" height="800px" >}}
This works perfectly fine.
However when I use the shortcode in the single.html file, I get errors during starting to run the server (code has been provided below) -
ERROR 2022/05/11 01:31:43 "E:\Hugo\l_plotlyhugo\layouts\charts\single.html:18:1": parse failed: template: charts/single.html:18: unexpected "<" in command
I am unable to find any instance where the shortcodes are to be used on the single.html. But I think this should be permitted because in a real case scenario, when you have others who give you the .md files in bulk, it would not be possible to keep editing those to include the shortcode.
In case you are interested to view my .md file which works perfectly fine -
---
title: "Bar"
date: 2022-05-07T02:34:44+05:30
draft: false
---
{{< plotly json="/test/json/bar.json" height="800px" >}}
And in case you are interested in the codes that I have on my single.html that creates/generates the error -
{{ define "main" }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
{{ $nameOfFile := lower .File.BaseFileName | humanize}}
{{ $nameOfFile = print $nameOfFile ".json" }}
{{< plotly json="/test/json/$nameOfFile" height="800px" >}}
{{ end }}
And finally, this is the shortcode itself (in the layouts/shortcodes folder named plotly.html)
{{ $json := .Get "json" }}
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}};"></div>
<script>
d3.json({{ $json }}).then(function (fig) {
Plotly.newPlot('{{$json}}', fig.data, fig.layout, { responsive: true });
});
</script>
Notes:
- I am using plotly-1.52.3.min.js because I read a reply from @jmooring that d3.js has been disabled from Plotly v2 onwards and the codes I am using for this are from this page - Plotly & Hugo | Mert Bakır
- The “test” had to be included without which, the jsons would not be fetched and graphs would not show on the live server (see below for the URL I have for testing my generated HTML on server - it is in a subdirectory called “test”)
Thankfully, this time, a friend of mine has allowed me to use some of his webspace and so my working graph is here - Plotly and Hugo.
Thank you again for helping me out here.
Have a great day.
Sid.