Handle the case of someone supplying a bad link

README.md

@@ -1,13 +1,18 @@
 #  changedetection.io
 ![changedetection.io](https://github.com/dgtlmoon/changedetection.io/actions/workflows/python-app.yml/badge.svg?branch=master)
-<a href="https://hub.docker.com/r/dgtlmoon/changedetection.io" target="_blank" title="Docker Pulls">
-<img src="https://img.shields.io/docker/pulls/dgtlmoon/changedetection.io" alt="Docker Pulls"/>
+<a href="https://hub.docker.com/r/dgtlmoon/changedetection.io" target="_blank" title="Change detection docker hub">
+  <img src="https://img.shields.io/docker/pulls/dgtlmoon/changedetection.io" alt="Docker Pulls"/>
+</a>
+<a href="https://hub.docker.com/r/dgtlmoon/changedetection.io" target="_blank" title="Change detection docker hub">
+  <img src="https://img.shields.io/docker/v/dgtlmoon/changedetection.io" alt="Change detection latest tag version"/> 
 </a>
 
 ## Self-hosted change monitoring of web pages.
 
 _Know when web pages change! Stay ontop of new information!_
 
+![Self-hosted web page change monitoring application screenshot](screenshot.png?raw=true "Self-hosted web page change monitoring screenshot")
+
 
 #### Example use cases
 
@@ -41,10 +46,6 @@ docker run -d --restart always -p "127.0.0.1:5000:5000" -v datastore-volume:/dat
   
 ### Screenshots
 
-Application running.
-
-![Self-hosted web page change monitoring application screenshot](screenshot.png?raw=true "Self-hosted web page change monitoring screenshot")
-
 Examining differences in content.
 
 ![Self-hosted web page change monitoring context difference screenshot](screenshot-diff.png?raw=true "Self-hosted web page change monitoring context difference screenshot")

backend/__init__.py

@@ -253,10 +253,12 @@ def changedetection_app(config=None, datastore_o=None):
         if uuid == 'first':
             uuid= list(datastore.data['watching'].keys()).pop()
 
-
         extra_stylesheets = ['/static/css/diff.css']
-
-        watch = datastore.data['watching'][uuid]
+        try:
+            watch = datastore.data['watching'][uuid]
+        except KeyError:
+            messages.append({'class': 'error', 'message': "No history found for the specified link, bad link?"})
+            return redirect(url_for('index'))
 
         dates = list(watch['history'].keys())
         # Convert to int, sort and back to str again

backend/static/css/styles.css

@@ -214,3 +214,26 @@ body:after, body:before {
     color: #fff;
 }
 
+#diff-col {
+    padding-left:40px;
+}
+#diff-jump {
+    position: fixed;
+    left: 0px;
+    top: 80px;
+    background: #fff;
+    padding: 10px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 5px 0 5px -2px #888;
+}
+
+#diff-jump a {
+    color: #1b98f8;
+    cursor: grabbing;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select:none;
+    user-select:none;
+    -o-user-select:none;
+}

backend/templates/diff.html

@@ -32,6 +32,9 @@
     <ins>Inserted Text</ins>
 </div>
 
+<div id="diff-jump">
+    <a onclick="next_diff();">Jump</a>
+</div>
 <div id="diff-ui">
 
     <table>
@@ -40,7 +43,7 @@
             <!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
             <td id="a" style="display: none;">{{previous}}</td>
             <td id="b" style="display: none;">{{newest}}</td>
-            <td>
+            <td id="diff-col">
                 <span id="result"></span>
             </td>
         </tr>
@@ -72,9 +75,12 @@ function changed() {
 		var node;
 		if (diff[i].removed) {
 			node = document.createElement('del');
+			node.classList.add("change");
 			node.appendChild(document.createTextNode(diff[i].value));
+
 		} else if (diff[i].added) {
 			node = document.createElement('ins');
+			node.classList.add("change");
 			node.appendChild(document.createTextNode(diff[i].value));
 		} else {
 			node = document.createTextNode(diff[i].value);
@@ -131,7 +137,26 @@ for (var i = 0; i < radio.length; i++) {
 }
 
 
+var inputs = document.getElementsByClassName('change');
+inputs.current=0;
 
+function next_diff() {
+
+    var element = inputs[inputs.current];
+    var headerOffset = 80;
+    var elementPosition = element.getBoundingClientRect().top;
+    var offsetPosition = elementPosition - headerOffset +  window.scrollY;
+
+    window.scrollTo({
+         top: offsetPosition,
+         behavior: "smooth"
+    });
+
+    inputs.current++;
+    if(inputs.current >= inputs.length) {
+      inputs.current=0;
+    }
+}
 
 
 </script>