Skip to content

Commit 5ab8673

Browse files
jason-roundtreejason-roundtree
committed
Adapt styles from version 1 project
1 parent e2fcefe commit 5ab8673

File tree

11 files changed

+227
-81
lines changed

11 files changed

+227
-81
lines changed

‎web/components/DescriptiveItem.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function DescriptiveItem({ section }) {
1313
>
1414
<h4>{secData.name}</h4>
1515

16-
{secData.description !== "" && (
16+
{secData.description && (
1717
<p>{secData.description}</p>
1818
)}
1919

@@ -25,12 +25,12 @@ export default function DescriptiveItem({ section }) {
2525
</pre>
2626
)}
2727

28-
{secData.external_links && (
28+
{secData.external_links.length > 0 && (
2929
<ul>
3030
{secData.external_links.map(link => (
3131
<li key={link._id}>
3232
<a
33-
href={link.href}
33+
href={link.url}
3434
target="_blank"
3535
rel="noopener noreferrer"
3636
>

‎web/components/Footer.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@ import React from 'react'
33
export default function Footer() {
44
return (
55
<footer>
6-
<span>Jason Roundtree</span>
7-
<span>
8-
<a href="https://github.com/RoundEm">Github</a>
9-
</span>
10-
<span>
11-
<a href="mailto:[email protected]" target="_top">Email</a>
12-
</span>
6+
<div>
7+
<span>Site by Jason Roundtree</span>
8+
9+
<span>
10+
<a href="mailto:[email protected]" target="_top">Email</a>
11+
</span>
12+
13+
<span>
14+
<a href="https://blog.jasonroundtree.info/">Blog</a>
15+
</span>
16+
17+
<span>
18+
<a href="https://github.com/RoundEm">Github</a>
19+
</span>
20+
</div>
1321
</footer>
1422
)
1523
}

‎web/components/TableOfContents.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
export default function TableOfContents({ data }) {
44
console.log('ToC data: ', data)
55
return (
6-
<div>
6+
<div id="toc">
77
<h2>Table of Contents</h2>
88
<nav>
99
{/* TODO: figure out some way to order the different sections and subsections */}

‎web/components/TopicSection.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,25 @@ export default function TopicSection(props) {
99
id={props.section.anchor_id}
1010
// key={props.section._id}
1111
>
12-
<h3
13-
className={
14-
props.section.section_active
15-
? ''
16-
: 'incomplete_section'
17-
}
18-
>
19-
{props.section.name}
20-
</h3>
12+
<div className='section_header'>
13+
<h3
14+
className={
15+
props.section.section_active
16+
? ''
17+
: 'incomplete_section'
18+
}
19+
>
20+
{props.section.name}
21+
</h3>
2122

22-
{props.section.description && (
23-
<p className="section_description">
24-
{props.section.description}
25-
</p>
26-
)}
23+
{props.section.description && (
24+
<p className="section_description">
25+
{props.section.description}
26+
</p>
27+
28+
29+
)}
30+
</div>
2731

2832
{props.section.type === 'shortcut_table'
2933
? (

‎web/components/layout.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
11
import React from 'react'
22
import { Link } from 'gatsby'
33

4-
54
const ListLink = props => (
65
<li>
76
<Link to={props.to}>{props.children}</Link>
87
</li>
98
)
109

1110
export default function Layout({ children }) {
12-
// TODO: is it problematic getting pathname from window? Better way to do it using Gatsby with Reach Router?
11+
// TODO: is it problematic getting pathname from window? Better way to do it using Gatsby with React Router?
1312
const path = window.location.pathname
1413
console.log('path: ', path)
1514
return (
1615
<div id='layout'>
1716
<header>
18-
<Link to='/'>
19-
<h1>Web Dev Student Cheatsheet & Reference</h1>
20-
</Link>
17+
<h1>Web Dev Student Cheatsheet & Reference</h1>
2118

2219
<nav>
2320
<ul>
2421
{path === "/"
2522
? <ListLink to='/about'>About</ListLink>
2623
: <ListLink to='/'>Home</ListLink>
2724
}
28-
29-
3025
</ul>
3126
</nav>
3227
</header>
@@ -35,7 +30,6 @@ export default function Layout({ children }) {
3530
{children}
3631
</div>
3732

38-
3933
</div>
4034
)
4135
}

‎web/gatsby-browser.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import "./src/styles/global.css"
1+
import "./src/styles/global.css"

‎web/gatsby-config.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@
66

77
module.exports = {
88
plugins: [
9-
{
10-
resolve: `gatsby-plugin-typography`,
11-
options: {
12-
pathToConfigModule: `src/utils/typography`,
13-
},
14-
},
159
{
1610
resolve: 'gatsby-source-sanity',
1711
options: {

‎web/src/pages/about.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import React from "react"
2-
import Layout from "../../components/layout"
1+
import React from 'react'
2+
import Layout from '../../components/layout'
3+
import Footer from '../../components/Footer'
34

45
export default function About() {
56
return (
6-
<Layout>
7-
<div id="about">
8-
<p>
9-
My goal in making this site is to provide a resource for students learning web development, as well as for my own edification and as a reference for more experienced coders who may find the content useful. My intent is not for this to be an exhaustive resource on the various topics, but rather, I wanted to include content that I've found helpful and that addresses common questions and oversights that often come up as I've been helping students (and myself) learn web development.
10-
</p>
11-
<p>
12-
The subjects are primarily focused on popular technologies that are often taught in coding bootcamps and online tutorials. I also tend to add things that I constantly find myself having to google and re-reference. Many explanations and code examples I've included are borrowed directly from great websites like Mozilla Developer Network. I try to only use other content verbatim when I think a description or example really elucidates a subject nicely and it isn't too technical and convoluted, particularly for somebody relatively newer to coding. For content that isn't as beginner friendly I try to mold or reframe it to be a little more accessible. I try to highlight differences between Mac and Windows where necessary, but keep in mind that everybody's systems can differ slightly - particularly with shortcuts and key-bindings - so if something I have listed isn't working as expected you can probably do a little searching to figure out how the commands work for you.
13-
</p>
14-
<p>
15-
I'm planning on continuially adding new topics, examples, refining/simplifying explanations, editing mistakes and adding enhancements, so if there's anything that you think should be added, or if you see any errors, or if you have any feedback at all, I'd love to hear from you!
16-
</p>
17-
</div>
18-
</Layout>
7+
<div>
8+
<Layout>
9+
<div id='about'>
10+
<p>
11+
My goal in making this site is to provide a resource for students learning web development, as well as for my own edification and as a reference for more experienced coders who may find the content useful. My intent is not for this to be an exhaustive resource on the various topics, but rather, I wanted to include content that I've found helpful and that addresses common questions and oversights that often come up as I've been helping students (and myself) learn web development.
12+
</p>
13+
<p>
14+
The subjects are primarily focused on popular technologies that are often taught in coding bootcamps and online tutorials. I also tend to add things that I constantly find myself having to google and re-reference. Many explanations and code examples I've included are borrowed directly from great websites like Mozilla Developer Network. I try to only use other content verbatim when I think a description or example really elucidates a subject nicely and it isn't too technical and convoluted, particularly for somebody relatively newer to coding. For content that isn't as beginner friendly I try to mold or reframe it to be a little more accessible. I try to highlight differences between Mac and Windows where necessary, but keep in mind that everybody's systems can differ slightly - particularly with shortcuts and key-bindings - so if something I have listed isn't working as expected you can probably do a little searching to figure out how the commands work for you.
15+
</p>
16+
<p>
17+
I'm planning on continuially adding new topics, examples, refining/simplifying explanations, editing mistakes and adding enhancements, so if there's anything that you think should be added, or if you see any errors, or if you have any feedback at all, I'd love to hear from you!
18+
</p>
19+
</div>
20+
</Layout>
21+
<Footer />
22+
</div>
1923
)
2024
}
2125

‎web/src/pages/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TopicSection from '../../components/TopicSection'
88
export default function Index({ data }) {
99
console.log('Index data: ', data)
1010
return (
11-
<div>
11+
<>
1212
<Layout>
1313
<ToC data={data.allSanitySection.edges} />
1414

@@ -23,7 +23,7 @@ export default function Index({ data }) {
2323
</Layout>
2424

2525
<Footer />
26-
</div>
26+
</>
2727
)
2828
}
2929

0 commit comments

Comments
 (0)