Merge pull request #90 from digipolisantwerp/bugfix/reload-404-fix

TriangleJuice · web-flow · commit 2a22f3c414a0 · 2018-11-16T17:56:36.000+01:00
Added fix for an unwanted 404 page when the styleguide was reloaded o…
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Unreleased
 
+### Fixed
+- `core` Fixed an issue where an unwanted 404 was shown when the styleguide was reloaded on GitHub pages.
+
 
 ## [1.0.5] - 2018-11-13
 
diff --git a/angular.json b/angular.json
@@ -20,7 +20,8 @@
             "tsConfig": "styleguide/tsconfig.app.json",
             "assets": [
               "styleguide/favicon.ico",
-              "styleguide/assets"
+              "styleguide/assets",
+              "styleguide/404.html"
             ],
             "styles": [
               "styleguide/styles.scss",
@@ -87,7 +88,8 @@
             "scripts": [],
             "assets": [
               "styleguide/favicon.ico",
-              "styleguide/assets"
+              "styleguide/assets",
+              "styleguide/404.html"
             ]
           }
         },
diff --git a/styleguide/404.html b/styleguide/404.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Acpaas UI | Angular Modules</title>
+	<script>
+		// Store the URL the user was trying to access when receiving the 404.
+		sessionStorage.redirect = location.href;
+	</script>
+
+	<!-- Immediately redirect to the base URL so we can use the SPA routing. -->
+	<meta http-equiv="refresh" content="0;URL='/'"></meta>
+</head>
+<body>
+	<!-- IE required at least 512 bytes of data to show non-default 404. -->
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</body>
+</html>
diff --git a/styleguide/index.html b/styleguide/index.html
@@ -15,6 +15,23 @@
 
 </head>
 <body class="has-header has-navigation">
+	<!-- Github Pages hack to allow SPA refresh without receiving 404. -->
+	<script>
+		(function () {
+			// Retrieve the URL the user was trying to access when receiving the 404.
+			var redirect = sessionStorage.redirect;
+
+			// Remove the URL from sessionStorage.
+			delete sessionStorage.redirect;
+
+			// Check if we actually need to redirect.
+			if (redirect && redirect != location.href) {
+				// We need to redirect to the URL the user was trying to access.
+				history.replaceState(null, null, redirect);
+			}
+		})();
+	</script>
+	<!-- /Github Pages hack. -->
 	<guide-root></guide-root>
 </body>
 </html>
