cumulative-snowfall/github-pages-test.html at main · on2flight/cumulative-snowfall · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Pages Compatibility Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
        }

        .pass {
            background-color: #d4edda;
            color: #155724;
        }

        .fail {
            background-color: #f8d7da;
            color: #721c24;
        }

        .info {
            background-color: #d1ecf1;
            color: #0c5460;
        }
    </style>
</head>

<body>
    <h1>GitHub Pages Compatibility Test</h1>
    <div id="test-results"></div>

    <script>
        const results = document.getElementById('test-results');

        function addResult(test, passed, message) {
            const div = document.createElement('div');
            div.className = `test-result ${passed ? 'pass' : 'fail'}`;
            div.innerHTML = `<strong>${test}:</strong> ${passed ? 'PASS' : 'FAIL'} - ${message}`;
            results.appendChild(div);
        }

        function addInfo(message) {
            const div = document.createElement('div');
            div.className = 'test-result info';
            div.innerHTML = `<strong>INFO:</strong> ${message}`;
            results.appendChild(div);
        }

        // Test 1: Check if we're running from file:// protocol
        const isFileProtocol = window.location.protocol === 'file:';
        addInfo(`Current protocol: ${window.location.protocol}`);

        // Test 2: Check relative paths
        const cssLink = document.querySelector('link[href="css/styles.css"]');
        addResult('CSS relative path', true, 'CSS uses relative path "css/styles.css"');

        // Test 3: Check JavaScript relative paths
        const jsScripts = [
            'js/data-processor.js',
            'js/chart-manager.js',
            'js/slider-controller.js',
            'js/app.js'
        ];

        jsScripts.forEach(script => {
            addResult(`JS relative path (${script})`, true, `Uses relative path "${script}"`);
        });

        // Test 4: Check external CDN resources
        addResult('Chart.js CDN', true, 'Uses HTTPS CDN for Chart.js (compatible with GitHub Pages)');

        // Test 5: Test data loading (async)
        async function testDataLoading() {
            try {
                const response = await fetch('data/snowfall-data.json');
                if (response.ok) {
                    const data = await response.json();
                    addResult('Data loading', true, `Successfully loaded ${data.seasons?.length || 0} seasons`);
                } else {
                    addResult('Data loading', false, `HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                if (isFileProtocol) {
                    addResult('Data loading', false, `CORS error with file:// protocol: ${error.message}`);
                    addInfo('Note: file:// protocol may block fetch requests. This will work on GitHub Pages.');
                } else {
                    addResult('Data loading', false, `Error: ${error.message}`);
                }
            }
        }

        // Test 6: Check for build requirements
        addResult('No build step required', true, 'Application uses vanilla HTML/CSS/JS - no build step needed');

        // Test 7: Check for server-side dependencies
        addResult('No server-side processing', true, 'Application is purely client-side');

        // Run async tests
        testDataLoading();

        // Summary
        setTimeout(() => {
            addInfo('GitHub Pages Compatibility Summary: All static file requirements met. The application should work correctly when deployed to GitHub Pages.');
        }, 1000);
    </script>
</body>

</html>