final touches

src/components/Project.svelte

@@ -5,7 +5,7 @@
 <style>
   h2 {
     font-size: 2em;
-    margin-bottom: 0.75em;
+    margin-bottom: 0.25em;
   }
 
   div {
@@ -19,11 +19,11 @@
   }
 
   section {
-    margin-bottom: 4em;
+    margin-bottom: 6em;
   }
 
-  ion-icon {
+  a {
-    transform: translateY(0.25em);
+    font-family: monospace;
   }
 
   @media (max-width: 30em) {
@@ -34,8 +34,9 @@
 </style>
 
 <section>
-  <h2>{project.title}</h2>
+  <a href={project.link} target="_blank" rel="noopener">
-
+    <h2>{project.title}</h2>
+  </a>
   <div><b>{project.description}</b> <b class="date">{project.date}</b></div>
 
   <p>

src/components/Work.svelte

@@ -19,17 +19,27 @@
   .regular {
     font-weight: 400;
   }
+
+  p {
+    margin-bottom: 6em;
+  }
+
+  a {
+    font-family: monospace;
+  }
 </style>
 
-<div class="horizontal">
+<a href={work.link} target="_blank" rel="noopener">
-  <div class="title regular">{work.title}</div>
+  <div class="horizontal">
-  <div>
+    <div class="title regular">{work.title}</div>
-    <ion-icon name="link-outline" />
+    <div>
-    <a href={work.link} target="_blank">{work.link.replace(/https?:\/\//, '')}</a>
+      <ion-icon name="link-outline" />
+      <span>{work.link.replace(/https?:\/\//, '')}</span>
+    </div>
   </div>
-</div>
 
-<ImageFrame src={work.image.sizes.medium_large} alt={work.image.description} />
+  <ImageFrame src={work.image.sizes.medium_large} alt={work.image.description} />
+</a>
 <div class="horizontal regular">
   <div>{work.role}</div>
   <div>{work.date}</div>

src/lib/wp.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import dj from 'dayjs'
 
 const isDev = process.env.NODE_ENV !== 'production' && false
 axios.defaults.baseURL = `${isDev ? 'http://localhost' : 'https://api.nicco.io'}/wp-json/wp/v2`
@@ -39,3 +40,12 @@ export async function getAll(url, params = {}) {
   }
   return results.map(normalize)
 }
+
+export function sortByAndMapDate(data, format = 'MMM YY') {
+  return data
+    .sort((a, b) => parseInt(b.date) - parseInt(a.date))
+    .map((work) => ({
+      ...work,
+      date: dj(work.date * 1000).format(format),
+    }))
+}

src/routes/about.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+  import WPAdapter from '../components/WPAdapter.svelte'
   import { getOne } from '../lib/wp'
 
   export async function preload() {
@@ -42,6 +43,7 @@
 </svelte:head>
 
 <SimplePage title="About" expanded={false}>
-  {@html data.content}
+  <WPAdapter content={data.content} />
+  <!-- {@html data.content} -->
   <img src="/images/about.jpg" alt="decoration" />
 </SimplePage>

src/routes/projects.svelte

@@ -1,9 +1,9 @@
 <script context="module">
-  import { getAll } from '../lib/wp'
+  import { getAll, sortByAndMapDate } from '../lib/wp'
 
   export async function preload() {
     const data = await getAll('projects')
-    return { data }
+    return { data: sortByAndMapDate(data) }
   }
 </script>
 

src/routes/works.svelte

@@ -1,9 +1,9 @@
 <script context="module">
-  import { getAll } from '../lib/wp'
+  import { getAll, sortByAndMapDate } from '../lib/wp'
 
   export async function preload() {
     const data = await getAll('works')
-    return { data }
+    return { data: sortByAndMapDate(data) }
   }
 </script>
 

static/global.css

@@ -51,3 +51,31 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+ion-icon {
+  transform: translateY(0.2rem);
+}
+
+.progress {
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  margin: 0.5em 0;
+  padding: 0.1em 0.5em;
+  border: 1px solid black;
+}
+
+.progress > span {
+  position: relative;
+  z-index: 1;
+}
+
+.progress > div {
+  height: 100%;
+  background: var(--clr-primary);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}