Adding support for images in search.

js-src/index.js

@@ -133,6 +133,11 @@ function showResults(searchResults, searchObjects) {
     for (let searchObject of searchObjects) {
         const searchResultContainer = document.createElement('div')
         searchResultContainer.classList.add('search-result')
+        const rowTitleUrlImageDiv = document.createElement('div');
+        rowTitleUrlImageDiv.classList.add('row-title-url-image');
+        const columnTitleUrl = document.createElement('div');
+        columnTitleUrl.classList.add('column-title-url');
+        const img = document.createElement('img')
         const title = document.createElement('b')
         const url = document.createElement('a')
         const content = document.createElement('p')
@@ -148,13 +153,33 @@ function showResults(searchResults, searchObjects) {
                 + port
                 + searchObject.url
         }
+        let urlImage = searchObject.urlImage;
+        if (urlImage !== null && urlImage.match(/^\//)) {
+            urlImage = window.location.protocol 
+                + "//" + window.location.hostname 
+                + port
+                + urlImage
+        }
+        if (urlImage !== null) {
+            img.alt = ""
+            img.src = urlImage
+        }
+
         url.href = searchObject.url
         url.innerText = searchObject.url
         content.innerText = searchObject.content
 
-        searchResultContainer.appendChild(title)
-        searchResultContainer.appendChild(document.createElement('br'))
-        searchResultContainer.appendChild(url)
+        if (urlImage !== null) {
+            rowTitleUrlImageDiv.appendChild(img)
+        }
+
+        columnTitleUrl.appendChild(title);
+        columnTitleUrl.appendChild(document.createElement('br'))
+        columnTitleUrl.appendChild(url)
+
+        rowTitleUrlImageDiv.appendChild(columnTitleUrl)
+
+        searchResultContainer.appendChild(rowTitleUrlImageDiv)
         searchResultContainer.appendChild(content)
         searchResults.appendChild(searchResultContainer)
     }

public/css/styles.css

@@ -22,6 +22,13 @@ body {
       display: flex; }
     body div.search-overlay div.search-results {
       margin: 7px; }
+      body div.search-overlay div.search-results img {
+        width: 75px; }
+      body div.search-overlay div.search-results div.search-result div.row-title-url-image {
+        display: flex;
+        flex-direction: row; }
+        body div.search-overlay div.search-results div.search-result div.row-title-url-image img {
+          margin: 10px; }
     body div.search-overlay div.bounding-search-bar {
       margin: 7px;
       width: calc(100% - 20px);
@@ -223,7 +230,7 @@ body {
     body div.page-contents div.child-categories-mobile a {
       padding-left: 2.5rem; }
     body div.page-contents img {
-      max-width: 700px;
+      max-width: 100%;
       margin-left: auto;
       margin-right: auto;
       display: block; }
@@ -379,7 +386,9 @@ body {
     width: 45%;
     margin-left: 5%; }
     body div.page-contents div.description div.articles a:nth-child(2n+1) {
-      margin-left: 0%; } }
+      margin-left: 0%; }
+  body div.page-contents img {
+    max-width: 694px; } }
 
 @media (min-width: 1100px) {
   body nav.mobile-shortcuts {
@@ -392,6 +401,9 @@ body {
     border: solid 1px black; }
     body div.page-contents nav.mobile-foldable, body div.page-contents nav.mobile-foldable.show {
       display: none; }
+    body div.page-contents div.description.open-browser-container {
+      margin-left: 0;
+      margin-right: 0; }
     body div.page-contents div.description {
       margin-left: 10%;
       margin-right: 10%; }

public/css/styles.scss

@@ -29,6 +29,18 @@ body {
     }
     div.search-results {
         margin: 7px;
+        img {
+            width: 75px;
+        }
+        div.search-result {
+            div.row-title-url-image {
+                display: flex;
+                flex-direction: row;
+                img {
+                    margin: 10px;
+                }
+            }
+        }
     }
     div.bounding-search-bar {
         margin: 7px;
@@ -324,7 +336,7 @@ body {
     }
 
     img {
-      max-width: 700px;
+      max-width: 100%;
       margin-left: auto;
       margin-right: auto;
       display: block;
@@ -583,6 +595,9 @@ body {
           }
         }
       }
+      img {
+        max-width: 694px;
+      }
     }
   }
 }
@@ -598,6 +613,10 @@ body {
         display: none;
       }
 
+      div.description.open-browser-container {
+        margin-left: 0;
+        margin-right: 0;
+      }
       div.description {
         margin-left: 10%;
         margin-right: 10%;