Add project files

.gitignore

@@ -1,144 +1 @@
-
+node_modules
-
-### Created by https://www.gitignore.io
-### Node ###
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# Optional stylelint cache
-.stylelintcache
-
-# SvelteKit build / generate output
-.svelte-kit

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/down-message.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/down-message.iml" filepath="$PROJECT_DIR$/.idea/down-message.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

flake.lock

@@ -0,0 +1,59 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1689068808,
+        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1691003216,
+        "narHash": "sha256-Qq/MPkhS12Bl0X060pPvX3v9ac3f2rRQfHjjozPh/Qs=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "4a56ce9727a0c5478a836a0d8a8f641c5b9a3d5f",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,28 @@
+{
+  description = "down-message";
+
+  inputs.flake-utils.url = "github:numtide/flake-utils";
+
+  outputs = { self, nixpkgs, flake-utils }:
+  flake-utils.lib.eachDefaultSystem
+  (system:
+    let
+      pkgs = import nixpkgs {
+        inherit system;
+        config.allowUnfree = true;
+      };
+    in {
+      devShells.default = pkgs.mkShell {
+        packages = with pkgs; [
+          jetbrains.webstorm
+          nodejs
+          nodePackages.live-server
+        ];
+
+        shellHook = ''
+          webstorm . && exit
+        '';
+      };
+    }
+  );
+}

index.html

@@ -1,39 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-        <meta charset="UTF-8"/>
+		<title>Service unavailable</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="robots" content="noindex">
-
-        <title>Service unavailable</title>
-
 		<link rel="stylesheet" type="text/css" href="style.css">
         <link rel="shortcut icon" type="image/png" href="assets/icon.jpg">
+        <meta name="color-scheme" content="light dark">
+        <meta name="robots" content="noindex">
     </head>
     <body>
-    <main>
         <h1>Oh, no!</h1>
-        <p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and/or powered off temporarily.</p>
+        <p>The website you are trying to reach is currently down. Your URL works, but the system is in maintenance and powered off temporarily.</p>
-
-        <div id="offlineReason"></div>
-
         <p>Please come back later!</p>
         <p>Kind regards, <a href="https://tibo.depeuter.dev">Tibo De Peuter</a></p>
 
         <div id="checkContainer"></div>
 
-        <p><a href="https://status.depeuter.dev/" target="_blank">View uptime monitor</a></p>
-
         <img src="/assets/oh-no-kitten.jpg" alt="kitten holding paw to forehead"/>
-    </main>
 
-    <footer>
+        <script src="script.js"></script>
-        <p>
-            Made with <span class="heart">&hearts;</span>.
-            <a href="https://github.com/tdpeuter/down-message" about="source code of this webpage" class="hidden">Source code</a>
-        </p>
-    </footer>
-
-    <script src="script.js"></script>
     </body>
 </html>

package.json

@@ -4,7 +4,7 @@
   "description": "Ultra simple website to tell people a service is down",
   "main": "index.html",
   "scripts": {
-    "start": "echo \"Error: no start specified\" && exit 1",
+    "start": "live-server --port=3000 .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -12,5 +12,8 @@
     "url": "https://git.depeuter.dev/tdpeuter/down-message.git"
   },
   "author": "Tibo De Peuter <tibo@depeuter.dev>",
-  "license": "GPL-3.0-only"
+  "license": "GPL-3.0-only",
+  "devDependencies": {
+    "live-server": "^1.2.2"
+  }
 }

script.js

@@ -48,51 +48,14 @@ function createCheckButton(destination) {
 	check(destination, container, dot, message, button);
 }
 
-function createTryAgainButton(destination) {
+function checkDestination() {
-	const destinationUrl = new URL(destination);
+    const url = window.location.search;
+    const searchParams = new URLSearchParams(url);
+    const destination = searchParams.get('destination');
 
-	let message = 'Try again'
+    if (destination) {
-	if (destinationUrl && destinationUrl.hostname) {
+        createCheckButton(destination);
-		message = `Try reaching ${destinationUrl.hostname} again`;
+    }
-	}
-
-	const button = document.createElement('button');
-	button.textContent = message;
-	button.onclick = function () {
-		window.location.href = destination;
-	}
-
-	document.getElementById('checkContainer').appendChild(button);
 }
 
-function createOfflineReason(reason) {
+checkDestination();
-	const foreword = document.createElement('p');
-	foreword.innerHTML = "The website is offline for the following reason:";
-
-	const reasonMessage = document.createElement('p');
-	reasonMessage.innerHTML = reason;
-
-	const block = document.createElement('blockquote');
-	block.appendChild(reasonMessage);
-
-	const offlineReason = document.getElementById('offlineReason');
-	offlineReason.appendChild(foreword);
-	offlineReason.appendChild(block);
-}
-
-function checkSearchParameters() {
-	const url = window.location.search;
-	const searchParams = new URLSearchParams(url);
-
-	const destination = searchParams.get('destination');
-	if (destination) {
-		createTryAgainButton(destination);
-	}
-
-	const offlineReason = searchParams.get('reason');
-	if (offlineReason) {
-		createOfflineReason(offlineReason);
-	}
-}
-
-checkSearchParameters();

style.css

@@ -1,22 +1,3 @@
-:root {
-    /* Support dark mode */
-    color-scheme: light dark;
-}
-
-body {
-    margin: 20px;
-    padding: 10px;
-}
-
-footer {
-    opacity: 0.6;
-    font-size: small;
-
-    display: flex;
-    width: 100%;
-    justify-content: center;
-}
-
 .dot {
     width: 15px;
     height: 15px;
@@ -36,55 +17,3 @@ footer {
 .dot.red {
     background-color: red;
 }
-
-.heart {
-    color: #CD001A; /* Cherry red */
-}
-
-/* Don't let media go offscreen */
-img,
-picture,
-video {
-    max-width: 100%;
-    padding: 2% 0;
-}
-
-/* Display the button in the center of small screens such as phones */
-@media screen and (max-device-width: 1000px) {
-    #checkContainer {
-        display: flex;
-        justify-content: center;
-    }
-}
-
-/* Hover animation for URLs */
-a {
-    text-decoration: none;
-    color: inherit; /* Reset to default text color */
-    position: relative;
-}
-
-a::before {
-    content: '';
-    position: absolute;
-    /* Height of the line */
-    bottom: -2px;
-    height: 2px;
-    left: 0;
-    width: 0;
-    background-color: orange;
-    transition: width 0.3s ease;
-}
-
-a:hover::before {
-    width: 100%;
-}
-
-blockquote p::before {
-  content: "\201C";
-}
-
-blockquote p::after {
-  content: "\201D";
-}
-