Skip to content

Commit d0a2aa4

Browse files
charlesgutwirthcharlesgutwirth
authored
Merge pull request #62 from oslabs-beta/dev
Dev to Master
2 parents fd83edb + b174db1 commit d0a2aa4

File tree

8 files changed

+77
-106
lines changed

8 files changed

+77
-106
lines changed

‎website/components/Carousel.jsx

+15-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
import Image from 'next/image';
2+
import firstSlide from '../public/gen_tree_demo.gif';
3+
import secondSlide from '../public/icons_demo.gif';
4+
import thirdSlide from '../public/rebuild_on_save_demo.gif';
5+
import fourthSlide from '../public/build_tree_demo.gif';
6+
import fifthSlide from '../public/settings_theme_demo.gif';
7+
18
const Carousel = () => {
29
return (
310
<div className="carousel mx-auto">
@@ -13,33 +20,33 @@ const Carousel = () => {
1320
</div>
1421
<div className="carousel-inner">
1522
<div className="carousel-item active">
16-
<img className="d-block w-100" src='/gen_tree_demo.gif' alt="First slide"/>
23+
<Image className="d-block w-100" src={firstSlide} alt="First slide"/>
1724
<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>
25+
<p>Open a root component to structure your app&apos;s files so they match its dependency relationships.</p>
1926
</div>
2027
</div>
2128
<div className="carousel-item">
22-
<img className="d-block w-100" src='/icons_demo.gif' alt="Second slide"/>
29+
<Image className="d-block w-100" src={secondSlide} alt="Second slide"/>
2330
<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>
31+
<p>Use Sapling&apos;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>
2532
</div>
2633
</div>
2734
<div className="carousel-item">
28-
<img className="d-block w-100" src='/rebuild_on_save_demo.gif' alt="Third slide"/>
35+
<Image className="d-block w-100" src={thirdSlide} alt="Third slide"/>
2936
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
3037
<p>Sapling is highly responsive, and notices whenever you edit and save a file.</p>
3138
</div>
3239
</div>
3340
<div className="carousel-item">
34-
<img className="d-block w-100" src='/build_tree_demo.gif' alt="Fourth slide"/>
41+
<Image className="d-block w-100" src={fourthSlide} alt="Fourth slide"/>
3542
<div className="carousel-caption w-75 mx-auto d-none d-md-block">
3643
<p>Rebuild the tree with your currently open file as the root. Note that Sapling retains its expanded state between sessions.</p>
3744
</div>
3845
</div>
3946
<div className="carousel-item">
40-
<img className="d-block w-100" src='/settings_theme_demo.gif' alt="Fifth slide"/>
47+
<Image className="d-block w-100" src={fifthSlide} alt="Fifth slide"/>
4148
<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>
49+
<p>Toggle the display of third-party and React Router components, and watch as Sapling&apos;s theme changes to match your preferences.</p>
4350
</div>
4451
</div>
4552
</div>

‎website/components/Contributors.jsx

+28-32
Original file line numberDiff line numberDiff line change
@@ -9,60 +9,56 @@ const Contributors = () => {
99

1010
<div className="row">
1111

12-
<div className="person col-xs-3 col-sm-3 col-md-3">
12+
<div className="person col-sm-3">
1313
<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}/>
14+
<Image src="https://avatars.githubusercontent.com/u/87096293" className="card-img-top" alt="Charles Gutwirth Picture" width={200} height={200}/>
15+
<div className="card-body person-info text-center">
16+
<h5 className="card-title">Charles Gutwirth</h5>
17+
<div className="profile-links">
18+
<a href="https://github.com/charlesgutwirth" target="_blank" rel="noreferrer">
19+
<Image className="profile-link" src={githubIcon} width={40} height={40} alt="Github OctoCat Logo"/>
2120
</a>
2221
</div>
2322
</div>
2423
</div>
2524
</div>
2625

27-
<div className="person col-xs-3 col-sm-3 col-md-3">
26+
<div className="person col-sm-3">
2827
<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}/>
28+
<Image src="https://avatars.githubusercontent.com/u/64238519" className="card-img-top" alt="Jordan Hisel Picture" width={200} height={200}/>
29+
<div className="card-body person-info text-center">
30+
<h5 className="card-title">Jordan Hisel</h5>
31+
<div className="profile-links">
32+
<a href="https://github.com/jo-cella" target="_blank" rel="noreferrer">
33+
<Image className="profile-link" src={githubIcon} width={40} height={40} alt="Github OctoCat Logo"/>
3634
</a>
3735
</div>
3836
</div>
3937
</div>
4038
</div>
4139

42-
<div className="person col-xs-3 col-sm-3 col-md-3">
40+
<div className="person col-sm-3">
4341
<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}/>
42+
<Image src="https://avatars.githubusercontent.com/u/81602150" className="card-img-top" alt="Lindsay Baird Picture" width={200} height={200}/>
43+
<div className="card-body person-info text-center">
44+
<h5 className="card-title">Lindsay Baird</h5>
45+
<div className="profile-links">
46+
<a href="https://github.com/labaird" target="_blank" rel="noreferrer">
47+
<Image className="profile-link" src={githubIcon} width={40} height={40} alt="Github OctoCat Logo"/>
5148
</a>
5249
</div>
5350
</div>
5451
</div>
5552
</div>
5653

57-
<div className="person col-xs-3 col-sm-3 col-md-3">
54+
<div className="person col-sm-3">
5855
<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}/>
56+
<Image src="https://avatars.githubusercontent.com/u/58193305" className="card-img-top" alt="Paul Coster Picture" width={200} height={200}/>
57+
<div className="card-body person-info text-center">
58+
<h5 className="card-title">Paul Coster</h5>
59+
<div className="profile-links">
60+
<a href="https://github.com/PLCoster" target="_blank" rel="noreferrer">
61+
<Image className="profile-link" src={githubIcon} width={40} height={40} alt="Github OctoCat Logo"/>
6662
</a>
6763
</div>
6864
</div>

