@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.3

package/build/build.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
 import { build } from 'vite';
 import { v4 as uuid } from 'uuid';
 
@@ -13,7 +14,6 @@ import {
   getFileMd5,
   getFilesInDirectory,
   libraries,
-  writeRewrittenFile,
 } from './buildHelpers.js';
 
 /**
@@ -97,8 +97,8 @@ function hashLibraries() {
       throw new Error(`Trying to build unexported library ${key}`);
     }
     value.lib = libraries[key];
-    value.hash = `${uuid().substring(0, 6)}`;
-    libraryPaths[key] = `./${value.lib}.${value.hash}.js`;
+    value.hash = `${uuid().substring(0, 8)}`;
+    libraryPaths[key] = `./${value.lib}-${value.hash}.js`;
     value.rollupOptions = value.rollupOptions ? value.rollupOptions : {};
   });
 
@@ -121,11 +121,13 @@ const { libraryBuildOptions, libraryPaths } = hashLibraries();
 console.log('Building ol dump file');
 await generateOLLib();
 
+const distFolder = path.join(process.cwd(), 'dist');
+const assetsFolder = path.join(distFolder, 'assets');
+
 /** Cleaning/recreating Dist Folder */
-if (await fs.existsSync(path.join(process.cwd(), 'dist'))) {
-  await fs.promises.rm(path.join(process.cwd(), 'dist'), { recursive: true });
+if (await fs.existsSync(distFolder)) {
+  await fs.promises.rm(distFolder, { recursive: true });
 }
-const assetsFolder = path.join(process.cwd(), 'dist', 'assets');
 await fs.promises.mkdir(assetsFolder, { recursive: true });
 
 /**
@@ -141,6 +143,8 @@ const fileTypesToHash = ['.png', '.css', '.svg', '.woff2'];
  * we exclude the materialDesignIcons font because we do not want to also rewrite the materialDesignIcons.css file.
  * The .woff2 is loaded with the materialDesignIcons Version number as a query parameter. So this also makes sure,
  * that the browser can cache the file.
+ *
+ * we also exclude favicons from hashing, to just use the index.html as is.
  */
 const filesToExclude = [
   path.join(
@@ -150,6 +154,11 @@ const filesToExclude = [
     'fonts',
     'materialdesignicons-webfont.woff2',
   ),
+  path.join('assets', 'favicon-4c4ce5df.svg'),
+  path.join('assets', 'favicon-32-4c4ce5df.png'),
+  path.join('assets', 'favicon-128-4c4ce5df.png'),
+  path.join('assets', 'favicon-180-4c4ce5df.png'),
+  path.join('assets', 'favicon-192-4c4ce5df.png'),
 ];
 const hashedPublicFiles = new Map();
 const filesToCopy = new Map();
@@ -165,7 +174,7 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     const fileHash = await getFileMd5(filePath);
     const hashedFileUrl = path.posix.join(
       ...path.dirname(relativePathInDist).split(path.sep),
-      `${path.basename(filePath, fileType)}.${fileHash.slice(0, 6)}${fileType}`,
+      `${path.basename(filePath, fileType)}-${fileHash.slice(0, 8)}${fileType}`,
     );
     hashedPublicFiles.set(
       path.posix.join(...relativePath.split(path.sep)),
@@ -174,9 +183,9 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     const newFilePath = path.join(
       assetsFolder,
       path.dirname(relativePathInDist),
-      `${path.basename(relativePath, fileType)}.${fileHash.slice(
+      `${path.basename(relativePath, fileType)}-${fileHash.slice(
         0,
-        6,
+        8,
       )}${fileType}`,
     );
     filesToCopy.set(filePath, newFilePath);
@@ -191,57 +200,28 @@ for await (const [originalFilePath, newFilePath] of filesToCopy) {
 }
 
 console.log('Building app');
-const buildoutput = await build({
-  configFile: './build/commonViteConfig.js',
-  base: './',
-  define: {
-    'process.env.NODE_ENV': '"production"',
-  },
-  build: {
-    write: false,
-    modulePreload: false,
-    emptyOutDir: true,
-    rollupOptions: {
-      external: Object.keys(libraries),
-      output: {
-        paths: libraryPaths,
-      },
-    },
-  },
-});
-
-/**
- * Building the Main entrypoint (index.html + index.js)
- * This will ensure that all references to public assets will be rewritten to the hashed filename
- */
-await Promise.all(
-  buildoutput.output?.map((output) => {
-    if (output.type === 'asset') {
-      const { source, fileName } = output;
-      // remove loading of materialdesignicons from index.html, we will later inject this in the ui.js
-      const fileContent = source.replace(
-        /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*(>[^<]*<\/link>|\/>)/,
-        '',
-      );
-      return writeRewrittenFile(
-        path.join(process.cwd(), 'dist', fileName),
-        fileContent,
-        hashedPublicFiles,
-        'assets',
-      );
-    }
-    if (output.type === 'chunk') {
-      const { code, fileName } = output;
-      return writeRewrittenFile(
-        path.join(process.cwd(), 'dist', fileName),
-        code,
-        hashedPublicFiles,
-        'assets',
-      );
-    }
-    return undefined;
-  }),
+let indexHTMLContent = await readFile('./index.html', { encoding: 'utf8' });
+// remove mdi icons link, will be later loaded from the ui.js
+indexHTMLContent = indexHTMLContent.replace(
+  /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*>/,
+  '',
 );
+// replace @vcmap/ui with './assets/ui.js'
+indexHTMLContent = indexHTMLContent.replace(/@vcmap\/ui/, './assets/ui.js');
+await writeFile(path.join(distFolder, 'index.html'), indexHTMLContent, {
+  encoding: 'utf8',
+});
+const htaccessContent = `
+    <FilesMatch "-[\\w\\d]{8}\\.(js|css)$">
+        Header set Cache-Control "public, max-age=31540000, immutable"
+    </FilesMatch>
+    <FilesMatch "(index\\.html|config\\.json|ui\\.js|vue\\.js|vuetify\\.js|ol\\.js|cesium\\.js|core\\.js)$">
+        Header set Cache-Control "no-store, max-age=0"
+    </FilesMatch>
+`;
+await writeFile(path.join(distFolder, '.htaccess'), htaccessContent, {
+  encoding: 'utf8',
+});
 
 /**
  * Building the Libraries, (vue, vuetify, openlayers, cesium, core, and ui). This will build one hashed library.hash.js
@@ -271,7 +251,7 @@ await Promise.all(
         lib: {
           entry: path.resolve(process.cwd(), value.entry),
           formats: ['es'],
-          fileName: `${value.lib}.${value.hash}`,
+          fileName: `${value.lib}-${value.hash}`,
         },
         rollupOptions: {
           ...value.rollupOptions,

package/build/buildHelpers.js

@@ -159,18 +159,12 @@ export async function buildLibrary(
   base64Css = false,
   rewrittenPublicAssets = undefined,
 ) {
-  // Base64 contains the characters '+', '/', and '=', which have a reserved meaning in URLs.
-  // Base64url solves this by replacing '+' with '-' and '/' with '_'.
-  // See https://stackoverflow.com/a/55389212
   const cssInjectorCode = `
 function loadCss(href) {
-  const base64url = href
-    .replace(/-/g, '+')
-    .replace(/_/g, '/');
   return new Promise((resolve, reject) => {
     const elem = document.createElement('link');
     elem.rel = 'stylesheet';
-    elem.href = base64url;
+    elem.href = href;
     elem.defer = false;
     elem.async = false;
     elem.onload = resolve;
@@ -180,7 +174,7 @@ function loadCss(href) {
 }`;
 
   const write = async (output) => {
-    const addedHash = hash ? `.${hash}` : '';
+    const addedHash = hash ? `-${hash}` : '';
     let css = false;
     if (output[1] && output[1].type === 'asset') {
       if (base64Css) {

package/build/info/conf.json

@@ -8,7 +8,7 @@
   },
   "source": {
     "includePattern": "\\.js$",
-    "exclude": ["dist"]
+    "exclude": ["dist", "node_modules/ol/node_modules"]
   },
   "plugins": [
     "jsdoc-plugin-intersection",

package/config/base.config.json

@@ -89,10 +89,10 @@
           }
         },
         "MyImpressum": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)<br>**Firmierung:** <br>Musterfirma GmbH<br><br>**Sitz:**<br>Musterstadt<br><br>**Adresse:**<br>Musterstraße 1 a<br>12345 Musterstadt<br>Deutschland<br><br> **Telefon:** +49 (0) 00 . 0000 . 000 . 00<br> **Telefax:** +49 (0) 00 . 0000 . 000 . 00<br> **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)<br><br>**Geschäftsführer:**<br>- Max Mustermann<br><br>**Registergericht:**<br>Musterstadt 1234567<br><br>**Steuernummer:**<br>11/222/33333<br><br>**Umsatzsteuer-ID:**<br>DE1234567890<br><br>**Copyright:**<br>Alle Rechte vorbehalten. Sämtliche Inhalte (Texte, Bilder, Grafiken, Animationen) sind urheberrechtlich geschützt. Sie dürfen ohne Zustimmung der Musterfirma GmbH zu kommerziellen Zwecken weder kopiert, verbreitet noch verändert werden.<br>(Copyright 2023 Musterfirma GmbH)<br><br>**Inhalte:**<br>Trotz sorgfältiger Bearbeitung kann die Musterfirma GmbH für die Fehlerfreiheit und Genauigkeit der angebotenen Informationen auf [www.musterfirma.de](http://www.musterfirma.de) nicht garantieren. Jegliche Haftung für Schäden, die direkt oder indirekt aus der Benutzung von [www.musterfirma.de](http://www.musterfirma.de) entstehen und nicht auf Vorsatz oder grober Fahrlässigkeit der Musterfirma GmbH beruhen, ist ausgeschlossen. Für die Inhalte von mit [www.musterfirma.de](http://www.musterfirma.de) verlinkter Websites ist grundsätzlich jede Haftung ausgeschlossen.<br><br>**Datenschutz:**<br>Die Musterfirma GmbH nimmt den Schutz Ihrer persönlichen Daten sehr ernst. Wir halten uns strikt an die Regeln der Datenschutzgesetze. Personenbezogene Daten werden auf dieser Webseite nur im technisch notwendigen Umfang erhoben. In keinem Fall werden die erhobenen Daten verkauft oder aus anderen Gründen an Dritte weitergegeben. Unsere vollständige Datenschutzerklärung können Sie [hier](#) nachlesen.<br>"
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n**Firmierung:** \nMusterfirma GmbH\n\n**Sitz:**\nMusterstadt\n\n**Adresse:**\nMusterstraße 1 a\n12345 Musterstadt\nDeutschland\n\n **Telefon:** +49 (0) 00 . 0000 . 000 . 00\n\n **Telefax:** +49 (0) 00 . 0000 . 000 . 00\n\n **E-Mail:** [info&commat;musterfirma.de](mailto:info&commat;musterfirma.de)\n\n**Geschäftsführer:**\nMax Mustermann\n\n**Registergericht:**\nMusterstadt 1234567\n\n**Steuernummer:**\n11/222/33333\n\n**Umsatzsteuer-ID:**\nDE1234567890\n\n**Copyright:**\n\nAlle Rechte vorbehalten. Sämtliche Inhalte (Texte, Bilder, Grafiken, Animationen) sind urheberrechtlich geschützt. Sie dürfen ohne Zustimmung der Musterfirma GmbH zu kommerziellen Zwecken weder kopiert, verbreitet noch verändert werden.\n\n(Copyright 2023 Musterfirma GmbH)\n\n**Inhalte:**\n\nTrotz sorgfältiger Bearbeitung kann die Musterfirma GmbH für die Fehlerfreiheit und Genauigkeit der angebotenen Informationen auf [www.musterfirma.de](http://www.musterfirma.de) nicht garantieren. Jegliche Haftung für Schäden, die direkt oder indirekt aus der Benutzung von [www.musterfirma.de](http://www.musterfirma.de) entstehen und nicht auf Vorsatz oder grober Fahrlässigkeit der Musterfirma GmbH beruhen, ist ausgeschlossen. Für die Inhalte von mit [www.musterfirma.de](http://www.musterfirma.de) verlinkter Websites ist grundsätzlich jede Haftung ausgeschlossen.\n\n**Datenschutz:**\n\nDie Musterfirma GmbH nimmt den Schutz Ihrer persönlichen Daten sehr ernst. Wir halten uns strikt an die Regeln der Datenschutzgesetze. Personenbezogene Daten werden auf dieser Webseite nur im technisch notwendigen Umfang erhoben. In keinem Fall werden die erhobenen Daten verkauft oder aus anderen Gründen an Dritte weitergegeben. Unsere vollständige Datenschutzerklärung können Sie [hier](#) nachlesen.\n"
         },
         "MyCustomScreen": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Projekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u> zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\nProjekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein **Beispieltext**, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text _von Markdown nach HTML_ zu konvertieren. Um mehr über die __*korrekte Syntax*__ zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n\n\n1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
           "name": "Meine benutzerdefinierte Anzeige",
           "title": "Meine benutzerdefinierte Anzeige"
         }
@@ -116,10 +116,10 @@
           }
         },
         "MyImpressum": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)<br>**Company name:** <br>Musterfirma GmbH<br><br>**Company headquarters:**<br>Musterstadt<br><br>**Address:**<br>Musterstraße 1 a<br>12345 Musterstadt<br>Germany<br><br> **Phone:** +49 (0) 00 . 0000 . 000 . 00<br> **Fax:** +49 (0) 00 . 0000 . 000 . 00<br> **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)<br><br>**Managing Director:**<br>- Max Mustermann<br><br>**Registry court:**<br>Musterstadt 1234567<br><br>**Tax number:**<br>11/222/33333<br><br>**VAT ID:**<br>DE1234567890<br><br>**Copyright:**<br>All rights reserved. All contents (texts, images, graphics, animations) are protected by copyright. They may not be copied, distributed or modified for commercial purposes without the consent of Musterfirma GmbH.<br>(Copyright 2023 Musterfirma GmbH)<br><br>**Contents:**<br>Despite careful editing, Musterfirma GmbH cannot guarantee the correctness and accuracy of the information provided on [www.musterfirma.de](http://www.musterfirma.de). Any liability for damages arising directly or indirectly from the use of [www.musterfirma.de](http://www.musterfirma.de) and which are not based on intent or gross negligence on the part of Musterfirma GmbH is excluded. No liability is accepted for the content of websites linked to [www.musterfirma.de](http://www.musterfirma.de).<br><br>**Data protection:**<br>Musterfirma GmbH takes the protection of your personal data very seriously. We adhere strictly to the rules of the data protection laws. Personal data is only collected on this website to the extent that is technically necessary. Under no circumstances will the data collected be sold or passed on to third parties for other reasons. You can read our complete privacy policy [here](#).<br>"
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n**Company name:** \n\nMusterfirma GmbH\n\n**Company headquarters:**\n\nMusterstadt\n\n\n\n**Address:**\n\nMusterstraße 1 a\n\n12345 Musterstadt\n\nGermany\n\n **Phone:** +49 (0) 00 . 0000 . 000 . 00\n\n **Fax:** +49 (0) 00 . 0000 . 000 . 00\n\n **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)\n\n\n\n**Managing Director:**\n\n- Max Mustermann\n\n\n\n**Registry court:**\n\nMusterstadt 1234567\n\n\n\n**Tax number:**\n\n11/222/33333\n\n\n\n**VAT ID:**\n\nDE1234567890\n\n\n\n**Copyright:**\n\nAll rights reserved. All contents (texts, images, graphics, animations) are protected by copyright. They may not be copied, distributed or modified for commercial purposes without the consent of Musterfirma GmbH.\n\n(Copyright 2023 Musterfirma GmbH)\n\n\n\n**Contents:**\n\nDespite careful editing, Musterfirma GmbH cannot guarantee the correctness and accuracy of the information provided on [www.musterfirma.de](http://www.musterfirma.de). Any liability for damages arising directly or indirectly from the use of [www.musterfirma.de](http://www.musterfirma.de) and which are not based on intent or gross negligence on the part of Musterfirma GmbH is excluded. No liability is accepted for the content of websites linked to [www.musterfirma.de](http://www.musterfirma.de).\n\n\n\n**Data protection:**\n\nMusterfirma GmbH takes the protection of your personal data very seriously. We adhere strictly to the rules of the data protection laws. Personal data is only collected on this website to the extent that is technically necessary. Under no circumstances will the data collected be sold or passed on to third parties for other reasons. You can read our complete privacy policy [here](#).\n\n"
         },
         "MyCustomScreen": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Project: \n--------\n\nGetting started\n\nSummary:\n--------\nThis is a sample text to help you get started. **Marked** is used to convert your text <u>from Markdown to HTML</u>. To learn more about the <u><em>correct syntax</em></u>, please visit this [link](https://marked.js.org/demo/) for a demo.\n \nContent:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Bullet Point 1: Lorem ipsum dolor sit amet.\n- Bullet Point 2: Lorem ipsum dolor sit amet.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n\n\nProject: \n--------\n\nGetting started\n\nSummary:\n--------\nThis is a sample text to help you get started. **Marked** is used to convert your text _from Markdown to HTML_. To learn more about the __*correct syntax*__, please visit this [link](https://marked.js.org/demo/) for a demo.\n \nContent:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n\n\n1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Bullet Point 1: Lorem ipsum dolor sit amet.\n- Bullet Point 2: Lorem ipsum dolor sit amet.\n\n\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
           "name": "My Custom Screen",
           "title": "My Custom Screen"
         }

package/config/projects.config.json

@@ -22,7 +22,8 @@
       "modules": [
         "config/dev.config.json",
         "config/codes.config.json",
-        "config/graphFeatureInfo.config.json"
+        "config/graphFeatureInfo.config.json",
+        "config/splashscreen.config.json"
       ]
     }
   ]

package/config/splashscreen.config.json

@@ -0,0 +1,45 @@
+{
+  "name": "SplashScreen Examples",
+  "uiConfig": [
+    {
+      "name": "splashScreen",
+      "value": {
+        "name": "MyCustomScreen.name",
+        "title": "MyCustomScreen.tooltip",
+        "icon": "mdi-information-slab-circle-outline",
+        "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\nSplash Screen Template\n-------------------\nErste Schritte\n-------------------\n\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u>zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n\nWie man Listen hinzufügt\n\n1. Punkt 1 einer Aufzählung\n2. Punkt 2 einer Aufzählung.\n\nWenn Sie Aufzählungen nicht mögen, wie wäre es mit Aufzählungspunkten?  \n- Punkt 1: einer Liste mit Aufzählungspunkten. \n- Punkt 2: einer Aufzählungsliste.",
+        "acceptInput": true,
+        "menuEntry": false,
+        "checkBoxText": "components.splashScreen.checkBoxText",
+        "buttonTitle": "components.splashScreen.buttonTitle",
+        "position": {
+          "width": "800px",
+          "height": "500px",
+          "maxWidth": "800px",
+          "maxHeight": "500px"
+        }
+      },
+      "properties": {
+        "title": "appConfigurator.editors.uiConfig.splashScreen"
+      }
+    },
+    {
+      "name": "customScreen",
+      "value": {
+        "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Projekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u>zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+        "icon": "mdi-information",
+        "name": "MyCustomScreen.name",
+        "title": "MyCustomScreen.tooltip",
+        "windowPosition": {
+          "left": "30%",
+          "right": "30%",
+          "top": "10%",
+          "bottom": "20%"
+        }
+      },
+      "properties": {
+        "title": "appConfigurator.editors.uiConfig.customScreen"
+      }
+    }
+  ]
+}

package/dist/.htaccess

@@ -0,0 +1,7 @@
+
+    <FilesMatch "-[\w\d]{8}\.(js|css)$">
+        Header set Cache-Control "public, max-age=31540000, immutable"
+    </FilesMatch>
+    <FilesMatch "(index\.html|config\.json|ui\.js|vue\.js|vuetify\.js|ol\.js|cesium\.js|core\.js)$">
+        Header set Cache-Control "no-store, max-age=0"
+    </FilesMatch>

package/dist/assets/@mdi/font/README.md

@@ -0,0 +1,25 @@
+> *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Webfont files only.
+
+# Webfont - Material Design Icons
+
+Webfont distribution for the [Material Design Icons](https://materialdesignicons.com).
+
+```
+npm install @mdi/font
+```
+
+> Package built with [@mdi/font-build](https://github.com/Templarian/MaterialDesign-Font-Build).
+
+## Related Packages
+
+[NPM @MDI Organization](https://npmjs.com/org/mdi)
+
+- JavaScript/Typescript: [MaterialDesign-JS](https://github.com/Templarian/MaterialDesign-JS)
+- SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)
+- Font-Build [MaterialDesign-Font-Build](https://github.com/Templarian/MaterialDesign-Font-Build)
+- Desktop Font: [MaterialDesign-Font](https://github.com/Templarian/MaterialDesign-Font)
+
+## Learn More
+
+- [MaterialDesignIcons.com](https://materialdesignicons.com)
+- https://github.com/Templarian/MaterialDesign