[web] Refactored to use Hugo Asset Pipeline for css and js.

.gitattributes

@@ -20,5 +20,4 @@
 *.bin filter=lfs diff=lfs merge=lfs -text
 *.pvtu* filter=lfs diff=lfs merge=lfs -text
 *.gif filter=lfs diff=lfs merge=lfs -text
-web/dist/bundle.js filter=lfs diff=lfs merge=lfs -text
-web/dist/styles.css filter=lfs diff=lfs merge=lfs -text
+web/resources/_gen/scss/*.content filter=lfs diff=lfs merge=lfs -text

netlify.toml

@@ -5,7 +5,6 @@
   command = """
     git lfs fetch
     yarn --ignore-engines --ignore-optional --non-interactive &&
-    node_modules/.bin/webpack -p --mode=production &&
     hugo"""
 
 [context.production.environment]
@@ -17,7 +16,6 @@
   command = """
     git lfs fetch
     yarn --ignore-engines --ignore-optional --non-interactive &&
-    node_modules/.bin/webpack -p --mode=production &&
     hugo -b $DEPLOY_PRIME_URL"""
 
 [context.deploy-preview.environment]
@@ -25,9 +23,9 @@
 
 [context.branch-deploy]
   command = """
+    hugo version
     git lfs fetch
     yarn --ignore-engines --ignore-optional --non-interactive &&
-    node_modules/.bin/webpack -p --mode=production &&
     hugo -b $DEPLOY_PRIME_URL
     node_modules/.bin/hugo-algolia --toml -s"""
 

web/.gitignore

@@ -7,6 +7,8 @@ test.md
 test.jpg
 npm-debug.log
 yarn-error.log
+resources/*
+!resources/_gen
 
 # Generated by other tools
 content/internal

web/README.md

@@ -136,8 +136,6 @@ This json-file is then used by the shortcode.
 
 - Inside the source-directory `ogs/web`:
   - Install packages with `yarn`
-  - Run `webpack --watch`
-
     - Re-run CMake and build the `ctest`-target, *OPTIONAL* for benchmark visualizations
   - Run `npm run build` to build the site which is created in `public/`
 
@@ -152,5 +150,6 @@ ALGOLIA_WRITE_KEY=XXX node_modules/.bin/hugo-algolia --toml -s
 - [Hugo](https://gothugo.com) - Web site generator
 - [Tailwind](https://tailwindcss.com/docs/what-is-tailwind) - CSS framework
 - [vtk.js](https://kitware.github.io/vtk-js/) - 3D Visualizations, CURRENTLY DISABLED!
-- [webpack](https://webpack.github.io/) - Packaging JavaScript & CSS
 - [FontAwesome](https://fontawesome.com) - Icons, see [icon search](https://fontawesome.com/icons?d=gallery)
+- [Slick Carousel](http://kenwheeler.github.io/slick/) & [FancyBox](https://fancyapps.com/fancybox/3/) for image galleries
+- [Algolia](https://github.com/algolia/algoliasearch-client-javascript) for site search

web/src/js/fancybox.js → web/assets/js/fancybox.js

-var $ = require("jquery");
-var slick = require("slick-carousel");
-require('style-loader!slick-carousel/slick/slick.css');
-// Do not require here, import and override in styles.css
-// require('style-loader!slick-carousel/slick/slick-theme.css');
-require("@fancyapps/fancybox");
-require('style-loader!@fancyapps/fancybox/dist/jquery.fancybox.min.css');
-
 $(document).ready(function(){
   $('.carousel').slick({
     dots: true,

web/src/js/sitesearch.js → web/assets/js/sitesearch.js

 // Roughly based on https://github.com/algolia/autocomplete.js#jquery
 // https://github.com/algolia/autocomplete.js/blob/master/LICENSE
 
-import algoliasearch from 'algoliasearch/lite';
-var autocomplete = require('autocomplete.js/dist/autocomplete.jquery.js')
-
 var client = algoliasearch('4AHEU3QJQG', 'cda2754fe35733ffa31994a177725640')
 var index = client.initIndex('docs.opengeosys.org');
 $('#search-input').autocomplete({

web/src/styles.css → web/assets/scss/main.scss

@@ -190,8 +190,8 @@ a.btn-inverse:hover {
 }
 
 /* ----------------------------- Slick Carousel ----------------------------- */