‎website/components/Jumbotron.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ const Jumbotron = () => {
66
return (
77
<div className="jumbotron mx-auto pt-5">
88
<h1 className="display-4 logo d-flex justify-content-center d-flex align-items-center">
9-
<Image src={logo} />
9+
<Image src={logo} alt="Sapling logo"/>
1010
<b>Sapling</b>
1111
</h1>
1212
<p className="lead text-center">A convenient way to traverse your React app.</p>
1313
<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>
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&apos;s intuitive interface reflects the hierarchical nature of your app, so you&apos;ll never have to think twice about navigation again.</p>
1515
<p className="lead d-flex justify-content-center">
1616
<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>
17+
<span>Get Sapling for </span><Image src={vscodeLogo} alt="VS Code Logo"/><span> VS Code </span>
1818
</a>
1919
</p>
2020
</div>

‎website/components/Links.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ const Links = () => {
1010
<div className="links">
1111
<div className="link mx-auto">
1212
<p>View the product</p>
13-
<a href="https://github.com/oslabs-beta/sapling" target="_blank">
14-
<Image src={githubIcon}/>
13+
<a href="https://github.com/oslabs-beta/sapling" target="_blank" rel="noreferrer">
14+
<Image src={githubIcon} alt="Github OctoCat Logo"/>
1515
</a>
1616
</div>
1717
<div className="link mx-auto">
1818
<p>Read more about Sapling</p>
1919
<a href="" target="_blank">
20-
<Image src={mediumIcon}/>
20+
<Image src={mediumIcon} alt="Medium M Logo"/>
2121
</a>
2222
</div>
2323
</div>

‎website/components/Navbar.jsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import Image from 'next/image';
2+
import Link from 'next/link';
23
import logo from '../public/sapling-logo.png';
34

45
const Navbar = () => {
56
return (
67
<nav id="navbar" className="navbar navbar-expand-lg navbar-light">
78
<div className="container-fluid">
8-
<a className="navbar-brand flex align-items-center" href="/">
9-
<Image src={logo} />
10-
<div className="flex-col">
11-
<span>Sapling</span>
12-
</div>
13-
</a>
9+
<Link href="/" passHref>
10+
<a className="navbar-brand flex align-items-center">
11+
<Image src={logo} alt="Sapling Tree Logo"/>
12+
<div className="flex-col">
13+
<span>Sapling</span>
14+
</div>
15+
</a>
16+
</Link>
1417
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
1518
<span className="navbar-toggler-icon"></span>
1619
</button>

‎website/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
7-
"build": "next build",
7+
"build": "next build && next export",
88
"start": "next start",
99
"lint": "next lint"
1010
},
1111
"dependencies": {
1212
"@popperjs/core": "^2.10.2",
1313
"bootstrap": "^5.1.1",
1414
"next": "11.1.2",
15+
"postcss": "^8.3.9",
1516
"react": "17.0.2",
1617
"react-dom": "17.0.2",
1718
"sass": "^1.42.1"

‎website/pages/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default function Home() {
2828
<footer className="d-flex justify-content-around">
2929
<div className="d-flex flex-column align-items-center">
3030
<span>developed under</span>
31-
<a href="https://opensourcelabs.io/" target="_blank">
32-
<Image src={osLabsLogo} />
31+
<a href="https://opensourcelabs.io/" target="_blank" rel="noreferrer">
32+
<Image src={osLabsLogo} alt="OSLabs Logo"/>
3333
</a>
3434
</div>
3535
</footer>

‎website/styles/globals.scss

+15-51
Original file line numberDiff line numberDiff line change
@@ -122,68 +122,32 @@ nav#navbar {
122122
margin-bottom: 60px;
123123

124124
.card-body {
125-
img {
126-
display: none;
127-
}
128-
129-
.person-info {
130-
display: flex;
131-
flex-direction: column;
132-
justify-content: center;
133-
img {
134-
max-height: 40px;
135-
}
136-
}
125+
display: flex;
126+
flex-direction: column;
127+
justify-content: flex-start;
128+
align-items: center;
137129
}
138130

139-
@media screen and (max-width: 575px) {
131+
@media screen and (max-width: 576px) {
140132
.card {
141-
min-width: 310px;
142-
}
143-
.card-img-top {
144-
display:none;
145-
}
146-
.card-body {
133+
margin-bottom: 10px;
134+
min-width: 405px;
147135
display: flex;
148-
.profile-small {
149-
height: 140px;
150-
display: block;
151-
border-radius: 5px;
136+
flex-direction: row;
137+
138+
.card-img-top {
139+
width: 140px;
140+
flex-shrink: 0;
152141
}
153-
.person-info {
142+
143+
.card-body {
144+
justify-content: center;
154145
flex-grow: 1;
155146
}
156147
}
157148
}
158149
}
159150

160-
.people {
161-
display: flex;
162-
justify-content: column;
163-
}
164-
165-
.person {
166-
// background-color: $sapling-light-green;
167-
// padding: 1em;
168-
// display: flex;
169-
// flex-direction: column;
170-
// align-items: center;
171-
// border-radius: 5px;
172-
// box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
173-
// img {
174-
// border-radius: 5px;
175-
// }
176-
// a {
177-
// img {
178-
// height: 3em;
179-
// }
180-
// }
181-
// p {
182-
// margin-top: .5em;
183-
// font-size: 14pt;
184-
// }
185-
}
186-
187151
/* ### FOOTER ### */
188152

189153
footer {

0 commit comments

Comments
 (0)