https://github.com/neo4j-devtools/apoc

The APOC documentation packaged up as a Graph App
https://github.com/neo4j-devtools/apoc

Last synced: about 1 month ago
JSON representation

The APOC documentation packaged up as a Graph App

• Host: GitHub
• URL: https://github.com/neo4j-devtools/apoc
• Owner: neo4j-devtools
• Created: 2020-05-01T13:12:53.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T21:58:36.000Z (over 1 year ago)
• Last Synced: 2024-04-23T19:57:56.552Z (9 months ago)
• Language: HTML
• Homepage:
• Size: 17.2 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# APOC Documentation App

This repository takes the HTML files generated as part of the [APOC Manual](https://neo4j.com/docs/labs/apoc/current/) generation process and makes it available offline as a [Graph App](https://www.neo4j.com/developer/graph-app-development).  The Graph App also provides additional functionaliy 

## Installation

To install this repository as a Graph App, you can [click here](neo4j-desktop://graphapps/install?url=https://registry.npmjs.org/@graphapps/apoc) 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](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 `` blocks, and a `
` 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