Load projects from cms in portfolio

src/components/portfolio/project.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let project
+</script>
+
+<article class="project">
+  <h3>{project.name}</h3>
+  <section class="description">
+    {@html project.description}
+  </section>
+  {#if project.image}
+    <aside>
+      <img src="{project.image}" class="project-image" alt="{project.image.description}" />
+    </aside>
+  {/if}
+  <aside>
+  </aside>
+</article>

src/routes/portfolio/index.json.js

@@ -6,7 +6,6 @@ import marked from 'marked'
 export async function get(req, res, next) {
   let pageSource
   try {
-        console.log(process.cwd())
     pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
   } catch (e) {
     res.statusCode = 500
@@ -15,10 +14,14 @@ export async function get(req, res, next) {
   }
 
   const parsed = fm(pageSource)
-    console.log(parsed)
+  const projects = (parsed.attributes.projects || []).map(project => ({
+    ...project,
+    description: marked(project.description)
+  }))
   const response = {
     title: parsed.attributes.title,
-        content: marked(parsed.attributes.content),
+    body: marked(parsed.body),
+    projects,
   }
 
   res.setHeader('Content-Type', 'application/json')

src/routes/portfolio/index.svelte

@@ -0,0 +1,41 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch('portfolio.json')
+    const content = await res.json()
+    return {
+      content,
+    }
+  }
+</script>
+
+<script>
+  import Workhistory from '../../components/portfolio/workhistory.svelte';
+  import Project from '../../components/portfolio/project.svelte';
+
+  export let content
+</script>
+
+<svelte:head>
+	<title>{content.title}</title>
+</svelte:head>
+
+<h1>Michal Vanko</h1>
+
+<h2>Software Developer</h2>
+
+<section class="personal-information">
+  {@html content.body}
+</section>
+
+<Workhistory />
+
+<section class="projects">
+  <h2>Projects</h2>
+  <ul>
+    {#each content.projects as project}
+      <li>
+        <Project project={project} />
+      </li>
+    {/each}
+  </ul>
+</section>

src/routes/portfolio/portfolio.svelte

@@ -1,19 +0,0 @@
-<script>
-	import Personal from '../../components/portfolio/personal.svelte';
-  import Skills from '../../components/portfolio/skills.svelte';
-  import Workhistory from '../../components/portfolio/workhistory.svelte';
-  import Projects from '../../components/portfolio/projects.svelte';
-</script>
-
-<svelte:head>
-	<title>Portfolio - Michal Vanko</title>
-</svelte:head>
-
-<h1>Michal Vanko</h1>
-
-<h2>Software Developer</h2>
-
-<Personal />
-<Skills />
-<Workhistory />
-<Projects />