Use npm dependencies instead of local copies of 3rd party libs

.github/workflows/publish.yml

@@ -18,7 +18,10 @@ jobs:
       uses: peaceiris/actions-hugo@v3
       with:
         hugo-version: '0.148.1'
-    - name: Render
+    - name: Install JavaScript Dependencies
+      working-directory: '.hugo'
+      run: npm install
+    - name: Render Site
       working-directory: '.hugo'
       run: hugo
     - name: Check Links

.gitignore

@@ -1,4 +1,5 @@
 /.project
 target/
 /.hugo/public/
+/.hugo/node_modules/
 /.hugo/.hugo_build.lock

.hugo/assets/app/ace-theme.js

@@ -0,0 +1,102 @@
+export const isDark = false;
+export const cssClass = "ace-almanac";
+
+export const cssText = `
+.ace-almanac .ace_gutter {
+background: #fff;
+color: #AAA;
+}
+.ace-almanac  {
+background: #fff;
+color: #333;
+}
+.ace-almanac .ace_keyword {
+color: #589;
+}
+.ace-almanac .ace_string {
+color: #666;
+}
+.ace-almanac .ace_variable.ace_class {
+color: teal;
+}
+.ace-almanac .ace_constant.ace_numeric {
+color: #666;
+}
+.ace-almanac .ace_constant.ace_buildin {
+color: #0086B3;
+}
+.ace-almanac .ace_comment {
+color: #999;
+font-style: italic;
+}
+.ace-almanac .ace_variable.ace_language  {
+color: #0086B3;
+}
+.ace-almanac .ace_paren {
+font-weight: bold;
+}
+.ace-almanac .ace_boolean {
+font-weight: bold;
+}
+.ace-almanac .ace_string.ace_regexp {
+color: #009926;
+font-weight: normal;
+}
+.ace-almanac .ace_variable.ace_instance {
+color: teal;
+}
+.ace-almanac .ace_constant.ace_language {
+font-weight: bold;
+}
+.ace-almanac .ace_cursor {
+color: black;
+}
+.ace-almanac.ace_focus .ace_marker-layer .ace_active-line {
+background: rgb(255, 255, 204);
+}
+.ace-almanac .ace_marker-layer .ace_active-line {
+background: rgb(245, 245, 245);
+}
+.ace-almanac .ace_marker-layer .ace_selection {
+background: rgb(181, 213, 255);
+}
+.ace-almanac.ace_multiselect .ace_selection.ace_start {
+box-shadow: 0 0 3px 0px white;
+}
+.ace-almanac.ace_nobold .ace_line > span {
+font-weight: normal !important;
+}
+.ace-almanac .ace_marker-layer .ace_step {
+background: rgb(252, 255, 0);
+}
+.ace-almanac .ace_marker-layer .ace_stack {
+background: rgb(164, 229, 101);
+}
+.ace-almanac .ace_marker-layer .ace_bracket {
+margin: -1px 0 0 -1px;
+border: 1px solid rgb(192, 192, 192);
+}
+.ace-almanac .ace_gutter-active-line {
+background-color : rgba(0, 0, 0, 0.07);
+}
+.ace-almanac .ace_gutter-cell {
+padding-left: 9px;
+}
+.ace-almanac .ace_marker-layer .ace_selected-word {
+background: rgb(250, 250, 255);
+border: 1px solid rgb(200, 200, 250);
+}
+.ace-almanac .ace_invisible {
+color: #BFBFBF
+}
+.ace-almanac .ace_print-margin {
+width: 1px;
+background: #e8e8e8;
+}
+.ace-almanac .ace_indent-guide {
+background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y;
+}
+`;
+
+const dom = ace.require("./lib/dom");
+dom.importCssString(cssText, cssClass, false);

.hugo/assets/app/download.js

