simple spa mode & demo application

CHANGELOG.md

@@ -18,6 +18,7 @@ see wiki for more information: [wiki](https://github.com/thmarx/cms/wiki)
 * **FEATURE** Add redirect support for aliases [454](https://github.com/CondationCMS/cms-server/issues/454)
 * **FEATURE** Signature for modules and themes [471](https://github.com/CondationCMS/cms-server/issues/471)
 * **FEATURE** Switch password has to secure algorithm [472](https://github.com/CondationCMS/cms-server/issues/472)
+* **FEATURE** Add spa mode for sites [476](https://github.com/CondationCMS/cms-server/issues/476)
 
 ### Developer experience
 

cms-api/src/main/java/com/condation/cms/api/SiteProperties.java

@@ -63,4 +63,8 @@ public interface SiteProperties {
 	public String templateEngine();
 
 	public List<String> activeModules();
+
+	public default boolean spaEnabled () {
+		return false;
+	}
 }

cms-core/src/main/java/com/condation/cms/core/configuration/properties/ExtendedSiteProperties.java

@@ -119,6 +119,11 @@ public boolean cacheContent() {
 		return configuration.getBoolean("cache.content", Constants.DEFAULT_CONTENT_CACHE_ENABLED);
 	}
 
+	@Override
+	public boolean spaEnabled() {
+		return configuration.getBoolean("spa.enabled", false);
+	}
+
 	@Override
 	public String templateEngine() {
 		return configuration.getString("template.engine");

cms-server/src/main/java/com/condation/cms/server/handler/content/JettyContentHandler.java

@@ -23,9 +23,11 @@
  */
 
 
+import com.condation.cms.api.configuration.configs.SiteConfiguration;
 import com.condation.cms.api.content.ContentResponse;
 import com.condation.cms.api.content.DefaultContentResponse;
 import com.condation.cms.api.content.RedirectContentResponse;
+import com.condation.cms.api.feature.features.ConfigurationFeature;
 import com.condation.cms.api.request.RequestContext;
 import com.condation.cms.api.utils.HTTPUtil;
 import com.condation.cms.api.utils.RequestUtil;
@@ -62,6 +64,14 @@ public boolean handle(Request request, Response response, Callback callback) thr
 		var queryParameters = HTTPUtil.queryParameters(request.getHttpURI().getQuery());
 		var requestContext = (RequestContext) request.getAttribute(CreateRequestContextFilter.REQUEST_CONTEXT);
 
+		// handle enabled spa mode
+		var spaEnabled = requestContext.get(ConfigurationFeature.class).configuration().get(SiteConfiguration.class).siteProperties().spaEnabled();
+		var notFoundContent = "/.technical/404";
+		if (spaEnabled) {
+			uri = "";
+			notFoundContent = "/";
+		}
+
 		try {
 			Optional<ContentResponse> content = contentResolver.getContent(requestContext);
 			response.setStatus(200);
@@ -73,7 +83,7 @@ public boolean handle(Request request, Response response, Callback callback) thr
 				if (content.isEmpty()) {
 					log.debug("content not found {}", uri);
 					try (var errorContext = requestContextFactory.create(request.getContext().getContextPath(),
-							"/.technical/404",
+							notFoundContent,
 							queryParameters, Optional.of(request))) {
 						content = contentResolver.getErrorContent(errorContext);
 						response.setStatus(404);

test-server/hosts/demo_spa/assets/app.css

@@ -0,0 +1,14 @@
+body {
+	font-family: sans-serif;
+	padding: 2rem;
+}
+
+nav a {
+	margin-right: 1rem;
+	text-decoration: none;
+	color: steelblue;
+}
+
+nav a:hover {
+	text-decoration: underline;
+}

test-server/hosts/demo_spa/assets/app.js

@@ -0,0 +1,30 @@
+const routes = {
+	"/": () => "<h1>Welcome!</h1><p>This is the starting page.</p>",
+	"/about": () => "<h1>About us</h1><p>We are the team behind CondationCMS.</p>",
+	"/contact": () => "<h1>Contact</h1><p>Send us a message!</p>",
+};
+
+function router() {
+	const path = window.location.pathname;
+	const content = routes[path] ? routes[path]() : "<h1>404</h1><p>Seite nicht gefunden</p>";
+	document.getElementById("app").innerHTML = content;
+}
+
+function navigateTo(url) {
+	history.pushState(null, null, url);
+	router();
+}
+
+// Link-Klicks abfangen
+document.addEventListener("click", e => {
+	if (e.target.matches("[data-link]")) {
+		e.preventDefault();
+		navigateTo(e.target.href);
+	}
+});
+
+// Popstate (zurück/vor)
+window.addEventListener("popstate", router);
+
+// Initialer Aufruf
+document.addEventListener("DOMContentLoaded", router);

test-server/hosts/demo_spa/content/index.md

@@ -0,0 +1,10 @@
+---
+title: Startseite
+template: index.html
+search:
+    index: false
+---
+
+# Demo Project
+
+![TestBild!](/media/images/test.jpg?format=small)

test-server/hosts/demo_spa/site-dev.toml

@@ -0,0 +1 @@
+hostname = [ "localhost5" ]

test-server/hosts/demo_spa/site.toml

@@ -0,0 +1,7 @@
+id = "demo-spa"
+hostname = [ "localhost2" ]
+baseurl = "http://localhosts:2020"
+language = "en"
+
+[spa]
+enabled = true

test-server/hosts/demo_spa/templates/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Mini SPA</title>
+  <link rel="stylesheet" href="/assets/app.css" />
+</head>
+<body>
+  <nav>
+    <a href="/" data-link>Home</a>
+    <a href="/about" data-link>About us</a>
+    <a href="/contact" data-link>Contact</a>
+  </nav>
+
+  <main id="app">
+    <!-- content gets rendered here -->
+  </main>
+
+  <script src="/assets/app.js"></script>
+</body>
+</html>
+