gems-cyberlang.github.io/src/layouts/BlogPost.astro at main · gems-cyberlang/gems-cyberlang.github.io · GitHub

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
---
import type { CollectionEntry } from "astro:content";
import FormattedDate from "../components/blog/FormattedDate.astro";
import BaseLayout from "./BaseLayout.astro";
import Toc from "../components/blog/Toc.astro";
import { render } from "astro:content";
import { getCollection } from "astro:content";

type Props = CollectionEntry<"blog">["data"];

const { title, description, author, pubDate, updatedDate, heroImage } =
  Astro.props;

const posts = await getCollection("blog", ({ data }) => data.title === title);
const entry = posts[0];
const { Content, headings } = await render(entry);
---

<BaseLayout
  title={title}
  isBlogPost={true}
  description={description ?? "Team CYB3RL4NG's blog"}
>
  <article>
    <div class="hero-image">
      {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
    </div>
    <div class="prose">
      <div class="title">
        <h1>{title}</h1>
        Author: {author}
        <div class="date">
          Published <FormattedDate date={pubDate} />
          {
            updatedDate && (
              <div class="last-updated-on">
                Last updated on <FormattedDate date={updatedDate} />
              </div>
            )
          }
        </div>
        <hr />
      </div>
      <Content />
      <Toc headings={headings} />
    </div>
  </article>
</BaseLayout>

<style>
  article {
    max-width: 90ch;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-image {
    width: 100%;
  }

  .hero-image img {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
  }
  .prose {
    margin: auto;
    padding: 1em;
    color: rgb(var(--gray-dark));
  }
  .title {
    margin-bottom: 1em;
    padding-top: 1em 0;
    text-align: center;
    line-height: 1;
  }
  .date {
    margin-top: 0.5em;
    color: rgb(var(--gray));
    font-style: italic;
  }

  :global(.astro-code) {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }

  :global(img) {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>