Rustelo/content/public/scripts/example.js

// Example JavaScript file for static file serving demonstration
// This file can be accessed at /public/scripts/example.js

(function() {
    'use strict';

    // Static file serving indicator
    console.log('📁 Static JavaScript file loaded successfully!');
    console.log('File served from: /public/scripts/example.js');

    // Utility functions
    const Utils = {
        // Add a static file badge to the page
        addStaticFileBadge: function() {
            const badge = document.createElement('div');
            badge.className = 'static-file-badge';
            badge.textContent = 'Static JS Loaded';
            badge.style.cssText = `
                position: fixed;
                bottom: 20px;
                left: 20px;
                background-color: #007bff;
                color: white;
                padding: 8px 12px;
                border-radius: 20px;
                font-size: 0.8rem;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                z-index: 1000;
                font-family: Arial, sans-serif;
            `;
            document.body.appendChild(badge);
        },

        // Log file serving information
        logFileInfo: function() {
            const info = {
                filename: 'example.js',
                url: '/public/scripts/example.js',
                loadTime: new Date().toISOString(),
                fileSize: 'Static files served as-is',
                mimeType: 'application/javascript',
                served: 'Directly from content/public directory'
            };
            console.table(info);
        },

        // Demonstrate file loading
        demonstrateFileLoading: function() {
            // Show that we can load other static files
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = '/public/styles/custom.css';
            link.onload = function() {
                console.log('✅ CSS file loaded from static directory');
            };
            document.head.appendChild(link);
        },

        // Create a simple interactive demo
        createDemo: function() {
            const demoContainer = document.createElement('div');
            demoContainer.innerHTML = `
                <div style="
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: white;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                    max-width: 300px;
                    font-family: Arial, sans-serif;
                    z-index: 1000;
                ">
                    <h3 style="margin: 0 0 10px 0; color: #333;">Static File Demo</h3>
                    <p style="margin: 0 0 10px 0; font-size: 0.9em;">
                        This content is generated by JavaScript loaded from:
                        <code>/public/scripts/example.js</code>
                    </p>
                    <button id="testStaticFiles" style="
                        background: #007bff;
                        color: white;
                        border: none;
                        padding: 8px 16px;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 0.9em;
                    ">Test Static Files</button>
                    <button id="closeDemo" style="
                        background: #6c757d;
                        color: white;
                        border: none;
                        padding: 8px 16px;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 0.9em;
                        margin-left: 8px;
                    ">Close</button>
                </div>
            `;

            document.body.appendChild(demoContainer);

            // Add event listeners
            document.getElementById('testStaticFiles').addEventListener('click', function() {
                Utils.testStaticFileUrls();
            });

            document.getElementById('closeDemo').addEventListener('click', function() {
                demoContainer.remove();
            });
        },

        // Test various static file URLs
        testStaticFileUrls: function() {
            const testUrls = [
                '/public/example.html',
                '/public/styles/custom.css',
                '/public/scripts/example.js',
                '/public/README.md'
            ];

            console.group('🔍 Testing Static File URLs');

            testUrls.forEach(url => {
                fetch(url)
                    .then(response => {
                        const status = response.ok ? '✅' : '❌';
                        const contentType = response.headers.get('content-type');
                        console.log(`${status} ${url} - ${response.status} (${contentType})`);
                    })
                    .catch(error => {
                        console.log(`❌ ${url} - Error: ${error.message}`);
                    });
            });

            console.groupEnd();
        },

        // Initialize all demos
        init: function() {
            console.log('🚀 Initializing static file demonstrations...');

            // Wait for DOM to be ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => {
                    this.addStaticFileBadge();
                    this.logFileInfo();
                    this.demonstrateFileLoading();
                    this.createDemo();
                });
            } else {
                this.addStaticFileBadge();
                this.logFileInfo();
                this.demonstrateFileLoading();
                this.createDemo();
            }
        }
    };

    // Sample data that might be served statically
    const StaticData = {
        apiEndpoints: {
            staticFiles: '/public/',
            contentApi: '/api/content/',
            authApi: '/api/auth/'
        },

        fileTypes: {
            images: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
            documents: ['.pdf', '.doc', '.docx', '.txt', '.md'],
            styles: ['.css', '.scss', '.less'],
            scripts: ['.js', '.ts', '.jsx', '.tsx'],
            data: ['.json', '.xml', '.csv', '.yaml']
        },

        examples: {
            imageUrl: '/public/images/logo.png',
            documentUrl: '/public/documents/manual.pdf',
            styleUrl: '/public/styles/custom.css',
            scriptUrl: '/public/scripts/example.js'
        }
    };

    // Export to global scope for testing
    window.StaticFileDemo = {
        utils: Utils,
        data: StaticData,
        test: function() {
            console.log('Static file serving is working correctly!');
            Utils.testStaticFileUrls();
            return StaticData;
        }
    };

    // Auto-initialize when script loads
    Utils.init();

    // Add some helpful console messages
    console.log('💡 Try these commands in the console:');
    console.log('  StaticFileDemo.test() - Test static file URLs');
    console.log('  StaticFileDemo.utils.testStaticFileUrls() - Test specific URLs');
    console.log('  StaticFileDemo.data - View static file configuration');

})();

// Example of how to use this in other scripts:
// <script src="/public/scripts/example.js"></script>
// <script>
//   StaticFileDemo.test();
// </script>