From b50cfc39366034109943ce10358fd0cc62d9f216 Mon Sep 17 00:00:00 2001
From: Zbynek Konecny <zbynek1729@gmail.com>
Date: Sat, 9 Sep 2023 13:46:54 +0200
Subject: [PATCH] Add link icon to release card header (#1492)

Co-authored-by: Gavin Mogan <github@gavinmogan.com>
---
 plugins/plugin-site/gatsby-browser.js         |  8 +++----
 plugins/plugin-site/gatsby-config.mjs         |  3 ++-
 .../plugin-site/src/components/LineChart.jsx  |  2 +-
 .../plugin-site/src/components/Pagination.jsx |  4 ----
 plugins/plugin-site/src/components/Plugin.jsx |  2 +-
 .../src/components/PluginHealthScore.jsx      |  4 ----
 .../src/components/PluginReleases.jsx         |  3 +++
 plugins/plugin-site/src/styles/base.css       | 24 +++++++++++++++++++
 8 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/plugins/plugin-site/gatsby-browser.js b/plugins/plugin-site/gatsby-browser.js
index 82556d67c..b9212e10e 100644
--- a/plugins/plugin-site/gatsby-browser.js
+++ b/plugins/plugin-site/gatsby-browser.js
@@ -9,8 +9,7 @@ exports.onClientEntry = function () {
         window.location.href = `/${window.location.pathname.split('/')[1]}/dependencies/`;
     }
 
-    require.ensure(['@sentry/browser'], (require) => {
-        const Sentry = require('@sentry/browser');
+    import('@sentry/browser').then((Sentry) => {
         Sentry.init({
             dsn: 'https://495b0bd32a5e4a2287c3fe4b061ee24f@sentry.io/1882460',
             environment: process.env.NODE_ENV,
@@ -60,7 +59,8 @@ exports.onClientEntry = function () {
                 /metrics\.itunes\.apple\.com\.edgesuite\.net\//i
             ]
         });
-        window.Sentry = Sentry;
-    });
+        return window.Sentry = Sentry;
+    /* eslint-disable no-console */
+    }).catch(e => console.error(e));
 };
 
