Add list_order to gql query

Author: jason-roundtree

web/components/TableOfContents.js

@@ -1,4 +1,10 @@
 import React from 'react'
+import styled from 'styled-components'
+
+// const H2 = styled.h2`
+//     margin-top: 50px;
+//     font-weight: 400;
+// `
 
 export default function TableOfContents({ data }) {
     console.log('ToC data: ', data)

web/components/TopicSection.js

@@ -1,6 +1,13 @@
 import React from 'react'
 import ShortcutTable from './ShortcutTable'
 import DescriptiveItem from './DescriptiveItem'
+// import styled from 'styled-components'
+
+// const H3 = styled.h3`
+//     color: rgb(255, 163, 133);
+//     margin-bottom: 10px;
+//     font-weight: 600;
+// `
 
 export default function TopicSection(props) {
     console.log('TopicSection props: ', props)

web/src/pages/index.js

@@ -29,7 +29,7 @@ export default function Index({ data }) {
 
 export const query = graphql`
   {
-    allSanitySection {
+    allSanitySection(sort: {fields: list_order}) {
       edges {
         node {
           _id
@@ -39,6 +39,7 @@ export const query = graphql`
           _type
           name
           description
+          list_order
           external_links {
             _id
             _type
@@ -47,24 +48,23 @@ export const query = graphql`
           }
           subsections {
             ... on SanityGeneralSubsection {
-              id
               _id
               _type
               name
               description
               syntax
               subsection_active
-              code {
-                _type
-                code
-                language
-              }
               external_links {
                 _id
                 _type
                 description
                 url
               }
+              code {
+                _type
+                code
+                language
+              }
             }
             ... on SanityShortcutSubsection {
               id

web/src/styles/global.css

@@ -70,21 +70,18 @@ header h1 {
 }
 
 h2 {
+    color: rgb(67, 159, 208);
     margin-top: 50px;
     font-weight: 400;
 }
 
 h3 {
+    color: rgb(255, 159, 128);
     margin-bottom: 10px;
     font-weight: 600;
 }
 
-h1, h2, h3 {
-    color: rgb(144, 210, 245)
-}
-
 h2, h3 {
-    color: rgb(67, 159, 208);
     font-size: 1.7em;
 }
 
@@ -100,14 +97,6 @@ h2, h4, thead th {
     margin: 50px 0 20px;
 }
 
-/* .section_description {
-    font-family: 'Work Sans', sans-serif;
-    padding: 5px;
-    border: 1px dashed rgb(252, 93, 93);
-    border-top: 0;
-    background-color: white;
-} */
-
 .incomplete_section::after {
     content: ' (Coming Soon)';
 }