From 3e81ea33ac1941b0ef3f84a6b906f76caf36ad48 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 11:18:55 +0100
Subject: [PATCH 01/10] 0.27.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8ddf903..e96099e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@neo4j/docs-ui",
-      "version": "0.27.1",
+      "version": "0.27.2",
       "license": "MPL-2.0",
       "dependencies": {
         "@antora/cli": "^2.3.3",
diff --git a/package.json b/package.json
index 12ecec9..63ca07c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "description": "Produces the UI bundle for the Neo4j documentation site",
   "homepage": "https://github.com/neo4j-documentation/docs-ui",
   "license": "MPL-2.0",

From 559a96d3cbe8e2d2336c3167f36e7bdc962f580d Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 11:19:12 +0100
Subject: [PATCH 02/10] 0.27.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e96099e..dc1b3f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.2",
+  "version": "0.27.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@neo4j/docs-ui",
-      "version": "0.27.2",
+      "version": "0.27.3",
       "license": "MPL-2.0",
       "dependencies": {
         "@antora/cli": "^2.3.3",
diff --git a/package.json b/package.json
index 63ca07c..9e01dc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.2",
+  "version": "0.27.3",
   "description": "Produces the UI bundle for the Neo4j documentation site",
   "homepage": "https://github.com/neo4j-documentation/docs-ui",
   "license": "MPL-2.0",

From e87fb2e99ccf1ace50134b7879f6a6b6d08a34d2 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 11:19:25 +0100
Subject: [PATCH 03/10] 0.27.4

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dc1b3f9..47e0edd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.3",
+  "version": "0.27.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@neo4j/docs-ui",
-      "version": "0.27.3",
+      "version": "0.27.4",
       "license": "MPL-2.0",
       "dependencies": {
         "@antora/cli": "^2.3.3",
diff --git a/package.json b/package.json
index 9e01dc2..ff6ff2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.3",
+  "version": "0.27.4",
   "description": "Produces the UI bundle for the Neo4j documentation site",
   "homepage": "https://github.com/neo4j-documentation/docs-ui",
   "license": "MPL-2.0",

From 1bf6c75784137bd6482254f81aa742ec0404c824 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 14:43:42 +0100
Subject: [PATCH 04/10] Fixing selectable cards in hub subpages and keep
 exploring widget

---
 preview-src/docs-hub.adoc | 28 +++++++++++++++++++++++-----
 src/css/docs-ndl.css      | 33 ++++++++++-----------------------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
index 7d07c22..467827a 100644
--- a/preview-src/docs-hub.adoc
+++ b/preview-src/docs-hub.adoc
@@ -7,7 +7,8 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.cards.not-selectable]
+[.cards.selectable]
+
 == Developer tools documentation
 
 Use Neo4j tools to query and manage your databases, import data, and create graphical visualizations. 
@@ -49,7 +50,7 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to model and import data to your Neo4j database.
 
-[.link]
+[.link.hide]
 link:{docs-home}/data-importer[]
 
 [.display.card.selectable]
@@ -65,7 +66,7 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to experience Neo4j on your local desktop.
 
-[.link]
+[.link.hide]
 link:{docs-home}/desktop-manual[]
 
 [.display.card.selectable]
@@ -81,5 +82,22 @@ Neo4j Ops Manager
 [.description]
 Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enterprise with Neo4j Ops Manager.
 
-[.link]
-link:{docs-home}/ops-manager[]
\ No newline at end of file
+[.link.hide]
+link:{docs-home}/ops-manager[]
+
+[.next-steps]
+== Keep exploring
+
+Here are some recommended resources to get started with data visualization:
+
+. link:https://neo4j.com/developer-blog/15-tools-for-visualizing-your-neo4j-graph-database/[*15 Tools for Visualizing Your Neo4j Graph Database*]
++
+Read an overview of the graph visualization landscape.
+
+. link:https://medium.com/neo4j/showing-charts-for-neo4j-query-results-using-amcharts-and-structr-efae0b7a04f0[*Showing Charts for Neo4j Query Results using amCharts and Structr*]
++ 
+Learn how to render a bar chart based upon the example movies graph.
+
+. link:https://medium.com/neo4j/working-with-neo4j-date-and-spatial-types-in-a-react-js-app-5475b5042b50[*Working With Neo4j Date And Spatial Types In A React.js App*]
++
+Learn how to build a dashboard app with Neo4j, Mapbox, React, and Nivo Charts.
\ No newline at end of file
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 1b2c411..2090ec4 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -3,18 +3,6 @@
   src: url('https://storage.googleapis.com/neo4j-fonts/Syne%20Neo%20Medium%20Font.otf') format('opentype');
 }
 
-@media screen and (min-width: 1024px) {
-  body:not(.landing) main > .content {
-    margin-top: 0;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .doc > .sect-header > h1.page:first-child {
-    margin-top: 0;
-  }
-}
-
 body.docs-ndl.hub,
 body.docs-ndl.explainer {
   background: rgba(var(--colors-neutral-15));
@@ -164,7 +152,6 @@ body.docs-ndl.explainer .toolbar {
 
 body.docs-ndl .doc a {
   text-decoration: none;
-  cursor: default;
 }
 
 body.docs-ndl .doc a::after {
@@ -204,13 +191,13 @@ body.docs-ndl .doc .flex-column {
 }
 
 body.docs-ndl .doc > .sect-header > h1.page:first-child {
-  margin-top: 0;
+  margin-top: 1rem;
   /* font-size: var(--font-size-h1); */
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 body.docs-ndl.hub .doc div:not(.display) h2 {
-  display: none;
+  display: flex;
 }
 
 body.landing .toc {
@@ -478,10 +465,6 @@ body.docs-ndl .cards .sect2.selectable a {
   text-decoration: solid;
 }
 
-body.docs-ndl .cards .sect2.selectable .link a:hover {
-  text-decoration: underline;
-}
-
 body.docs-ndl .cards .sect2.selectable:hover div.description {
   text-decoration: none;
 }
@@ -561,7 +544,6 @@ body.docs-ndl .highlights .list a:hover,
 body.docs-ndl .highlights .list a:focus {
   text-decoration: none;
   background-color: var(--toc_hover-background-color);
-  cursor: default;
 }
 
 body.docs-ndl .highlights .list ul li {
@@ -608,7 +590,6 @@ body.docs-ndl .lists ul li {
 body.docs-ndl .lists ul li a {
   font-weight: var(--font-weight-normal);
   text-decoration: none;
-  cursor: default;
 }
 
 /* cards */
@@ -656,7 +637,6 @@ body.docs-ndl .cards.selectable .sect2:hover {
   transition: 0.1s linear;
   border: 1px solid var(--page-version-missing-font-color);
   box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
-  cursor: default;
 }
 
 /* styles for specific types of cards:
@@ -829,6 +809,13 @@ body.docs-ndl .cards .sect2.selectable .paragraph.link {
   display: flex;
 }
 
+body.docs-ndl .cards.selectable .sect2 .paragraph.link.hide {
+  box-sizing: border-box;
+  padding-top: 0;
+  margin-top: auto;
+  font-size: 0;
+}
+
 body.docs-ndl .cards.selectable .sect2 .paragraph.link,
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
   box-sizing: border-box;

From 31ad4f764e16d3cc4ce93e4c684fe7daac46a294 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 14:47:02 +0100
Subject: [PATCH 05/10] reverting some changes

---
 package.json         |  2 +-
 src/css/docs-ndl.css | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ff6ff2b..12ecec9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.4",
+  "version": "0.27.1",
   "description": "Produces the UI bundle for the Neo4j documentation site",
   "homepage": "https://github.com/neo4j-documentation/docs-ui",
   "license": "MPL-2.0",
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 2090ec4..2da1f28 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -3,6 +3,18 @@
   src: url('https://storage.googleapis.com/neo4j-fonts/Syne%20Neo%20Medium%20Font.otf') format('opentype');
 }
 
+@media screen and (min-width: 1024px) {
+  body:not(.landing) main > .content {
+    margin-top: 0;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .doc > .sect-header > h1.page:first-child {
+    margin-top: 0;
+  }
+}
+
 body.docs-ndl.hub,
 body.docs-ndl.explainer {
   background: rgba(var(--colors-neutral-15));
@@ -152,6 +164,7 @@ body.docs-ndl.explainer .toolbar {
 
 body.docs-ndl .doc a {
   text-decoration: none;
+  cursor: default;
 }
 
 body.docs-ndl .doc a::after {
@@ -191,9 +204,9 @@ body.docs-ndl .doc .flex-column {
 }
 
 body.docs-ndl .doc > .sect-header > h1.page:first-child {
-  margin-top: 1rem;
+  margin-top: 0;
   /* font-size: var(--font-size-h1); */
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 body.docs-ndl.hub .doc div:not(.display) h2 {

From c20fd69dad7aef6fd3c220382b276a0124d80b4f Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 14:48:32 +0100
Subject: [PATCH 06/10] reverting some changes

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 47e0edd..8ddf903 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@neo4j/docs-ui",
-  "version": "0.27.4",
+  "version": "0.27.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@neo4j/docs-ui",
-      "version": "0.27.4",
+      "version": "0.27.1",
       "license": "MPL-2.0",
       "dependencies": {
         "@antora/cli": "^2.3.3",

From eeb9acbe64e09f9aa5a5777f5bd07801f35e03ac Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Tue, 17 Dec 2024 14:50:06 +0100
Subject: [PATCH 07/10] reverting some changes

---
 src/css/docs-ndl.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 2da1f28..1ec9516 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -478,6 +478,10 @@ body.docs-ndl .cards .sect2.selectable a {
   text-decoration: solid;
 }
 
+body.docs-ndl .cards .sect2.selectable .link a:hover {
+  text-decoration: underline;
+}
+
 body.docs-ndl .cards .sect2.selectable:hover div.description {
   text-decoration: none;
 }
@@ -557,6 +561,7 @@ body.docs-ndl .highlights .list a:hover,
 body.docs-ndl .highlights .list a:focus {
   text-decoration: none;
   background-color: var(--toc_hover-background-color);
+  cursor: default;
 }
 
 body.docs-ndl .highlights .list ul li {
@@ -603,6 +608,7 @@ body.docs-ndl .lists ul li {
 body.docs-ndl .lists ul li a {
   font-weight: var(--font-weight-normal);
   text-decoration: none;
+  cursor: default;
 }
 
 /* cards */
@@ -650,6 +656,7 @@ body.docs-ndl .cards.selectable .sect2:hover {
   transition: 0.1s linear;
   border: 1px solid var(--page-version-missing-font-color);
   box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
+  cursor: default;
 }
 
 /* styles for specific types of cards:

From b3a0a9fc48e884f7ca8c451f78bc3486f4d3f035 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Thu, 19 Dec 2024 15:09:48 +0100
Subject: [PATCH 08/10] reverting changes and fixing keep learning class on hub
 page example

---
 preview-src/docs-hub.adoc | 2 +-
 src/css/docs-ndl.css      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
index 467827a..38cb76e 100644
--- a/preview-src/docs-hub.adoc
+++ b/preview-src/docs-hub.adoc
@@ -85,7 +85,7 @@ Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enter
 [.link.hide]
 link:{docs-home}/ops-manager[]
 
-[.next-steps]
+[.display.next-steps]
 == Keep exploring
 
 Here are some recommended resources to get started with data visualization:
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 1ec9516..0791de9 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -210,7 +210,7 @@ body.docs-ndl .doc > .sect-header > h1.page:first-child {
 }
 
 body.docs-ndl.hub .doc div:not(.display) h2 {
-  display: flex;
+  display: none;
 }
 
 body.landing .toc {

From a2cb677c80120a2e36b7d34f67681130f6698407 Mon Sep 17 00:00:00 2001
From: lidiazuin <lidiazuin@gmail.com>
Date: Thu, 19 Dec 2024 15:11:37 +0100
Subject: [PATCH 09/10] fixing not-selectable class in example page

---
 preview-src/docs-hub.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
index 38cb76e..a6caae9 100644
--- a/preview-src/docs-hub.adoc
+++ b/preview-src/docs-hub.adoc
@@ -7,7 +7,7 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.cards.selectable]
+[.cards.not.selectable]
 
 == Developer tools documentation
 

From b6e29b65a8aba9229625439abc49be1500d31c03 Mon Sep 17 00:00:00 2001
From: Neil Dewhurst <ndewhurst@gmail.com>
Date: Thu, 19 Dec 2024 16:13:51 +0000
Subject: [PATCH 10/10] fixing the selectables

---
 preview-src/docs-hub.adoc | 15 ++++++++-------
 src/css/docs-ndl.css      | 16 +++++-----------
 src/js/70-docs-ndl.js     | 12 +++++++++---
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/preview-src/docs-hub.adoc b/preview-src/docs-hub.adoc
index a6caae9..792a443 100644
--- a/preview-src/docs-hub.adoc
+++ b/preview-src/docs-hub.adoc
@@ -7,7 +7,7 @@
 // :page-disablefeedback: true
 :page-toclevels: -1
 
-[.cards.not.selectable]
+[.cards]
 
 == Developer tools documentation
 
@@ -37,7 +37,7 @@ Write and execute Cypher queries and visualize the results in nodes and relation
 link:{docs-home}/browser-manual/[Neo4j Browser] +
 link:{docs-home}/aura/preview/query/introduction/[Query (Aura)]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Data Importer
 
@@ -50,10 +50,11 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to model and import data to your Neo4j database.
 
-[.link.hide]
+[.link]
+link:{docs-home}/data-importer[]
 link:{docs-home}/data-importer[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Desktop
 
@@ -66,10 +67,10 @@ image:icons/ndl/icon-scientist.svg[]
 [.description]
 Learn how to experience Neo4j on your local desktop.
 
-[.link.hide]
+[.link]
 link:{docs-home}/desktop-manual[]
 
-[.display.card.selectable]
+[.selectable]
 
 === Neo4j Ops Manager
 
@@ -82,7 +83,7 @@ Neo4j Ops Manager
 [.description]
 Learn how to monitor, administer, and operate all of the Neo4j DBMSs in an Enterprise with Neo4j Ops Manager.
 
-[.link.hide]
+[.link]
 link:{docs-home}/ops-manager[]
 
 [.display.next-steps]
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
index 0791de9..809315f 100644
--- a/src/css/docs-ndl.css
+++ b/src/css/docs-ndl.css
@@ -636,8 +636,8 @@ body.docs-ndl.explainer .sectionbody > div.sect2 {
   border: 1px solid var(--panel-border-color);
 }
 
-body.docs-ndl .cards .sect2 > a,
-body.docs-ndl .cards:not(.selectable) .sect2,
+body.docs-ndl .cards .sect2.selectable > a,
+body.docs-ndl .cards .sect2:not(.selectable),
 body.docs-ndl .lists .sect2 {
   overflow: hidden;
   display: flex;
@@ -652,7 +652,8 @@ body.docs-ndl .lists .sect2 {
   line-height: 2rem;
 }
 
-body.docs-ndl .cards.selectable .sect2:hover {
+body.docs-ndl .cards.selectable .sect2:hover,
+body.docs-ndl .cards .sect2.selectable:hover {
   transition: 0.1s linear;
   border: 1px solid var(--page-version-missing-font-color);
   box-shadow: 0 1px 2px 0 rgba(26, 27, 29, 0.18);
@@ -826,14 +827,7 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
 }
 
 body.docs-ndl .cards .sect2.selectable .paragraph.link {
-  display: flex;
-}
-
-body.docs-ndl .cards.selectable .sect2 .paragraph.link.hide {
-  box-sizing: border-box;
-  padding-top: 0;
-  margin-top: auto;
-  font-size: 0;
+  display: none;
 }
 
 body.docs-ndl .cards.selectable .sect2 .paragraph.link,
diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js
index f971273..da6f6f0 100644
--- a/src/js/70-docs-ndl.js
+++ b/src/js/70-docs-ndl.js
@@ -7,8 +7,12 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // if a card is 'selectable' then make it a click target
+  // by taking the link from the card and wrapping the whole card in an anchor tag with that link
+  // if the card contains more than one link, the first link is used
+  // css hides the link div in selectable cards
   var makeClickable = function (card) {
-    var links = card.querySelectorAll('div.sect2:not(.not-selectable) div.link')
+    var links = card.querySelectorAll('div.link')
     links.forEach(function (link) {
       var target = link.querySelector('a').getAttribute('href')
       var card = link.parentElement
@@ -43,8 +47,10 @@ document.addEventListener('DOMContentLoaded', function () {
     a.remove()
   })
 
-  // Add links to cards
-  document.querySelectorAll('.cards.selectable')
+  // Add links to selectable cards
+  // all cards in a cards.selectable container are clickable
+  // cards in a .cards container are clickable if the card has .selectable
+  document.querySelectorAll('.cards .selectable, .cards.selectable .sect2')
     .forEach(makeClickable)
 
   // Move labels to the icon div to position them