Html Question posted in
Some basic documentation can be found here.

Html – How to implement this npm library with javascript and NodeJS

I’m getting back into internet programming after taking a class on it a few years ago and I’m trying to implement a library into my website.
For this project, I want to use these animated diagrams of Japanese kanji. I’m using a library from here which I currently have working on my webpage: [https://kanji.sljfaq.org/kanjivg.html(https://kanji.sljfaq.org/kanjivg.html)

The problem I’m running into is there’s a separate library that actually animated the diagrams. I’m sure it’s just my lack of knowledge about NodeJS but I can’t figure out how to get it to work. Here’s the library I’m trying to use:
[https://github.com/nihongodera/kanjivganimate]https://github.com/nihongodera/kanjivganimate)

Here’s what I have for my app.js script:

const express = require('express');
const path = require('path');

const app = express();
app.set("view engine", "ejs");
// Serve static files
app.use(express.static(path.join(__dirname, 'public')));
app.use('/kanjivg', express.static(path.join(__dirname, 'kanjivg')));

//routes
app.get('/', (req, res) => {
    res.render('index');
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Here’s my main EJS file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KanjiVG Animation</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <h1>KanjiVG Animation</h1>
    <svg id="kanji-svg" class="kanjiVG" width="300" height="300">
        <!-- SVGs will get loaded by script.js here  -->
    </svg>
    <script src="script.js"></script>
</body>
</html>

And here’s the script.js I use to load the actual diagrams:

window.onload = function() {
    const kanjiSVG = document.getElementById('kanji-svg');

    const kanjiCharacter = '好'; 

    var charCode = kanjiCharacter.charCodeAt(0).toString(16);
    // The char codes for the svg files are 5 characters long with leading zeros
    while (charCode.length < 5) charCode = "0" + charCode;

    // Load SVG file dynamically
    fetch(`/kanjivg/${charCode}.svg`)
        .then(response => response.text())
        .then(svgText => {
            kanjiSVG.innerHTML = svgText;

            //Here I can add in svganimate once you've managed to get the SVGs loaded
        })
        .catch(error => {
            console.error('Error fetching SVG:', error);
        });

    new KanjivgAnimate('.kanjiVG');
};

The new KanjivgAnimate('.kanjiVG'); part throws an error naturally because I don’t have it included however I don’t know where to include it.

Putting const KanjivgAnimate = require('kanjivganimate'); in app.js doesn’t do anything and putting it in script.js says I can’t use require functions in this script. So how exactly do I do this? It seems like I need to call it in app.js but I also need to call it after the page has rendered. I tried putting it after res.render('index'); in app.js but it just wouldn’t run it.

Tags:

2

Answers


  1. 0

    You need to include this in the frontend using a script tag. This is not a Node.js library. It’s pure HTML. Make sure it gets loaded before your own script.js.

    The script (from the github project) also expects to be processed using a bundler like Webpack or Vite. However, it looks like the project includes a ‘minified’ version of the script so trying that could work as well.

    Login or Signup to reply.
  2. 0

    Use a bundler as webpack to import and bundle the script, or include it via a CDN and tag script js directly in your HTML.
    Your scripts are loaded after the DOM is ready.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search