πA CLI tool to create an annotated tree visualization of any project
Check out the site: https://sdras.github.io/project-explorer-site/
Create a tree visualization of any project with this CLI tool. When ramping people up on an existing codebase, there's often a lot of state they have to understand about the project- where everything is, where everything starts, exceptional files. With this tool, you can generate a visualization of any project, as well modify certain directories to be open, or have notes that people can read through easily.
npm i -g project-explorer
Here's an example of what we'll be generating:
A working example of this exists here. I created this for Vue core off of notes taken at a core meeting as Evan You walked us through some of the file structure.
To create the visualization in the same folder as your project:
pexx nameofyourproject
..
or ./
To create the visualization in a separate folder:
pwd
in your terminal to get the pathpexx nameofyourproject
.$ pexx nameofyourproject
> path: ./ (or whatever your pwd output is)
β£ Name of Project: nameofyourproject
β£ Path: ./
nameofyourproject
with the name you'd like to give your project.gitignore
will be ignored in the build. We've also removed .gitignore
, .git
, and the base-directory-tree
that this project will generate.pwd
in another local directory of choice. I recommend this option as you might want these files and this documentation in another folder.This will kick off the processes that will build the directory trees, the UI for traversing, and give you a little example to start with too :) It will even kick off the server for you.
You can specify what directories you would like to be open when a user first visits by adding them to the opened
array in base-directory-tree/src/store
.
You can add comments for the different files by adding them to the comments
object in base-directory-tree/src/store
. You will specify it using the path as the key and the comment as the value, like this:
`READMEexample`: `This is an example of how a note is made! You can write the pathname of any file and the note will appear βΊοΈ. You can delete this now.`
You can point the github logo link to your own repo by updating the github
string in base-directory-tree/src/store
.
(Basically all the state you need is probably in the Vuex store. π)
Contributions are welcome! π€ Please head over to CONTRIBUTING.md
for more information.
π₯ Thanks for using this project! I hope it's helpful. If you see ways to improve it, PRs are welcome.
Twitter: sarah_edo