Skip to content

Commit a9de0ba

Browse files
jason-roundtreejason-roundtree
committed
Pull in CMS data with GraphQL. Refactor v1 code to render shortcut tables and section descriptions
1 parent 470179e commit a9de0ba

File tree

9 files changed

+286
-31
lines changed

9 files changed

+286
-31
lines changed

‎web/components/DescriptiveItem.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
3+
export default function DescriptiveItem(props) {
4+
console.log('DescriptiveItem props: ', props)
5+
return (
6+
<div>
7+
{props.section.subsections.map(secData => {
8+
// console.log('secData: ', secData)
9+
return (
10+
<div
11+
className="description_container"
12+
key={secData.name}
13+
>
14+
<h4>{secData.name}</h4>
15+
16+
{secData.description !== "" && (
17+
<p>{secData.description}</p>
18+
)}
19+
20+
{secData.code && (
21+
<pre>
22+
<code className="language-js">
23+
{secData.code}
24+
</code>
25+
</pre>
26+
)}
27+
28+
{secData.external_links && (
29+
<ul>
30+
{secData.external_links.map((link, i) => (
31+
<li key={i}>
32+
<a
33+
href={link.href}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
>
37+
{link.linkDescription}
38+
</a>
39+
</li>
40+
))}
41+
</ul>
42+
)}
43+
</div>
44+
)
45+
})
46+
}
47+
</div>
48+
)
49+
}

‎web/components/Footer.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
export default function Footer() {
4+
return (
5+
<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>
13+
</footer>
14+
)
15+
}

‎web/components/ShortcutTable.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
3+
export default function ShortcutTable(props) {
4+
console.log('ShortcutTable props: ', props)
5+
return (
6+
<div className="table_container">
7+
<table>
8+
<thead>
9+
<tr>
10+
<th>Shortcut</th>
11+
<th>Mac</th>
12+
<th>Windows</th>
13+
</tr>
14+
</thead>
15+
16+
<tbody>
17+
{props.section.subsections.map(secData => {
18+
return (
19+
<tr key={secData.name}>
20+
<th className="row_header">{secData.name}</th>
21+
<td><kbd>{secData.mac_command}</kbd></td>
22+
<td><kbd>{secData.windows_command}</kbd></td>
23+
</tr>
24+
)
25+
})}
26+
</tbody>
27+
</table>
28+
</div>
29+
)
30+
}

‎web/components/TableOfContents.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
3+
export default function TableOfContents({ data }) {
4+
console.log('ToC data: ', data)
5+
return (
6+
<div>
7+
<h2>Table of Contents</h2>
8+
<nav>
9+
{/* TODO: figure out some way to order the different sections */}
10+
<ul>
11+
{data.map(({ node }) => {
12+
console.log('node map', node)
13+
return (
14+
<li key={node._id}>
15+
<a
16+
href={`#${node.anchor_id}`}
17+
className={node.section_active
18+
? ''
19+
: 'incomplete_section'
20+
}
21+
>
22+
{node.name}
23+
</a>
24+
</li>
25+
)
26+
})}
27+
</ul>
28+
</nav>
29+
</div>
30+
)
31+
}

‎web/components/TopicSection.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import ShortcutTable from './ShortcutTable'
3+
import DescriptiveItem from './DescriptiveItem'
4+
5+
export default function TopicSection(props) {
6+
console.log('TopicSection props: ', props)
7+
return (
8+
<section id={props.section.anchor_id}>
9+
<h3 className={props.section_active ? 'incomplete_section' : ''}>
10+
{props.section.name}
11+
</h3>
12+
13+
{props.section.sectionDescription && (
14+
<p className="section_description">
15+
{props.section.sectionDescription}
16+
</p>
17+
)}
18+
19+
{props.section.type === 'shortcut_table'
20+
? (
21+
<ShortcutTable
22+
section={props.section}
23+
/>
24+
)
25+
26+
: (
27+
<DescriptiveItem
28+
section={props.section}
29+
/>
30+
)
31+
}
32+
</section>
33+
)
34+
}

