embed visualization with vtk.js in a personal blog (hexo)

Web
1

Dear Experts,
I am maintaining a personal blog with hexo framework. Now I would like to showcase some of my past simulation result via vtk.js. I am able to run the vanilla vtk example. However, I fail to render it in my hexo-based blog. Does anyone have experience with it? I guess I have to enable some functionality in my _config.yml file in hexo.
Thanks.

2

You will have to provide more information explaining what kind of error/issue you are running into as well as what you’ve been doing to get there.

Without much information, it will be hard to guide you…

3

Thanks for reminding.

I did the following thing for my hexo blog (test).

  1. I initiate an empty directory with hexo init
  2. in this folder I follow everything in vanilla vtk.js example
  3. run npm run stat can show me the correct cone
  4. in my hexo blog hello-word.md post I insert a link as
[test vtk](/javascript/cone.js)
  1. then I make a folder named javascript/ in my hexo source/ folder, and copy the cone example into it as cone.js
  2. when I start my blog again with hexo generate and hexo server. and click on this cone.js link. It only shows up the code, not the rendered vtk.js result.

I also tried installing a plug-in called (hexo-webpack)[GitHub - cowsay-blog/hexo-webpack: Yet another Hexo plugin to enable awesome Webpack package system in your Hexo site.]. Without configuring it further, I still cannot render my cone.js when starting hexo server.

Any help will be appreciated.
Thx.

4

it seems that might be a related question to the hexo project on how to enable external JS code.
Another approach can be to use an iframe to serve/access your vtk.js piece of code.

5

I also tested the method in https://leimao.github.io/blog/Hexo-Blog-Add-JavaScript/. This blog post mentioned the method using iframe. When I tried to use it, it still did not give me the rendered result (it output plain text).

Do I need to add some script to launch vtk.js script? I noticed that in your vanillla example, the dist/index.html contains a line calling ./main.js, which I cannot find. The real code I found is src/index.js. I guess this main.js did some initialization with webpack?

By the way, the folder structures are different between my hexo blog and your vanilla example.
In hexo blog it normally

.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
└── themes

And in your vanilla example it is like this

.
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── src
└── dist

with the entry folder as src/ and dist/. Does it influence the rendering of vtk.js?

By the way, I saw that you changed the package.json by adding some webpack code. Does it packaging the simple cone example to make it run/render, so I have to do some similar things with hexo blog?

Thanks for your help.

6

If you can write your vtk.js code as a standalone html file, then you should be able to include those as iframe in your blog.

If not, you will need to build your code and figure out the hexo integration.

7

Great! It works!

I followed the blog post above and added this html file in the skip_render list of hexo _config.yml file as

skip_render: 
   - "./source/test.html"

And in my markdown post, I just used

<iframe src="/test.html" width="100%" height="1000" style="border:1px solid black;">
</iframe>

I tested with hexo minima theme.

I saw that in this standalone html it loaded scripts from the internet, .../polyfill.js and .../vtk.js. I actually installed @kitware/vtk.js. How should I load the corresponding file in order to make use of the full API of your tool?

Thanks.

8

Just build your own client code and embed it the same way you embedded that html file.

At that point it is up to you to write your code with which ever toolchain you want to use. You can look at that guide which assume a webpack build but you can use vite or anything else at that point. Anything you feel comfortable building your JS app with will work fine. But if you don’t know how to write a JS application, you can probably find tutorials on the internet for that.