aboutsummaryrefslogtreecommitdiffstats
path: root/src/services/graphql/mutations.ts
blob: c69783585659d2afa0f19148fdb5820f39c234b7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { CommentData, CreateComment, CreatedComment } from '@ts/types/comments';
import { ContactData, SendEmail } from '@ts/types/contact';
import { gql } from 'graphql-request';
import { fetchApi } from './api';

//==============================================================================
// Comment mutation
//==============================================================================

export const createComment = async (
  data: CommentData
): Promise<CreatedComment> => {
  const mutation = gql`
    mutation CreateComment(
      $author: String!
      $authorEmail: String!
      $authorUrl: String!
      $content: String!
      $parent: ID!
      $commentOn: Int!
      $mutationId: String!
    ) {
      createComment(
        input: {
          author: $author
          authorEmail: $authorEmail
          authorUrl: $authorUrl
          content: $content
          parent: $parent
          commentOn: $commentOn
          clientMutationId: $mutationId
        }
      ) {
        clientMutationId
        success
        comment {
          approved
        }
      }
    }
  `;

  const variables = { ...data };
  const response = await fetchApi<CreateComment>(mutation, variables);

  return response.createComment;
};

//==============================================================================
// Contact mutation
//==============================================================================

export const sendMail = async (data: ContactData) => {
  const mutation = gql`
    mutation SendEmail(
      $subject: String!
      $body: String!
      $replyTo: String!
      $mutationId: String!
    ) {
      sendEmail(
        input: {
          clientMutationId: $mutationId
          body: $body
          replyTo: $replyTo
          subject: $subject
        }
      ) {
        clientMutationId
        message
        sent
        origin
        replyTo
        to
      }
    }
  `;

  const variables = { ...data };
  const response = await fetchApi<SendEmail>(mutation, variables);
  return response.sendEmail;
};
pan> all 0.6s linear 0s; transform-style: preserve-3d; animation: var(--branding-logo-animation); &__front, &__back { width: 100%; height: 100%; padding: clamp(fun.convert-px(2), 0.8vw, fun.convert-px(5)); position: absolute; top: 0; left: 0; backface-visibility: hidden; background: var(--color-bg); border: fun.convert-px(2) solid var(--color-primary-dark); border-radius: 50%; transition: all 0.6s linear 0s; } &__front { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } &__back { transform: rotateY(180deg); } img, svg { border-radius: 50%; } &:hover { transform: rotateY(180deg); } &:hover & { &__front { box-shadow: none; } &__back { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } } } .name { --branding-name-animation: none; grid-column: 2; grid-row: 1; margin: 0; font-family: var(--font-family-secondary); font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl)); font-weight: 500; letter-spacing: 0.01ex; position: relative; &::after { content: "|"; display: block; width: 0; height: 100%; position: absolute; top: 0; right: 0; background: var(--color-bg); color: var(--color-primary-darker); font-weight: 400; visibility: hidden; animation: var(--branding-name-animation); } } .job { --branding-job-animation: none; grid-column: 2; grid-row: 2; width: max-content; margin: 0; color: var(--color-fg-light); font-family: var(--font-family-secondary); font-size: var(--font-size-lg); font-weight: 500; position: relative; &::after { content: "|"; display: block; width: 0; height: 100%; position: absolute; top: 0; right: 0; background: var(--color-bg); color: var(--color-primary-darker); font-weight: 400; visibility: hidden; animation: var(--branding-job-animation); } } .link { background: linear-gradient( to top, var(--color-primary-light) fun.convert-px(5), transparent fun.convert-px(5) ) left / 0 100% no-repeat; text-decoration: none; transition: all 0.6s ease-out 0s; &:hover, &:focus { background-size: 100% 100%; } &:focus { color: var(--color-primary-light); } &:active { background-size: 0 100%; color: var(--color-primary-dark); } }