Skip to content

Fixing Simply Static output

Jump to bottom
Anthony Fok edited this page Apr 25, 2022 · 6 revisions

Motivation

Simply Static does not interpret JavaScript files (AFAIK), and is thus unable to capture the files referenced within JavaScript files. So, we need to do some tinkering.

See https://github.com/OpenDRR/riskprofiler-cms/blob/main/bin/fix-website-for-static-hosting.sh for a work-in-progress.

TODO

  • Rename the script
  • Instead of fetching from HabitatSeven's demo site, copy them from local Git repo instead, and perhaps even interpret the PHP locally. (or just fetch from the local webserver at http://riskprofiler.demo/?)
  • Rename my fake .php files to .html

Troubleshooting

Starting from where fix-website-for-static-hosting.sh left off:

Missing export-data.js.map and highcharts.css.map

DevTools failed to load source map: Could not load content for http://test.riskprofiler.local/site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/modules/export-data.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

DevTools failed to load source map: Could not load content for http://test.riskprofiler.local/site/assets/themes/fw-child/resources/css/highcharts.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

DevTools failed to load source map: Could not load content for http://test.riskprofiler.local/site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/highcharts.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

DevTools failed to load source map: Could not load content for http://test.riskprofiler.local/site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/modules/exporting.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Solution: Add

    site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/modules/export-data.js.map
    site/assets/themes/fw-child/resources/css/highcharts.css.map
    site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/modules/exporting.js.map
    site/assets/themes/fw-child/resources/vendor/Highcharts-9.3.3/code/modules/exporting.js.map

to missing_files array.

Or: Can we tell Simply Static to include *.map files too? To test. (my last try didn't work for some reasons, but I didn't try very hard.)

Wrong URLs

detail SIM9p0_CascadiaInterfaceBestFault - rp_scenarios.js:1117

Failed to load resource: the server responded with a status of 404 (Not Found) http://test.riskprofiler.local/site/assets/themes/fw-child/template/https://riskprofiler-demo-site/scenario/cascadia-interface-best-fault/

detail done - rp_scenarios.js:1172

Thanks to the debug messages that HabitatSeven put in, I was able to zero in site/assets/themes/fw-child/resources/js/rp_scenarios.js Lines 1134-1137:

                        // load the detail sidebar template

                        $(document).profiler('get_sidebar', {
                                url: plugin_settings.scenario.url,

where plugin_settings.scenario.url was set to a full URL https://riskprofiler-demo-site/scenario/cascadia-interface-best-fault/, whereas elsewhere url set to a relative path segment, e.g. in Lines 519-522):

                        // GET SCENARIO LIST

                        $(document).profiler('get_sidebar', {
                                url: 'scenarios/items.php',

Debugging:

  • The profiler() function is defined in site/assets/themes/fw-child/resources/js/profiler.js
    • In get_sidebar: function(fn_options) (Lines 89-145), we see url: '../site/assets/themes/fw-child/template/' + settings.url on Line 124, and that is indeed where we received the settings.url value of https://riskprofiler-demo-site/scenario/cascadia-interface-best-fault/ after clicking on the "EXPLORE SCENARIO" button.
  • But where do we get plugin_settings.scenario.url? With the help of grep, it is found in site/assets/themes/fw-child/template/scenarios/items.php (downloaded output): 
                data-scenario='{"id":226,"url":"https:\/\/riskprofiler-demo-site\/scenario\/cascadia-interface-best-fault\/","title":"Cascadia Interface Best Fault","description":"Magnitude 9.0 scenario based on complete rupture of the CanSHM6 Hazard Model implementation of the Cascadia Interface Best Fault.","magnitude":"9","key":"SIM9p0_CascadiaInterfaceBestFault","coords":{"lat":"48.250","lng":"-125.217"},"deaths":"3417","damage":"18375","dollars":"38402326693"}'

Workarounds:

  1. Using Vim, edit site/assets/themes/fw-child/template/scenarios/items.php and search-and-replace with :%s,https:\\/\\/riskprofiler.habitatseven.work\\/,../../../../../, (5 substitutions on 5 lines as of April 2022)
  2. TODO: Find a better workaround?

scenarios/ and scenario/ directories?

GET http://test.riskprofiler.local/riskprofiler.local/scenario/cascadia-interface-best-fault/ 404 (Not Found)

We have a physical scenarios/ directory, but not a scenario/ directory?

A search through wp_habitatseven_riskprofiler.sql reveals the string scenario/ in rewrite_rules in the wp_options table. So, let's fire up the WP-CLI container with docker exec -it riskprofiler-cms_wpcli_1 /bin/bash and run wp option get rewrite_rules, or run with one command:

$ docker exec -it riskprofiler-cms_wpcli_1 wp option get rewrite_rules
array (
  'scenario/?$' => 'index.php?post_type=scenario',
  'scenario/feed/(feed|rdf|rss|rss2|atom)/?$' => 'index.php?post_type=scenario&feed=$matches[1]',
  'scenario/(feed|rdf|rss|rss2|atom)/?$' => 'index.php?post_type=scenario&feed=$matches[1]',
  'scenario/page/([0-9]{1,})/?$' => 'index.php?post_type=scenario&paged=$matches[1]',
  'training/?$' => 'index.php?post_type=training',
  'training/feed/(feed|rdf|rss|rss2|atom)/?$' => 'index.php?post_type=training&feed=$matches[1]',
  'training/(feed|rdf|rss|rss2|atom)/?$' => 'index.php?post_type=training&feed=$matches[1]',
  'training/page/([0-9]{1,})/?$' => 'index.php?post_type=training&paged=$matches[1]',
  ...

I suspect that these are WordPress’s built-in rewrite rules for posts, and scenario, training etc. are post types. (To be confirmed)

Stop-gap solution:

  1. mkdir -p scenario/{cascadia-interface-best-fault,georgia-strait,leech-river-full-fault,sidney,val-des-bois}
  2. Fetch http://riskprofiler.demo/scenario/cascadia-interface-best-fault/ and save it as scenario/cascadia-interface-best-fault/index.html. Repeat for georgia-strait, leech-river-full-fault, sidney, and val-des-bois 
    for i in $(find scenario/* -type d); do curl -o "$i/index.html" http://riskprofiler.demo/$i/; done
  3. Append index.html to the URLs in url in data-scenario in site/assets/themes/fw-child/template/scenarios/items.php. In Vim, use :%s,"url":".[^"]*,&index.html,

That's awkward. Should have read the 5 scenarios from the database or from item.php. To fix later.

Well, that seems to do the trick! The maps are finally loading, and apparently no more errors in the Chrome DevTools console!

Wikis: data | model-factory | opendrr-api | opendrr | python-env | riskprofiler-cms

Clone this wiki locally