Generator Design

I’ve added JS and JSON folders to an ASSETS folder via the Hostinger File Manager to my site.

Now I’m downloading VS Code to add some placeholder data files:

Artefacts:

generator.js

const btn = document.getElementById('generate-btn');
const display = document.getElementById('display-area');

btn.addEventListener('click', () => {
    // Fetch the JSON file from your simple path
    fetch('/assets/json/names.json')
        .then(response => response.json())
        .then(data => {
            const namesArray = data.first_names; 
            const randomIndex = Math.floor(Math.random() * namesArray.length);
            display.innerText = namesArray[randomIndex].name;
        })
        .catch(err => console.error("Error loading JSON:", err));
});

name_generator.html

<div id="generator-container">
    <p id="display-area">Click the button to generate!</p>
    <button id="generate-btn">Pick Random Entry</button>
</div>

<script src="/assets/js/generator.js"></script>

names.json

{
"first_names":[
    {"name":"John"},
    {"name":"Anna"},
    {"name":"Peter"}
]
}

Below is the research that led me to this setup:

How could a generator work?
I want them to be data driven, because then they’re extensible
I don’t want too much configuration though, the bare minimum to make maintenance easier
But I’m getting ahead of myself
Effectively I want to pick a random entry from a list and return that entry
And I want to do that in JavaScript

Returning a random integer from 0 to 9 inclusive:
Math.floor(Math.random() * 10);

Looked up procgen text pattern replacement
Results indicate method is called nested pattern replacement of placeholders
Graph based recursive – replacements can trigger further replacements (nested expansion)
Narrative procgen

How to maintain?

1. Create JSON and JS files in Hostinger’s file manager in assets folder

2. Reference js source via script tag in custom HTML blog via Gutenberg editor

3. Reference JSON via Fetch API within js file

In effect my constraints are:
–  I can access any combination of JSON files via JavaScript via Fetch
–  I can access any combination of JS files via HTML script tag
–  I can embed any combination of HTML files via Gutenberg Custom HTML Block in Post editor

Well I know I want the generator logic decoupled from the data

Ditto for the pattern logic

And I want the template logic decoupled from all

Ditto for the HTML snippets

I want a data factory for requesting and injecting the data

In a HTML file;
Import the factory
Request specific data assets for mapping to rules of a template

Template runs the pattern logic
Pattern logic references the generator logic

Cyber security threats deep dive;

Keeping it Secure (The “Middle Ground” Rules)
You don’t need a PhD in security for this, just follow these three rules:
Read-Only Data: Only put data in your JSON files that you are okay with the world seeing. If a user “Inspects Element” on your site, they can see the URL to your JSON file and download the whole thing.
No PHP in Assets: Ensure your /assets/ folder only contains .json and .js files. In your Hostinger File Manager, make sure there are no .php files in there.
The “No-Execute” Trick: To be extra safe, place a file named .htaccess inside your /assets/ folder with this single line:
Options -ExecCGI
This tells the server: “Even if someone sneaks a script in here, do not run it.”

Storing static JSON and JS files in a custom folder won’t “break” WordPress, but there are two specific ways a breach could happen if you aren’t careful.
1. The “Malicious Upload” Risk
The biggest risk isn’t the files you put there; it’s an attacker putting their files there.
If a hacker gains access to your Hostinger account (via a weak password or a vulnerable plugin), they might see your /assets/ folder and think, “Perfect, a place to hide a back-door script.” They upload malicious.php, and because it’s in a folder they know you’re using, it might go unnoticed.
The Fix: As mentioned before, the .htaccess file is your shield. By placing a file named .htaccess inside your /assets/ folder with the following code, you effectively “kill” any scripts an attacker tries to run:
# Disable PHP execution in this specific folder
<Files *.php>
    deny from all
</Files>

# Prevent directory browsing (so people can’t see a list of all your JSON files)
Options -Indexes

Cross-Site Scripting (XSS)
This is the most likely “code-level” risk. If your JSON file contains HTML (like <script>alert(‘hacked’)</script>) and your JavaScript uses .innerHTML to display it, that script will run in your visitor’s browser.
The Fix:
In your JavaScript, always use .textContent or .innerText instead of .innerHTML.
Bad: display.innerHTML = data[randomIndex].text; (Executes code)
Good: display.textContent = data[randomIndex].text; (Displays as plain text)