From 09f08d1587a85f2a960d6e73a0260277feff3e9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikaela=20Lundsg=C3=A5rd?= <mikaela.lundsgard@iteam.se>
Date: Wed, 25 Nov 2020 15:43:07 +0100
Subject: [PATCH 1/3] feat: created coworker-slug

---
 sapper/src/routes/om-oss/[slug].svelte    | 61 +++++++++++++++++++++++
 sapper/src/routes/om-oss/coworkers.svelte | 59 ----------------------
 sapper/src/routes/om-oss/index.svelte     |  8 ++-
 sapper/src/services/api.js                |  9 ++++
 4 files changed, 77 insertions(+), 60 deletions(-)
 create mode 100644 sapper/src/routes/om-oss/[slug].svelte

diff --git a/sapper/src/routes/om-oss/[slug].svelte b/sapper/src/routes/om-oss/[slug].svelte
new file mode 100644
index 00000000..7bac4236
--- /dev/null
+++ b/sapper/src/routes/om-oss/[slug].svelte
@@ -0,0 +1,61 @@
+<script context="module">
+  import { API } from '../../services/api.js'
+
+  export async function preload({ params: { slug } }, session) {
+    return API({ fetch: this.fetch, session }).Coworkers.BySlug(slug)
+  }
+</script>
+
+<script>
+  import Animation from '../../components/animation/'
+  import Layout from '../../components/layout'
+  import Typography from '../../components/typography'
+  import md5 from 'md5'
+
+  export let coworker
+  const [workTitle, phone, email] = coworker.custom_excerpt.split('\n')
+</script>
+
+<Layout.Base>
+  <Animation.WithScrollFadeIn>
+    <Layout.Content>
+      <div class="w-full md:px-24">
+        <img
+          class="rounded-full h-48 sm:h-auto transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 mb-16"
+          src={`https://www.gravatar.com/avatar/${md5(email)}?s=300`}
+          alt={coworker.title} />
+        <Typography.H1>{coworker.title}</Typography.H1>
+        <div class="max-w-4xl">
+          <Typography.ParagraphLg>{workTitle}</Typography.ParagraphLg>
+          <div>
+            <div class="md:px-24 py-12 max-w-2xl">
+              <div class="text-blue-cornflower">
+                <Typography.H2>Kontakt:</Typography.H2>
+              </div>
+              <Typography.ParagraphMd>
+                <b><a href={`callto:${phone}`}>{phone}</a></b>
+              </Typography.ParagraphMd>
+              <Typography.ParagraphMd>
+                <b><a href={`mailto:${email}`}>{email}</a></b>
+              </Typography.ParagraphMd>
+              <div class="mt-8 md:mt-12">
+                <div class="text-blue-cornflower">
+                  <Typography.H2>Bakgrund</Typography.H2>
+                </div>
+                <Typography.ParagraphMd>
+                  Här är lite bakgrund om mig
+                </Typography.ParagraphMd>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout.Content>
+    <Layout.Content>
+      <div>
+        <div
+          class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 py-6 gap-6" />
+      </div>
+    </Layout.Content>
+  </Animation.WithScrollFadeIn>
+</Layout.Base>
diff --git a/sapper/src/routes/om-oss/coworkers.svelte b/sapper/src/routes/om-oss/coworkers.svelte
index d587503f..e69de29b 100644
--- a/sapper/src/routes/om-oss/coworkers.svelte
+++ b/sapper/src/routes/om-oss/coworkers.svelte
@@ -1,59 +0,0 @@
-<script context="module">
-  import { API } from '../../services/api.js'
-
-  export async function preload(page, session) {
-    return API({ fetch: this.fetch, session }).Pages.ByTags(['Medarbetare'])
-  }
-</script>
-
-<script>
-  export let pages
-  import Layout from '../../components/layout'
-  import Typography from '../../components/typography/'
-  import Links from '../../components/links'
-  import FeaturedImageIteam from '../../assets/featured-image-iteam.svg'
-  import Meta from '../../components/Meta.svelte'
-</script>
-
-<!-- Medarbetare -->
-<Meta title="Iteam | Medarbetare" />
-
-<Layout.Base>
-  <div class="flex flex-col md:flex-row-reverse justify-between px-8 sm:px-32">
-    <div class="w-1/2">
-      <FeaturedImageIteam />
-    </div>
-    <div class="flex-initial max-w-md pt-8">
-      <Typography.H1>Medarbetare</Typography.H1>
-      <Typography.ParagraphSm>
-        Här är vi som jobbar på Iteam.
-      </Typography.ParagraphSm>
-      <Links.ArrowTextLink to="/career">
-        Vill du se ditt ansikte här?
-      </Links.ArrowTextLink>
-    </div>
-  </div>
-
-  <div class="flex flex-wrap justify-center px-8 md:px-12 pt-32">
-    {#each pages as coworker}
-      <div
-        class="transform hover:shadow-hover transition duration-500 ease-in
-          hover:bg-white p-4 rounded-md my-2 mx-2 w-full sm:w-2/5 xl:w-1/5">
-        <a rel="prefetch" href={`/om-oss/medarbetare/${coworker.slug}`}>
-          <div class="h-full pb-4">
-            <div class="relative" style="height: 90%;">
-              <img
-                class="rounded-full object-cover"
-                src={coworker.feature_image}
-                alt="feature" />
-              <p class="mt-4 font-medium text-center">{coworker.title}</p>
-              <p class="font-light text-center mt-4">
-                {@html coworker.excerpt.replace('\n', '<br />')}
-              </p>
-            </div>
-          </div>
-        </a>
-      </div>
-    {/each}
-  </div>
-</Layout.Base>
diff --git a/sapper/src/routes/om-oss/index.svelte b/sapper/src/routes/om-oss/index.svelte
index ca80d449..3fd19b77 100644
--- a/sapper/src/routes/om-oss/index.svelte
+++ b/sapper/src/routes/om-oss/index.svelte
@@ -16,9 +16,11 @@
   import ContactBlock from '../../components/contact'
   import Meta from '../../components/Meta.svelte'
   import md5 from 'md5'
+  import helpers from '../../utils/helpers.js'
+
   export let pages
 
-  const coworkers = pages.map(({ title, excerpt, feature_image: image }) => {
+  const coworkers = pages.map(({ title, excerpt, feature_image: image, slug }) => {
     const [role, phone, email] = excerpt.split('\n')
     return {
       title,
@@ -26,6 +28,7 @@
       phone,
       email,
       image,
+      slug
     }
   })
 
@@ -58,6 +61,7 @@
     { title: '300', body: 'Kunder har vi hjälpt sedan starten' },
     { title: '30', body: 'Miljoner SEK i omsättning under 2019' },
   ]
+
 </script>
 
 <!-- Om oss -->
@@ -126,6 +130,7 @@
         class="grid gap-12 my-12"
         style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
         {#each coworkers as coworker}
+        <a href={`/om-oss/${coworker.slug}`}>
           <div class="grid" style="grid-template-rows: 284px max-content;">
             <img
               class="block w-full h-full object-cover"
@@ -145,6 +150,7 @@
               </p>
             </div>
           </div>
+          </a>
         {/each}
       </div>
     </Layout.Content>
diff --git a/sapper/src/services/api.js b/sapper/src/services/api.js
index 2819418f..65d8d26a 100644
--- a/sapper/src/services/api.js
+++ b/sapper/src/services/api.js
@@ -80,6 +80,15 @@ export const API = (context) => ({
       return { post }
     },
   },
+  Coworkers: {
+    BySlug: async (slug) => {
+      const {
+        pages: [coworker]
+      } = await get(context, `/pages/slug/${slug}&include=tags,authors`)
+
+      return { coworker }
+    },
+  },
   Posts: {
     ByTags: async (tags) => {
       let filter = '?filter='

From 4dc17760e3ad26f3bce9c8710aef0149450becc0 Mon Sep 17 00:00:00 2001
From: Simon Lundell <lundell3@gmail.com>
Date: Thu, 26 Nov 2020 16:31:03 +0100
Subject: [PATCH 2/3] improvement: use layout container

---
 sapper/src/routes/om-oss/[slug].svelte | 72 ++++++++++++--------------
 1 file changed, 33 insertions(+), 39 deletions(-)

diff --git a/sapper/src/routes/om-oss/[slug].svelte b/sapper/src/routes/om-oss/[slug].svelte
index 7bac4236..d591cdc4 100644
--- a/sapper/src/routes/om-oss/[slug].svelte
+++ b/sapper/src/routes/om-oss/[slug].svelte
@@ -16,46 +16,40 @@
   const [workTitle, phone, email] = coworker.custom_excerpt.split('\n')
 </script>
 
-<Layout.Base>
-  <Animation.WithScrollFadeIn>
-    <Layout.Content>
-      <div class="w-full md:px-24">
-        <img
-          class="rounded-full h-48 sm:h-auto transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 mb-16"
-          src={`https://www.gravatar.com/avatar/${md5(email)}?s=300`}
-          alt={coworker.title} />
-        <Typography.H1>{coworker.title}</Typography.H1>
-        <div class="max-w-4xl">
-          <Typography.ParagraphLg>{workTitle}</Typography.ParagraphLg>
-          <div>
-            <div class="md:px-24 py-12 max-w-2xl">
-              <div class="text-blue-cornflower">
-                <Typography.H2>Kontakt:</Typography.H2>
-              </div>
-              <Typography.ParagraphMd>
-                <b><a href={`callto:${phone}`}>{phone}</a></b>
-              </Typography.ParagraphMd>
-              <Typography.ParagraphMd>
-                <b><a href={`mailto:${email}`}>{email}</a></b>
-              </Typography.ParagraphMd>
-              <div class="mt-8 md:mt-12">
-                <div class="text-blue-cornflower">
-                  <Typography.H2>Bakgrund</Typography.H2>
-                </div>
-                <Typography.ParagraphMd>
-                  Här är lite bakgrund om mig
-                </Typography.ParagraphMd>
-              </div>
+<Animation.WithScrollFadeIn>
+  <Layout.Container>
+    <img
+      class="rounded-full h-48 sm:h-auto transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 mb-16"
+      src={`https://www.gravatar.com/avatar/${md5(email)}?s=300`}
+      alt={coworker.title} />
+    <Typography.H1>{coworker.title}</Typography.H1>
+    <div class="max-w-4xl">
+      <Typography.ParagraphLg>{workTitle}</Typography.ParagraphLg>
+      <div>
+        <div class="md:px-24 py-12 max-w-2xl">
+          <div class="text-blue-cornflower">
+            <Typography.H2>Kontakt:</Typography.H2>
+          </div>
+          <Typography.ParagraphMd>
+            <b><a href={`callto:${phone}`}>{phone}</a></b>
+          </Typography.ParagraphMd>
+          <Typography.ParagraphMd>
+            <b><a href={`mailto:${email}`}>{email}</a></b>
+          </Typography.ParagraphMd>
+          <div class="mt-8 md:mt-12">
+            <div class="text-blue-cornflower">
+              <Typography.H2>Bakgrund</Typography.H2>
             </div>
+            <Typography.ParagraphMd>
+              Här är lite bakgrund om mig
+            </Typography.ParagraphMd>
           </div>
         </div>
       </div>
-    </Layout.Content>
-    <Layout.Content>
-      <div>
-        <div
-          class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 py-6 gap-6" />
-      </div>
-    </Layout.Content>
-  </Animation.WithScrollFadeIn>
-</Layout.Base>
+    </div>
+    <div>
+      <div
+        class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 py-6 gap-6" />
+    </div>
+  </Layout.Container>
+</Animation.WithScrollFadeIn>

From 2c369c04e6232757d23576108fdafedf0417d39e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikaela=20Lundsg=C3=A5rd?= <mikaela.lundsgard@iteam.se>
Date: Fri, 27 Nov 2020 09:46:35 +0100
Subject: [PATCH 3/3] feat: meta tags for single-page coworkers and hover
 effect on coworkers

---
 sapper/src/routes/om-oss/[slug].svelte | 8 +++++++-
 sapper/src/routes/om-oss/index.svelte  | 3 +--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/sapper/src/routes/om-oss/[slug].svelte b/sapper/src/routes/om-oss/[slug].svelte
index d591cdc4..71787113 100644
--- a/sapper/src/routes/om-oss/[slug].svelte
+++ b/sapper/src/routes/om-oss/[slug].svelte
@@ -10,16 +10,22 @@
   import Animation from '../../components/animation/'
   import Layout from '../../components/layout'
   import Typography from '../../components/typography'
+  import Meta from '../../components/Meta.svelte'
   import md5 from 'md5'
 
   export let coworker
   const [workTitle, phone, email] = coworker.custom_excerpt.split('\n')
 </script>
 
+<Meta
+  title="Iteam | Coworkers - {coworker.meta_title || coworker.title}"
+  description={coworker.meta_description || coworker.excerpt}
+  image={coworker.feature_image} />
+
 <Animation.WithScrollFadeIn>
   <Layout.Container>
     <img
-      class="rounded-full h-48 sm:h-auto transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 mb-16"
+      class="rounded-full h-48 sm:h-auto  mb-16"
       src={`https://www.gravatar.com/avatar/${md5(email)}?s=300`}
       alt={coworker.title} />
     <Typography.H1>{coworker.title}</Typography.H1>
diff --git a/sapper/src/routes/om-oss/index.svelte b/sapper/src/routes/om-oss/index.svelte
index 1079a645..80868ca4 100644
--- a/sapper/src/routes/om-oss/index.svelte
+++ b/sapper/src/routes/om-oss/index.svelte
@@ -16,7 +16,6 @@
   import ContactBlock from '../../components/contact'
   import Meta from '../../components/Meta.svelte'
   import md5 from 'md5'
-  import helpers from '../../utils/helpers.js'
 
   export let pages
 
@@ -118,7 +117,7 @@
         <a href={`/om-oss/${coworker.slug}`}>
           <div>
             <img
-              class="block w-full object-cover"
+              class="block w-full object-cover transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
               src={coworker.image || `https://www.gravatar.com/avatar/${md5(coworker.email)}?s=300`}
               alt="feature" />
             <p class="mt-4 font-medium">{coworker.title}</p>