Skip to content

Latest commit

 

History

History
158 lines (143 loc) · 18.3 KB

README.md

File metadata and controls

158 lines (143 loc) · 18.3 KB

Table Of Contents

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

Project demo

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

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