Skip to content

Commit fd83edb

Browse files
charlesgutwirthcharlesgutwirth
authored
Merge pull request #52 from oslabs-beta/dev
Dev branch into master with initial version of website
2 parents 91579c3 + 0c9f7f7 commit fd83edb

33 files changed

+758
-2
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,6 @@ Sapling will display Home and Navbar as siblings, both children of App:
190190

191191
<br />
192192
<img src="sapling/media/readme-example.png">
193-
<br />
194193

195194
### Contributor Usage
196195

‎sapling/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,6 @@ Sapling will display Home and Navbar as siblings, both children of App: (image o
212212

213213
<br />
214214
<img src="media/readme-example.png">
215-
<br />
216215

217216
## Extension Settings
218217

‎sapling/media/readme-example.png‎

3.53 KB
Loading

‎website/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎website/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎website/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎website/components/Carousel.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const Carousel = () => {
2+
return (
3+
<div className="carousel mx-auto">
4+
<hr />
5+
<h2 className="text-center">Feature Demo</h2>
6+
<div id="carouselExampleIndicators" className="carousel slide mt-3 mb-5" data-bs-ride="carousel" data-bs-interval="false">
7+
<div className="carousel-indicators">
8+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
9+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
10+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
11+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
12+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
13+
</div>
14+
<div className="carousel-inner">
15+
<div className="carousel-item active">
16+
<img className="d-block w-100" src='/gen_tree_demo.gif' alt="First slide"/>
17+
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
18+
<p>Open a root component to structure your app's files so they match its dependency relationships.</p>
19+
</div>
20+
</div>
21+
<div className="carousel-item">
22+
<img className="d-block w-100" src='/icons_demo.gif' alt="Second slide"/>
23+
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
24+
<p>Use Sapling's intuitive icons to get a list of props available to each component, see which components are connected to your Redux store, and open the file you wish to edit.</p>
25+
</div>
26+
</div>
27+
<div className="carousel-item">
28+
<img className="d-block w-100" src='/rebuild_on_save_demo.gif' alt="Third slide"/>
29+
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
30+
<p>Sapling is highly responsive, and notices whenever you edit and save a file.</p>
31+
</div>
32+
</div>
33+
<div className="carousel-item">
34+
<img className="d-block w-100" src='/build_tree_demo.gif' alt="Fourth slide"/>
35+
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
36+
<p>Rebuild the tree with your currently open file as the root. Note that Sapling retains its expanded state between sessions.</p>
37+
</div>
38+
</div>
39+
<div className="carousel-item">
40+
<img className="d-block w-100" src='/settings_theme_demo.gif' alt="Fifth slide"/>
41+
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
42+
<p>Toggle the display of third-party and React Router components, and watch as Sapling's theme changes to match your preferences.</p>
43+
</div>
44+
</div>
45+
</div>
46+
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
47+
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
48+
<span className="visually-hidden">Previous</span>
49+
</button>
50+
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
51+
<span className="carousel-control-next-icon" aria-hidden="true"></span>
52+
<span className="visually-hidden">Next</span>
53+
</button>
54+
</div>
55+
</div>
56+
)
57+
}
58+
59+
export default Carousel;

‎website/components/Contributors.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import Image from 'next/image';
2+
import githubIcon from '../public/github-icon.svg';
3+
4+
const Contributors = () => {
5+
return (
6+
<div className="contributors mx-auto">
7+
<hr className="my-4"/>
8+
<h2 className="text-center">Created By</h2>
9+
10+
<div className="row">
11+
12+
<div className="person col-xs-3 col-sm-3 col-md-3">
13+
<div className="card">
14+
<img src="https://avatars.githubusercontent.com/u/87096293" className="card-img-top"/>
15+
<div className="card-body">
16+
<img className="profile-small" src="https://avatars.githubusercontent.com/u/87096293" />
17+
<div className="person-info text-center">
18+
<h5 className="card-title">Charles Gutwirth</h5>
19+
<a href="https://github.com/charlesgutwirth" target="_blank">
20+
<Image src={githubIcon}/>
21+
</a>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div className="person col-xs-3 col-sm-3 col-md-3">
28+
<div className="card">
29+
<img src="https://avatars.githubusercontent.com/u/64238519" className="card-img-top"/>
30+
<div className="card-body">
31+
<img className="profile-small" src="https://avatars.githubusercontent.com/u/64238519" />
32+
<div className="person-info text-center">
33+
<h5 className="card-title">Jordan Hisel</h5>
34+
<a href="https://github.com/jo-cella" target="_blank">
35+
<Image src={githubIcon}/>
36+
</a>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div className="person col-xs-3 col-sm-3 col-md-3">
43+
<div className="card">
44+
<img src="https://avatars.githubusercontent.com/u/81602150" className="card-img-top"/>
45+
<div className="card-body">
46+
<img className="profile-small" src="https://avatars.githubusercontent.com/u/81602150" />
47+
<div className="person-info text-center">
48+
<h5 className="card-title">Lindsay Baird</h5>
49+
<a href="https://github.com/labaird" target="_blank">
50+
<Image src={githubIcon}/>
51+
</a>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div className="person col-xs-3 col-sm-3 col-md-3">
58+
<div className="card">
59+
<img src="https://avatars.githubusercontent.com/u/58193305" className="card-img-top"/>
60+
<div className="card-body">
61+
<img className="profile-small" src="https://avatars.githubusercontent.com/u/58193305" />
62+
<div className="person-info text-center">
63+
<h5 className="card-title">Paul Coster</h5>
64+
<a href="https://github.com/PLCoster" target="_blank">
65+
<Image src={githubIcon}/>
66+
</a>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
</div>
73+
</div>
74+
)
75+
}
76+
77+
export default Contributors;

‎website/components/Jumbotron.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Image from 'next/image';
2+
import logo from '../public/sapling-logo.png';
3+
import vscodeLogo from '../public/vscode-logo.png'
4+
5+
const Jumbotron = () => {
6+
return (
7+
<div className="jumbotron mx-auto pt-5">
8+
<h1 className="display-4 logo d-flex justify-content-center d-flex align-items-center">
9+
<Image src={logo} />
10+
<b>Sapling</b>
11+
</h1>
12+
<p className="lead text-center">A convenient way to traverse your React app.</p>
13+
<hr className="my-4"/>
14+
<p>React is a powerful tool for building your frontend applications, but at scale navigating the hierarchy of your components can become frustrating. Sapling's intuitive interface reflects the hierarchical nature of your app, so you'll never have to think twice about navigation again.</p>
15+
<p className="lead d-flex justify-content-center">
16+
<a className="btn btn-sapling btn-lg d-flex align-items-center" href="#" role="button">
17+
<span>Get Sapling for </span><Image src={vscodeLogo} /><span> VS Code </span>
18+
</a>
19+
</p>
20+
</div>
21+
)
22+
}
23+
24+
export default Jumbotron;

‎website/components/Links.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Image from 'next/image';
2+
import githubIcon from '../public/github-icon.svg';
3+
import mediumIcon from '../public/medium-logo.svg';
4+
5+
const Links = () => {
6+
return (
7+
<div className="links-section mx-auto">
8+
<hr className="my-4"/>
9+
<h2 className="text-center">Links</h2>
10+
<div className="links">
11+
<div className="link mx-auto">
12+
<p>View the product</p>
13+
<a href="https://github.com/oslabs-beta/sapling" target="_blank">
14+
<Image src={githubIcon}/>
15+
</a>
16+
</div>
17+
<div className="link mx-auto">
18+
<p>Read more about Sapling</p>
19+
<a href="" target="_blank">
20+
<Image src={mediumIcon}/>
21+
</a>
22+
</div>
23+
</div>
24+
</div>
25+
)
26+
}
27+
28+
export default Links;

0 commit comments

Comments
 (0)