diff --git a/package.json b/package.json
index f805a6ac..8fdde75c 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
"@antora/cli": "^2.3.3",
"@antora/site-generator-default": "^2.3.3",
"@neo4j-ndl/base": "^2.0.0",
+ "@neo4j-ndl/react": "^2.9.4",
"font-awesome": "^4.7.0"
},
"husky": {
diff --git a/preview-src/docs-index.adoc b/preview-src/docs-index.adoc
deleted file mode 100644
index 3bbe7b6c..00000000
--- a/preview-src/docs-index.adoc
+++ /dev/null
@@ -1,131 +0,0 @@
-= Neo4j documentation
-:page-layout: docs-home
-:page-theme: docs
-:page-hide-nav-title: true
-:!toc:
-:page-toclevels: -1
-
-[.display]
-== Recommended resources
-
-=== Neo4j DBMS
-
-[.icon]
-// include::partial$neo4j-icon-svg.adoc[]
-image:icon-database.svg[]
-
-[.description]
-Learn about graph database concepts, introduce yourself to Cypher, and find useful resources.
-
-[.link]
-link:{docs-home}/getting-started[Get started]
-
-=== Neo4j AuraDB
-
-[.icon]
-image:icon-cloud-file.svg[]
-
-[.description]
-Learn how to create accounts, manage databases, and access AuraDB via cloud providers.
-
-[.link]
-link:{docs-home}/aura[Get started]
-
-=== Cypher
-
-[.icon]
-image:icon-cypher.svg[]
-
-[.description]
-Learn about Cypher, the graph query language for Neo4j and AuraDB.
-
-[.link]
-link:{docs-home}/cypher-manual[Get started]
-
-=== Upgrade or migrate
-
-[.icon]
-image:icon-upgrade.svg[]
-
-[.description]
-Learn how to keep your Neo4j deployment up-to-date.
-
-[.link]
-link:{docs-home}/upgrade-migration-guide[Upgrade / Migrate]
-
-=== Connect your application
-
-[.icon]
-image:icon-connect.svg[]
-
-[.description]
-Discover the drivers, APIs, and connectors that facilitate the use of Neo4j and AuraDB.
-
-[.link]
-xref:drivers-apis.adoc[Neo4j Drivers and APIs]
-
-=== Cypher syntax basics
-
-[.icon]
-image:icon-syntax.svg[]
-
-[.description]
-A poster-style lookup reference for all of the Cypher queries, functions, and procedures.
-
-[.link]
-// xref:cypher-refcard:index.adoc[Cypher refcard]
-link:{docs-home}/cypher-refcard[Cypher Refcard]
-
-=== Neo4j Graph Data Science
-
-[.category]
-Neo4j Graph Data Science
-
-[.icon]
-image:icon-community-detection.svg[]
-
-[.description]
-For data scientists and analysts interested in scalable analytics powered by graph algorithms and machine learning models.
-
-[.link]
-link:{docs-home}/graph-data-science[Graph Data Science Library]
-
-=== Extend Neo4j using Java
-
-[.category]
-Neo4j DBMS
-
-[.icon]
-image:icon-java.svg[]
-
-[.description]
-For Java developers looking to extend Neo4j’s functionality, or embed Neo4j in their own software.
-
-[.link]
-link:{docs-home}/java-reference[Java Developer Reference]
-
-=== APOC
-
-[.category]
-Labs
-
-[.icon]
-image:icon-apoc.svg[]
-
-[.description]
-Discover Neo4j Labs; including the APOC library and a collection of the latest innovations in graph technology.
-
-[.link]
-link:https://neo4j.com/labs[Neo4j Labs]
-
-[.display]
-== Further resources
-
-* Documentation for earlier releases is available from the version picker on each page.
-For a complete list, please see our xref:resources:docs-archive.adoc[Documentation archive].
-* Additionally, most of our documentation is available as a downloadable PDF.
-For a full list of available PDFs, see the xref:resources:pdf-library.adoc[PDF library].
-
-== License
-
-© 2021 license: link:{docs-home}/license[Creative Commons 4.0]
\ No newline at end of file
diff --git a/preview-src/docs-ndl.adoc b/preview-src/docs-ndl.adoc
new file mode 100644
index 00000000..b7c1ef72
--- /dev/null
+++ b/preview-src/docs-ndl.adoc
@@ -0,0 +1,199 @@
+= Neo4j documentation
+:page-layout: docs-ndl
+:page-role: hub
+:page-theme: docs
+:page-hide-nav-title: true
+:!toc:
+:page-toclevels: -1
+
+[.cards.icon-l]
+== CTA cards
+
+=== Deployment options
+
+[.icon]
+image:icons/ndl/deployment-options.svg[]
+
+[.description]
+Choose from self-managed local and cloud deployments, or fully-managed options. See how to run Neo4j on Docker or Kubernetes.
+
+[.link]
+xref:deployment-options:index.adoc[Create your database]
+
+
+=== Cypher
+
+[.icon]
+image:icons/ndl/cypher-manual.svg[]
+
+[.description]
+Learn how to write Cypher, Neo4j's declarative query language.
+
+[.link]
+xref:cypher:index.adoc[Query your data]
+
+=== Neo4j Tools
+
+[.icon]
+image:icons/ndl/neo4j-tools.svg[]
+
+[.description]
+Use Neo4j's tools to explore, visualize, manage, monitor, and import data to your graph.
+
+[.link]
+xref:tools:index.adoc[Discover the products]
+
+=== Graph Data Science
+
+[.icon]
+image:icons/ndl/data-science.svg[]
+
+[.description]
+Run graph algorithms and machine learning models to analyze your data at scale.
+
+[.link]
+xref:gds:index.adoc[Unlock insights from data]
+
+=== Create applications
+
+[.icon]
+image:icons/ndl/create-applications.svg[]
+
+[.description]
+Discover the client libraries and APIs to develop applications with Neo4j and AuraDB.
+
+[.link]
+xref:create-applications:index.adoc[Start developing]
+
+=== Connect data sources
+
+[.icon]
+image:icons/ndl/connectors.svg[]
+
+[.description]
+Learn how to use connectors and other tools to connect Neo4j with other data sources.
+
+[.link]
+xref:connectors:index.adoc[Connect to Neo4j]
+
+
+[.widget.lists]
+== Tailored for you
+
+[.caption]
+Keep exploring
+
+=== Developer
+
+[.icon]
+image:icons/ndl/icon-developer.svg[]
+
+[.list]
+* xref:deployment-options:index.adoc[Choose your deployment]
+* link:{docs-home}/getting-started/cypher-intro/[Learn Cypher]
+* link:{docs-home}/cypher-manual/current/queries/[Start querying]
+* link:{docs-home}/create-applications/[Create applications]
+* link:{docs-home}/connectors/[Connect data sources]
+* xref:genai:index.adoc[Integrate GenAI functions]
+* link:{docs-home}/cypher-manual/current/planning-and-tuning/query-tuning/[Improve app performance]
+* link:{docs-home}/java-reference[Extend Neo4j]
+
+=== Database Admin
+
+[.icon]
+image:icons/ndl/icon-admin.svg[]
+
+[.list]
+* link:{docs-home}/operations-manual/current/database-administration/[Manage your database]
+* link:{docs-home}/operations-manual/current/clustering/[Deploy and manage a cluster]
+* link:{docs-home}/operations-manual/current/database-internals/[Database internals]
+* link:{docs-home}/operations-manual/current/authentication-authorization/[Manage users, roles, and privileges]
+* link:{docs-home}/operations-manual/current/monitoring/[Monitor your database]
+* link:{docs-home}/operations-manual/current/backup-restore/[Backup and restore]
+* link:{docs-home}/upgrade-migration-guide/current/[Upgrade and migration]
+
+=== Data Scientist
+
+[.icon]
+image:icons/ndl/icon-scientist.svg[]
+
+[.list]
+* link:{docs-home}/graph-data-science/current/getting-started/[Analyze your data]
+* link:{docs-home}/graph-data-science/current/production-deployment/[Set up your deployment]
+* link:{docs-home}/bloom-user-guide/current/bloom-tutorial/gds-integration/[Create data visualizations]
+* link:{docs-home}/graph-data-science/current/machine-learning/machine-learning/[Use machine learning algorithms]
+* link:{docs-home}/graph-data-science-client/current/[Set up a Python client]
+* link:{docs-home}/graph-data-science/current/management-ops/[Manage your graph]
+
+
+=== Data Engineer
+
+[.icon]
+image:icons/ndl/icon-engineer.svg[]
+
+[.list]
+* link:{docs-home}/getting-started/appendix/graphdb-concepts/[Graph database concepts]
+* link:{docs-home}/model/[Model your data]
+* link:{docs-home}/connectors/[Connect data sources]
+* link:{docs-home}/import/[Import your dataset]
+* link:{docs-home}/cdc/current/[Monitor data changes]
+* link:{docs-home}/getting-started/data-modeling/data-modeling-tools/[Data modeling tools]
+
+[.widget.highlights]
+== Tutorials & How-to guides
+
+[.icon]
+image:icons/ndl/highlights.svg[]
+
+--
+[.caption]
+Tutorials & How-to guides
+
+[.list]
+* link:{docs-home}/genai/tutorials/embeddings-vector-indexes/[Embedding & Vector Indexes Tutorial]
+* link:{docs-home}/getting-started/appendix/tutorials/guide-import-relational-and-etl/[Import data from a relational database into Neo4j]
+* link:{docs-home}/getting-started/appendix/tutorials/guide-build-a-recommendation-engine/[Build a Cypher recommendation engine]
+* link:{docs-home}/operations-manual/current/tutorial/tutorial-composite-database/[Set up and use a composite database]
+* link:{docs-home}/cdc/current/procedures/query-examples/[Capture and track changes in real-time]
+* link:{docs-home}/graph-data-science-client/current/tutorials/centrality-algorithms/[Apply centrality algorithms to your graph]
+
+[.footer-link]
+xref:tutorials:index.adoc[All tutorials]
+--
+
+
+[.cards.icon-s.align-center]
+== Other resources
+
+
+=== Learn and become Neo4j certified
+
+[.icon]
+image:icons/ndl/icon-graphacademy.svg[]
+
+[.link]
+link:https://graphacademy.neo4j.com/?ref=docs-nav[Explore GraphAcademy]
+
+=== Join forums and discussions
+
+[.icon]
+image:icons/ndl/icon-community.svg[]
+
+[.link]
+link:https://community.neo4j.com/[Community forum]
+link:https://discord.com/invite/neo4j[Discord]
+
+=== Developer blogs, articles and books
+
+[.icon]
+image:icons/ndl/icon-developercenter.svg[]
+
+[.link]
+link:https://neo4j.com/developer-blog/[Developer blog] xref:reference:resources.adoc[Other resources]
+
+
+
+
+// == License
+
+// © 2024 license: link:{docs-home}/license[Creative Commons 4.0]
\ No newline at end of file
diff --git a/preview-src/docs-sub-hub.adoc b/preview-src/docs-sub-hub.adoc
new file mode 100644
index 00000000..ac696a53
--- /dev/null
+++ b/preview-src/docs-sub-hub.adoc
@@ -0,0 +1,166 @@
+= Import your data
+:page-layout: docs-ndl
+:page-theme: docs
+:page-role: explainer
+:page-show-home-link: true
+:page-hide-nav-title: true
+// :page-disablefeedback: true
+:page-toclevels: 0
+
+
+ifndef::backend-pdf[]
+++++
+
+
+
+++++
+endif::[]
+
+
+
+[.cards.selectable]
+== How to use your own data on a graph database
+
+This section is designed to help you learn how to import various types of data into Neo4j. From JSON to APIs to another database, you can retrieve data from nearly any source and use it to populate your graph.
+
+=== `LOAD CSV`
+[.icon]
+image:icons/ndl/icon-import.svg[]
+
+[.description]
+Use Cypher for importing bulk data into Neo4j. Suited for non-admin users.
+
+[.link]
+link:{docs-home}/cypher-manual/current/clauses/load-csv/[]
+
+
+=== From relational into graph
+
+[.icon]
+image:icons/ndl/icon-csvtodb.svg[]
+
+[.description]
+Learn how to translate and migrate tabular data and relational datasets into a graph database.
+
+[.link]
+link:{docs-home}/data-import/relational-to-graph-import/[]
+
+
+=== Neo4j Connectors
+
+[.icon]
+image:icons/ndl/icon-connectors.svg[]
+
+[.description]
+Learn how to use connectors to connect data from various sources into Neo4j.
+
+[.link]
+link:{docs-home}/connectors/[]
+
+=== Neo4j Data Importer
+
+[.icon]
+image:icons/ndl/icon-neo4j.svg[]
+
+[.description]
+Start using Neo4j's tool for importing data and get started quickly with testing and prototyping.
+
+[.link]
+link:{docs-home}/data-importer/current/[]
+
+=== Neo4j Admin Import
+
+[.icon]
+image:icons/ndl/icon-admin.svg[]
+
+[.description]
+Use Neo4j admin import for initial loading of large amounts of data.
+
+[.link]
+link:{docs-home}/operations-manual/current/tools/neo4j-admin/neo4j-admin-import/#import-tool-full[]
+
+=== APOC
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.description]
+Learn how to import data from various data formats, including JSON, XML, and XLS using the APOC library.
+
+[.link]
+link:{docs-home}/apoc/current/import/[*Import data using APOC Core*]
+
+
+[.cards.selectable]
+== Keep exploring
+
+=== GraphAcademy
+
+[.icon]
+image:icons/ndl/icon-graphacademy.svg[]
+
+[.description]
+Learn how to import CSV data into Neo4j using Cypher.
+
+[.link]
+link:https://graphacademy.neo4j.com/courses/importing-cypher/[*GraphAcademy: Importing CSV data into Neo4j*]
+
+
+=== Import CSV data with Neo4j Desktop
+
+[.icon]
+image:icons/ndl/icon-import.svg[]
+
+[.description]
+Learn how to use CSV files to import data to a graph with Neo4j Desktop.
+
+[.link]
+link:{docs-home}/getting-started/appendix/tutorials/guide-import-desktop-csv/[*How-To: Import CSV data with Neo4j Desktop*]
+
+
+=== Importing JSON data from a REST API into Neo4j
+
+[.icon]
+image:icons/ndl/icon-neo4j.svg[]
+
+[.description]
+See techniques for loading data from JSON-based REST APIs into Neo4j.
+
+[.link]
+link:{docs-home}/getting-started/data-import/json-rest-api-import/[*Importing JSON data from a REST API into Neo4j*]
+
+
+
+[.next-steps]
+== Keep exploring
+
+Here are some recommended resources start importing your data:
+
+* link:https://graphacademy.neo4j.com/courses/importing-cypher/[GraphAcademy: Importing CSV data into Neo4j]
++
+Learn how to import CSV data into Neo4j using Cypher.
+
+* link:{docs-home}/getting-started/appendix/tutorials/guide-import-desktop-csv/[How-To: Import CSV data with Neo4j Desktop]
++
+Learn how to use CSV files to import data to a graph with Neo4j Destktop.
+
+* link:{docs-home}/getting-started/data-import/json-rest-api-import/[Importing JSON data from a REST API into Neo4j]
++
+See techniques for loading data from JSON-based REST APIs into Neo4j.
+
+[.next-steps]
+== Keep exploring
+
+Here are some recommended resources start importing your data:
+
+. link:https://graphacademy.neo4j.com/courses/importing-cypher/[GraphAcademy: Importing CSV data into Neo4j]
++
+Learn how to import CSV data into Neo4j using Cypher.
+
+. link:{docs-home}/getting-started/appendix/tutorials/guide-import-desktop-csv/[How-To: Import CSV data with Neo4j Desktop]
++
+Learn how to use CSV files to import data to a graph with Neo4j Destktop.
+
+. link:{docs-home}/getting-started/data-import/json-rest-api-import/[Importing JSON data from a REST API into Neo4j]
++
+See techniques for loading data from JSON-based REST APIs into Neo4j.
diff --git a/preview-src/drivers-apis.adoc b/preview-src/drivers-apis.adoc
index 15b90f19..afee603a 100644
--- a/preview-src/drivers-apis.adoc
+++ b/preview-src/drivers-apis.adoc
@@ -1,6 +1,6 @@
[.drivers-apis]
= Neo4j documentation - Drivers and APIs
-:page-layout: docs-home
+:page-layout: docs-ndl
:page-theme: docs
:!toc:
:page-toclevels: -1
diff --git a/preview-src/highlights.png b/preview-src/highlights.png
new file mode 100644
index 00000000..60e046fb
Binary files /dev/null and b/preview-src/highlights.png differ
diff --git a/preview-src/icon-gds.png b/preview-src/icon-gds.png
new file mode 100644
index 00000000..4543a9c8
Binary files /dev/null and b/preview-src/icon-gds.png differ
diff --git a/preview-src/icons/ndl/academic-cap.svg b/preview-src/icons/ndl/academic-cap.svg
new file mode 100644
index 00000000..00afc424
--- /dev/null
+++ b/preview-src/icons/ndl/academic-cap.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/arrow-left.svg b/preview-src/icons/ndl/arrow-left.svg
new file mode 100644
index 00000000..90687f49
--- /dev/null
+++ b/preview-src/icons/ndl/arrow-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/arrow-right.svg b/preview-src/icons/ndl/arrow-right.svg
new file mode 100644
index 00000000..7f3b027f
--- /dev/null
+++ b/preview-src/icons/ndl/arrow-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/chat-bubble-left-right.svg b/preview-src/icons/ndl/chat-bubble-left-right.svg
new file mode 100644
index 00000000..0872e433
--- /dev/null
+++ b/preview-src/icons/ndl/chat-bubble-left-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/circle-stack.svg b/preview-src/icons/ndl/circle-stack.svg
new file mode 100644
index 00000000..86f70d90
--- /dev/null
+++ b/preview-src/icons/ndl/circle-stack.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/code-bracket-square.svg b/preview-src/icons/ndl/code-bracket-square.svg
new file mode 100644
index 00000000..57880cba
--- /dev/null
+++ b/preview-src/icons/ndl/code-bracket-square.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/code-bracket.svg b/preview-src/icons/ndl/code-bracket.svg
new file mode 100644
index 00000000..0dd07f57
--- /dev/null
+++ b/preview-src/icons/ndl/code-bracket.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/command-line-white.svg b/preview-src/icons/ndl/command-line-white.svg
new file mode 100644
index 00000000..ba905656
--- /dev/null
+++ b/preview-src/icons/ndl/command-line-white.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/command-line.svg b/preview-src/icons/ndl/command-line.svg
new file mode 100644
index 00000000..b4fb3ed1
--- /dev/null
+++ b/preview-src/icons/ndl/command-line.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/connectors.svg b/preview-src/icons/ndl/connectors.svg
new file mode 100644
index 00000000..3226836f
--- /dev/null
+++ b/preview-src/icons/ndl/connectors.svg
@@ -0,0 +1,75 @@
+
diff --git a/preview-src/icons/ndl/create-applications.svg b/preview-src/icons/ndl/create-applications.svg
new file mode 100644
index 00000000..7ad88367
--- /dev/null
+++ b/preview-src/icons/ndl/create-applications.svg
@@ -0,0 +1,54 @@
+
diff --git a/preview-src/icons/ndl/cypher-manual.svg b/preview-src/icons/ndl/cypher-manual.svg
new file mode 100644
index 00000000..e021f9e7
--- /dev/null
+++ b/preview-src/icons/ndl/cypher-manual.svg
@@ -0,0 +1,31 @@
+
diff --git a/preview-src/icons/ndl/data-science.svg b/preview-src/icons/ndl/data-science.svg
new file mode 100644
index 00000000..dd71582d
--- /dev/null
+++ b/preview-src/icons/ndl/data-science.svg
@@ -0,0 +1,14 @@
+
diff --git a/preview-src/icons/ndl/deployment-options.svg b/preview-src/icons/ndl/deployment-options.svg
new file mode 100644
index 00000000..fe1122fc
--- /dev/null
+++ b/preview-src/icons/ndl/deployment-options.svg
@@ -0,0 +1,28 @@
+
diff --git a/preview-src/icons/ndl/highlights.svg b/preview-src/icons/ndl/highlights.svg
new file mode 100644
index 00000000..2768b254
--- /dev/null
+++ b/preview-src/icons/ndl/highlights.svg
@@ -0,0 +1,323 @@
+
diff --git a/preview-src/icons/ndl/icon-admin.svg b/preview-src/icons/ndl/icon-admin.svg
new file mode 100644
index 00000000..e7ed8a21
--- /dev/null
+++ b/preview-src/icons/ndl/icon-admin.svg
@@ -0,0 +1,12 @@
+
diff --git a/preview-src/icons/ndl/icon-community.svg b/preview-src/icons/ndl/icon-community.svg
new file mode 100644
index 00000000..0538bcfd
--- /dev/null
+++ b/preview-src/icons/ndl/icon-community.svg
@@ -0,0 +1,24 @@
+
diff --git a/preview-src/icons/ndl/icon-connectors.svg b/preview-src/icons/ndl/icon-connectors.svg
new file mode 100644
index 00000000..cc01b6be
--- /dev/null
+++ b/preview-src/icons/ndl/icon-connectors.svg
@@ -0,0 +1,10 @@
+
diff --git a/preview-src/icons/ndl/icon-csvtodb.svg b/preview-src/icons/ndl/icon-csvtodb.svg
new file mode 100644
index 00000000..53dcc790
--- /dev/null
+++ b/preview-src/icons/ndl/icon-csvtodb.svg
@@ -0,0 +1,9 @@
+
diff --git a/preview-src/icons/ndl/icon-developer.svg b/preview-src/icons/ndl/icon-developer.svg
new file mode 100644
index 00000000..a6af0322
--- /dev/null
+++ b/preview-src/icons/ndl/icon-developer.svg
@@ -0,0 +1,6 @@
+
diff --git a/preview-src/icons/ndl/icon-developercenter.svg b/preview-src/icons/ndl/icon-developercenter.svg
new file mode 100644
index 00000000..7090d614
--- /dev/null
+++ b/preview-src/icons/ndl/icon-developercenter.svg
@@ -0,0 +1,15 @@
+
diff --git a/preview-src/icons/ndl/icon-engineer.svg b/preview-src/icons/ndl/icon-engineer.svg
new file mode 100644
index 00000000..8ad029ef
--- /dev/null
+++ b/preview-src/icons/ndl/icon-engineer.svg
@@ -0,0 +1,17 @@
+
diff --git a/preview-src/icons/ndl/icon-graphacademy.svg b/preview-src/icons/ndl/icon-graphacademy.svg
new file mode 100644
index 00000000..84f776be
--- /dev/null
+++ b/preview-src/icons/ndl/icon-graphacademy.svg
@@ -0,0 +1,13 @@
+
diff --git a/preview-src/icons/ndl/icon-import.svg b/preview-src/icons/ndl/icon-import.svg
new file mode 100644
index 00000000..f012fad0
--- /dev/null
+++ b/preview-src/icons/ndl/icon-import.svg
@@ -0,0 +1,12 @@
+
diff --git a/preview-src/icons/ndl/icon-library.svg b/preview-src/icons/ndl/icon-library.svg
new file mode 100644
index 00000000..f2d0beac
--- /dev/null
+++ b/preview-src/icons/ndl/icon-library.svg
@@ -0,0 +1,4 @@
+
diff --git a/preview-src/icons/ndl/icon-neo4j.svg b/preview-src/icons/ndl/icon-neo4j.svg
new file mode 100644
index 00000000..a7a4d0e8
--- /dev/null
+++ b/preview-src/icons/ndl/icon-neo4j.svg
@@ -0,0 +1,4 @@
+
diff --git a/preview-src/icons/ndl/icon-scientist.svg b/preview-src/icons/ndl/icon-scientist.svg
new file mode 100644
index 00000000..a84f9339
--- /dev/null
+++ b/preview-src/icons/ndl/icon-scientist.svg
@@ -0,0 +1,14 @@
+
diff --git a/preview-src/icons/ndl/neo4j-tools.svg b/preview-src/icons/ndl/neo4j-tools.svg
new file mode 100644
index 00000000..98d7714a
--- /dev/null
+++ b/preview-src/icons/ndl/neo4j-tools.svg
@@ -0,0 +1,58 @@
+
diff --git a/preview-src/icons/ndl/query-browser-white.svg b/preview-src/icons/ndl/query-browser-white.svg
new file mode 100644
index 00000000..0fd134fd
--- /dev/null
+++ b/preview-src/icons/ndl/query-browser-white.svg
@@ -0,0 +1,4 @@
+
diff --git a/preview-src/icons/ndl/query-browser.svg b/preview-src/icons/ndl/query-browser.svg
new file mode 100644
index 00000000..ab41e9c5
--- /dev/null
+++ b/preview-src/icons/ndl/query-browser.svg
@@ -0,0 +1,4 @@
+
diff --git a/preview-src/icons/ndl/science-molecule.svg b/preview-src/icons/ndl/science-molecule.svg
new file mode 100644
index 00000000..9abff660
--- /dev/null
+++ b/preview-src/icons/ndl/science-molecule.svg
@@ -0,0 +1,5 @@
+
diff --git a/preview-src/icons/ndl/trophy.svg b/preview-src/icons/ndl/trophy.svg
new file mode 100644
index 00000000..15562bd0
--- /dev/null
+++ b/preview-src/icons/ndl/trophy.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/icons/ndl/user-group.svg b/preview-src/icons/ndl/user-group.svg
new file mode 100644
index 00000000..b15d7328
--- /dev/null
+++ b/preview-src/icons/ndl/user-group.svg
@@ -0,0 +1,3 @@
+
diff --git a/preview-src/security-docs.adoc b/preview-src/security-docs.adoc
new file mode 100644
index 00000000..aafe30b1
--- /dev/null
+++ b/preview-src/security-docs.adoc
@@ -0,0 +1,143 @@
+= Neo4j Security
+:page-layout: docs-ndl
+:page-role: security-docs hub
+:page-theme: docs
+:page-hide-nav-title: true
+// :page-disablefeedback: true
+:!toc:
+:page-toclevels: -1
+
+[.cards]
+== Security documentation
+
+=== Cypher
+
+[.icon]
+image:icons/ndl/deployment-options.svg[]
+
+[.list]
+* link:{docs-home}/cypher-manual/current/clauses/load-csv/[Load CSV] +
+* link:https://neo4j.com/developer/kb/protecting-against-cypher-injection/[Cypher injection] +
+* link:https://neo4j.com/developer/kb/protecting-against-ssrf/[Server Side Request Forgery (SSRF)]
+
+
+=== Database administration
+
+[.icon]
+image:icons/ndl/deployment-options.svg[]
+
+[.list]
+* link:{docs-home}/operations-manual/current/database-administration/[Database management] +
+* link:{docs-home}/operations-manual/current/database-administration/aliases/manage-aliases-standard-databases/[Database alias management] +
+* link:{docs-home}/operations-manual/current/tutorial/access-control/[Access control] +
+* link:{docs-home}/operations-manual/current/authentication-authorization/[Authentication and authorization] +
+* link:{docs-home}/operations-manual/current/security/[Network security] +
+* link:{docs-home}/operations-manual/current/docker/security/[SSL encryption in a Neo4j Docker container] +
+* link:{docs-home}/operations-manual/current/kubernetes/authentication-authorization/[Authentication and authorization using Helm charts] +
+* link:{docs-home}/operations-manual/current/kubernetes/security/[Configuring SSL using Helm charts]
+
+
+=== Neo4j Ops Manager
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:{docs-home}/ops-manager/current/installation/server/[Server installation] +
+* link:{docs-home}/ops-manager/current/installation/self-signed-certificate/[Self-Signed Certificate Generation] +
+* link:{docs-home}/ops-manager/current/installation/docker/[Docker server security] +
+* link:{docs-home}/ops-manager/current/administration/security-manager/[Security manager] +
+
+
+=== Neo4j Aura
+
+[.icon]
+image:icons/ndl/deployment-options.svg[]
+
+[.list]
+* link:{docs-home}/aura/platform/security/secure-connections/[Secure connections] +
+* link:{docs-home}/aura/platform/security/secure-connections/#_network_access[Network access] +
+* link:{docs-home}/aura/platform/security/secure-connections/#_private_endpoints[Private endpoints] +
+* link:{docs-home}/aura/platform/security/secure-connections/#_supported_tls_cipher_suites[TLS cypher suites] +
+* link:{docs-home}/aura/platform/security/single-sign-on/[Single Sign-On (SSO)] +
+* link:{docs-home}/aura/platform/security/encryption/[Encryption] +
+* link:{docs-home}/aura/platform/security/encryption/#_customer_managed_keys[Customer Managed Keys]
+
+
+=== Neo4j Browser
+
+[.icon]
+image:icons/ndl/icon-neo4j.svg[]
+
+[.list]
+* link:{docs-home}/browser-manual/current/operations/dbms-connection/[DBMS encryption] +
+* link:{docs-home}/browser-manual/current/operations/credentials-handling/[Browser credentials handling] +
+* link:{docs-home}/browser-manual/current/operations/browser-sso/[Browser Single Sign-On]
+
+
+=== Neo4j GraphQL
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:{docs-home}/graphql/current/authentication-and-authorization/[Authentication and Authorization]
+
+
+=== Neo4j HTTP API
+
+[.icon]
+image:icons/ndl/icon-import.svg[]
+
+[.list]
+* link:{docs-home}/http-api/current/authentication-authorization/[Authentication and authorization]
+
+
+=== Neo4j-OGM
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:{docs-home}/ogm-manual/current/reference/#reference:configuration:driver:tsl[Transport Layer Security (TLS/SSL)] +
+* link:{docs-home}/ogm-manual/current/reference/#reference:configuration:driver:credentials[Credentials]
+
+
+=== Neo4j Connectors
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:{docs-home}/spark/current/aura/#_connecting_to_auradb_from_spark_on_databricks[Connecting to AuraDB from Spark +
+on Databricks]
+* link:https://docs.spring.io/spring-data/neo4j/reference/auditing.html[Auditing] +
+* link:https://docs.spring.io/spring-data/neo4j/reference/faq.html#faq.multidatabase[Multiple databases configuration] +
+* link:https://docs.spring.io/spring-data/neo4j/reference/faq.html#faq.impersonation[User impersonation]
+* link:https://dist.neo4j.org/Neo4j-BI-Connector-JDBC-1.0.10-docs.pdf?_ga=2.24062010.1448679670.1660555628-1448477576.1652358840[JDBC security and authentication] +
+* link:https://dist.neo4j.org/Neo4j-BI-Connector-ODBC-1.0.1-docs.pdf?_ga=2.94333341.1448679670.1660555628-1448477576.1652358840[ODBC security and authentication]
+
+
+=== Neo4j Labs
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:https://neo4j.com/labs/#_are_these_safe_to_use_in_production[Overview] +
+* link:https://neo4j.com/labs/apoc/4.4/installation/#restricted[APOC installation restrictions] +
+* link:https://neo4j.com/labs/apoc/4.4/config/[APOC configuration] +
+* link:https://neo4j.com/labs/neo4j-helm/1.0.0/networking/[Neo4j-Helm networking and security] +
+* link:https://neo4j.com/labs/neo4j-helm/1.0.0/configreference/[Neo4j-Helm configuration reference]
+
+
+=== Neo4j Bloom
+
+[.icon]
+image:icons/ndl/icon-library.svg[]
+
+[.list]
+* link:{docs-home}/bloom-user-guide/current/about-bloom/#_security[Overview] +
+* link:{docs-home}/bloom-user-guide/current/advanced-installation/[Advanced installation and configuration] +
+* link:{docs-home}/bloom-user-guide/current/bloom-installation/installation-activation/#_bloom_server[Bloom server setup] +
+* link:{docs-home}/bloom-user-guide/current/bloom-tutorial/gds-integration/#_using_gds_algorithms_in_bloom[Using GDS algorithms in Bloom]
\ No newline at end of file
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index ef2af3ac..4a3c8b02 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -109,6 +109,15 @@ page:
- content: Cu Solet
url: '/xyz/4.1/index.html#cu-solet'
urlType: internal
+ - content: Docs Needle Home
+ url: docs-ndl.html
+ urlType: internal
+ module: ROOT
+ - content: Docs Sub Hub
+ url: docs-sub-hub.html
+ urlType: internal
+ module: ROOT
+ items:
- content: Liber Recusabo
url: '#liber-recusabo'
urlType: fragment
@@ -119,10 +128,12 @@ page:
url: labs.html
urlType: internal
- content: Reference - a long title that also has child pages
+ module: ROOT
items:
- content: Keyboard Shortcuts
url: '#'
urlType: fragment
+ module: ROOT
- content: Importing and Exporting
url: '#'
urlType: fragment
@@ -156,9 +167,6 @@ page:
- content: Cypher DELETE
url: cheat-sheet.html#delete
urlType: internal
- - content: Docs Index
- url: docs-index.html
- urlType: internal
- content: Drivers and APIs
url: drivers-apis.html
urlType: internal
diff --git a/src/css/docs-ndl.css b/src/css/docs-ndl.css
new file mode 100644
index 00000000..da245ef3
--- /dev/null
+++ b/src/css/docs-ndl.css
@@ -0,0 +1,766 @@
+@font-face {
+ font-family: 'Syne Neo';
+ src: url('https://storage.googleapis.com/neo4j-fonts/Syne%20Neo%20Medium%20Font.otf') format('opentype');
+}
+
+body.docs-ndl.hub,
+body.docs-ndl.explainer {
+ background: rgba(var(--colors-neutral-15));
+}
+
+/* nav */
+
+body.docs-ndl .nav {
+ background: rgba(var(--colors-neutral-10));
+}
+
+body.docs-ndl.explainer .nav-panel-menu {
+ scrollbar-width: none;
+}
+
+body.docs-ndl .nav-menu .docs-home-link {
+ margin-bottom: 0;
+}
+
+body.docs-ndl .nav-menu .docs-home-link:hover,
+body.docs-ndl .nav-menu .docs-home-link:focus {
+ text-decoration: underline;
+ /* background-color: var(--toc_hover-background-color); */
+}
+
+body.docs-ndl .nav-menu .home-link {
+ width: auto;
+ background: none;
+ box-shadow: 0 1px 0 var(--toolbar-border-color);
+}
+
+body.docs-ndl .nav-menu .home-link.is-home {
+ box-shadow: none;
+}
+
+body.docs-ndl .nav-menu .home-link.is-home a {
+ display: none;
+}
+
+body.docs-ndl .nav-module {
+ /* background: rgba(var(--colors-neutral-15)); */
+ background: rgba(var(--colors-neutral-10));
+}
+
+body.docs-ndl .nav-list:first-child .nav-item:first-child .nav-section-header {
+ border: none;
+ padding-top: 1.5rem !important;
+ margin-top: 0 !important;
+}
+
+body.docs-ndl .nav-menu .nav-module > ul:last-of-type {
+ margin-bottom: 1rem;
+ padding-bottom: 0.5rem;
+ /* border-bottom: 1px solid rgba(var(--colors-neutral-20)); */
+}
+
+body.docs-ndl .nav-menu .nav-module > ul:not(ul:has(li)) {
+ display: none;
+}
+
+body.docs-ndl .nav-menu a,
+body.docs-ndl .nav-text {
+ color: var(--neutral-color);
+}
+
+body.docs-ndl .nav-menu .home-link a::before {
+ display: inline-block;
+ content: url(../img/arrow-long-left.svg);
+ margin-right: 1em;
+ vertical-align: middle;
+ line-height: 1;
+}
+
+body.docs-ndl .nav-menu > .nav-list {
+ margin-top: 0;
+}
+
+body.docs-ndl .nav-menu .component-title {
+ display: none;
+}
+
+body.docs-ndl .nav-menu .nav-index {
+ padding: 0.5rem 0;
+ border-bottom: 1px solid rgba(var(--colors-neutral-20));
+}
+
+body.docs-ndl .nav-menu .nav-index a {
+ font-weight: var(--body-font-weight-bold);
+}
+
+/* body.docs-ndl .nav-item[data-depth="0"] {
+ margin-top: 0.5rem;
+}
+
+body.docs-ndl .nav-item .nav-section-header {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 1.5rem !important;
+ border-top: 1px solid var(--colors-netural-25);
+}
+
+body.docs-ndl .nav-menu .nav-list:first-child .nav-item:first-child .nav-section-header {
+ border: none;
+ padding-top: 1.5rem !important;
+}
+
+body.docs-ndl .nav-menu .nav-item > a {
+ padding-top: 0;
+ padding-bottom: 0;
+ line-height: 1.5;
+}
+
+body.docs-ndl .nav-menu .nav-item > a > strong {
+ margin-top: 1.5rem !important;
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+ display: block;
+} */
+
+/* end of nav */
+
+body.docs-ndl .doc a {
+ text-decoration: none;
+}
+
+body.docs-ndl .doc a::after {
+ display: inline-block;
+}
+
+body.docs-ndl .doc a:hover {
+ text-decoration: underline;
+}
+
+body.docs-ndl .doc a:hover::after {
+ text-decoration: none;
+}
+
+body.docs-ndl.hub aside.toc.sidebar {
+ flex-basis: 0;
+}
+
+body.docs-ndl .toolbar.is-home {
+ background: rgba(var(--colors-neutral-15));
+ box-shadow: none;
+}
+
+body.docs-ndl.hub main > .content {
+ /* align-items: center; */
+ flex-direction: column;
+ margin-bottom: 2rem;
+}
+
+body.docs-ndl.hub .doc {
+ /* width: 100%; */
+ max-width: 1440px;
+ padding: 0 1rem 4rem;
+}
+
+body.docs-ndl .doc .flex-column {
+ flex-direction: column;
+}
+
+body.docs-ndl .doc > .sect-header > h1.page:first-child {
+ margin-top: 1rem;
+ /* font-size: var(--font-size-h1); */
+ margin-bottom: 2rem;
+}
+
+body.docs-ndl.hub .doc div:not(.display) h2 {
+ display: none;
+}
+
+body.landing .toc {
+ display: none;
+}
+
+body.docs-ndl .doc h2 {
+ margin: 1rem 0 1rem;
+}
+
+body.docs-ndl .doc h1,
+body.docs-ndl .doc h2 {
+ font-family: var(--header-font-family);
+ border-bottom: 0 none;
+ flex-basis: 100%;
+}
+
+body.docs-ndl.hub .sectionbody,
+body.docs-ndl.explainer .sectionbody {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: row;
+ flex-wrap: wrap;
+ row-gap: 1rem;
+ column-gap: 2%;
+ align-content: stretch;
+ /* justify-content: space-between; */
+}
+
+body.docs-ndl .widget .sectionbody {
+ background: rgba(var(--colors-neutral-10));
+ border-radius: 1rem;
+ border: none;
+ padding: 1rem;
+ row-gap: 0;
+ column-gap: 0;
+}
+
+body.docs-ndl.sub .widget .sectionbody {
+ background: transparent;
+ padding: 0;
+ justify-content: flex-start;
+ row-gap: 1rem;
+ column-gap: 1rem;
+}
+
+body.docs-ndl.sub .widget .sectionbody .sect2 {
+ border-radius: 1rem;
+ flex: 0 0 32%;
+}
+
+body.docs-ndl .next-steps .sectionbody {
+ display: block;
+}
+
+body.docs-ndl .next-steps .sectionbody .dlist {
+ margin-left: 1rem;
+ padding-left: 2rem;
+ border-left: 1px solid rgba(var(--colors-neutral-20));
+}
+
+body.docs-ndl .next-steps .sectionbody .dlist dd {
+ margin-bottom: 1rem;
+}
+
+body.docs-ndl .next-steps .sectionbody .dlist dt,
+body.docs-ndl .next-steps .sectionbody .dlist dd {
+ margin-left: 0;
+ padding: 0.5rem;
+}
+
+body.docs-ndl .next-steps .sectionbody ol {
+ list-style-type: none;
+ counter-reset: step-counter;
+ padding-left: 0;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li {
+ border-left: 1px solid rgba(var(--colors-baltic-50));
+ margin-left: 1rem;
+ counter-increment: step-counter;
+ margin-bottom: 0;
+ padding-bottom: 2rem;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li a {
+ text-emphasis: none;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li:last-of-type {
+ counter-increment: step-counter;
+ margin-bottom: 0;
+ border: none;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li p {
+ margin: 0 0 0 1rem;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li div.paragraph {
+ margin: 0;
+}
+
+body.docs-ndl .next-steps .sectionbody ol li::before {
+ /* content: counter(step-counter); */
+ content: "";
+ /* display: inline-block; */
+ float: left;
+ position: relative;
+ z-index: 1;
+ margin-left: -1rem;
+ margin-right: 1rem;
+ font-style: normal;
+ background: rgba(var(--colors-baltic-15));
+ color: rgba(var(--colors-baltic-50));
+ border: 1px solid rgba(var(--colors-baltic-50));
+ border-radius: 50%;
+ width: 2rem;
+ height: 2rem;
+ line-height: 2rem;
+ text-align: center;
+}
+
+body.docs-ndl .next-steps .sectionbody ul {
+ /* list-style-type: none; */
+ padding: 1rem;
+}
+
+body.docs-ndl .next-steps .sectionbody ul li {
+ margin-bottom: 1rem;
+}
+
+body.docs-ndl .next-steps .sectionbody ul li div.paragraph {
+ margin: 0;
+}
+
+/* body.docs-ndl .next-steps .sectionbody ol li:last-of-type:after {
+ content: "";
+ background: rgba(var(--colors-neutral-10));
+ border: 1px solid rgba(var(--colors-baltic-50));
+ border-radius: 50%;
+ width: 2.5rem;
+ height: 2.5rem;
+ display: inline-block;
+ position: relative;
+ left: -3.25rem;
+ top: -3.875rem;
+} */
+
+/* body.docs-ndl .article a:visited {
+ color: var(--neutral-color);
+} */
+
+/* explainer */
+
+body.docs-ndl.explainer .sectionbody .video {
+ display: block;
+ width: 100%;
+}
+
+/* video embeds */
+
+.video iframe {
+ border-radius: 0.75rem;
+}
+
+body.docs-ndl #preamble + .sect1 {
+ margin-top: 0;
+}
+
+/* sections */
+
+body.docs-ndl.hub .sect1,
+body.docs-ndl.explainer .sect1 {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+body.docs-ndl .paragraph.caption,
+body.docs-ndl .paragraph.footer-link {
+ display: flex;
+ width: 100%;
+ padding: 1rem;
+ margin: 0;
+ color: var(--neutral-color);
+}
+
+body.docs-ndl .paragraph.caption {
+ font-family: var(--header-font-family);
+ font-size: var(--doc-font-size-h2);
+ font-weight: var(--font-weight-normal);
+}
+
+body.docs-ndl .paragraph.footer-link {
+ justify-content: flex-end;
+ padding-right: 0;
+}
+
+/* selectable cards */
+
+body.docs-ndl .cards.selectable .sect2 {
+ cursor: pointer;
+}
+
+body.docs-ndl .cards.selectable .sect2 a {
+ text-decoration: none;
+}
+
+body.docs-ndl .cards.selectable .sect2:hover {
+ transform: translateY(-0.25rem);
+ transition: 0.2s linear;
+}
+
+body.docs-ndl .cards.selectable .sect2:hover div.description {
+ text-decoration: underline;
+}
+
+/* highlights */
+
+body.docs-ndl .highlights .sectionbody > div.openblock {
+ flex: 0 1 40%;
+}
+
+body.docs-ndl .highlights .sectionbody > div.icon {
+ flex: 0 1 60%;
+ padding: 0 6rem;
+ align-self: center;
+}
+
+body.docs-ndl .highlights .sectionbody > div.icon span.image {
+ display: flex;
+}
+
+body.docs-ndl .highlights .list {
+ padding-left: 1rem;
+}
+
+body.docs-ndl .highlights .list ul li {
+ border-bottom: 1px solid rgba(var(--colors-neutral-20));
+ padding-bottom: 0.5rem;
+}
+
+body.docs-ndl .widget.highlights .footer-link {
+ text-align: end;
+}
+
+body.docs-ndl .widget.highlights .footer-link a,
+body.docs-ndl .widget.highlights .footer-link a:visited,
+body.docs-ndl .widget.highlights .footer-link a::after {
+ color: var(--link-font-color);
+}
+
+body.docs-ndl .widget.highlights .icon img {
+ max-width: 100%;
+ height: auto;
+ padding: 0;
+}
+
+/* lists */
+
+body.docs-ndl .lists .sectionbody > div.sect2 {
+ flex: 0 0 25%;
+}
+
+body.docs-ndl .widget .sectionbody > div.sect2 .ulist {
+ flex-grow: 1;
+ order: 3;
+ margin-top: 1rem;
+}
+
+body.docs-ndl .widget ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+body.docs-ndl .lists ul li {
+ font-size: var(--font-size-body-medium);
+}
+
+body.docs-ndl .lists ul li a {
+ font-weight: var(--font-weight-normal);
+ text-decoration: none;
+}
+
+/* cards */
+
+body.docs-ndl .sect2 {
+ display: flex;
+ flex-direction: column;
+}
+
+body.docs-ndl .cards .sectionbody > div.sect2 {
+ flex: 0 1 32%;
+ /* margin-right: 1rem; */
+}
+
+body.docs-ndl.explainer .sectionbody > div.sect2 {
+ flex: 0 1 49%;
+}
+
+body.docs-ndl .cards .sect2 > a,
+body.docs-ndl .cards:not(.selectable) .sect2,
+body.docs-ndl .lists .sect2 {
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 1;
+ /* justify-content: space-between; */
+ gap: 1rem;
+ /* min-width: 30%; */
+ padding: 1rem;
+ /* margin: 0 1rem 1rem 0; */
+ background: var(--color-white);
+}
+
+body.docs-ndl .cards .sect2 > a,
+body.docs-ndl .cards:not(.selectable) .sect2,
+body.docs-ndl .widget:not(.video) {
+ /* box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); */
+ border: none;
+ border-radius: 1rem;
+}
+
+body.docs-ndl .cards .sect2 > a {
+ color: var(--neutral-color);
+ font-weight: var(--font-weight-normal);
+ text-decoration: none;
+}
+
+body.docs-ndl.color-docs .sect2 {
+ color: rgba(var(--colors-neutral-10));
+ background: var(--color-docs);
+}
+
+body.docs-ndl.color-docs .cards .sect2 h3,
+body.docs-ndl.color-docs .cards .sect2 .description {
+ color: rgba(var(--colors-neutral-10));
+}
+
+body.docs-ndl .cards .sect2 .paragraph {
+ margin: 0;
+}
+
+/* body.docs-ndl:not(.create-applications) .sect2 {
+ min-height: 200px;
+} */
+
+body.docs-ndl .cards .sect2 a > h3,
+body.docs-ndl .cards .sect2 a > div {
+ margin: 0;
+ padding: 0;
+}
+
+body.docs-ndl .highlights .sectionbody > div,
+body.docs-ndl .sect2 a > div,
+body.docs-ndl .sect2 a > h3 {
+ display: flex;
+}
+
+body.docs-ndl .cards .sect2 .icon,
+body.docs-ndl .widget .icon {
+ order: 1;
+ padding: 0;
+ margin: 0;
+}
+
+body.docs-ndl .cards .icon span {
+ display: flex;
+}
+
+body.docs-ndl .widget.highlights .icon {
+ padding: 2rem;
+}
+
+body.docs-ndl .cards .sect2 .icon img {
+ width: 4rem;
+ height: 4rem;
+ padding: 0;
+}
+
+body.docs-ndl .cards.icon-l .sect2 .icon img {
+ width: 6rem;
+ height: 6rem;
+}
+
+body.docs-ndl .lists .sect2 .icon img,
+body.docs-ndl .icon-s .sect2 .icon img {
+ width: 3rem;
+ height: 3rem;
+ padding: 0;
+}
+
+body.docs-ndl .lists .sect2 .icon img path {
+ color: rgba(var(--colors-baltic-30));
+ fill: rgba(var(--colors-baltic-30));
+}
+
+body.docs-ndl .cards .sect2 h3,
+body.docs-ndl .lists .sect2 h3 {
+ /* flex-grow: 1; */
+ order: 2;
+ margin: 0;
+ font-weight: var(--font-weight-semibold);
+}
+
+body.docs-ndl .cards .sect2 h3 .anchor::before {
+ display: none;
+}
+
+body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
+ font-size: var(--font-size-body-medium);
+ line-height: 1.5;
+ text-align: left;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-ordinal-group: 4;
+ -ms-flex-order: 3;
+ order: 3;
+ /* z-index: 10; */
+ /* margin: 0.5rem 1rem 0 1rem; */
+ /* -webkit-box-flex: 1; */
+ /* -ms-flex-positive: 1; */
+ /* flex-grow: 1; */
+}
+
+body.docs-ndl .cards.selectable .sect2 .paragraph.link {
+ display: none;
+}
+
+body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
+ margin-top: auto;
+}
+
+body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link a {
+ font-weight: 500;
+ margin-right: 1rem;
+ /* text-decoration: none; */
+}
+
+body.docs-ndl .cards .sect2 .paragraph.category {
+ display: none;
+}
+
+body.docs-ndl .plain-links a.external::after {
+ all: unset;
+}
+
+body.docs-ndl .highlights a {
+ display: flex;
+ justify-content: space-between;
+ color: var(--neutral-color);
+ font-weight: var(--font-weight-normal);
+ text-decoration: none;
+}
+
+body.docs-ndl .highlights a::after,
+body.docs-ndl .cards .link a::after {
+ margin-left: 0.5rem;
+ content: "→";
+ font-weight: 600;
+ color: var(--link-font-color);
+ transition: margin 0.2s linear;
+}
+
+body.docs-ndl .highlights a::after {
+ display: flex;
+ margin-left: 1.5rem;
+ color: var(--neutral-color);
+ float: right;
+}
+
+body.docs-ndl .cards .sect2 .ulist {
+ display: inline-flex;
+ order: 4;
+ margin: 0;
+ font-size: var(--font-size-body-medium);
+ line-height: 1.5;
+ text-align: left;
+}
+
+body.docs-ndl .cards .sect2 .ulist ul {
+ padding: 0;
+}
+
+body.docs-ndl .cards .sect2 .ulist ul li {
+ list-style-type: none;
+ margin: 0.5rem 0 0;
+}
+
+@media screen and (min-width: 1024px) {
+ body.docs-ndl .toolbar {
+ background-color: rgba(var(--colors-neutral-10));
+ }
+}
+
+@media screen and (max-width: 1023px) {
+ body.docs-ndl .doc {
+ margin: 0 1rem;
+ }
+}
+
+@media screen and (max-width: 1439px) {
+ body.docs-ndl .toolbar {
+ top: 0;
+ }
+
+ body.docs-ndl .nav-container {
+ z-index: 30;
+ }
+
+ body.docs-ndl .cards .sectionbody > div.sect2 {
+ flex: 0 1 49%;
+ }
+
+ body.docs-ndl.explainer .cards .sect2 h3 {
+ text-align: left;
+ }
+
+ body.docs-ndl .widget .sectionbody {
+ row-gap: 2rem;
+ }
+
+ body.docs-ndl .widget .sectionbody > div {
+ flex: 0 1 100%;
+ justify-content: center;
+ }
+
+ body.docs-ndl .lists ul {
+ /* text-align: center; */
+ }
+
+ body.docs-ndl .widget .sectionbody .sect2,
+ body.docs-ndl.sub .widget .sectionbody .sect2 {
+ flex: 0 0 48%;
+ }
+
+ body.docs-ndl .lists .sectionbody > div.sect2 > * {
+ /* margin: 0 auto; */
+ }
+
+ body.docs-ndl .highlights .sectionbody > div {
+ flex: 0 1 100%;
+ justify-content: center;
+ }
+
+ body.docs-ndl .highlights .sectionbody > div.openblock {
+ order: 2;
+ flex: 0 1 100%;
+ }
+
+ body.docs-ndl .highlights .sectionbody > div.icon {
+ margin: auto;
+ }
+
+ body.docs-ndl.explainer .sectionbody > div.sect2 a {
+ flex: 0 1 100%;
+ }
+}
+
+@media all and (max-width: 620px) {
+ body.docs-ndl .doc > .sect-header > h1.page:first-child {
+ text-align: center;
+ margin: 1rem auto;
+ }
+
+ body.docs-ndl .cards .sect2 > a {
+ align-items: center;
+ }
+
+ body.docs-ndl.explainer .cards .sect2 > a {
+ align-items: flex-start;
+ padding: 1rem;
+ }
+
+ body.docs-ndl.explainer .cards .sect2 .paragraph:not(.icon) {
+ text-align: left;
+ }
+
+ body.docs-ndl .cards .sectionbody > div.sect2 {
+ /* min-width: 90%; */
+ flex: 1 1 100%;
+ }
+
+ body.docs-ndl .lists .sectionbody > div.sect2 {
+ flex: 1 1 100%;
+ padding: 1rem;
+ }
+}
diff --git a/src/css/labels.css b/src/css/labels.css
index 87d2ad6f..fd88044b 100644
--- a/src/css/labels.css
+++ b/src/css/labels.css
@@ -1,3 +1,7 @@
+div.labels {
+ font-family: var(--body-font-family);
+}
+
.flex-labels-container {
display: flex;
justify-content: space-between;
diff --git a/src/css/nav.css b/src/css/nav.css
index e85669cc..32df4f82 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -73,6 +73,32 @@ html.is-clipped--nav {
}
}
+.nav .component {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding-left: 1.5rem;
+ box-shadow: 0 1px 0 var(--nav-panel-divider-color);
+}
+
+.nav .component .nav-product {
+ height: 2.5rem;
+ padding: 0.5rem 0;
+}
+
+.nav .nav-product .nav-product-name {
+ font-size: 1rem;
+ font-weight: 500;
+}
+
+.nav .nav-product .nav-product-name a:visited {
+ color: var(--link-font-color);
+}
+
+.nav .selectors {
+ padding: 0;
+}
+
.nav-panel-menu {
overflow-y: scroll;
display: flex;
@@ -348,7 +374,7 @@ html.is-clipped--nav {
.nav-item a:hover,
.nav-item span:hover {
- background-color: rgba(var(--colors-neutral-25));
+ background-color: var(--toc_hover-background-color);
}
.is-current-page.is-active > a {
@@ -448,8 +474,8 @@ html.is-clipped--nav {
}
.nav-item .nav-section-header {
- margin-top: 1.5rem;
- margin-bottom: 0.5rem;
+ margin-top: 1rem;
+ margin-bottom: 0;
padding-top: 1.5rem !important;
border-top: 1px solid var(--colors-netural-25);
}
@@ -464,7 +490,8 @@ html.is-clipped--nav {
}
.nav-panel-versions {
- height: var(--toolbar-height);
+ /* padding: 1rem 1.5rem 0.5rem; */
+ /* width: max-content; */
padding: 0.25rem 0.5rem;
}
diff --git a/src/css/site.css b/src/css/site.css
index 80b06336..b86153f0 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -26,6 +26,9 @@
@import "landing.css";
@import "center-align.css";
/* @import "tiles.css"; */
+/* new NDL-based docs-home styles */
+@import "docs-ndl.css";
+/* legacy docs-home styles */
@import "docs-home.css";
/* @import "developer.css"; */
@import "feedback.css";
diff --git a/src/css/vars.css b/src/css/vars.css
index 67462eeb..ec9e7158 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -171,6 +171,7 @@
--body-font-weight-bold: var(--font-weight-semibold);
--monospace-font-family: "Roboto Mono", monospace;
--monospace-font-weight-bold: var(--font-weight-medium);
+ --header-font-family: "Syne Neo", "Public Sans", "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif;
/* base */
--body-background: rgba(var(--colors-neutral-10));
@@ -225,7 +226,7 @@
--toc-font-color: rgba(var(--colors-neutral-70));
--toc_active-font-color: rgba(var(--colors-baltic-70));
--toc_active-background-color: rgba(var(--colors-baltic-10));
- --toc_hover-background-color: rgba(var(--colors-neutral-15));
+ --toc_hover-background-color: rgba(var(--theme-light-palette-neutral-hover));
--toc-heading-font-color: rgba(var(--colors-neutral-70));
--toc-border-color: rgba(var(--colors-neutral-30));
--toc-line-height: 1.4;
diff --git a/src/img/arrow-left.svg b/src/img/arrow-left.svg
new file mode 100644
index 00000000..90687f49
--- /dev/null
+++ b/src/img/arrow-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/arrow-long-left.svg b/src/img/arrow-long-left.svg
new file mode 100644
index 00000000..90ad9053
--- /dev/null
+++ b/src/img/arrow-long-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/arrow-long-right.svg b/src/img/arrow-long-right.svg
new file mode 100644
index 00000000..23c451c9
--- /dev/null
+++ b/src/img/arrow-long-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/arrow-right.svg b/src/img/arrow-right.svg
new file mode 100644
index 00000000..7f3b027f
--- /dev/null
+++ b/src/img/arrow-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/js/14-external-links.js b/src/js/14-external-links.js
index eb9d80dd..7f178e6b 100644
--- a/src/js/14-external-links.js
+++ b/src/js/14-external-links.js
@@ -7,20 +7,15 @@
;(function () {
'use strict'
-
- // open all non neo4j.com/docs links in a new tab
- // document.querySelectorAll('.doc a[href^="http"]')
- // .forEach(function (el) {
- // if (!el.href.includes('neo4j.com/docs')) {
- // // el.setAttribute('target', '_blank');
- // // el.classList.add('external')
- // }
- // })
-
- // add class and aria-label to all links that open in a new tab
- document.querySelectorAll('.doc a[target="_blank"]')
+ const nonExternals = /neo4j\.[com|dev]/g
+ document.querySelectorAll('.doc a[href^="http"], .doc a[target="_blank"]')
.forEach(function (el) {
- el.classList.add('external')
- el.setAttribute('aria-label', 'Link label (opens in new tab)')
+ if (document.location.hostname !== el.hostname && !el.hostname.match(nonExternals)) {
+ el.classList.add('external')
+ }
+
+ if (el.target === '_blank') {
+ el.setAttribute('aria-label', 'Link label (opens in new tab)')
+ }
})
})()
diff --git a/src/js/60-docs-roles.js b/src/js/60-docs-roles.js
index a132da83..19527fbc 100644
--- a/src/js/60-docs-roles.js
+++ b/src/js/60-docs-roles.js
@@ -2,7 +2,7 @@ import { createElement } from './modules/dom'
import rolesData from './data/rolesData.json'
function checkWrapped () {
- const labelContainers = document.querySelectorAll('body.docs:not(.docshome) .header-label-container')
+ const labelContainers = document.querySelectorAll('body.docs .header-label-container')
for (const container of labelContainers) {
var child = container.querySelector('.labels')
var lineHeight = parseInt(window.getComputedStyle(container).lineHeight, 10)
@@ -62,7 +62,7 @@ document.addEventListener('DOMContentLoaded', function () {
// ignore inline labels
const headings = ['H2', 'H3', 'H4', 'H5', 'H6', 'CAPTION']
- const roleDivs = document.querySelectorAll('body.docs:not(.docshome) *[class*="label--"]')
+ const roleDivs = document.querySelectorAll('body.docs *[class*="label--"]')
roleDivs.forEach(function (roleDiv) {
var roles = roleDiv.classList
diff --git a/src/js/70-docs-ndl.js b/src/js/70-docs-ndl.js
new file mode 100644
index 00000000..d5ee1793
--- /dev/null
+++ b/src/js/70-docs-ndl.js
@@ -0,0 +1,34 @@
+import { createElement } from './modules/dom'
+
+document.addEventListener('DOMContentLoaded', function () {
+ var moveElements = function (oldParent, newParent) {
+ while (oldParent.childNodes.length > 0) {
+ newParent.appendChild(oldParent.childNodes[0])
+ }
+ }
+
+ var makeClickable = function (card) {
+ var links = card.querySelectorAll('div.link')
+ links.forEach(function (link) {
+ var target = link.querySelector('a').getAttribute('href')
+ var card = link.parentElement
+ const cardLink = createElement('a', 'link')
+ cardLink.setAttribute('href', target)
+ moveElements(card, cardLink)
+ card.appendChild(cardLink)
+ card.addEventListener('click', function (e) {
+ e.preventDefault()
+ window.location.href = target
+ })
+ })
+ }
+
+ // Remove H3 anchors
+ document.querySelectorAll('h3 a').forEach(function (a) {
+ a.remove()
+ })
+
+ // Add links to cards
+ document.querySelectorAll('.cards.selectable')
+ .forEach(makeClickable)
+})
diff --git a/src/js/site.js b/src/js/site.js
index ac986946..d9e3c1bf 100644
--- a/src/js/site.js
+++ b/src/js/site.js
@@ -22,3 +22,4 @@ import './25-graphgist'
import './40-challenges'
import './50-cheat-sheet-toggle'
import './60-docs-roles'
+import './70-docs-ndl'
diff --git a/src/layouts/docs-home.hbs b/src/layouts/docs-home.hbs
index 113787c5..c0e06460 100644
--- a/src/layouts/docs-home.hbs
+++ b/src/layouts/docs-home.hbs
@@ -26,4 +26,4 @@
{{> footer}}
-