Work history prelude and education

src/components/portfolio/work.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let work
+</script>
+
+<article>
+  <h3>{work.name}</h3>
+  <section class="description">
+    {@html work.description}
+  </section>
+</article>

src/routes/portfolio/index.json.js

@@ -14,16 +14,30 @@ export async function get(req, res, next) {
   }
 
   const parsed = fm(pageSource)
-  const projects = (parsed.attributes.projects || []).map(project => ({
-    ...project,
-    description: marked(project.description)
-  }))
+  const workHistory = (parsed.attributes.work_history || []).map(parseField('description'))
+  const projects = (parsed.attributes.projects || [])
+    .filter(project => project.displayed)
+    .map(parseField('description'))
+  const education = (parsed.attributes.education || [])
+    .filter(education => education.displayed)
+    .map(parseField('description'))
+  
   const response = {
     title: parsed.attributes.title,
     body: marked(parsed.body),
+    workHistoryPrelude: marked(parsed.attributes.work_history_prelude),
+    workHistory,
     projects,
+    education,
   }
 
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify(response))
+}
+
+function parseField(field) {
+  return item => ({
+    ...item,
+    [field]: marked(item[field])
+  })
 }

src/routes/portfolio/index.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script>
-  import Workhistory from '../../components/portfolio/workhistory.svelte';
+  import Work from '../../components/portfolio/work.svelte';
   import Project from '../../components/portfolio/project.svelte';
 
   export let content
@@ -27,7 +27,19 @@
   {@html content.body}
 </section>
 
-<Workhistory />
+<section class="work-history">
+  <h2>Work experience</h2>
+  <section class="work-history-prelude">
+    {@html content.workHistoryPrelude}
+  </section>
+  <ul>
+    {#each content.workHistory as work}
+      <li>
+        <Work work={work} />
+      </li>
+    {/each}
+  </ul>
+</section>
 
 <section class="projects">
   <h2>Projects</h2>
@@ -39,3 +51,14 @@
     {/each}
   </ul>
 </section>
+
+<section class="education">
+  <h2>Education</h2>
+  <ul>
+    {#each content.education as work}
+      <li>
+        <Work work={work} />
+      </li>
+    {/each}
+  </ul>
+</section>