// 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 = `

Static File Demo

This content is generated by JavaScript loaded from: /public/scripts/example.js

`; 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: // //