src/lib/component/Social.svelte


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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script lang="ts">
  //// import
  import { format as formatDate } from "timeago.js";
  import { onMount } from "svelte";

  //// var
  const videoRegex = /\.(mp4|mov|avi|wmv|flv|mkv|webm|m4v)$/i;
  let mastodonLoaded = false;
  let mastodonPostContent = "";
  let mastodonPostDate = "";
  let mastodonPostLink = "";
  let mastodonPostMedia: string[] = [];

  //// function
  async function mastodon() {
    const response = await fetch("/api/mastodon.json", {
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      },
      method: "POST"
    });

    const { created, content, link, media } = await response.json();

    mastodonPostContent = content;
    mastodonPostDate = created;
    mastodonPostLink = link;
    mastodonPostMedia = media;
    mastodonLoaded = true;
  }

  //// ready
  onMount(() => {
    mastodon();
  });
</script>

<style lang="scss">
  h2 {
    margin: 0 0 calc(var(--padding)* 2); padding: var(--padding) calc(var(--padding) * 2);

    background-color: var(--color-border);
    color: var(--uchu-yin-7);
    font-size: 1rem;
    line-height: inherit;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  blockquote {
    padding: 0 calc(var(--padding) * 2) calc(var(--padding) * 2);
    white-space: normal;
  }

  .media {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--padding);

    figure {
      margin: 0 var(--padding) var(--padding) 0;
    }

    img {
      width: 100%; height: 100%;
      object-fit: contain;
    }
  }

  :global(blockquote p) {
    margin-bottom: calc(var(--block-spacing-bottom) / 2);
    padding-top: 0;
  }
</style>

<h2>social.webb.page/mastodon</h2>

{#if mastodonLoaded}
  <blockquote cite={mastodonPostLink}>
    {@html mastodonPostContent}

    {#if mastodonPostMedia.length}
      <div class="media">
        {#each mastodonPostMedia as media}
          {#if videoRegex.test(media)}
            <!-- svelte-ignore a11y-media-has-caption -->
            <video controls>
              <source src={media}/>
            </video>
          {:else}
            <figure>
              <img alt="mastodon media" src={media}/>
              <figcaption></figcaption>
            </figure>
          {/if}
        {/each}
      </div>
    {/if}

    <p>&mdash;
      <a href={mastodonPostLink} rel="nofollow noopener noreferrer" target="_blank">
        <time datetime={mastodonPostDate}>{formatDate(mastodonPostDate)}</time>
      </a>
    </p>
  </blockquote>
{:else}
  <blockquote>
    <p>loading&hellip;</p>
  </blockquote>
{/if}