Render more fields from the migration to sanity

Author: jason-roundtree

web/components/DescriptiveItem.js

@@ -1,10 +1,10 @@
 import React from 'react'
 
-export default function DescriptiveItem(props) {
-    console.log('DescriptiveItem props: ', props)
+export default function DescriptiveItem({ section }) {
+    console.log('DescriptiveItem props: ', section)
     return (
         <div>
-            {props.section.subsections.map(secData => {
+            {section.subsections.map(secData => {
                     // console.log('secData: ', secData)
                     return (
                         <div 
@@ -27,14 +27,14 @@ export default function DescriptiveItem(props) {
 
                             {secData.external_links && (
                                 <ul>
-                                    {secData.external_links.map((link, i) => (
-                                        <li key={i}>
+                                    {secData.external_links.map(link => (
+                                        <li key={link._id}>
                                             <a 
                                                 href={link.href} 
                                                 target="_blank"
                                                 rel="noopener noreferrer"
                                             >
-                                                {link.linkDescription}
+                                                {link.description}
                                             </a>
                                         </li>
                                     ))}

web/components/ShortcutTable.js

@@ -18,8 +18,17 @@ export default function ShortcutTable(props) {
                         return (
                             <tr key={secData.name}>
                                 <th className="row_header">{secData.name}</th>
-                                <td><kbd>{secData.mac_command}</kbd></td>
-                                <td><kbd>{secData.windows_command}</kbd></td>
+                                <td>
+                                    {secData.mac_command && 
+                                        <kbd>{secData.mac_command}</kbd>
+                                    }
+                                    
+                                </td>
+                                <td>
+                                    {secData.windows_command && 
+                                        <kbd>{secData.windows_command}</kbd>
+                                    }   
+                                </td>
                             </tr>
                         )
                     })}

web/components/TableOfContents.js

@@ -6,7 +6,7 @@ export default function TableOfContents({ data }) {
         <div>
             <h2>Table of Contents</h2>
             <nav>
-                {/* TODO: figure out some way to order the different sections */}
+                {/* TODO: figure out some way to order the different sections and subsections */}
                 <ul>
                     {data.map(({ node }) => {
                         console.log('node map', node)

web/components/TopicSection.js

@@ -5,14 +5,23 @@ import DescriptiveItem from './DescriptiveItem'
 export default function TopicSection(props) {
     console.log('TopicSection props: ', props)
     return (
-        <section id={props.section.anchor_id}>
-            <h3 className={props.section_active ? 'incomplete_section' : ''}>
+        <section 
+            id={props.section.anchor_id}
+            // key={props.section._id}
+        >
+            <h3 
+                className={
+                    props.section.section_active 
+                        ? ''
+                        : 'incomplete_section'
+                }
+            >
                 {props.section.name}
             </h3>
 
-            {props.section.sectionDescription && (
+            {props.section.description && (
                 <p className="section_description">
-                    {props.section.sectionDescription}
+                    {props.section.description}
                 </p>    
             )}
 

web/components/layout.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import Footer from './footer'
+
 
 const ListLink = props => (
     <li>
@@ -9,6 +9,9 @@ const ListLink = props => (
 )
 
 export default function Layout({ children }) {
+    // TODO: is it problematic getting pathname from window? Better way to do it using Gatsby with Reach Router?
+    const path = window.location.pathname
+    console.log('path: ', path)
     return (
         <div id='layout'>
             <header>
@@ -18,8 +21,12 @@ export default function Layout({ children }) {
 
                 <nav>
                     <ul>
-                        <ListLink to='/'>Home</ListLink>
-                        <ListLink to='/about'>About</ListLink>
+                        {path === "/" 
+                            ?   <ListLink to='/about'>About</ListLink>
+                            :   <ListLink to='/'>Home</ListLink>
+                        }
+                        
+                        
                     </ul>
                 </nav>
             </header>
@@ -28,7 +35,7 @@ export default function Layout({ children }) {
                 {children}
             </div>
 
-            <Footer />
+            
         </div>
     )
 }

web/src/pages/index.js

@@ -1,19 +1,29 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../../components/layout'
+import Footer from '../../components/footer'
 import ToC from '../../components/TableOfContents'
 import TopicSection from '../../components/TopicSection'
 
 export default function Index({ data }) {
-    console.log('data: ', data)
+    console.log('Index data: ', data)
     return (
+      <div>
         <Layout>
             <ToC data={data.allSanitySection.edges} />
+
             {data.allSanitySection.edges.map(section => {
-              return <TopicSection section={section.node} />
+              return (
+                <TopicSection 
+                  section={section.node} 
+                  key={section._id}
+                />
+              )
             })}
-            
         </Layout>
+
+        <Footer />
+      </div>
     )
 }
 

web/src/styles/global.css

@@ -1,6 +1,12 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 #layout {
     margin: 2rem auto;
-    max-width: 700px;
+    max-width: 800px;
     padding: 0 1rem;
 }
 
@@ -19,5 +25,86 @@ h1 {
 }
 
 .incomplete_section::after {
-    content: ' (Coming Soon)'
-  }
+    content: ' (Coming Soon)';
+}
+
+.table_container {
+    overflow-x: auto;
+}
+  
+table {
+    width: 100%;
+}
+  
+table, th, td {
+    font-size: .9em;
+    border: 1px solid rgb(144, 210, 245);
+    border-collapse: collapse;
+    text-align: center;
+    margin: 10px 0;
+    /* overriding gatsby typography? */
+    line-height: 1.2;
+}
+ 
+thead th {
+    background-color: rgb(144, 210, 245);
+}
+  
+thead th:first-of-type, 
+thead th:first-of-type + th,
+.row_header, 
+.row_header + td {
+    border-right: 1px solid rgb(94, 183, 232);
+}
+
+th {
+    padding: 10px;
+}
+  
+td {
+    height: 35px;
+    padding: 5px 10px;
+}
+
+/* overriding gatsby typography? */
+td:last-child {
+    padding-right: 10px;
+}
+
+tr:nth-of-type(even) {
+    background-color: rgb(235, 232, 232);
+}
+  
+tr:nth-of-type(odd) {
+    background-color: white;
+}
+  
+/* .row_header {
+    font-family: 'Barlow', sans-serif;
+} */
+  
+tr th:first-child, tr td:first-child {
+    width: 20%;
+    padding: 3px;
+}
+
+kbd {
+    font-family: 'Courier Prime', monospace;
+    background-color: rgb(34, 34, 34);
+    color: white;
+    padding: 5px;
+    border-radius: 3px;
+    white-space: nowrap;
+    /* overriding gatsby typography? */
+    font-size: .9em;
+}
+
+footer {
+    margin: 40px 0 0;
+    text-align: center;
+    border-top: 1px solid rgb(94, 183, 232);
+}
+
+footer span {
+    display: block;
+}