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

@@ -4,23 +4,26 @@ import fm from 'front-matter'
 import marked from 'marked'
 
 export async function get(req, res, next) {
-    let pageSource
+  let pageSource
-    try {
+  try {
-        console.log(process.cwd())
+    pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
-        pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
+  } catch (e) {
-    } catch (e) {
+    res.statusCode = 500
-        res.statusCode = 500
+    res.end('Error loading portfolio source file. \n' + e.toString())
-        res.end('Error loading portfolio source file. \n' + e.toString())
+    return
-        return
+  }
-    }
-    
-    const parsed = fm(pageSource)
-    console.log(parsed)
-    const response = {
-        title: parsed.attributes.title,
-        content: marked(parsed.attributes.content),
-    }
 
-    res.setHeader('Content-Type', 'application/json')
+  const parsed = fm(pageSource)
-    res.end(JSON.stringify(response))
+  const projects = (parsed.attributes.projects || []).map(project => ({
+    ...project,
+    description: marked(project.description)
+  }))
+  const response = {
+    title: parsed.attributes.title,
+    body: marked(parsed.body),
+    projects,
+  }
+
+  res.setHeader('Content-Type', 'application/json')
+  res.end(JSON.stringify(response))
 }

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 />