{"id":20295043,"url":"https://github.com/nfriend/tree-online","last_synced_at":"2025-04-06T16:14:13.924Z","repository":{"id":43990947,"uuid":"225171979","full_name":"nfriend/tree-online","owner":"nfriend","description":"An online tree-like utility for generating ASCII folder structure diagrams. Written in TypeScript and React.","archived":false,"fork":false,"pushed_at":"2023-03-08T20:19:24.000Z","size":4260,"stargazers_count":355,"open_issues_count":11,"forks_count":30,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T15:08:23.714Z","etag":null,"topics":["react","redux","tree","typescript"],"latest_commit_sha":null,"homepage":"https://tree.nathanfriend.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nfriend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-01T14:09:46.000Z","updated_at":"2025-03-20T11:34:15.000Z","dependencies_parsed_at":"2024-11-14T15:36:59.407Z","dependency_job_id":"ff455670-45b4-4c15-a25a-700fd0ba6f72","html_url":"https://github.com/nfriend/tree-online","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriend%2Ftree-online","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriend%2Ftree-online/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriend%2Ftree-online/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfriend%2Ftree-online/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nfriend","download_url":"https://codeload.github.com/nfriend/tree-online/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509237,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","redux","tree","typescript"],"created_at":"2024-11-14T15:32:50.536Z","updated_at":"2025-04-06T16:14:13.903Z","avatar_url":"https://github.com/nfriend.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [tree.nathanfriend.io](https://tree.nathanfriend.io)\n\n\u003ca href=\"https://gitlab.com/nfriend/tree-online/pipelines\" target=\"_blank\"\u003e\u003cimg src=\"https://gitlab.com/nfriend/tree-online/badges/master/pipeline.svg\" alt=\"GitLab build status\"\u003e\u003c/a\u003e\n\n\u003cimg alt=\"The tree.nathanfriend.io logo\" src=\"public/tree-logo.png\" width=\"200\"/\u003e\n\n## What is this?\n\n[tree.nathanfriend.io](https://tree.nathanfriend.io) is an online [tree](http://mama.indstate.edu/users/ice/tree/)-like utility for generating ASCII folder structure diagrams.\n\nIt takes input like this:\n\n```\nmy-project\n  src\n    index.html\n    my-project.scss\n  build\n    index.html\n    my-project.css\n```\n\n... and transforms it into an ASCII tree diagram like this:\n\n```\n.\n└── my-project/\n    ├── src/\n    │   ├── index.html\n    │   └── my-project.scss\n    └── build/\n        ├── index.html\n        └── my-project.css\n```\n\n### Why would I want this?\n\nIt's common to explain or discuss a file system structure on text-based sites like [StackOverflow](https://stackoverflow.com/), [GitLab](https://gitlab.com), or [GitHub](https://github.com/). But generating a nice-looking diagram like the one above is painful by hand.\n\n## About the project\n\n[tree.nathanfriend.io](https://tree.nathanfriend.io) is written in [TypeScript](https://www.typescriptlang.org/) and [React](https://reactjs.org/)/[Redux](https://redux.js.org/).\n\nSome other technologies this project uses:\n\n- The [Flatly](https://bootswatch.com/flatly/) and [Darkly](https://bootswatch.com/darkly/) themes from [Bootswatch](https://bootswatch.com/)\n  - The project's theme will automatically adjust based on your OS's theme using [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) - give it a try!\n- [JSONCrush](https://github.com/KilledByAPixel/JSONCrush) for efficiently saving the application's state in the URL\n- [Bootstrap](https://getbootstrap.com/). In particular, its [responsive flex utilities](https://getbootstrap.com/docs/4.4/utilities/flex/)\n- [Moment.js](https://momentjs.com/) and a few functions from [Lodash](https://lodash.com/)\n- [GitLab CI/CD](https://docs.gitlab.com/ee/ci/) and [GitLab Pages](https://about.gitlab.com/product/pages/) for continuous integration and deployment\n  - If you're interested in the mechanics, check out this project's [.gitlab-ci.yml](.gitlab-ci.yml)\n- [Jest](https://jestjs.io/), [TSLint](https://palantir.github.io/tslint/), and [Prettier](https://prettier.io/) for code quality\n- [Renovate Bot](https://renovate.whitesourcesoftware.com/) for automatically keeping dependencies up-to-date\n\n### `tree` implementation\n\nIf you're curious about this project's implementation of `tree`, check out [src/lib/](src/lib/), and more specifically, [src/lib/generate-tree.ts](src/lib/generate-tree.ts).\n\n## Developing\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), so it contains all the scripts you know and love:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr /\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr /\u003e\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr /\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\u003cbr /\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr /\u003e\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### Deploying\n\nThis project is deployed automatically using [GitLab CI/CD](https://docs.gitlab.com/ee/ci/) to [GitLab Pages](https://about.gitlab.com/product/pages/), so simply `git push` on `master` to trigger a new deployment. For more info, see this project's [.gitlab-ci.yml](.gitlab-ci.yml).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfriend%2Ftree-online","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnfriend%2Ftree-online","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfriend%2Ftree-online/lists"}