This repository contains AsciiDoc files and image assets of the Sample Application details.
The project includes:
- AsciiDoc: Ascii Docs of Sample Applications detail page
- AsciiDoc to HTML Converter: A Node.js script that converts
.adocfiles to styled HTML documents - Styled Output: The converter generates HTML with modern, responsive styling
- Node.js (version 14 or higher)
- npm (comes with Node.js)
- Clone the repository:
git clone https://github.com/neo4j-product-examples/sample-applications.git
cd sample-applications- Install dependencies:
npm installRun the converter script with an AsciiDoc file:
# Using npm script
npm run convert fraud-detection.adoc
# Or directly with node
node convert-adoc.js fraud-detection.adocTo convert the included fraud detection documentation:
npm run convert fraud-detection.adocThis will:
- Read the
fraud-detection.adocfile - Convert it to HTML using AsciiDoctor
- Apply custom styling
- Save the output to
output/fraud-detection.html
sample-applications/
├── assets/ # Image assets for documentation
│ ├── fraud-detection-graph-model.png
│ └── fraud-detection-overview.jpg
├── output/ # Generated HTML files
│ └── fraud-detection.html
├── convert-adoc.js # Main conversion script
├── fraud-detection # Main conversion script
│ ├── fraud-detection.adoc # Example AsciiDoc documentation
│ └── fraud-detection.dashboard.json # Example Dashboard
├── package.json # Node.js dependencies and scripts
└── README.md # This file
The convert-adoc.js script accepts the following:
- Input file: AsciiDoc file to convert (required)
- Output: Automatically generates HTML file in the
output/directory
To add a new sample application or update an existing one, follow these steps:
-
Create a new folder in the root directory following the naming convention
[app-name](e.g.,fraud-detection) -
Create a new AsciiDoc file in the
[app-name]/directory add a file following the naming conventionfraud-detection.adoc(e.g.,fraud-detection.adoc) -
Add image assets to the
assets/directory:- Use descriptive filenames that match your application
- Supported formats:
.png,.jpg,.jpeg,.gif - Reference images in your AsciiDoc using:
image::filename.ext[]
-
Structure your AsciiDoc with the following sections:
== Overview- Brief description of the application== Graph model- Explanation of the data model== Next steps- Links to further resources and exploration
Add a reference to your new AsciiDoc file and assets in the manifest.json file in the console-guides repository:
{
"<name-of-app>": {
"url": "https://raw.githubusercontent.com/neo4j-product-examples/sample-applications/refs/heads/main/<name-of-app>/<name-of-app>.adoc",
"imgBaseUrl": "https://raw.githubusercontent.com/neo4j-product-examples/sample-applications/refs/heads/main/<name-of-app>/assets"
}
}Update the playlist in the demo-datasets.adoc file by adding:
- Title - Add your sample app title after
== - Details - Add description below the title
- Database ID - Add the
guide=parameter with your app's database ID - label - Add your sample app key as specified above
<name-of-app> - Icon - Add your app icon inside the directory
assets/
Example entry:
[guide="<database-id>",label="<name-of-app>",iconDefault="assets/app-icon.png"]
== Your Sample App Title
Brief description of what your sample app does and demonstrates
-
Convert your AsciiDoc to HTML to verify formatting:
npm run convert your-app-name.adoc
-
Check the output in the
output/directory to ensure images and formatting are correct -
Validate links and ensure all referenced assets exist