Skip to content

Commit 63c3c65

Browse files
David LeeDavid Lee
David Lee
authored and
David Lee
committed
Made README and imported svg icons for visuals
1 parent 2b7d075 commit 63c3c65

13 files changed

+443
-65
lines changed

‎LICENSE.txt

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Copyright (c) 2022 OSLabs Beta
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
4+
associated documentation files (the "Software"), to deal in the Software without restriction, including
5+
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
6+
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
7+
following conditions:
8+
9+
The above copyright notice and this permission notice shall be included in all copies or substantial
10+
portions of the Software.
11+
12+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
13+
LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
14+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
15+
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
16+
DEALINGS IN THE SOFTWARE.

‎README.md

+200-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,200 @@
1-
# Nexus
2-
NextJS VScode extension to visualize component tree.
1+
<div id="top"></div>
2+
3+
<!-- PROJECT SHIELDS -->
4+
<!--
5+
*** I'm using markdown "reference style" links for readability.
6+
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
7+
*** See the bottom of this document for the declaration of the reference variables
8+
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
9+
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
10+
<a href="https://github.com/github_username/repo_name">
11+
</a>
12+
-->
13+
14+
<!-- PROJECT LOGO -->
15+
<br />
16+
<div align="center">
17+
<img src="nexus/media/logo.png" alt="NexusLogo" width="100%">
18+
19+
<!-- HEADING AREA -->
20+
<h1 align="center">Nexus</h1>
21+
22+
<p align="center">
23+
A component tree extension for NextJS
24+
<br />
25+
<br />
26+
<a href="https://github.com/oslabs-beta/Nexus/issues">Report Bugs</a>
27+
·
28+
<a href="https://github.com/oslabs-beta/Nexus/issues">Request Features</a>
29+
</p>
30+
</div>
31+
32+
33+
34+
<!-- TABLE OF CONTENTS -->
35+
<details>
36+
<summary>Table of Contents</summary>
37+
<ol>
38+
<li>
39+
<a href="#about-the-project">About The Project</a>
40+
<ul>
41+
<li><a href="#built-with">Built With</a></li>
42+
</ul>
43+
</li>
44+
<li><a href="#installation">Installation</a></li>
45+
<li>
46+
<a href="#getting-started">Getting Started</a>
47+
<ul>
48+
<li><a href="#prerequisites">Prerequisites</a></li>
49+
</ul>
50+
</li>
51+
<li><a href="#usage">Usage</a></li>
52+
<li><a href="#roadmap">Roadmap</a></li>
53+
<li>
54+
<a href="#contributing">Steps to Contribute</a>
55+
<ul>
56+
<li><a href ="#making-changes">Making Changes</a></li>
57+
</ul>
58+
</li>
59+
<li><a href="#license">License</a></li>
60+
<li><a href="#NexusTeam">The Nexus Team</a></li>
61+
<li><a href="#contact">Contact</a></li>
62+
</ol>
63+
</details>
64+
65+
66+
67+
<!-- ABOUT THE PROJECT -->
68+
## About The Project
69+
70+
Nexus is a VSCode Extension created for NextJS developers! As codebases scale in size and complexity, developers may feel overwhelmed as they keep track of tens of components and hundreds of props elements per file. Nexus aims to help developers overcome unnecessary mental strain through 3 main methods:
71+
72+
1. Displaying file-specific component hierarchy in your VSCode sidebar
73+
2. Including component-specific state and props objects for parent and child components
74+
3. Differentiating between server-side rendered and static-site generated components
75+
76+
We at Team Nexus hope that you enjoy our extension, taking advantage of a time-tested component tree model that integrates the unique features of NextJS!
77+
78+
<p align="right">(<a href="#top">back to top</a>)</p>
79+
80+
81+
<!-- BUILT WITH -->
82+
### Built With
83+
84+
* <img style="height: 1em;" src="nexus/media/next-js.svg"> [Next.js](https://nextjs.org/)
85+
* <img style="height: 1em;" src="nexus/media/react-brands.svg"> [React.js](https://reactjs.org/)
86+
* <img style="height: 1em;" src="nexus/media/typescript.svg"> [Typescript](https://www.typescriptlang.org/)
87+
* <img style="height: 1em;" src="nexus/media/vscode.svg"> [VSCode Extension API](https://code.visualstudio.com/api)
88+
* <img style="height: 1em;" src="nexus/media/webpack.svg"> [Webpack](https://webpack.js.org/)
89+
* [Acorn Parser](https://www.npmjs.com/package/acorn)
90+
91+
<p align="right">(<a href="#top">back to top</a>)</p>
92+
93+
<!-- INSTALLATION -->
94+
## Installation
95+
96+
1. Download VSCode for your machine: [VSCode Install](https://code.visualstudio.com/download)
97+
98+
2. Install the Nexus extension in the VSCode Marketplace: [here](put download link here)
99+
100+
3. A node tree icon should appear on your sidebar. You've now installed Nexus! Woot Woot! Now on to the "Getting Started" section below.
101+
102+
Note: If contributing, see the "Installation for Contributors" section below!
103+
104+
<p align="right">(<a href="#top">back to top</a>)</p>
105+
106+
<!-- GETTING STARTED -->
107+
## Getting Started
108+
109+
Congrats on installing Nexus! Now let's get it started.
110+
111+
112+
### Prerequisites
113+
114+
Nexus supports OSX, Windows, and WSL
115+
116+
<!-- USAGE EXAMPLES -->
117+
## Usage
118+
119+
1. Click the node tree icon on your sidebar. An "Input File Here" button should appear on your side panel!
120+
<img src="nexus/media/filler.png">
121+
122+
2. Click the button and your file explorer window will open. Select a file and press "Ok".
123+
<img src="nexus/media/filler.png">
124+
125+
3. Your side panel should now render a component tree that displays SSG or SSR status! Clicking on components will render child components if they exist and hovering over components will display their props objects. Enjoy!
126+
<img src="nexus/media/filler.png">
127+
128+
<p align="right">(<a href="#top">back to top</a>)</p>
129+
130+
131+
132+
<!-- ROADMAP -->
133+
## Roadmap
134+
135+
- [ ] Creating a webview to look deeper into structure of individual components
136+
- [ ] Making the parser more dynamic and flexible
137+
- [ ] Handling Link Components
138+
- [ ] Error checking in the frontend to ensure that uploaded files are either NextJS or React
139+
- [ ] Add status bar item for Nexus
140+
- [ ] Store component tree memory in VSCode
141+
142+
See the [open issues](https://github.com/oslabs-beta/Nexus/issues) for a full list of proposed features (and known issues).
143+
144+
<p align="right">(<a href="#top">back to top</a>)</p>
145+
146+
147+
<!-- STEPS TO CONTRIBUTE -->
148+
## Steps to Contribute
149+
150+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
151+
152+
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
153+
Don't forget to give the project a star! Thanks again!
154+
155+
1. Fork & Clone Nexus
156+
2. Create your Feature Branch (`git checkout -b <github_username>/<YourAmazingFeature>`)
157+
3. Make your Changes (See **Making Changes** below)
158+
4. Commit your Changes (`git commit -m '<Your Commit Message>'`)
159+
5. Push to the Branch (`git push origin <github_username>/<YourAmazingFeature>`)
160+
6. Open a Pull Request
161+
162+
<p align="right">(<a href="#top">back to top</a>)</p>
163+
164+
<!-- MAKING CHANGES -->
165+
### Making Changes
166+
167+
1. Make your changes!
168+
2. Open /nexus/src/extension.ts and save any changes you made
169+
3. Re-compile and re-build your extension using the command line: `npm run compile` & `npm run build`
170+
4. Press F5. A new VSCode window should open. This is your debugging environment!
171+
5. Repeat step 3 and refresh your debugging environment to test further changes
172+
173+
<p align="right">(<a href="#top">back to top</a>)</p>
174+
175+
<!-- LICENSE -->
176+
## License
177+
178+
Distributed under the MIT License. See `LICENSE` for more information.
179+
180+
<p align="right">(<a href="#top">back to top</a>)</p>
181+
182+
183+
<!-- THE NEXUS TEAM -->
184+
## The Nexus Team
185+
186+
* Mike Hong [LinkedIn](https://www.linkedin.com/in/mykongee/) | [Github](https://github.com/mykongee)
187+
* Brian Chiang [LinkedIn](https://www.linkedin.com/in/brian-chiang-849a181a7/) | [Github](https://github.com/BChiang4)
188+
* David Lee [LinkedIn](https://www.linkedin.com/in/david-lee-39541411a/) | [Github](https://github.com/dplee123)
189+
* Nico Flores [LinkedIn](https://www.linkedin.com/in/nicolasaflores/) | [Github](https://github.com/nicoflrs)
190+
* Alex Hersler [LinkedIn](https://www.linkedin.com/in/alex-hersler/) | [Github](https://github.com/FoxEight)
191+
192+
<!-- CONTACT US -->
193+
## Contact Us
194+
Email: [email protected]
195+
196+
Twitter: [@teamnexus_js](https://twitter.com/teamnexus_js)
197+
198+
Website: [https://nexus-js.com/](https://nexus-js.com/)
199+
200+
<p align="right">(<a href="#top">back to top</a>)</p>

0 commit comments

Comments
 (0)