Add preliminary support for section listing

Author: nygrenh

.babelrc

@@ -10,6 +10,6 @@
     ]
   ],
   "plugins": [
-    "@babel/plugin-proposal-optional-chaining"
+    "@babel/plugin-proposal-optional-chaining",
   ]
 }

data/osa-1/index.md

@@ -3,8 +3,8 @@ path: "/osa-1"
 title: "Osa 1"
 ---
 
-Tässä osassa käyt läpi
+Tässä osassa opit kirjoittamaan ohjelmia, jotka lukevat käyttäjältä syötettä ja tekevät laskentaa syötteen perusteella. Opit käsitteet muuttuja, ehtolause ja toistolause, ja opit käyttämään näitä ohjelmissasi.
 
-* Tulostus
-* Muuttujat
-* Laskentaa
+<pages-in-this-section></pages-in-this-section>
+
+Osa on tarkoitus suorittaa viikon aikana.

data/osa-2/1-ratkaisumalleja.md

@@ -1,9 +1,8 @@
 ---
 path: "/osa-2/1-ratkaisumalleja"
-title: "Osa 2"
+title: "Ratkaisumalleja"
 ---
 
-
 <% partial 'partials/hint', locals: { name: 'Ensimmäisen osan tavoitteet' } do %>
 
   <p>

data/osa-2/2-jotakin-muuta.md

@@ -0,0 +1,6 @@
+---
+path: "/osa-2/2-muuta"
+title: "Jotakin muuta"
+---
+
+Lolled

data/osa-2/index.md

@@ -3,4 +3,6 @@ path: "/osa-2"
 title: "Osa 2"
 ---
 
-Osa 2 on paras
+Tässä osassa opit paljon.
+
+<pages-in-this-section>

package-lock.json

@@ -17,6 +17,7 @@
     "react-helmet": "^5.2.0",
     "react-motion": "^0.5.2",
     "react-scrollspy": "^3.3.5",
+    "rehype-react": "^3.1.0",
     "styled-components": "^4.1.1",
     "typeface-open-sans-condensed": "0.0.54"
   },
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.0.0",
     "babel-preset-gatsby": "^0.1.4",
+    "import-all.macro": "^2.0.3",
     "prettier": "^1.15.2"
   }
 }

package.json

@@ -49,7 +49,6 @@ class Sidebar extends React.Component {
     const edges =
       this.props.data?.allMarkdownRemark?.edges.map(o => o.node?.frontmatter) || []
     const content = content2.concat(edges)
-    console.log(JSON.stringify(edges))
     return (
       <SidebarContainer>
         <TopContainer>

src/components/Sidebar.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext()

src/contexes/PagesContext.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PagesContext from '../contexes/PagesContext'
+import { nthIndex } from '../util/strings'
+import { Link } from 'gatsby'
+
+export default () => (
+  <PagesContext.Consumer>
+    {value => {
+      const currentPath = value.current.path
+      let sectionPath = currentPath
+      const sectionSeparator = nthIndex(currentPath, '/', 2)
+      if (sectionSeparator !== -1) {
+        sectionPath = currentPath.substr(0, sectionSeparator)
+      }
+
+      const sectionPages = value.all.filter(o =>
+        o.path.startsWith(`${sectionPath}/`)
+      )
+
+      return (
+        <div>
+          <b>Tässä osassa:</b>
+          {sectionPages.map((page, i) => (
+            <div key={page.path}>
+              {i + 1}. <Link to={page.path}>{page.title}</Link>
+            </div>
+          ))}
+        </div>
+      )
+    }}
+  </PagesContext.Consumer>
+)

src/partials/PagesInThisSection.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import PagesContext from '../contexes/PagesContext'
+
+export default () => (
+  <PagesContext.Consumer>{value => <div>{JSON.stringify(value)}</div>}</PagesContext.Consumer>
+)

src/partials/Test.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <div>This is test 2.</div>

src/partials/Test2.js

@@ -0,0 +1,17 @@
+import importAll from 'import-all.macro'
+const partials = importAll.sync('./*.js')
+
+const namedPartials = {}
+
+Object.entries(partials)
+  .filter(([k, _]) => k !== './index.js')
+  .forEach(([k, v]) => {
+    const newKey = toKebabCase(k.replace('./', '').replace('.js', ''))
+    namedPartials[newKey] = v.default
+  })
+
+function toKebabCase(string) {
+  return string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export default namedPartials

src/partials/index.js

@@ -1,10 +1,13 @@
 import React, { Fragment } from 'react'
 import { graphql } from 'gatsby'
 import styled from 'styled-components'
+import rehypeReact from 'rehype-react'
 
 import Layout from '../components/layout'
 import Sidebar from '../components/Sidebar'
 import ContentArea from '../components/ContentArea'
+import Partials from '../partials'
+import PagesContext from '../contexes/PagesContext'
 
 const ContentWrapper = styled.div`
   margin-top: 1rem;
@@ -13,34 +16,51 @@ const ContentWrapper = styled.div`
 export default function CourseContentTemplate({
   data, // this prop will be injected by the GraphQL query below.
 }) {
-  const { markdownRemark } = data // data.markdownRemark holds our post data
-  const { frontmatter, html } = markdownRemark
+  const { frontmatter, htmlAst } = data.page
+  const allPages = data.allPages.edges.map(o => o.node?.frontmatter)
+  const renderAst = new rehypeReact({
+    createElement: React.createElement,
+    components: Partials,
+  }).Compiler
   return (
-    <Fragment>
-      <Sidebar />
-      <ContentArea>
-        <Layout>
-          <ContentWrapper>
-            <h1>{frontmatter.title}</h1>
-            <div
-              className="blog-post-content"
-              dangerouslySetInnerHTML={{ __html: html }}
-            />
-          </ContentWrapper>
-        </Layout>
-      </ContentArea>
-    </Fragment>
+    <PagesContext.Provider value={{
+      all: allPages,
+      current: frontmatter
+    }}>
+      <Fragment>
+        <Sidebar />
+        <ContentArea>
+          <Layout>
+            <ContentWrapper>
+              <h1>{frontmatter.title}</h1>
+              {renderAst(htmlAst)}
+            </ContentWrapper>
+          </Layout>
+        </ContentArea>
+      </Fragment>
+    </PagesContext.Provider>
   )
 }
 
 export const pageQuery = graphql`
   query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
-      html
+    page: markdownRemark(frontmatter: { path: { eq: $path } }) {
+      htmlAst
       frontmatter {
         path
         title
       }
     }
+    allPages: allMarkdownRemark {
+      edges {
+        node {
+          id
+          frontmatter {
+            path
+            title
+          }
+        }
+      }
+    }
   }
 `

src/templates/CourseContentTemplate.js

@@ -0,0 +1,8 @@
+export function nthIndex(str, pat, n){
+  var L= str.length, i= -1;
+  while(n-- && i++<L){
+      i= str.indexOf(pat, i);
+      if (i < 0) break;
+  }
+  return i;
+}