tree.nathanfriend.io

What is this?

tree.nathanfriend.io is an online tree-like utility for generating ASCII folder structure diagrams.

It takes input like this:

my-project
  src
    index.html
    my-project.scss
  build
    index.html
    my-project.css

... and transforms it into an ASCII tree diagram like this:

.
└── my-project/
    ├── src/
    │   ├── index.html
    │   └── my-project.scss
    └── build/
        ├── index.html
        └── my-project.css

Why would I want this?

It's common to explain or discuss a file system structure on text-based sites like StackOverflow, GitLab, or GitHub. But generating a nice-looking diagram like the one above is painful by hand.

About the project

tree.nathanfriend.io is written in TypeScript and React/Redux.

Some other technologies this project uses:

• The Flatly and Darkly themes from Bootswatch
  • The project's theme will automatically adjust based on your OS's theme using prefers-color-scheme - give it a try!
• JSONCrush for efficiently saving the application's state in the URL
• Bootstrap. In particular, its responsive flex utilities
• Moment.js and a few functions from Lodash
• GitLab CI/CD and GitLab Pages for continuous integration and deployment
  • If you're interested in the mechanics, check out this project's .gitlab-ci.yml
• Jest, TSLint, and Prettier for code quality
• Renovate Bot for automatically keeping dependencies up-to-date

tree implementation

If you're curious about this project's implementation of tree, check out src/lib/, and more specifically, src/lib/generate-tree.ts.

Developing

This project was bootstrapped with Create React App, so it contains all the scripts you know and love:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Deploying

This project is deployed automatically using GitLab CI/CD to GitLab Pages, so simply git push on master to trigger a new deployment. For more info, see this project's .gitlab-ci.yml.