Table Of Contents

• Table Of Contents
• Automatic Project Structures for README's
  • Description
  • Architecture
  • How it Works
    • WHY
      • Major Issues
      • Minor Issues
• Technologies
• Authors Table
• Config Values
  • Example Output

Automatic Project Structures for README's

Description

A web application that helps automate README creation

Architecture

Read: https://github.com/MLH-Fellowship/0.2.1-readme-dirs/wiki/Tree-Core-Architecure

How it Works

Head to URL and type in your Github Project URL and watch a MarkDown Accessible README with pre-filled descriptions appear! With a one-click Copy/Paste you can update your README with the best MarkDown Project Structure README's you've ever seen! Example Github Project URL: https://github.com/MLH-Fellowship/0.2.1-readme-dirs

WHY

We built this tool two solve two major issues and two minor issues:

Major Issues

1. README's don't contain project structures which make it difficult for contributors to understand where everything is and how what's happening inside the repository.
2. Existing Project Structures don't have hyperlinks making the UX of a project structure a bit difficult to navigate with excessive scrolling or third party plugins to extend the functionality. This requires no third-party software and can be done right in Github natively!

Minor Issues

1. You can plug in any repo you want to contribute to and completely understand what every folder does thanks to auto generated documentation!
2. You can attach Badges to your repository to help people find the correct NPM Package your repository references!

Technologies

• React - To Build out the front-end application
• Github V3 REST API - To pull Tree Structures from Github Repositories
• JavaScript (ES6) - To execute API Requests
• TypeScript
• Styled Components (CSS-IN-JS Framework)
• HTML
• CSS
• Babel

Authors Table

sahandfarahani Contributions: 180 Public Repos: 10 🐦	Manpreet-Bhatti Brampton, Ontario Contributions: 150 Public Repos: 10 🐦	ralph-dev Toronto Contributions: 32 Public Repos: 62 🐦	nchaloult Atlanta, GA Contributions: 30 Public Repos: 20 🐦	mohammedsahl Waterloo, Canada Contributions: 18 Public Repos: 21 🐦
dangnhathuy Contributions: 7 Public Repos: 5 🐦

Config Values

Configuration	Type	Default Value	Description
CollapsibleFolder	Boolean	true	Make folders collapsible
RegexKeyword	String	'Preview'	Gets the comment in form of @keyword{comment}
Filter	FilterType { NULL, ROOT_ONLY, FOLDER_ONLY}	FilterType.NULL	Generate the tree through a filter
AuthorConfigs	{onlyOwner:boolean, AuthorInfo:Authorinfo,TableDesign:TableDesign}	onlyOwner=false	If we only want owner info and which infos
TableDesign	{VERTICAL, CELL_DESIGN}	VERTICAL	Design Style of Table
AuthorInfo	WithName,WithPicture,WithContributions,WithEmail, WithLocation,WithTwitterUsername,WithNumberOfRepos		Which Information of Authors to show
WithName	Boolean	true	Authors Login Name
WithPicture	Boolean	true	Authors Picture
WithContributions	Boolean	true	Number of Author's Contributions
WithEmail	Boolean	false	Authors Email
WithLocation	Boolean	false	Authors Location
WithTwitterUsername	Boolean	false	Authors Twitter Link
WithNumberOfRepos	Boolean	false	Authors public Repo Number
GooglePlayLink	String	""	GooglePlay Link URL
IOSStoreLink	String	""	IOS Store Link URL
WithTableOfContent	boolean	true	is there Table of Content?
IncludePackageCommands	boolean	true	Table of commands from package.json in "/command/: description" format

Example Output

⚙️ ℹ️ .eslintrc.js 
📂 .github 
📄 FUNDING.yml 
⚙️ ℹ️ .gitignore 
⚖️ LICENSE 
📜 README.md 
📄 ℹ️ package-lock.json 
📄 ℹ️ package.json 
📂 public 
📄 favicon.ico 

📄 index.html 
📂 src 
📄 App.tsx 

📂 components 
📄 BadgesSection.tsx 

📄 CommentSection.tsx 
📄 MarkdownDisplay.tsx 
📄 MarkdownDisplayLine.tsx 
📄 URLBox.tsx 
📂 reusable 
📄 Card.tsx 

📄 CenteredCol.tsx 
📄 CustomButton.tsx 
📄 CustomSecondaryButton.tsx 
📄 Input.tsx 
📄 TextArea.tsx 
📂 images 
📄 Demo.gif 

📄 updatedDemo.gif 
📄 index.css 
📄 index.tsx 
📄 react-app-env.d.ts 
📂 tree 
📄 constants.ts 

📄 index.ts 
📄 languageWebsites.ts 
📄 types.ts 
📂 utils 
📄 Switch.tsx 

📂 createNpmFormatting 
📄 createNpmFormatting.ts 

📄 createNpmFormattingTest.ts 
📄 deepCopyFunction.ts 
📂 deleteFileFromPath 
📄 deleteFileFromPath.ts 

📄 deleteFileFromPathTest.ts 
📄 extractString.ts 
📄 filterChange.ts 
📂 formatLanguages 
📄 formatLanguages.ts 

📄 formatLanguagesTest.ts 
📄 generateCoreTest.ts 
📂 generateMarkDownTree 
📄 generateMarkDownTree.ts 

📄 generateMarkDownTreeTest.ts 
📂 getAutoGeneratedCommentForPath 
📄 getAutoGeneratedCommentForPath.ts 

📄 getAutoGeneratedCommentForPathtest.ts 
📄 getBuiltinComment.ts            # ";
const END_OF_FILE_COMMENT_PATTERN =
📂 getCopyToClipboardContents 
📄 getCopyToClipboardContents.ts 

📄 getCopyToClipboardContentsTest.ts 
📄 getCoreFromTree.ts 
📂 getFileIconFromFileType 
📄 getFileIconFromFileType.ts 

📄 getFileIconFromFileTypeTest.ts 
📂 getFileTypeFromPath 
📄 getFileTypeFromPath.ts 

📄 getFileTypeFromPathTest.ts 
📂 getHyperLinkFromPath 
📄 getHyperLinkFromPath.ts 

📄 getHyperLinkFromPathtest.ts 
📄 getInfoLinks.ts 
📂 getLargestFileNameLengthInPath 
📄 getLargestFileNameLengthInLevel.ts 

📄 getLargestFileNameLengthInLevelTest.ts 
📂 getOwnerAndRepoFromUrl 
📄 getOwnerAndRepoFromUrl.ts 

📄 getOwnerAndRepoFromUrlTest.ts 
📄 getPreviousTree.ts 
📄 getWebsiteForLanguage.ts 
📂 repoToBadge 
📄 repoToBadge.ts 

📄 repoToBadgeTest.ts 
📂 selectFoldersOnly 
📄 selectFoldersOnly.ts 

📄 selectFoldersOnlyTest.ts 
📂 selectRootCores 
📄 SelectRootCoresTest.ts 

📄 selectRootCores.ts 
📂 setCommentForPath 
📄 setCommentForPath.ts 

📄 setCommentForPathtest.ts 
📄 tagWrap.ts 
📂 undoDeletions 
📄 undoDeletions.ts 

📄 undoDeletionsTest.ts 
📄 ℹ️ tsconfig.json