neo4j-devtools / apoc

The APOC documentation packaged up as a Graph App

APOC Documentation App

This repository takes the HTML files generated as part of the APOC Manual generation process and makes it available offline as a Graph App. The Graph App also provides additional functionaliy

Installation

To install this repository as a Graph App, you can click here or paste the following link into the Install form at the bottom of the Graph Apps pane in Neo4j Desktop.

neo4j-desktop://graphapps/install?url=https://registry.npmjs.org/@graphapps/apoc

The manual can be viewed in it's original form at https://neo4j.com/docs/labs/apoc/current/

How I Built It

This is a Vue.js project created using @vue/cli. The app uses the fetch API to load in the generated TOC from the Manual and displays it in a menu on the left hand side. When any of the links are clicked, a component uses fetch to load the file into a "virtual" DOM.

Then any link click events are highjacked so the events are passed through to the vue router.

The code highlighting is then applied to any <code> blocks, and a <div> is prepended to each code block with a set of actions for that code block.

If a code block contains cypher, a button is added which redirects the user to a Deep Link for Neo4j Desktop which instructs it to open Neo4j Browser with the query pre-populated.

neo4j-desktop://graphapps/neo4j-browser?arg=edit&cmd={cypher}

eg:

neo4j-desktop://graphapps/neo4j-browser?arg=edit&cmd=MATCH (n) RETURN count(n)

Tech Stack

• Vue.js & Vue Router
• Tailwind & PostCSS for a utility-based styling approach
• Deep links to Neo4j Browser via Neo4j Desktop
• HighlightJS for syntax highlighting
• Elasticlunr for Full Text search
• Cypress for testing