Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: created coworker-slug #131

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: created coworker-slug #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09f08d1
feat: created coworker-slug
Nov 25, 2020
25f50dd
Merge branch 'master' into feature/about-us
lundeeell Nov 26, 2020
4dc1776
improvement: use layout container
lundeeell Nov 26, 2020
2c369c0
feat: meta tags for single-page coworkers and hover effect on coworkers
Nov 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions sapper/src/routes/om-oss/[slug].svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 Meta from '../../components/Meta.svelte'
import md5 from 'md5'

export let coworker
const [workTitle, phone, email] = coworker.custom_excerpt.split('\n')
</script>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing meta-tag. For instance <Meta title="Iteam | Om oss - {coworker.title}" />

<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 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>
<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>
59 changes: 0 additions & 59 deletions sapper/src/routes/om-oss/coworkers.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +0,0 @@
<script context="module">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file hasn't been removed. Just all content :)

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>
56 changes: 31 additions & 25 deletions sapper/src/routes/om-oss/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,22 @@
import ContactBlock from '../../components/contact'
import Meta from '../../components/Meta.svelte'
import md5 from 'md5'

export let pages

const coworkers = pages.map(({ title, excerpt, feature_image: image }) => {
const [role, phone, email] = excerpt.split('\n')
return {
title,
role,
phone,
email,
image,
const coworkers = pages.map(
({ title, excerpt, feature_image: image, slug }) => {
const [role, phone, email] = excerpt.split('\n')
return {
title,
role,
phone,
email,
image,
slug,
}
}
})
)

export let items = [
{
Expand Down Expand Up @@ -110,22 +114,24 @@
</div>
<div class="coworker-grid">
{#each coworkers as coworker}
<div>
<img
class="block w-full object-cover"
src={coworker.image || `https://www.gravatar.com/avatar/${md5(coworker.email)}?s=300`}
alt="feature" />
<p class="mt-4 font-medium">{coworker.title}</p>
<p class="font-light">{coworker.role}</p>
<p class="font-light">
<a href="tel:{coworker.phone}">{coworker.phone}</a>
</p>
<p class="font-light text-sm leading-7">
<a
class="underline"
href="mailto:{coworker.email}">{coworker.email}</a>
</p>
</div>
<a href={`/om-oss/${coworker.slug}`}>
<div>
<img
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>
<p class="font-light">{coworker.role}</p>
<p class="font-light">
<a href="tel:{coworker.phone}">{coworker.phone}</a>
</p>
<p class="font-light text-sm leading-7">
<a
class="underline"
href="mailto:{coworker.email}">{coworker.email}</a>
</p>
</div>
</a>
{/each}
</div>
</Layout.Container>
Expand Down
9 changes: 9 additions & 0 deletions sapper/src/services/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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='
Expand Down