-/* Import here to override values */
-@import '../node_modules/slick-carousel/slick/slick-theme.css';
+@import url("//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css");
+@import url("//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css");
 .slick-prev:before,
 .slick-next:before {
   font-size: 24px;
@@ -242,4 +242,5 @@ a.btn-inverse:hover {
 
 @tailwind utilities;
 
-@import 'css/pandoc-highlighting.css';
+@import 'pandoc-highlighting';
+@import url("https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css");

web/layouts/partials/footer.html

   {{ partial "global-footer-nav.html" . }}
   </div> <!-- container -->
-  <script src="/bundle.js"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearchLite.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
+  <script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
+
+  {{ $scripts := slice (resources.Get "js/osselector.js") (resources.Get "js/sitesearch.js") (resources.Get "js/fancybox.js") | resources.Concat "bundle.js" | minify | fingerprint }}
+  <script type="text/javascript" src="{{ $scripts.Permalink }}" integrity="{{ $scripts.Data.Integrity }}" media="screen"></script>
 </body>
 </html>

web/layouts/partials/header.html

@@ -7,7 +7,14 @@
   <meta name="description" content="OpenGeoSys">
   <meta name="author" content="OpenGeoSys Community">
 
-  <link rel="stylesheet" href="/styles.css">
+  <!-- <link rel="stylesheet" href="/styles.css"> -->
+  {{ if .Site.IsServer }}
+  {{ $styles := resources.Get "scss/main.scss" | resources.ToCSS (dict "targetPath" "main.css" "enableSourceMap" true ) | resources.PostCSS }}
+  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+  {{ else }}
+  {{ $styles := resources.Get "scss/main.scss" | resources.ToCSS (dict "targetPath" "main.css" ) | resources.PostCSS | minify | fingerprint }}
+  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
+  {{ end }}
 
   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({

web/package.json

 {
     "private": true,
     "scripts": {
-        "dev": "cross-env NODE_ENV=development node_modules/.bin/webpack --progress --hide-modules",
-        "watch": "cross-env NODE_ENV=development node_modules/.bin/webpack --watch --progress --hide-modules",
-        "prod": "node_modules/.bin/webpack -p --mode=production && hugo",
+        "build": "hugo",
         "index": "hugo-algolia -toml",
         "index-and-send": "hugo-algolia -toml -s"
     },
-    "devDependencies": {
-        "@fancyapps/fancybox": "^3.3.5",
-        "algoliasearch": "^3.24.11",
-        "autocomplete.js": "^0.30.0",
-        "cross-env": "^5.1",
-        "css-loader": "^0.28.7",
-        "extract-text-webpack-plugin": "^4.0.0-beta.0",
-        "file-loader": "^1.1.11",
+    "devDependencies": {},
+    "dependencies": {
+        "autoprefixer": "^9.0.0",
         "hugo-algolia": "^1.2.13",
-        "jquery": "^3.3.1",
-        "postcss": "^6.0.14",
-        "postcss-loader": "^2.0.8",
-        "sharp": "^0.20.2",
-        "sharp-loader": "^1.1.0",
-        "slick-carousel": "^1.8.1",
-        "style-loader": "^0.21.0",
-        "tailwindcss": "^0.5.3",
-        "webpack": "^4.8.3",
-        "webpack-cli": "^2.1.3"
+        "postcss-cli": "^5.0.1",
+        "postcss-import": "^11.1.0",
+        "tailwindcss": "^0.6.4"
     }
 }

web/postcss.config.js

+var tailwindcss = require('tailwindcss');
 module.exports = {
     plugins: [
-        require('tailwindcss')('./tailwind.js')
+      tailwindcss('./tailwind.js'),
+      require('autoprefixer'),
+      require('postcss-import'),
     ]
 }

web/resources/_gen/assets/js/bundle.js_d11fe7b62c27961c87ecd0f2490357b9.content

+jQuery.fn.visible=function(){return this.css('visibility','visible');};jQuery.fn.invisible=function(){return this.css('visibility','hidden');};$("#btn-win").click(function(){selectOS("win");});$("#btn-linux").click(function(){selectOS("linux");});$("#btn-mac").click(function(){selectOS("mac");});function selectOS(os){var os_list=['win','linux','mac'];for(var i=0;i<os_list.length;i++){var current_os=os_list[i];if(current_os==os){$("."+current_os).show();$("#btn-"+current_os).addClass("active");}
+else{$("."+current_os).hide();$("#btn-"+current_os).removeClass("active");}}
+window.localStorage.setItem("selectedOS",os);}
+if($(".win").length>0){$("#os-selector").visible();var os=window.localStorage.getItem("selectedOS");if(os){$("#btn-"+os).click();}
+else{$("#btn-win").click();}}
+var client=algoliasearch('4AHEU3QJQG','cda2754fe35733ffa31994a177725640')
+var index=client.initIndex('docs.opengeosys.org');$('#search-input').autocomplete({autoselect:true,hint:false,keyboardShortcuts:['s']},[{source:$.fn.autocomplete.sources.hits(index,{hitsPerPage:5}),displayKey:'title',templates:{suggestion:function(suggestion){return suggestion._highlightResult.title.value;}}}]).on('autocomplete:selected',function(event,suggestion,dataset){window.location="/"+suggestion.uri.toLowerCase();});$(document).ready(function(){$('.carousel').slick({dots:true,infinite:true,fade:true,cssEase:'linear',autoplaySpeed:3000,});$('.carousel-play').slick('slickPlay');});
\ No newline at end of file

web/resources/_gen/assets/js/bundle.js_d11fe7b62c27961c87ecd0f2490357b9.json

+{"Target":"bundle.min.40e8af54ad426b97e2c7571383dd06b5dc24717099c0e7c106614bb5e9630068.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-QOivVK1Ca5fix1cTg90GtdwkcXCZwOfBBmFLteljAGg="}}
\ No newline at end of file