@@ -1,4 +1,4 @@
-"use strict";
+import Vue from 'vue/dist/vue.min.js';
 
 Vue.component('downloadlist', {
     template: `
@@ -183,3 +183,5 @@ Vue.component('downloadlist', {
         }
     }
 });
+
+new Vue({ el: '#content' });

.hugo/assets/app/sandbox.js

@@ -1,4 +1,10 @@
-"use strict";
+import ace from 'ace-builds';
+import 'ace-builds/src-min-noconflict/mode-java.js';
+import * as theme from './ace-theme.js';
+
+import Vue from 'vue/dist/vue.min.js';
+
+import './tabs.js';
 
 Vue.component('sandbox', {
     template: `
@@ -71,9 +77,9 @@ Vue.component('sandbox-source', {
         };
     },
     mounted() {
-        this.editor = window.ace.edit(this.$el, {
+        this.editor = ace.edit(this.$el, {
             mode: "ace/mode/java",
-            theme: 'ace/theme/almanac',
+            theme: theme,
             highlightActiveLine: false,
             showPrintMargin: false,
             showFoldWidgets: false,
@@ -97,4 +103,7 @@ Vue.component('sandbox-source', {
             this.editor.focus();
         }
     },
-});
+});
+
+// For compatibility expose Vue as a global object to the browser:
+window.Vue = Vue;

.hugo/assets/app/tabs.js

@@ -1,4 +1,4 @@
-"use strict";
+import Vue from 'vue/dist/vue.min.js';
 
 Vue.component('tabs', {
     template: `

.hugo/assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
+}

.hugo/layouts/partials/downloadscript.html

@@ -1,5 +1,2 @@
-{{- $vue := resources.Get "app/vue.min.js" }}
-{{- $download := resources.Get "app/download.js" | resources.Minify }}
-{{- $js := slice $vue $download | resources.Concat "app/download-bundle.js" | resources.Fingerprint }}
+{{- $js := resources.Get "app/download.js" | js.Build "app/download-bundle.js" | minify | resources.Fingerprint }}
 <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
-<script>new Vue({ el: '#content' })</script>

.hugo/layouts/partials/sandboxscript.html

@@ -1,13 +1,10 @@
 {{- if or ( .Page.Store.Get "hasSandbox" ) ( .Page.Params.sandbox ) }}
-{{- $vue := resources.Get "app/vue.min.js" }}
-{{- $tabs := resources.Get "app/tabs.js" | resources.Minify }}
-{{- $sandbox := resources.Get "app/sandbox.js" | resources.ExecuteAsTemplate "sandbox.js" . | resources.Minify }}
-{{- $ace := resources.Get "app/ace/ace.js" }}
-{{- $ace_java := resources.Get "app/ace/mode-java.js" }}
-{{- $ace_theme := resources.Get "app/ace/theme-almanac.js" }}
-{{- $js := slice $vue $tabs $sandbox $ace $ace_java $ace_theme | resources.Concat "app/sandbox-bundle.js" }}
-{{- $triggerOutputForThirdPartySites := $js.RelPermalink }}
-{{- $jsfp := $js | resources.Fingerprint }}
-<script src="{{ $jsfp.RelPermalink }}" integrity="{{ $jsfp.Data.Integrity }}"></script>
-<script>new Vue({ el: '#content' })</script>
+
+  {{- $sandbox := resources.Get "app/sandbox.js" | resources.ExecuteAsTemplate "sandbox.js" . | js.Build "app/download-bundle.js" | minify }}
+  {{- $js := slice $sandbox | resources.Concat "app/sandbox-bundle.js" }}
+
+  {{- $triggerOutputForThirdPartySites := $js.RelPermalink }}
+  {{- $jsfp := $js | resources.Fingerprint }}
+  <script src="{{ $jsfp.RelPermalink }}" integrity="{{ $jsfp.Data.Integrity }}"></script>
+  <script>new Vue({ el: '#content' })</script>
 {{- end }}

.hugo/localdev.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+npm install
+hugo server

.hugo/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "javaalmanac.io-components",
+	"version": "1.0.0",
+	"dependencies": {
+		"vue": "2.6.11",
+		"ace-builds": "1.43.2"
+	}
+}

README.md

@@ -1,6 +1,6 @@
 # [javaalmanac.io](https://javaalmanac.io)
 
-Collection of information about the history of Java primarily from a technical point of view.
+Systematic collection of information about the history and the future of Java.
 
 ## Tools Developed for Java Almanac
 
@@ -20,7 +20,13 @@ Java Almanac wouldn't be possible without these great tools and services:
 * [jsoup](https://jsoup.org/): HTML parsing
 * [Apache Lucene](https://lucene.apache.org/core/): Full-text search
 * [GitHub](https://github.com/): Code hosting, issue tracking and automation
-* [AWS](https://aws.amazon.com/): Frontend and backend hosting 
+* [AWS](https://aws.amazon.com/): Frontend and backend hosting
+
+## Local Development
+
+If you want to work in Java Almanac locally please install `npm` and `hugo`. A
+local live preview can be rendered by executing the script `localdev.sh` in
+folder `.hugo` of this repository.
 
 ## Author and License