dillonzq / LoveIt

❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
https://hugoloveit.com
MIT License
3.38k stars 1.07k forks source link

echarts: simplify usage and remove current limitations #735

Open mij opened 2 years ago

mij commented 2 years ago

Hello folks,

The patch attached resolves, in a fully backwards-compatible way, the problem of echarts in LoveIt unable to support Javascript.

The patch supports this new form of using the shortcode:

{{< echarts file="charts/mychart.js" >}}{{< /echarts >}}

The shortcode expands this to a new attribute

<div class="echarts" ... data-filename="charts/mychart.js" ...>

and when the page is loaded, theme.js automatically recognizes which divs to load as a JS module vs with embedded specification, based on the presence of that data-filename attribute.

The documentation is updated accordingly, to list both ways of use: the "embedded" way (current), and the "referenced" way (with JS module).

As charts become non-trivial, the embedded way quickly become unusable, not only because it prevents using JavaScript which is essential to non-trivial charts, but also because the effort of converting specs back and forth from JavaScript to JSON/YAML/TOML when prototyping the chart with echart's editor becomes huge.

There are additional benefits of this approach:

Nota bene: I haven't committed the auto-generate assets/js/theme.js.

Let me know if there's any additional adaptation you'd like to see in this.

sonarcloud[bot] commented 2 years ago

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

No Coverage information No Coverage information
0.0% 0.0% Duplication

mij commented 1 year ago

Hello folks!

Is there any more input or code I could provide to encourage merging this patch?

A brief memo:

Thanks!