📚 Story Grammar - CDN Usage Example

This page demonstrates how to use the story-grammar library directly in a web browser using a CDN (Content Delivery Network). No build tools or npm installation required!

✅ Library Loaded Successfully!
The story-grammar library is now available as window.StoryGrammar

📦 CDN Options

Option 1: Direct from GitHub Pages (Recommended for this project)

<script src="https://yourusername.github.io/story-grammar/story-grammar.bundle.js"></script>

Option 2: Using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/story-grammar@1.2.3/dist/story-grammar.bundle.js"></script>

Option 3: Using unpkg CDN

<script src="https://unpkg.com/story-grammar@1.2.3/dist/story-grammar.bundle.js"></script>

Option 4: Local Bundle (Current Example)

<script src="story-grammar.bundle.js"></script>
💡 Note: This example uses the local bundle. Replace with a CDN URL for production use.

Quick Start Example

Click the button to generate a random story introduction:

Code:

// Create a new parser instance
const parser = new StoryGrammar.Parser();

// Define grammar rules
parser.addRule('hero', ['a brave knight', 'a clever wizard', 'a skilled archer']);
parser.addRule('villain', ['a dark sorcerer', 'an evil dragon', 'a corrupt king']);
parser.addRule('place', ['ancient castle', 'mystical forest', 'forgotten temple']);
parser.addRule('story', ['%hero% must defeat %villain% in the %place%.']);

// Generate text
const result = parser.expand('story');
console.log(result);

Weighted Rules Example

Generate loot with different rarity levels:

Code:

const parser = new StoryGrammar.Parser();

// Add weighted rules (70% common, 20% rare, 10% legendary)
parser.addWeightedRule('rarity', 
    ['common', 'rare', 'legendary'], 
    [0.7, 0.2, 0.1]
);

parser.addRule('item', ['sword', 'shield', 'bow', 'staff']);
parser.addRule('loot', ['You found a %rarity% %item%!']);

const result = parser.expand('loot');

Seeded Random Example

Generate predictable results using seeds:

Code:

const parser = new StoryGrammar.Parser({ seed: 'myseed' });

parser.addRule('color', ['red', 'blue', 'green', 'yellow']);
parser.addRule('animal', ['cat', 'dog', 'bird', 'fish']);
parser.addRule('result', ['The %color% %animal%']);

// Same seed = same result every time
const result = parser.expand('result');

Modifiers Example

Use built-in English modifiers for articles and pluralization:

Code:

const parser = new StoryGrammar.Parser();

// Load English modifiers
parser.loadModifiers(StoryGrammar.AllEnglishModifiers);

parser.addRule('animal', ['cat', 'dog', 'elephant', 'owl']);
parser.addRule('number', ['1', '2', '3']);

// Use .a for articles, .s for plurals
parser.addRule('sentence', [
    'I saw %animal.a%.',
    'I have %number% %animal.s%.'
]);

const result = parser.expand('sentence');

Advanced: Variables and Tracking

Generate a story with variables that persist across expansions:

Code:

const parser = new StoryGrammar.Parser();

parser.addRule('name', ['Alice', 'Bob', 'Charlie']);
parser.addRule('weapon', ['sword', 'bow', 'staff']);

// Use [name:rule] to save the value
parser.addRule('intro', ['[hero:name] picked up a [weapon:weapon].']);
parser.addRule('action', ['%hero% swung the %weapon% bravely!']);
parser.addRule('story', ['%intro% %action%']);

const result = parser.expand('story');

Complete HTML Template

Copy and paste this template to get started quickly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Story Grammar Project</title>
</head>
<body>
    <h1>Story Generator</h1>
    <button onclick="generate()">Generate</button>
    <div id="output"></div>

    <!-- Load from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/story-grammar@1.2.3/dist/story-grammar.bundle.js"></script>
    
    <script>
        // Your code here
        const parser = new StoryGrammar.Parser();
        
        parser.addRule('greeting', ['Hello', 'Hi', 'Hey']);
        parser.addRule('name', ['World', 'Friend', 'Developer']);
        parser.addRule('message', ['%greeting%, %name%!']);
        
        function generate() {
            const result = parser.expand('message');
            document.getElementById('output').textContent = result;
        }
    </script>
</body>
</html>

More Resources