‎web/components/layout.js

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,35 @@
1-
import React from "react"
2-
import { Link } from "gatsby"
1+
import React from 'react'
2+
import { Link } from 'gatsby'
3+
import Footer from './footer'
34

45
const ListLink = props => (
5-
<li style={{ display: `inline-block`, marginRight: `1rem` }}>
6+
<li>
67
<Link to={props.to}>{props.children}</Link>
78
</li>
89
)
910

10-
export default ({ children }) => (
11-
<div id='layout'>
12-
<header>
13-
<Link to='/'>
14-
<h1 style={{ textAlign: `center` }}>Student Cheatsheet & Reference</h1>
15-
</Link>
11+
export default function Layout({ children }) {
12+
return (
13+
<div id='layout'>
14+
<header>
15+
<Link to='/'>
16+
<h1>Web Dev Student Cheatsheet & Reference</h1>
17+
</Link>
1618

17-
<ul style={{ margin: `auto`, textAlign: `center` }}>
18-
<ListLink to='/'>Home</ListLink>
19-
<ListLink to='/about'>About</ListLink>
20-
</ul>
21-
</header>
22-
23-
<div>
24-
{children}
19+
<nav>
20+
<ul>
21+
<ListLink to='/'>Home</ListLink>
22+
<ListLink to='/about'>About</ListLink>
23+
</ul>
24+
</nav>
25+
</header>
26+
27+
<div>
28+
{children}
29+
</div>
30+
31+
<Footer />
2532
</div>
26-
</div>
27-
)
33+
)
34+
}
35+

‎web/src/pages/about.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
import React from "react"
22
import Layout from "../../components/layout"
33

4-
export default () => (
5-
<Layout>
6-
<h2>About me</h2>
7-
<p>I’m good enough, I’m smart enough, and gosh darn it, people like me!</p>
8-
</Layout>
9-
)
4+
export default function About() {
5+
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>
19+
)
20+
}
21+

‎web/src/pages/index.js

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,69 @@
1-
import React from "react"
2-
import Layout from "../../components/layout"
1+
import React from 'react'
2+
import { graphql } from 'gatsby'
3+
import Layout from '../../components/layout'
4+
import ToC from '../../components/TableOfContents'
5+
import TopicSection from '../../components/TopicSection'
36

4-
export default () => {
7+
export default function Index({ data }) {
8+
console.log('data: ', data)
59
return (
610
<Layout>
7-
<h2>Welcome</h2>
8-
<div>Hello world!</div>
11+
<ToC data={data.allSanitySection.edges} />
12+
{data.allSanitySection.edges.map(section => {
13+
return <TopicSection section={section.node} />
14+
})}
15+
916
</Layout>
1017
)
1118
}
19+
20+
export const query = graphql`
21+
{
22+
allSanitySection {
23+
edges {
24+
node {
25+
_id
26+
anchor_id
27+
section_active
28+
type
29+
_type
30+
name
31+
description
32+
external_links {
33+
_id
34+
_type
35+
description
36+
url
37+
}
38+
subsections {
39+
... on SanityGeneralSubsection {
40+
id
41+
_id
42+
_type
43+
name
44+
description
45+
code_samples
46+
syntax
47+
subsection_active
48+
external_links {
49+
_id
50+
_type
51+
description
52+
url
53+
}
54+
}
55+
... on SanityShortcutSubsection {
56+
id
57+
_id
58+
_type
59+
name
60+
mac_command
61+
windows_command
62+
notes
63+
}
64+
}
65+
}
66+
}
67+
}
68+
}
69+
`

‎web/src/styles/global.css

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,22 @@
22
margin: 2rem auto;
33
max-width: 700px;
44
padding: 0 1rem;
5-
}
5+
}
6+
7+
header ul {
8+
margin: auto;
9+
text-align: center;
10+
}
11+
12+
header li {
13+
display: inline-block;
14+
margin-right: 1rem;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
}
20+
21+
.incomplete_section::after {
22+
content: ' (Coming Soon)'
23+
}

0 commit comments

Comments
 (0)