www/src/components/BlogPost.astro


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

---
import Author from './Author.astro';
import GithubStarButton from './GithubStarButton.astro';
import GoogleAnalytics from './GoogleAnalytics.astro';
import BackArrow from './BackArrow.astro';

export interface Props {
  title: string;
  author?: string;
  publishDate: string;
  heroImage?: string;
  heroImageAlt?: string;
}

const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
---

<div class="layout">
  <article>
    <header>
      <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage || '/social.jpg'} alt={heroImageAlt || ""} />
      <p class="publish-date">{publishDate}</p>
      <h1 class="title">{title}</h1>
      {author && <Author authorId={author} />}
      <GithubStarButton />
    </header>
    <main class="content">
      <slot />
      <BackArrow url={'/blog/'} title={'Back to all blog posts'}/>
    </main>
  </article>
  <GoogleAnalytics />
</div>

<style lang="scss">
.hero-image {
  width: 100vw;
  object-fit: cover;
  object-position: center;
  margin-top: 2rem;
  margin-bottom: 4rem;
  max-width: 1280px;

  @media (max-width: 50em) {
    height: 260px;
    margin-top: 0;
    margin-bottom: 2rem;
  }
}

.content {
  margin-bottom: 8rem;

  :global(> * + *) {
    margin-top: 1rem;
  }

  :global(h2) {
    margin-top: 4rem;
  }

  :global(img) {
    max-width: 100%;
    height: auto;
  }

  :global(figure) {
    background-color: var(--theme-bg-accent);
    margin: 2.5rem 0;
    padding: 1.5rem;
  }

   // hack until <figcaption> parsing fixed
  :global(figcaption *) {
    display: inline;

    & + :global(*) {
      margin-left: 0.3em;
    }
  }
}

header {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;

  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 4px solid var(--theme-divider);
}

.title,
.author,
.publish-date {
  margin: 0;
}

.publish-date,
.author {
  color: var(--theme-text-lighter);
}

.title {
  font-size: 2.25rem;
  font-weight: 700;
}
</style>