diff --git a/plugins/plugin-site/gatsby-config.mjs b/plugins/plugin-site/gatsby-config.mjs
index 78049137d..1604e13ff 100644
--- a/plugins/plugin-site/gatsby-config.mjs
+++ b/plugins/plugin-site/gatsby-config.mjs
@@ -86,7 +86,8 @@ config.plugins = [
                 {
                     resolve: '@halkeye/gatsby-rehype-autolink-headers',
                     options: {
-                        isIconAfterHeader: true
+                        isIconAfterHeader: true,
+                        icon: '<ion-icon name="link-outline"></ion-icon>'
                     }
                 },
                 {
diff --git a/plugins/plugin-site/src/components/LineChart.jsx b/plugins/plugin-site/src/components/LineChart.jsx
index 0a07eab2b..52aa09c2e 100644
--- a/plugins/plugin-site/src/components/LineChart.jsx
+++ b/plugins/plugin-site/src/components/LineChart.jsx
@@ -91,7 +91,7 @@ function LineChart({installations}) {
     const height = 90;
     const length = installations.length;
     installations.slice(length > 12 ? length - 12 : 0, length).forEach((installation) => {
-        labels.push(MONTHS[new Date(installation.timestamp).getUTCMonth()]),
+        labels.push(MONTHS[new Date(installation.timestamp).getUTCMonth()]);
         data.push(installation.total);
     });
     const lineData = chartData(labels, data);
diff --git a/plugins/plugin-site/src/components/Pagination.jsx b/plugins/plugin-site/src/components/Pagination.jsx
index a8165d045..32a2804ba 100644
--- a/plugins/plugin-site/src/components/Pagination.jsx
+++ b/plugins/plugin-site/src/components/Pagination.jsx
@@ -7,10 +7,6 @@ function Pagination({limit, page, pages, total, setPage}) {
     const [pagesToDisplay, setPagesToDisplay] = React.useState(5);
     const [marginPagesDisplayed, setMarginPagesDisplayed] = React.useState(2);
 
-    if (total == 0) {
-        return null;
-    }
-
     const start = (limit * (page - 1));
     const end = Math.min(limit * (page), total);
 
diff --git a/plugins/plugin-site/src/components/Plugin.jsx b/plugins/plugin-site/src/components/Plugin.jsx
index 08cc4e379..51cc07b70 100644
--- a/plugins/plugin-site/src/components/Plugin.jsx
+++ b/plugins/plugin-site/src/components/Plugin.jsx
@@ -51,7 +51,7 @@ function Plugin({plugin: {name, title, stats, labels, excerpt, developers, build
                 <Developers developers={developers} />
             </div>
             <div className="Plugin--HealthScoreContainer">
-                <PluginHealthScore healthScore={healthScore} name={name}/>
+                {healthScore && (<PluginHealthScore healthScore={healthScore} name={name}/>)}
             </div>
         </div>
     );
diff --git a/plugins/plugin-site/src/components/PluginHealthScore.jsx b/plugins/plugin-site/src/components/PluginHealthScore.jsx
index c4331ae16..be48c0c84 100644
--- a/plugins/plugin-site/src/components/PluginHealthScore.jsx
+++ b/plugins/plugin-site/src/components/PluginHealthScore.jsx
@@ -3,10 +3,6 @@ import PropTypes from 'prop-types';
 import {Progress, Tooltip} from 'reactstrap';
 
 function PluginHealthScore({healthScore, name}) {
-    if (!healthScore) {
-        return null;
-    }
-    
     const score = healthScore.value || 0;
     const color =
     score > 80 ? 'success' : score > 60 ? 'warning' : 'danger';
diff --git a/plugins/plugin-site/src/components/PluginReleases.jsx b/plugins/plugin-site/src/components/PluginReleases.jsx
index 689d3eacb..dd79d2fa4 100644
--- a/plugins/plugin-site/src/components/PluginReleases.jsx
+++ b/plugins/plugin-site/src/components/PluginReleases.jsx
@@ -52,6 +52,9 @@ function PluginReleases({pluginId, versions}) {
                                     {release.bodyHTML && (<>
                                         <a href={release.htmlURL} title="See the release on GitHub" className="github-icon d-flex"><ion-icon name="logo-github" /></a>
                                     </>)}
+                                    <a className="anchor after" href={`#version_${version.version}`}>
+                                        <ion-icon name="link-outline"/>
+                                    </a>
                                 </div>
                                 <div>
                                     <TimeAgo date={new Date(version.releaseTimestamp)} formatter={formatter}/>
diff --git a/plugins/plugin-site/src/styles/base.css b/plugins/plugin-site/src/styles/base.css
index 153a05a38..883aba67a 100644
--- a/plugins/plugin-site/src/styles/base.css
+++ b/plugins/plugin-site/src/styles/base.css
@@ -56,6 +56,30 @@ body .showResults #plugin-search-form:before {display:none}
   display:table;                      /* Actually FF 20+ */
 }
 
+h1 .anchor ion-icon,
+h2 .anchor ion-icon,
+h3 .anchor ion-icon,
+h4 .anchor ion-icon,
+h5 .anchor ion-icon,
+h6 .anchor ion-icon {
+    visibility: hidden;
+}
+
+h1:hover .anchor ion-icon,
+h2:hover .anchor ion-icon,
+h3:hover .anchor ion-icon,
+h4:hover .anchor ion-icon,
+h5:hover .anchor ion-icon,
+h6:hover .anchor ion-icon,
+h1 .anchor:focus ion-icon,
+h2 .anchor:focus ion-icon,
+h3 .anchor:focus ion-icon,
+h4 .anchor:focus ion-icon,
+h5 .anchor:focus ion-icon,
+h6 .anchor:focus ion-icon {
+    visibility: visible;
+}
+
 .filters .show-all{
     border: none;
     background: #168BB9;