Icon urls (#1106)

* Fix icon URLs

* Revert unintended changes

---------

Co-authored-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Author: tunetheweb

package.json

@@ -17,6 +17,7 @@
     "build": "webpack --config webpack.config.js --mode production",
     "watch": "webpack --config webpack.config.js --mode production --watch",
     "generate": "node ./tools/generate",
+    "dev": "run-script-os",
     "start": "run-script-os",
     "start:darwin:linux": "./tools/scripts/run_and_test_website.sh -d",
     "start:win32": "call tools/scripts/run_and_test_website.bat",

src/js/techreport/combobox.js

@@ -21,19 +21,20 @@ class ComboBox {
     // Add options in the dropdown list
     const listbox = this.element.querySelector('[role="listbox"]');
     rows.forEach((row, index) => {
+      const icon = row.icon;
       const option = document.createElement('div');
       option.setAttribute('role', 'option');
       option.setAttribute('aria-selected', 'false');
-      option.dataset.name = row;
+      option.dataset.name = row.technology;
       option.dataset.key = index;
-      option.textContent = row;
-      option.id = `${this.element.dataset.id}-${row.replaceAll(' ','-')}`;
+      option.textContent = row.technology;
+      option.id = `${this.element.dataset.id}-${row.technology.replaceAll(' ','-')}`;
       const logo = document.createElement('img');
       logo.setAttribute('alt', '');
-      logo.setAttribute('src', `https://cdn.httparchive.org/static/icons/${row}.png`);
+      logo.setAttribute('src', `https://cdn.httparchive.org/static/icons/${icon}`);
       logo.setAttribute('loading', 'lazy');
       option.append(logo);
-      if(this.selected.includes(row)) {
+      if(this.selected.includes(row.technology)) {
         option.setAttribute('aria-selected', true);
       }
       listbox.append(option);
@@ -83,7 +84,7 @@ class ComboBox {
     const options = this.element.querySelector('[role="listbox"]');
 
     this.filteredData = this.data.filter(row => {
-      return row.toLowerCase().includes(search.toLowerCase());
+      return row.technology.toLowerCase().includes(search.toLowerCase());
     });
 
     options.textContent = '';
@@ -186,6 +187,7 @@ class ComboBox {
   }
 
   showSelectedElement(name) {
+    const icon = this.data.find(((tech) => tech.technology == name))?.icon;
     /* Add selected element to an overview list */
     const selection = document.createElement('li');
     selection.dataset.name = name;
@@ -198,7 +200,7 @@ class ComboBox {
 
     /* Add the app logo */
     const appIcon = document.createElement('img');
-    appIcon.setAttribute('src', `https://cdn.httparchive.org/static/icons/${encodeURI(name)}.png`);
+    appIcon.setAttribute('src', `https://cdn.httparchive.org/static/icons/${encodeURI(icon)}`);
     appIcon.setAttribute('alt', '');
     appIcon.classList.add('logo');
     deleteSelection.append(appIcon);

src/js/techreport/index.js

@@ -359,7 +359,7 @@ class TechReport {
       },
       {
         name: 'technologies',
-        endpoint: 'technologies?onlyname',
+        endpoint: 'technologies?fields=technology,icon',
       },
       {
         name: 'ranks',
@@ -406,8 +406,9 @@ class TechReport {
   // Update drilldown page components
   updateDrilldownComponents(data) {
     const app = this.filters.app[0];
+    const icon = data[app].at(-1).icon;
     DrilldownHeader.update(this.filters);
-    DrilldownHeader.setIcon(`${encodeURI(app)}.png`);
+    DrilldownHeader.setIcon(`${encodeURI(icon)}`);
 
     if(data && data[app]) {
       UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels);

templates/index.html

@@ -31,7 +31,7 @@ <h1>
     </div>
   </section>
 
-  <section class="alt" style="padding: 60px 15px;">
+  <section style="padding: 60px 15px;">
     <div class="container">
       <div class="row">
         <div class="col-lg-7 col-sm-6 col-md-6 col-xs-12">

templates/techreport/components/table_linked.html

@@ -58,7 +58,7 @@
               {% if column.key == "technology" %}
                 <th class="app-cell">
                   <span class="app-wrapper">
-                    <span class="app-img" aria-hidden="true" style="background-image: url(https://cdn.httparchive.org/static/icons/{{ tech }}.png)"></span>
+                    <span class="app-img" aria-hidden="true"></span>
                     <a href="/reports/techreport/tech?tech={{ tech }}&geo={{ tech_report_page.filters.geo }}&rank={{ tech_report_page.filters.rank }}">{{ tech }}</a>
                   </span>
                 </th>