Serve GCWeb theme (css/image/fonts) locally instead of from canada.ca due to potential IP block (#322)

- import VueJS API via ESM import map
- Debian rules unzip themes-gcweb.zip into theme/static
- Dockerfile updated to unzip themes-gcweb.zip
- gitignore theme/static/themes-gcweb
- update README.md installation instructions

Co-authored-by: Kevin Ngai <[email protected]>

Author: kngai

.gitignore

@@ -7,3 +7,4 @@ dist
 node_modules
 schemas.opengis.net
 .pot
+theme/static/themes-gcweb

Dockerfile

@@ -70,6 +70,12 @@ RUN cd msc-pygeoapi && \
     pip3 install -U elasticsearch && \
     # ensure cors enabled in config
     sed -i 's^# cors: true^cors: true^' $BASEDIR/msc-pygeoapi/deploy/default/msc-pygeoapi-config.yml && \
+    # GCWeb theme files
+    curl -L https://github.com/wet-boew/GCWeb/releases/download/v14.6.0/themes-dist-14.6.0-gcweb.1.zip -o ./themes-gcweb.zip && \
+    unzip -o ./themes-gcweb.zip "*/GCWeb/*" -d theme/static && \
+    unzip -o ./themes-gcweb.zip "*/wet-boew/*" -d theme/static && \
+    mv ./theme/static/themes-dist-14.6.0-gcweb ./theme/static/themes-gcweb && \
+    rm -f ./themes-gcweb.zip && \
     # install msc-pygeoapi
     python3 setup.py install && \
     # show version

README.md

@@ -29,9 +29,18 @@ python3 -m venv --system-site-packages msc-pygeoapi
 cd msc-pygeoapi
 source bin/activate
 
-# clone codebase and install
+# clone codebase
 git clone https://github.com/ECCC-MSC/msc-pygeoapi.git
 cd msc-pygeoapi
+
+# add GCWeb theme files
+curl -L https://github.com/wet-boew/GCWeb/releases/download/v14.6.0/themes-dist-14.6.0-gcweb.1.zip -o ./themes-gcweb.zip 
+unzip -o ./themes-gcweb.zip "*/GCWeb/*" -d theme/static
+unzip -o ./themes-gcweb.zip "*/wet-boew/*" -d theme/static
+mv ./theme/static/themes-dist-14.6.0-gcweb ./theme/static/themes-gcweb
+rm -f ./themes-gcweb.zip
+
+# install codebase
 python setup.py build
 python setup.py install
 

debian/rules

@@ -23,5 +23,11 @@ MSC_PYGEOAPI_VERSION=$(shell dpkg-parsechangelog -SVersion)
 	&& rm -f ./SCHEMAS_OPENGIS_NET.zip
 	sed -i "s/MSC_PYGEOAPI_VERSION/$(MSC_PYGEOAPI_VERSION)/" theme/templates/_base.html
 
+	curl -L https://github.com/wet-boew/GCWeb/releases/download/v14.6.0/themes-dist-14.6.0-gcweb.1.zip -o ./themes-gcweb.zip
+	&& unzip -o ./themes-gcweb.zip "*/GCWeb/*" -d theme/static
+	&& unzip -o ./themes-gcweb.zip "*/wet-boew/*" -d theme/static
+	&& mv ./theme/static/themes-dist-14.6.0-gcweb ./theme/static/themes-gcweb
+	&& rm -f ./themes-gcweb.zip
+
 override_dh_auto_test:
-	@echo "nocheck set, not running tests"
+	@echo "nocheck set, not running tests"

theme/static/js/composables/useCatalog.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+import { ref, computed } from 'vue'
 
 export default function useCatalog(initJsonData) {
   const catalogJson = ref(initJsonData)

theme/static/js/composables/useCollections.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+import { ref, computed } from 'vue'
 
 export default function useCollections() {
   const collectionsJson = ref(JSON_DATA) // global JSON_DATA from jinja rendered JSON

theme/static/js/composables/useItems.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+import { ref, computed } from 'vue'
 
 export default function useItems(itemsi18n) {
   // Items results

theme/static/js/composables/useMap.js

@@ -1,5 +1,5 @@
 import * as L from 'https://unpkg.com/[email protected]/dist/leaflet-src.esm.js'
-import { ref, computed, watch, onMounted } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+import { ref, computed, watch, onMounted } from 'vue'
 
 export default function useMap(mapElemId, geoJsonData, itemsPath, tileLayerUrl, tileLayerAttr, bboxPermalink, locale) {
   let map, layerItems

theme/static/js/composables/useTableFilter.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+import { ref, computed } from 'vue'
 
 export default function useTableFilter(rows, keyColumns, defaultSortCol, tableTexti18n) {
   // sort and filtering

theme/templates/_base.html

@@ -11,7 +11,7 @@
 
     <!-- GCWeb theme -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_32/css/theme.min.css">
+    <link rel="stylesheet" href="{{ config['server']['url'] }}/static/themes-gcweb/GCWeb/css/theme.min.css">
 
     <link rel="stylesheet" href="{{ config['server']['url'] }}/static/css/default.css">
     <!--[if lt IE 9]>
@@ -24,6 +24,15 @@
       <link rel="{{ link['rel'] }}" type="{{ link['type'] }}" title="{{ link['title'] }}" href="{{ link['href'] }}?lang={{ (locale|lower)[:2] }}"/>
       {% endif %}
     {% endfor %}
+
+    <!-- ESM import map -->
+    <script type="importmap">
+      {
+        "imports": {
+          "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js"
+        }
+      }
+    </script>
     {% block extrahead %}
     {% endblock %}
   </head>
@@ -166,7 +175,7 @@ <h2 class="wb-inv">{% trans %}About this site{% endtrans %}</h2>
               <a href="#wb-cont">{% trans %}Top of page{% endtrans %} <span class="glyphicon glyphicon-chevron-up"></span></a>
             </div>
             <div class="col-xs-6 col-md-3 col-lg-2 text-right">
-              <img src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_32/assets/wmms-blk.svg" alt="{% trans %}Symbol of the Government of Canada{% endtrans %}" />
+              <img src="{{ config['server']['url'] }}/static/themes-gcweb/GCWeb/assets/wmms-blk.svg" alt="{% trans %}Symbol of the Government of Canada{% endtrans %}" />
             </div>
           </div>
         </div>

theme/templates/collections/index.html

@@ -64,7 +64,7 @@ <h1>{% trans %}Collections in this service{% endtrans %}</h1>
     <script type="module">
       import useCollections from '{{ config['server']['url'] }}/static/js/composables/useCollections.js?v={{ version }}'
       import useTableFilter from '{{ config['server']['url'] }}/static/js/composables/useTableFilter.js?v={{ version }}'
-      import { createApp, ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+      import { createApp, ref, computed } from 'vue'
 
       const app = createApp({
         delimiters: ['[%', '%]'],

theme/templates/collections/items/index.html

@@ -185,7 +185,7 @@ <h1>{% for l in data['links'] if l.rel == 'collection' %} {{ l['title'] }} {% en
       import useItems from '{{ config['server']['url'] }}/static/js/composables/useItems.js?v={{ version }}'
       import useTableFilter from '{{ config['server']['url'] }}/static/js/composables/useTableFilter.js?v={{ version }}'
       import useMap from '{{ config['server']['url'] }}/static/js/composables/useMap.js?v={{ version }}'
-      import { createApp, ref, computed, onBeforeMount, onMounted, watch } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+      import { createApp, ref, computed, onBeforeMount, onMounted, watch } from 'vue'
 
       const app = createApp({
         delimiters: ['[%', '%]'],

theme/templates/stac/catalog.html

@@ -85,7 +85,7 @@ <h2>{% trans %}Links{% endtrans %}</h2>
   <script type="module">
     import useCatalog from '{{ config['server']['url'] }}/static/js/composables/useCatalog.js?v={{ version }}'
     import useTableFilter from '{{ config['server']['url'] }}/static/js/composables/useTableFilter.js?v={{ version }}'
-    import { createApp, ref, computed } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js'
+    import { createApp, ref, computed } from 'vue'
 
     const app = createApp({
       delimiters: ['[%', '%]'],